Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit9687f27

Browse files
committed
Here is an exercise that allows the user to choose how many boxes they want on the screen and click to get rid of the boxes.
1 parentebbd019 commit9687f27

File tree

3 files changed

+138
-0
lines changed

3 files changed

+138
-0
lines changed

‎boxes/boxes.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
body {
2+
margin:0;
3+
padding:0;
4+
}
5+
6+
.box {
7+
margin:5px;
8+
height:100px;
9+
width:100px;
10+
float: left
11+
}
12+
13+
h1 {
14+
text-align: center;
15+
font-family: monospace;
16+
font-size:3em;
17+
margin-bottom:0;
18+
}
19+
20+
p {
21+
margin-top:0;
22+
text-align: center;
23+
font-family: monospace;
24+
}
25+
26+
header {
27+
background:#55d6aa;
28+
}
29+
30+
header::after {
31+
content:'';
32+
display: table;
33+
clear: both;
34+
}
35+
36+
nav {
37+
margin:0;
38+
padding:0;
39+
float: right;
40+
height:50px;
41+
}
42+
43+
navul {
44+
list-style: none;
45+
margin:0;
46+
padding:0;
47+
}
48+
49+
navli {
50+
display: inline-block;
51+
margin-left:10px;
52+
margin-right:15px;
53+
padding-top:15px;
54+
position: relative;
55+
}
56+
57+
nava {
58+
text-decoration: none;
59+
text-transform: uppercase;
60+
}

‎boxes/boxes.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<metacharset="utf-8"/>
6+
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
7+
<title>Page Title</title>
8+
<metaname="viewport"content="width=device-width, initial-scale=1">
9+
<linkrel="stylesheet"type="text/css"media="screen"href="boxes.css"/>
10+
</head>
11+
12+
<body>
13+
<header>
14+
<nav>
15+
<ul>
16+
<li><ahref="#">10</a></li>
17+
<li><ahref="#">20</a></li>
18+
<li><ahref="#">30</a></li>
19+
<li><ahref="#">40</a></li>
20+
<li><ahref="#">50</a></li>
21+
<li><ahref="#">100</a></li>
22+
</ul>
23+
</nav>
24+
</header>
25+
<h1>Pick How Many Boxes...</h1>
26+
<p>**Clicking the boxes make them disappear**</p>
27+
<divclass="boxes">
28+
29+
</div>
30+
<scriptsrc="boxes.js"></script>
31+
</body>
32+
33+
</html>

‎boxes/boxes.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
constcolors=['#FF6633','#FFB399','#FF33FF','#FFFF99','#00B3E6',
2+
'#E6B333','#3366E6','#999966','#99FF99','#B34D4D',
3+
'#80B300','#809900','#E6B3B3','#6680B3','#66991A',
4+
'#FF99E6','#CCFF1A','#FF1A66','#E6331A','#33FFCC',
5+
'#66994D','#B366CC','#4D8000','#B33300','#CC80CC',
6+
'#66664D','#991AFF','#E666FF','#4DB3FF','#1AB399',
7+
'#E666B3','#33991A','#CC9999','#B3B31A','#00E680',
8+
'#4D8066','#809980','#E6FF80','#1AFF33','#999933',
9+
'#FF3380','#CCCC00','#66E64D','#4D80CC','#9900B3',
10+
'#E64D66','#4DB380','#FF4D4D','#99E6E6','#6666FF'
11+
];
12+
13+
constdiv=document.querySelector(".boxes")
14+
consth1=document.querySelector("h1")
15+
constlinks=document.querySelectorAll('a')
16+
17+
functioncreateBoxes(number){
18+
letcolorIndex=0;
19+
for(leti=0;i<number;i++){
20+
letbox=document.createElement('div');
21+
box.style=`background-color:${colors[colorIndex]} `
22+
box.className="box";
23+
console.log(colorIndex)
24+
div.appendChild(box);
25+
if(i===colors.length){
26+
colorIndex=0;
27+
}else{colorIndex++}
28+
}
29+
div.addEventListener('click',function(e){
30+
e.target.remove();
31+
h1.textContent=`There are${div.querySelectorAll('.box').length} boxes on the page`;
32+
});
33+
}
34+
35+
for(leti=0;i<links.length;i++){
36+
links[i].addEventListener('click',function(){
37+
div.innerHTML=''
38+
createBoxes(Number(links[i].textContent))
39+
h1.textContent=`There are${div.querySelectorAll('.box').length} boxes on the page`;
40+
console.log(`There are${div.querySelectorAll('.box').length} boxes on the page`)
41+
})
42+
}
43+
44+
45+
// createBoxes(100)

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp