-
Notifications
You must be signed in to change notification settings - Fork 0
/
dom-loop.html
131 lines (109 loc) · 2.64 KB
/
dom-loop.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - DOM loop 1</title>
<link rel="stylesheet" href="./style.css">
<style>
* {
box-sizing: border-box;
}
ul {
display: flex;
justify-content: flex-end;
}
nav li {
display: block;
margin: 1rem;
font-size: large;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
border: 10px solid;
margin: 2rem;
}
.box {
min-width: 150px;
height: 150px;
border: 3px solid;
background: #cba;
padding: 0rem;
font-size: 6rem;
line-height: 150px;
text-align: center;
color: #a98;
transition: all 0.5s;
}
/* write rotate class here */
.class1 {
transform: rotate(360deg);
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">link1</a></li>
<li><a href="dom-loop.html">
link2</a></li>
</ul>
</nav>
</header>
<!-- partial:index.partial.html -->
<h2>Complete the challenge below</h2>
<button class="make-boxes" data-holder=".container">Make Boxes</button>
<section class="container">
<p>no boxes yet :( </p>
</section>
<!-- partial -->
<script>
//start by making the "make boxes" button active
let myButton = document.querySelector(".make-boxes");
myButton.addEventListener("click", renderBoxes);
//get the number of boxes to make from user
function getNumBoxes() {
var numBoxes = Number(prompt("how many boxes?"));
if (numBoxes <= 0 || Number.isNaN(numBoxes)) {
return 0;
}
return numBoxes;
}
//Makes boxes based on user input.
//We use tempHolder to build the boxes in memory only.
function makeBoxes() {
const numBoxes = getNumBoxes();
const tempHolder = document.createDocumentFragment();
// Repeat Loop
for (let i = 1; i <= numBoxes; i++) {
let box = document.createElement("DIV");
let txt = document.createTextNode(i);
box.className = "box";
box.addEventListener('click', (e) => {
e.target.classList.toggle('class1');
});
box.appendChild(txt);
tempHolder.appendChild(box);
} //end loop
return tempHolder;
}
// actually put the boxes we get from makeBoxes on the page
function renderBoxes(e) {
//get the data-holder attribute value from the button
const containerName = e.target.dataset.holder;
const container = document.querySelector(containerName);
const boxes = makeBoxes();
if (boxes.children.length === 0) {
container.innerHTML = "Try Again. Please type a positive whole number";
} else {
// clearout previous stuff before adding new boxes
container.innerHTML = "";
container.appendChild(boxes);
}
}
</script>
</body>
</html>