Visitar URL original
Day 5 - flex panel gallery. · wesbos/JavaScript30@14f68de · GitHub
Skip to content

Commit 14f68de

Browse files
weberjacobweberjacob
committed
Day 5 - flex panel gallery.
1 parent af5b28d commit 14f68de

3 files changed

Lines changed: 101 additions & 75 deletions

File tree

‎04 - Array Cardio Day 1/index-START.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,9 @@
102102
if (!obj[item]) {
103103
obj[item] = 0;
104104
}
105-
obj[item]++;
106-
return obj;
107-
}, {});
105+
obj[item]++;
106+
return obj;
107+
}, {});
108108

109109
console.log(transportation);
110110

‎05 - Flex Panel Gallery/index-START.html‎

Lines changed: 15 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -4,80 +4,10 @@
44
<meta charset="UTF-8">
55
<title>Flex Panels 💪</title>
66
<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
7+
<link rel="stylesheet" href="styles.css">
78
</head>
89
<body>
9-
<style>
10-
html {
11-
box-sizing: border-box;
12-
background:#ffc600;
13-
font-family:'helvetica neue';
14-
font-size: 20px;
15-
font-weight: 200;
16-
}
17-
body {
18-
margin: 0;
19-
}
20-
*, *:before, *:after {
21-
box-sizing: inherit;
22-
}
23-
24-
.panels {
25-
min-height:100vh;
26-
overflow: hidden;
27-
}
28-
29-
.panel {
30-
background:#6B0F9C;
31-
box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
32-
color:white;
33-
text-align: center;
34-
align-items:center;
35-
/* Safari transitionend event.propertyName === flex */
36-
/* Chrome + FF transitionend event.propertyName === flex-grow */
37-
transition:
38-
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
39-
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
40-
background 0.2s;
41-
font-size: 20px;
42-
background-size:cover;
43-
background-position:center;
44-
}
45-
46-
47-
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
48-
.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
49-
.panel3 { 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); }
50-
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
51-
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
52-
53-
.panel > * {
54-
margin:0;
55-
width: 100%;
56-
transition:transform 0.5s;
57-
}
58-
59-
.panel p {
60-
text-transform: uppercase;
61-
font-family: 'Amatic SC', cursive;
62-
text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
63-
font-size: 2em;
64-
}
65-
.panel p:nth-child(2) {
66-
font-size: 4em;
67-
}
68-
69-
.panel.open {
70-
font-size:40px;
71-
}
72-
73-
.cta {
74-
color:white;
75-
text-decoration: none;
76-
}
77-
78-
</style>
79-
80-
10+
8111
<div class="panels">
8212
<div class="panel panel1">
8313
<p>Hey</p>
@@ -107,7 +37,20 @@
10737
</div>
10838

10939
<script>
40+
const panels = document.querySelectorAll('.panel');
41+
42+
function toggleOpen() {
43+
this.classList.toggle('open');
44+
}
45+
46+
function toggleActive(e) {
47+
if (e.propertyName.includes('flex')) {
48+
this.classList.toggle('open-active');
49+
}
50+
}
11051

52+
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
53+
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
11154
</script>
11255

11356

‎05 - Flex Panel Gallery/styles.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
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+
body {
9+
margin: 0;
10+
}
11+
*, *:before, *:after {
12+
box-sizing: inherit;
13+
}
14+
15+
.panels {
16+
min-height:100vh;
17+
overflow: hidden;
18+
display: flex;
19+
}
20+
21+
.panel {
22+
background:#6B0F9C;
23+
box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
24+
color:white;
25+
text-align: center;
26+
align-items:center;
27+
/* Safari transitionend event.propertyName === flex */
28+
/* Chrome + FF transitionend event.propertyName === flex-grow */
29+
transition:
30+
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
31+
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
32+
background 0.2s;
33+
font-size: 20px;
34+
background-size:cover;
35+
background-position:center;
36+
flex: 1;
37+
justify-content: center;
38+
display: flex;
39+
flex-direction: column;
40+
}
41+
42+
43+
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
44+
.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
45+
.panel3 { 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); }
46+
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
47+
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
48+
49+
/* Flex Items */
50+
.panel > * {
51+
margin:0;
52+
width: 100%;
53+
transition:transform 0.5s;
54+
flex: 1 0 auto;
55+
display:flex;
56+
justify-content: center;
57+
align-items: center;
58+
}
59+
60+
.panel > *:first-child { transform: translateY(-100%); }
61+
.panel.open-active > *:first-child { transform: translateY(0); }
62+
.panel > *:last-child { transform: translateY(100%); }
63+
.panel.open-active > *:last-child { transform: translateY(0); }
64+
65+
.panel p {
66+
text-transform: uppercase;
67+
font-family: 'Amatic SC', cursive;
68+
text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
69+
font-size: 2em;
70+
}
71+
.panel p:nth-child(2) {
72+
font-size: 4em;
73+
}
74+
75+
.panel.open {
76+
flex: 5;
77+
font-size:40px;
78+
}
79+
80+
.cta {
81+
color:white;
82+
text-decoration: none;
83+
}

0 commit comments

Comments
 (0)