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

Commit 3f3efb6

Browse files
ralvarezdevralvarezdev
committed
fix: Cleaned up code
* Solved some NPM packages security vulnerabilities * Cleaned up code
1 parent a4a1a3b commit 3f3efb6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+8437
-5009
lines changed

‎01-guess-my-number/index.html‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
<!DOCTYPE html>
22
<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" />
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"/>
88
<title>Guess My Number!</title>
9-
</head>
10-
<body>
11-
<header>
12-
<h1>Guess My Number!</h1>
13-
<p class="between">(Between 1 and 20)</p>
14-
<button class="btn again">Again!</button>
15-
<div class="number">?</div>
16-
</header>
17-
<main>
18-
<section class="left">
19-
<input type="number" class="guess" />
9+
</head>
10+
<body>
11+
<header>
12+
<h1>Guess My Number!</h1>
13+
<p class="between">(Between 1 and 20)</p>
14+
<button class="btn again">Again!</button>
15+
<div class="number">?</div>
16+
</header>
17+
<main>
18+
<section class="left">
19+
<input type="number" class="guess"/>
2020
<button class="btn check">Check!</button>
21-
</section>
22-
<section class="right">
21+
</section>
22+
<section class="right">
2323
<p class="message">Start guessing...</p>
2424
<p class="label-score">💯 Score: <span class="score">20</span></p>
2525
<p class="label-highscore">
26-
🥇 Highscore: <span class="highscore">0</span>
26+
🥇 Highscore: <span class="highscore">0</span>
2727
</p>
28-
</section>
29-
</main>
30-
<script src="script.js"></script>
31-
</body>
28+
</section>
29+
</main>
30+
<script src="script.js"></script>
31+
</body>
3232
</html>

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

Lines changed: 39 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -12,63 +12,56 @@ let score = 20;
1212
let highscore = 0;
1313

1414
// Function to Change Text Content from Some Element
15-
function setTextContent (element, text)
16-
{
17-
element.textContent = text;
15+
function setTextContent(element, text) {
16+
element.textContent = text;
1817
}
1918

20-
document.querySelector('.again').addEventListener('click', () =>
21-
{
22-
playerWon = false;
19+
document.querySelector('.again').addEventListener('click', () => {
20+
playerWon = false;
2321

24-
domBody.style.backgroundColor = '#222';
25-
domNumber.style.width = '15rem';
26-
setTextContent(domNumber, '?');
22+
domBody.style.backgroundColor = '#222';
23+
domNumber.style.width = '15rem';
24+
setTextContent(domNumber, '?');
2725

28-
setTextContent(domMessage, 'Start guessing...');
29-
secretNumber = Math.trunc(Math.random() * 20) + 1;
26+
setTextContent(domMessage, 'Start guessing...');
27+
secretNumber = Math.trunc(Math.random() * 20) + 1;
3028

31-
score = 20;
32-
setTextContent(domScore, score);
29+
score = 20;
30+
setTextContent(domScore, score);
3331
});
3432

35-
document.querySelector('.check').addEventListener('click', () =>
36-
{
37-
if (playerWon)
38-
return;
33+
document.querySelector('.check').addEventListener('click', () => {
34+
if (playerWon)
35+
return;
3936

40-
const guess = Number(document.querySelector('.guess').value);
41-
console.log(guess, typeof guess);
37+
const guess = Number(document.querySelector('.guess').value);
38+
console.log(guess, typeof guess);
4239

43-
if (score == 1 && guess != secretNumber) // Player loses the game
44-
{
45-
setTextContent(domMessage, '💣 You lost the game!');
46-
score--;
47-
}
48-
else if (!guess) // No input
49-
{
50-
setTextContent(domMessage, '⛔ No number!');
51-
}
52-
else if (guess == secretNumber) // Player wins the game
53-
{
54-
setTextContent(domMessage, '🎉🎉 Correct number!');
55-
setTextContent(domNumber, secretNumber);
40+
if (score == 1 && guess != secretNumber) // Player loses the game
41+
{
42+
setTextContent(domMessage, '💣 You lost the game!');
43+
score--;
44+
} else if (!guess) // No input
45+
{
46+
setTextContent(domMessage, '⛔ No number!');
47+
} else if (guess == secretNumber) // Player wins the game
48+
{
49+
setTextContent(domMessage, '🎉🎉 Correct number!');
50+
setTextContent(domNumber, secretNumber);
5651

57-
if (score > highscore)
52+
if (score > highscore) {
53+
highscore = score;
54+
setTextContent(domHighscore, highscore);
55+
}
56+
playerWon = true;
57+
58+
domBody.style.backgroundColor = '#60b347';
59+
domNumber.style.width = '30rem';
60+
} else // Guess too High or too Low
5861
{
59-
highscore = score;
60-
setTextContent(domHighscore, highscore);
62+
setTextContent(domMessage, (guess > secretNumber) ? '📈 Too high!' : '📉 Too low!');
63+
score--;
6164
}
62-
playerWon = true;
63-
64-
domBody.style.backgroundColor = '#60b347';
65-
domNumber.style.width = '30rem';
66-
}
67-
else // Guess too High or too Low
68-
{
69-
setTextContent(domMessage, (guess > secretNumber) ? '📈 Too high!' : '📉 Too low!');
70-
score--;
71-
}
7265

73-
setTextContent(domScore, score);
66+
setTextContent(domScore, score);
7467
});

‎01-guess-my-number/style.css‎

Lines changed: 68 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,119 @@
11
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
22

33
* {
4-
margin: 0;
5-
padding: 0;
6-
box-sizing: inherit;
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: inherit;
77
}
88

99
html {
10-
font-size: 62.5%;
11-
box-sizing: border-box;
10+
font-size: 62.5%;
11+
box-sizing: border-box;
1212
}
1313

1414
body {
15-
font-family: 'Press Start 2P', sans-serif;
16-
color: #eee;
17-
background-color: #222;
18-
/* background-color: #60b347; */
15+
font-family: 'Press Start 2P', sans-serif;
16+
color: #eee;
17+
background-color: #222;
18+
/* background-color: #60b347; */
1919
}
2020

2121
/* LAYOUT */
2222
header {
23-
position: relative;
24-
height: 35vh;
25-
border-bottom: 7px solid #eee;
23+
position: relative;
24+
height: 35vh;
25+
border-bottom: 7px solid #eee;
2626
}
2727

2828
main {
29-
height: 65vh;
30-
color: #eee;
31-
display: flex;
32-
align-items: center;
33-
justify-content: space-around;
29+
height: 65vh;
30+
color: #eee;
31+
display: flex;
32+
align-items: center;
33+
justify-content: space-around;
3434
}
3535

3636
.left {
37-
width: 52rem;
38-
display: flex;
39-
flex-direction: column;
40-
align-items: center;
37+
width: 52rem;
38+
display: flex;
39+
flex-direction: column;
40+
align-items: center;
4141
}
4242

4343
.right {
44-
width: 52rem;
45-
font-size: 2rem;
44+
width: 52rem;
45+
font-size: 2rem;
4646
}
4747

4848
/* ELEMENTS STYLE */
4949
h1 {
50-
font-size: 4rem;
51-
text-align: center;
52-
position: absolute;
53-
width: 100%;
54-
top: 52%;
55-
left: 50%;
56-
transform: translate(-50%, -50%);
50+
font-size: 4rem;
51+
text-align: center;
52+
position: absolute;
53+
width: 100%;
54+
top: 52%;
55+
left: 50%;
56+
transform: translate(-50%, -50%);
5757
}
5858

5959
.number {
60-
background: #eee;
61-
color: #333;
62-
font-size: 6rem;
63-
width: 15rem;
64-
padding: 3rem 0rem;
65-
text-align: center;
66-
position: absolute;
67-
bottom: 0;
68-
left: 50%;
69-
transform: translate(-50%, 50%);
60+
background: #eee;
61+
color: #333;
62+
font-size: 6rem;
63+
width: 15rem;
64+
padding: 3rem 0rem;
65+
text-align: center;
66+
position: absolute;
67+
bottom: 0;
68+
left: 50%;
69+
transform: translate(-50%, 50%);
7070
}
7171

7272
.between {
73-
font-size: 1.4rem;
74-
position: absolute;
75-
top: 2rem;
76-
right: 2rem;
73+
font-size: 1.4rem;
74+
position: absolute;
75+
top: 2rem;
76+
right: 2rem;
7777
}
7878

7979
.again {
80-
position: absolute;
81-
top: 2rem;
82-
left: 2rem;
80+
position: absolute;
81+
top: 2rem;
82+
left: 2rem;
8383
}
8484

8585
.guess {
86-
background: none;
87-
border: 4px solid #eee;
88-
font-family: inherit;
89-
color: inherit;
90-
font-size: 5rem;
91-
padding: 2.5rem;
92-
width: 25rem;
93-
text-align: center;
94-
display: block;
95-
margin-bottom: 3rem;
86+
background: none;
87+
border: 4px solid #eee;
88+
font-family: inherit;
89+
color: inherit;
90+
font-size: 5rem;
91+
padding: 2.5rem;
92+
width: 25rem;
93+
text-align: center;
94+
display: block;
95+
margin-bottom: 3rem;
9696
}
9797

9898
.btn {
99-
border: none;
100-
background-color: #eee;
101-
color: #222;
102-
font-size: 2rem;
103-
font-family: inherit;
104-
padding: 2rem 3rem;
105-
cursor: pointer;
99+
border: none;
100+
background-color: #eee;
101+
color: #222;
102+
font-size: 2rem;
103+
font-family: inherit;
104+
padding: 2rem 3rem;
105+
cursor: pointer;
106106
}
107107

108108
.btn:hover {
109-
background-color: #ccc;
109+
background-color: #ccc;
110110
}
111111

112112
.message {
113-
margin-bottom: 8rem;
114-
height: 3rem;
113+
margin-bottom: 8rem;
114+
height: 3rem;
115115
}
116116

117117
.label-score {
118-
margin-bottom: 2rem;
118+
margin-bottom: 2rem;
119119
}

‎02-modal/index.html‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
<!DOCTYPE html>
22
<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" />
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"/>
88
<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>
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>
1414

15-
<div class="modal hidden">
16-
<button class="close-modal">&times;</button>
17-
<h1>I'm a modal window 😍</h1>
18-
<p>
15+
<div class="modal hidden">
16+
<button class="close-modal">&times;</button>
17+
<h1>I'm a modal window 😍</h1>
18+
<p>
1919
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
2020
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
2121
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
2222
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
2323
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
2424
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
2525
mollit anim id est laborum.
26-
</p>
27-
</div>
28-
<div class="overlay hidden"></div>
26+
</p>
27+
</div>
28+
<div class="overlay hidden"></div>
2929

30-
<script src="script.js"></script>
31-
</body>
30+
<script src="script.js"></script>
31+
</body>
3232
</html>

0 commit comments

Comments
 (0)