Skip to content

Commit fcb7c0d

Browse files
AnaskaysarAnaskaysar
committed
project 2
1 parent a8faff9 commit fcb7c0d

File tree

6 files changed

+162
-6
lines changed

6 files changed

+162
-6
lines changed

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎02_Modal_Window/.DS_Store‎

6 KB
Binary file not shown.

‎02_Modal_Window/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Modal window</title>
9+
</head>
10+
<body>
11+
<button class="show-modal">Show modal 1</button>
12+
<button class="show-modal">Show modal 2</button>
13+
<button class="show-modal">Show modal 3</button>
14+
15+
<div class="modal hidden">
16+
<button class="close-modal">&times;</button>
17+
<h1>I'm a modal window 😍</h1>
18+
<p>
19+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
20+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
21+
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
22+
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
23+
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
24+
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
25+
mollit anim id est laborum.
26+
</p>
27+
</div>
28+
<div class="overlay hidden"></div>
29+
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

‎02_Modal_Window/script.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
'use strict';
2+
3+
const modal = document.querySelector('.modal');
4+
const overlay = document.querySelector('.overlay');
5+
const openModalBtn = document.querySelectorAll('.show-modal');
6+
const closeModalBtn = document.querySelector('.close-modal');
7+
8+
// console.log(modal.textContent)
9+
10+
const openModal = function () {
11+
modal.classList.remove('hidden');
12+
overlay.classList.remove('hidden');
13+
}
14+
const closeModal = function () {
15+
modal.classList.add('hidden');
16+
overlay.classList.add('hidden');
17+
}
18+
19+
20+
for (let i = 0; i < openModalBtn.length; i++) {
21+
openModalBtn[i].addEventListener('click', openModal)
22+
}
23+
24+
closeModalBtn.addEventListener('click', closeModal)
25+
26+
document.addEventListener('keydown', function (e) {
27+
// console.log(e.key);
28+
if (e.key === 'Escape' && !modal.classList.contains('hidden')) closeModal();
29+
})

‎02_Modal_Window/style.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: inherit;
5+
}
6+
7+
html {
8+
font-size: 62.5%;
9+
box-sizing: border-box;
10+
}
11+
12+
body {
13+
font-family: sans-serif;
14+
color: #333;
15+
line-height: 1.5;
16+
height: 100vh;
17+
position: relative;
18+
display: flex;
19+
align-items: flex-start;
20+
justify-content: center;
21+
background: linear-gradient(to top left, #28b487, #7dd56f);
22+
}
23+
24+
.show-modal {
25+
font-size: 2rem;
26+
font-weight: 600;
27+
padding: 1.75rem 3.5rem;
28+
margin: 5rem 2rem;
29+
border: none;
30+
background-color: #fff;
31+
color: #444;
32+
border-radius: 10rem;
33+
cursor: pointer;
34+
}
35+
36+
.close-modal {
37+
position: absolute;
38+
top: 1.2rem;
39+
right: 2rem;
40+
font-size: 5rem;
41+
color: #333;
42+
cursor: pointer;
43+
border: none;
44+
background: none;
45+
}
46+
47+
h1 {
48+
font-size: 2.5rem;
49+
margin-bottom: 2rem;
50+
}
51+
52+
p {
53+
font-size: 1.8rem;
54+
}
55+
56+
/* -------------------------- */
57+
/* CLASSES TO MAKE MODAL WORK */
58+
.hidden {
59+
display: none;
60+
}
61+
62+
.modal {
63+
position: absolute;
64+
top: 50%;
65+
left: 50%;
66+
transform: translate(-50%, -50%);
67+
width: 70%;
68+
69+
background-color: white;
70+
padding: 6rem;
71+
border-radius: 5px;
72+
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
73+
z-index: 10;
74+
}
75+
76+
.overlay {
77+
position: absolute;
78+
top: 0;
79+
left: 0;
80+
width: 100%;
81+
height: 100%;
82+
background-color: rgba(0, 0, 0, 0.6);
83+
backdrop-filter: blur(3px);
84+
z-index: 5;
85+
}

‎index.html‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,15 @@ <h2>🎯 Guess My Number</h2>
5959
</div>
6060
</div>
6161
<div class="project-card">
62-
<h2>🎯 Guess My Number</h2>
63-
<p>A number guessing game using core DOM manipulation.</p>
62+
<h2>💬 Modal Window</h2>
63+
<p>
64+
A project to practice showing and hiding a modal using classes,
65+
events, and keyboard handling.
66+
</p>
6467
<div class="buttons">
65-
<a href="./01_Guess_My_Number/index.html" target="_blank"
66-
>Live Demo</a
67-
>
68+
<a href="./02_Modal_Window/index.html" target="_blank">Live Demo</a>
6869
<a
69-
href="https://github.com/Anaskaysar/Simple_JavaScript_Projects/tree/main/01_Guess_My_Number"
70+
href="https://github.com/Anaskaysar/Simple_JavaScript_Projects/tree/main/02_Modal_Window"
7071
target="_blank"
7172
>Source</a
7273
>
@@ -87,6 +88,15 @@ <h3>📚 Credits & Inspiration</h3>
8788
>The Complete JS Course by Jonas Schmedtmann</a
8889
>
8990
</li>
91+
<li>
92+
<strong>Modal Window</strong> inspired by tutorials from
93+
<a
94+
href="https://www.udemy.com/course/the-complete-javascript-course/"
95+
target="_blank"
96+
>Jonas Schmedtmann</a
97+
>. Practiced and extended for learning purposes.
98+
</li>
99+
90100
<li>
91101
Adapted, customized, and extended by <strong>Anaskaysar</strong> for
92102
learning purposes.

0 commit comments

Comments
 (0)