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
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.
During the development of this modal window, I focused on learning and implementing several key concepts:
Utilized the .classList
property and its methods to manipulate classes within the DOM elements, enabling smooth transitions and visual effects for the modal window.
Explored scenarios where .querySelectorAll
proves beneficial, leveraging it to efficiently select multiple elements within the DOM.
Implemented .addEventListener
to capture keypress events, specifically exploring the three types of keyboard events: keydown
, keypress
, and keyup
.
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.
Utilized the event object automatically passed to the event handler function by the JS engine, enabling targeted actions based on specific keypress events.
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.
This project was created as a learning exercise. Contributions, suggestions, and improvements are welcome.