Skip to content

Commit 5c41e69

Browse files
shubhendrapatelshubhendrapatel
committed
added 5th challenge
1 parent 5878158 commit 5c41e69

File tree

5 files changed

+185
-1
lines changed

5 files changed

+185
-1
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ visit this [link](https://shubhendrapatel.github.io/JavaScript-30/) for showcase
77
|- [x] Challenge 2 | - [ ] Challenge 12 | - [ ] Challenge 22|
88
|- [x] Challenge 3 | - [ ] Challenge 13 | - [ ] Challenge 23|
99
|- [x] Challenge 4 | - [ ] Challenge 14 | - [ ] Challenge 24|
10-
|- [ ] Challenge 5 | - [ ] Challenge 15 | - [ ] Challenge 25|
10+
|- [x] Challenge 5 | - [ ] Challenge 15 | - [ ] Challenge 25|
1111
|- [ ] Challenge 6 | - [ ] Challenge 16 | - [ ] Challenge 26|
1212
|- [ ] Challenge 7 | - [ ] Challenge 17 | - [ ] Challenge 27|
1313
|- [ ] Challenge 8 | - [ ] Challenge 18 | - [ ] Challenge 28|

‎challenge-5-flex-gallery/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Flex Panels 💪</title>
6+
<link
7+
href="https://fonts.googleapis.com/css?family=Amatic+SC"
8+
rel="stylesheet"
9+
type="text/css"
10+
/>
11+
<link rel="icon" href="https://fav.farm/🔥" />
12+
<link rel="stylesheet" href="style.css">
13+
</head>
14+
15+
<div class="panels">
16+
<div class="panel panel1">
17+
<p>Hey</p>
18+
<p>Let's</p>
19+
<p>Dance</p>
20+
</div>
21+
<div class="panel panel2">
22+
<p>Give</p>
23+
<p>Take</p>
24+
<p>Receive</p>
25+
</div>
26+
<div class="panel panel3">
27+
<p>Experience</p>
28+
<p>It</p>
29+
<p>Today</p>
30+
</div>
31+
<div class="panel panel4">
32+
<p>Give</p>
33+
<p>All</p>
34+
<p>You can</p>
35+
</div>
36+
<div class="panel panel5">
37+
<p>Life</p>
38+
<p>In</p>
39+
<p>Motion</p>
40+
</div>
41+
</div>
42+
43+
<script src="script.js"></script>
44+
</body>
45+
</html>

‎challenge-5-flex-gallery/script.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
(function () {
2+
panels = document.querySelectorAll(".panel");
3+
4+
function animateOpen() {
5+
this.classList.toggle("open");
6+
}
7+
8+
function animateText(event) {
9+
if (event.propertyName.includes("flex")) {
10+
this.classList.toggle("open-active");
11+
}
12+
}
13+
14+
panels.forEach((element) => {
15+
element.addEventListener("click", animateOpen);
16+
element.addEventListener("transitionend", animateText);
17+
});
18+
})();

‎challenge-5-flex-gallery/style.css‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
html {
2+
box-sizing: border-box;
3+
background: #ffc600;
4+
font-family: "helvetica neue";
5+
font-size: 20px;
6+
font-weight: 200;
7+
}
8+
9+
body {
10+
margin: 0;
11+
}
12+
13+
*,
14+
*:before,
15+
*:after {
16+
box-sizing: inherit;
17+
}
18+
19+
.panels {
20+
min-height: 100vh;
21+
overflow: hidden;
22+
display: flex;
23+
flex: 1 0 auto;
24+
}
25+
26+
.panel {
27+
background: #6b0f9c;
28+
box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
29+
color: white;
30+
text-align: center;
31+
align-items: center;
32+
/* Safari transitionend event.propertyName === flex */
33+
/* Chrome + FF transitionend event.propertyName === flex-grow */
34+
transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
35+
flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s;
36+
font-size: 20px;
37+
background-size: cover;
38+
background-position: center;
39+
40+
flex: 1;
41+
42+
display: flex;
43+
justify-content: center;
44+
align-items: center;
45+
flex-direction: column;
46+
}
47+
48+
.panel1 {
49+
background-image: url(https://images.unsplash.com/photo-1611348586755-53860f7ae57a?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
50+
}
51+
52+
.panel2 {
53+
background-image: url(https://images.unsplash.com/photo-1607827448287-456ca1b329d0?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
54+
}
55+
56+
.panel3 {
57+
background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d);
58+
}
59+
60+
.panel4 {
61+
background-image: url(https://plus.unsplash.com/premium_photo-1681154819667-1ddb236135e7?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
62+
}
63+
64+
.panel5 {
65+
background-image: url(https://images.unsplash.com/photo-1599009432647-d819387c53c9?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
66+
}
67+
68+
/* Flex Children */
69+
.panel>* {
70+
margin: 0;
71+
width: 100%;
72+
transition: transform 0.5s;
73+
74+
flex: 1;
75+
76+
display: flex;
77+
justify-content: center;
78+
align-items: center;
79+
}
80+
81+
.panel p {
82+
text-transform: uppercase;
83+
font-family: "Amatic SC", cursive;
84+
text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
85+
font-size: 2em;
86+
87+
transition: background 0.5s;
88+
}
89+
90+
91+
92+
.panel p:nth-child(2) {
93+
font-size: 4em;
94+
}
95+
96+
.panel.open {
97+
font-size: 40px;
98+
99+
flex: 4;
100+
}
101+
102+
.panel p:first-child {
103+
transform: translateY(-100%);
104+
}
105+
106+
.panel p:last-child {
107+
transform: translateY(100%);
108+
}
109+
110+
.panel.open-active p {
111+
background: rgba(215, 99, 60, 0.273);
112+
}
113+
114+
.panel.open-active p:first-child,
115+
.panel.open-active p:last-child {
116+
transform: translateY(0);
117+
}

‎task_completed.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
{
1616
"title": "Array cardio 1",
1717
"location": "challenge-4-array-cardio-1"
18+
},
19+
{
20+
"title": "The Gallery",
21+
"location": "challenge-5-flex-gallery"
1822
}
1923
]
2024
}

0 commit comments

Comments
 (0)