/certificates-modal-showcase-2023

Displaying e-certificates interactively to celebrate learning achievements.

Primary LanguageHTML

Certificates Modal Showcase

This project showcases a modal window developed using JavaScript and the Document Object Model (DOM). The modal window displays my collection of e-learning certificates earned up until October 2023.

Project Link: Certificates-Modal-Showcase

Overview

The modal window is a visual representation of my e-learning journey, presenting certificates earned throughout the year. It is created using JavaScript and DOM manipulation techniques.

Key Learnings

During the development of this modal window, I focused on learning and implementing several key concepts:

1. Working with ClassList Property in DOM

Utilized the .classList property and its methods to manipulate classes within the DOM elements, enabling smooth transitions and visual effects for the modal window.

2. Practical Use of QuerySelectorAll in DOM

Explored scenarios where .querySelectorAll proves beneficial, leveraging it to efficiently select multiple elements within the DOM.

3. Handling Keypress Events with AddEventListener

Implemented .addEventListener to capture keypress events, specifically exploring the three types of keyboard events: keydown, keypress, and keyup.

4. Understanding Global Event and Event Object

Learned about the concept of a global event and how JavaScript captures information about the pressed key within the event object. Leveraged this information by passing a variable as a parameter in the event handler function.

5. Event Object Utilization for Specific Keypress Actions

Utilized the event object automatically passed to the event handler function by the JS engine, enabling targeted actions based on specific keypress events.

Usage

The modal window showcases the e-learning certificates earned, accessed by triggering specific keyboard events. Navigate through the certificates using the specified keys for a seamless browsing experience.

Contributing

This project was created as a learning exercise. Contributions, suggestions, and improvements are welcome.