https://github.com/surjoyday/certificates-modal-showcase-2023

Displaying e-certificates interactively to celebrate learning achievements.
https://github.com/surjoyday/certificates-modal-showcase-2023

css dom dom-manipulation html javascript

Last synced: about 1 month ago
JSON representation

Displaying e-certificates interactively to celebrate learning achievements.

• Host: GitHub
• URL: https://github.com/surjoyday/certificates-modal-showcase-2023
• Owner: Surjoyday
• Created: 2023-11-16T20:24:25.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-17T20:01:42.000Z (about 1 year ago)
• Last Synced: 2024-11-08T19:16:08.306Z (3 months ago)
• Topics: css, dom, dom-manipulation, html, javascript
• Language: HTML
• Homepage: https://certificate-modalwindow-showcase.netlify.app/
• Size: 8.79 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://certificate-modalwindow-showcase.netlify.app/)**

## 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.