Merge branch 'master' of github.com:alexventuraio/30DaysOfJavaScript … · ManaliPawar/30DaysOfJavaScript@2e6ba79 · GitHub
Skip to content

Commit 2e6ba79

Browse files
author
Alejandro Ventura Contreras
committed
Merge branch 'master' of github.com:alexventuraio/30DaysOfJavaScript into infinite-scroll-example
2 parents 5a74aa1 + b962e92 commit 2e6ba79

20 files changed

Lines changed: 1111 additions & 194 deletions

File tree

‎03 - Random Color Generator/index.html‎

Lines changed: 32 additions & 26 deletions

‎03 - Random Color Generator/main.js‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,38 @@
11
window.onload = function () {
22
addColor();
3-
};
4-
3+
};
4+
55
for (let i = 1; i <= 9; i++) {
66
const box = document.createElement('div');
77
box.classList.add('box');
88
document.querySelector('.container').appendChild(box);
9+
box.style.cursor = 'pointer';
10+
box.addEventListener('click', () => {
11+
console.log(box.innerHTML);
12+
navigator.clipboard.writeText(box.innerHTML);
13+
});
914
}
1015

1116
const btn = document.querySelector('.btn');
1217
const randomColorBlock = document.querySelectorAll('.box');
1318

14-
function RandomHexColorCode(){
15-
var chars = "0123456789abcdef";
19+
function RandomHexColorCode () {
20+
var chars = '0123456789abcdef';
1621
var colorLength = 6;
17-
var color = "";
22+
var color = '';
1823

19-
for (var i=0 ; i<colorLength ; i++){
24+
for (var i = 0; i < colorLength; i++) {
2025
var randomColor = Math.floor(Math.random() * chars.length);
21-
color += chars.substring(randomColor, randomColor+1);
26+
color += chars.substring(randomColor, randomColor + 1);
2227
}
23-
return "#"+color;
28+
return '#' + color;
2429
}
2530

26-
function addColor(){
27-
randomColorBlock.forEach(e =>{
31+
function addColor () {
32+
randomColorBlock.forEach(e => {
2833
var newColor = RandomHexColorCode();
2934
e.style.backgroundColor = newColor;
30-
e.innerHTML= newColor;
31-
})
32-
}
35+
e.innerHTML = newColor;
36+
});
37+
}
38+

‎03 - Random Color Generator/style.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,62 @@ footer a:visited {
7171
color: inherit;
7272
}
7373

74+
.item {
75+
display: flex;
76+
flex-direction: row;
77+
}
78+
79+
.copy {
80+
color: white;
81+
padding: 15px 60px;
82+
font-size: 1.5rem;
83+
margin: 20px auto;
84+
background: #333;
85+
}
86+
87+
.body {
88+
display: flex;
89+
flex-direction: column;
90+
}
91+
7492
@media (max-width: 500px) {
7593
.box {
7694
font-size: 0.8rem;
7795
}
7896
}
97+
98+
@media (max-width: 450px) {
99+
.item {
100+
flex-direction: column;
101+
}
102+
.btn {
103+
width: 100%;
104+
}
105+
.copy {
106+
margin-left: 0px;
107+
width: 100%;
108+
}
109+
}
110+
111+
@media (max-width: 450px) {
112+
.copy {
113+
width: 100%;
114+
}
115+
}
116+
117+
@media (max-width: 840px) {
118+
.copy {
119+
margin-left: 10px;
120+
}
121+
}
122+
123+
@media (max-width: 300px) {
124+
.copy {
125+
padding: 5px;
126+
width: fit-content;
127+
text-align: center;
128+
}
129+
.btn {
130+
padding: 5px;
131+
}
132+
}

‎08 - Number Counter/index.html‎

Lines changed: 24 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,39 @@
11
<!DOCTYPE html>
2-
<html lang = "en">
2+
<html lang="en">
33
<head>
4-
<meta charset = "UTF-8">
5-
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
6-
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
7-
<link rel = "stylesheet" href = "style.css">
8-
<link rel = "shortcut icon" href = "assets/number.png" type = "image/x-icon">
9-
<link rel = "stylesheet" href = "https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="shortcut icon" href="assets/number.png" type="image/x-icon">
9+
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
1010
<title>Number Counter</title>
1111
</head>
1212
<body>
13-
<div class = "body">
14-
<div class = "left">
15-
<h3 class = "heading">Number Counter</h3>
16-
<div class = "button">
17-
<div class = "reset">Reset</div>
18-
</div>
19-
<div class = "container">
20-
<!-- <p class="heading">Number Counter</p> -->
21-
<p class = "counter" id = "counter">0</p>
22-
<button class = "increase"><i class = "fas fa-plus"></i></button>
23-
<button class = "decrease"><i class = "fas fa-minus"></i></button>
24-
</div>
25-
<div class = "button">
26-
<div class = "save">Save</div>
13+
<main class="content-wrapper">
14+
<div class="number-counter">
15+
<h1 class="heading">Number Counter</h1>
16+
<button class="btn btn-reset">Reset</button>
17+
<div class="counter-container">
18+
<p class="counter" id="counter">0</p>
19+
<button class="btn-operator increase"><i class="fas fa-plus"></i></button>
20+
<button class="btn-operator decrease"><i class="fas fa-minus"></i></button>
2721
</div>
22+
<button class="btn btn-save">Save</button>
2823
</div>
29-
<div class = "right">
30-
<div class = "heading">Numbers saved:</div>
31-
<div class = "number"></div>
24+
<div class="number-saved">
25+
<h2 class="heading">Numbers saved:</h2>
26+
<div class="number"></div>
3227
</div>
33-
</div>
34-
35-
28+
</main>
3629
<footer>
3730
<p>&#x3c; &#47; &#x3e; with ❤️ by
38-
<a href = "https://swapnilsparsh.github.io/">Swapnil Srivastava</a>
31+
<a href="https://swapnilsparsh.github.io/">Swapnil Srivastava</a>
3932
<br>
40-
<a href = "https://github.com/swapnilsparsh/30DaysOfJavaScript" target = "_blank">#30DaysOfJavaScript
33+
<a href="https://github.com/swapnilsparsh/30DaysOfJavaScript" target="_blank">#30DaysOfJavaScript
4134
</a>
4235
</p>
4336
</footer>
44-
<script src = "script.js"></script>
37+
<script src="script.js"></script>
4538
</body>
46-
</html>
39+
</html>

‎08 - Number Counter/script.js‎

Lines changed: 4 additions & 2 deletions

0 commit comments

Comments
 (0)