Skip to content

Commit 9506fc6

Browse files
FinnFinn
Finn
authored and
Finn
committed
expanding cards - modify classname with classList object
1 parent 8c3ed8a commit 9506fc6

File tree

3 files changed

+113
-0
lines changed

3 files changed

+113
-0
lines changed

‎workout/day5-expanding-cards/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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+
<link rel="stylesheet" href="style.css" />
7+
<title>Expanding Cards</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
12+
<h3>Explore The World</h3>
13+
</div>
14+
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
15+
<h3>Wild Forest</h3>
16+
</div>
17+
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
18+
<h3>Sunny Beach</h3>
19+
</div>
20+
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
21+
<h3>City on Winter</h3>
22+
</div>
23+
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
24+
<h3>Mountains - Clouds</h3>
25+
</div>
26+
27+
</div>
28+
29+
<script src="script.js"></script>
30+
</body>
31+
</html>

‎workout/day5-expanding-cards/script.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const panels = document.querySelectorAll('.panel')
2+
const ACTIVE_NAME = 'active'
3+
panels.forEach(panel => {
4+
panel.addEventListener('click',(e)=>{
5+
// remove classname of all panels first
6+
// add active classname to e.target
7+
// add or delete classname by calling add or remove method in classList object
8+
removeActiveClasses()
9+
e.target.classList.add(ACTIVE_NAME)
10+
})
11+
})
12+
13+
function removeActiveClasses() {
14+
panels.forEach((panel)=>{
15+
panel.classList.remove(ACTIVE_NAME)
16+
})
17+
}
18+
19+
// in Vue or React, we could set dynamic classname with its reactivity system

‎workout/day5-expanding-cards/style.css

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: 'Muli', sans-serif;
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
height: 100vh;
13+
overflow: hidden;
14+
margin: 0;
15+
}
16+
17+
.container {
18+
display: flex;
19+
width: 90vw;
20+
}
21+
22+
.panel {
23+
background-size: cover;
24+
background-position: center;
25+
background-repeat: no-repeat;
26+
height: 80vh;
27+
border-radius: 50px;
28+
color: #fff;
29+
cursor: pointer;
30+
flex: 0.5;
31+
margin: 10px;
32+
position: relative;
33+
-webkit-transition: all 700ms ease-in;
34+
}
35+
36+
.panel h3 {
37+
font-size: 24px;
38+
position: absolute;
39+
bottom: 20px;
40+
left: 20px;
41+
margin: 0;
42+
opacity: 0;
43+
}
44+
45+
.panel.active {
46+
flex: 5;
47+
}
48+
49+
.panel.active h3 {
50+
opacity: 1;
51+
transition: opacity 0.3s ease-in 0.4s;
52+
}
53+
54+
@media (max-width: 480px) {
55+
.container {
56+
width: 100vw;
57+
}
58+
59+
.panel:nth-of-type(4),
60+
.panel:nth-of-type(5) {
61+
display: none;
62+
}
63+
}

0 commit comments

Comments
 (0)