Skip to content
This repository was archived by the owner on Oct 1, 2025. It is now read-only.

Commit a57e6b0

Browse files
ralvarezdevralvarezdev
committed
feat: Modal Window and Pig Game Completed
1 parent 8d327a7 commit a57e6b0

File tree

15 files changed

+475
-2
lines changed

15 files changed

+475
-2
lines changed

‎01-guess-my-number/script.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ function setTextContent (element, text)
1717
element.textContent = text;
1818
}
1919

20-
document.querySelector('.again').addEventListener('click', (event) =>
20+
document.querySelector('.again').addEventListener('click', () =>
2121
{
2222
playerWon = false;
2323

@@ -32,7 +32,7 @@ document.querySelector('.again').addEventListener('click', (event) =>
3232
setTextContent(domScore, score);
3333
});
3434

35-
document.querySelector('.check').addEventListener('click', (event) =>
35+
document.querySelector('.check').addEventListener('click', () =>
3636
{
3737
if (playerWon)
3838
return;

‎02-Fundamentals-Part-2/starter/script.js‎

Whitespace-only changes.

‎02-modal/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/script.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
'use strict';
2+
3+
const modal = document.querySelector('.modal');
4+
const overlay = document.querySelector('.overlay');
5+
const btnCloseModal = document.querySelector(".close-modal");
6+
const btnsOpenModal = document.querySelectorAll(".show-modal");
7+
8+
console.log(btnsOpenModal);
9+
10+
function openModal ()
11+
{
12+
console.log('button clicked');
13+
modal.classList.remove('hidden');
14+
overlay.classList.remove('hidden');
15+
}
16+
17+
function closeModal ()
18+
{
19+
modal.classList.add('hidden');
20+
overlay.classList.add('hidden');
21+
}
22+
23+
for (let btnOpenModal of btnsOpenModal)
24+
btnOpenModal.addEventListener('click', openModal);
25+
26+
btnCloseModal.addEventListener('click', closeModal);
27+
overlay.addEventListener('click', closeModal);
28+
29+
document.addEventListener('keydown', (event) =>
30+
{
31+
if (event.key === 'Escape' && !modal.classList.contains('.hidden'))
32+
closeModal();
33+
});

‎02-modal/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+
}

‎03-pig-game/dice-1.png‎

3.46 KB
Loading

‎03-pig-game/dice-2.png‎

4.22 KB
Loading

‎03-pig-game/dice-3.png‎

4.89 KB
Loading

‎03-pig-game/dice-4.png‎

4.47 KB
Loading

‎03-pig-game/dice-5.png‎

5.14 KB
Loading

0 commit comments

Comments
 (0)