Modal Window

A simple project built to understand the fundamentals of how a Modal Window works using HTML, CSS, and JavaScript.

About the Project

This project was created as part of my JavaScript learning journey to understand:

How modal windows function in web applications. Opening and closing a modal using JavaScript. Working with CSS classes using classList.add(), classList.remove(), and classList.toggle(). Handling user interactions through event listeners. Closing the modal using different actions such as: Clicking the close button (×) Clicking outside the modal (overlay) Pressing the Escape key

Learning Objectives

Through this project, I aimed to:

Understand DOM manipulation. Practice selecting and modifying elements using JavaScript. Learn how to dynamically add and remove CSS classes. Improve my understanding of event-driven programming. Build a foundation for creating interactive user interfaces.