Skip to content

Commit 5b4ec04

Browse files
author
Axel
committed
Add exercise 05 and update Showcase
1 parent e4d3ee3 commit 5b4ec04

File tree

11 files changed

+211
-3
lines changed

11 files changed

+211
-3
lines changed

‎02 - JS and CSS Clock/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>02 - JS and CSS Clock</title>
4+
<title>JS and CSS Clock</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
77
<link href="dist/main.css" type="text/css" rel="stylesheet">

‎04_07 - Array Cardios/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>JS30</title>
4+
<title>Array Cardios</title>
55
<meta charset="utf-8">
66
</head>
77
<body>

‎05 - Flex Panel Gallery/dist/main.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎05 - Flex Panel Gallery/dist/main.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎05 - Flex Panel Gallery/gulpfile.js

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
var gulp = require('gulp'),
2+
browserSync = require('browser-sync').create(),
3+
sass = require('gulp-sass'),
4+
autoprefixer = require('gulp-autoprefixer'),
5+
babel = require("gulp-babel"),
6+
uglify = require('gulp-uglify'),
7+
plumber = require("gulp-plumber"),
8+
cleanCSS = require('gulp-clean-css');
9+
10+
gulp.task('server', ['sass', 'babel'], function() {
11+
12+
browserSync.init({
13+
server: "./",
14+
open: false
15+
});
16+
17+
gulp.watch("./*.html").on('change', browserSync.reload);
18+
gulp.watch("./*.s+(a|c)ss", ['sass']);
19+
gulp.watch("./*.js", ['babel']);
20+
});
21+
22+
gulp.task('sass', function() {
23+
return gulp.src("./main.sass")
24+
.pipe(sass({
25+
errLogToConsole: true,
26+
outputStyle: 'nested',
27+
includePaths: require('node-normalize-scss').includePaths
28+
}).on('error', sass.logError))
29+
.pipe(autoprefixer())
30+
.pipe(gulp.dest("./dist"))
31+
.pipe(browserSync.stream());
32+
});
33+
34+
gulp.task('babel', function () {
35+
return gulp.src("./main.js")
36+
.pipe(plumber())
37+
.pipe(babel({
38+
"presets": ["babel-preset-es2015"].map(require.resolve)
39+
}))
40+
.pipe(gulp.dest("./dist"))
41+
.pipe(browserSync.stream());
42+
});
43+
44+
gulp.task('miniJS', function () {
45+
return gulp.src("dist/main.js")
46+
.pipe(uglify())
47+
.pipe(gulp.dest("./dist"));
48+
});
49+
50+
gulp.task('miniCSS', function () {
51+
return gulp.src("dist/main.css")
52+
.pipe(cleanCSS())
53+
.pipe(gulp.dest('dist'));
54+
});
55+
56+
57+
gulp.task('mini', ['miniJS', "miniCSS"]);
58+
gulp.task('default', ['server']);

‎05 - Flex Panel Gallery/image/05_port.jpg

82.4 KB
Loading

‎05 - Flex Panel Gallery/index.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Flex Panel Gallery</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7+
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet" type="text/css">
8+
<link href="dist/main.css" type="text/css" rel="stylesheet">
9+
</head>
10+
<body>
11+
12+
<div class="panels">
13+
<div class="panel panel1">
14+
<p>Hey</p>
15+
<p>Let's</p>
16+
<p>Dance</p>
17+
</div>
18+
<div class="panel panel2">
19+
<p>Give</p>
20+
<p>Take</p>
21+
<p>Receive</p>
22+
</div>
23+
<div class="panel panel3">
24+
<p>Experience</p>
25+
<p>It</p>
26+
<p>Today</p>
27+
</div>
28+
<div class="panel panel4">
29+
<p>Give</p>
30+
<p>All</p>
31+
<p>You can</p>
32+
</div>
33+
<div class="panel panel5">
34+
<p>Life</p>
35+
<p>In</p>
36+
<p>Motion</p>
37+
</div>
38+
</div>
39+
40+
41+
<script src="dist/main.js"></script>
42+
</body>
43+
</html>

‎05 - Flex Panel Gallery/main.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const panels = [...document.querySelectorAll(".panel")];
2+
3+
function toggleOpen(){
4+
this.classList.toggle("open");
5+
}
6+
7+
function toggleActive(e){
8+
if(e.propertyName.includes("flex")) {
9+
this.classList.toggle("open-active");
10+
}
11+
}
12+
13+
panels.map(panel => panel.addEventListener('click', toggleOpen));
14+
panels.map(panel => panel.addEventListener('transitionend', toggleActive));
15+
16+
17+
// function randomPic() {
18+
// panels.map((p, i) => {
19+
// p.style = `background-image: url(https://source.unsplash.com/category/nature?sig=${i}/1200x1200)`;
20+
// });
21+
// }
22+
//
23+
// window.onload = randomPic;

‎05 - Flex Panel Gallery/main.sass

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
@import "normalize"
2+
3+
html
4+
box-sizing: border-box
5+
background: #ffc600
6+
font-family: 'helvetica neue'
7+
font-size: 20px
8+
font-weight: 200
9+
10+
body
11+
margin: 0
12+
13+
*, *:before, *:after
14+
box-sizing: inherit
15+
16+
.panels
17+
min-height: 100vh
18+
overflow: hidden
19+
display: flex
20+
21+
.panel
22+
cursor: pointer
23+
24+
background: #6B0F9C
25+
color: whitesmoke
26+
text-align: center
27+
align-items: center
28+
/* Safari transitionend event.propertyName === flex */
29+
/* Chrome + FF transitionend event.propertyName === flex-grow */
30+
transition: font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), background 0.2s, filter 3s
31+
filter: grayscale(60%)
32+
font-size: 20px
33+
background-size: cover
34+
background-position: center
35+
flex: 1
36+
justify-content: center
37+
align-items: center
38+
display: flex
39+
flex-flow: column
40+
41+
// Random pic from unplash API
42+
@for $i from 1 through 5
43+
.panel#{$i}
44+
background-image: url(https://source.unsplash.com/category/nature?sig=#{$i}/1200x1200)
45+
46+
.panel > *
47+
margin: 0
48+
width: 100%
49+
transition: transform 0.5s
50+
flex: 1 0 auto
51+
display: flex
52+
justify-content: center
53+
align-items: center
54+
55+
.panel > *:first-child
56+
transform: translateY(-100%)
57+
.panel.open-active > *:first-child
58+
transform: translateY(0)
59+
60+
.panel > *:last-child
61+
transform: translateY(100%)
62+
.panel.open-active > *:last-child
63+
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+
.panel.open
75+
filter: grayscale(0)
76+
flex: 5
77+
font-size: 40px

‎dist/main.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎main.js

+5
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,10 @@ const data = [
3333
title: "Update CSS Variables with JS",
3434
url: "03 - CSS Variables/index.html",
3535
img: "03 - CSS Variables/image/03_port.jpg"
36+
},
37+
{
38+
title: "Flex Panel Gallery",
39+
url: "05 - Flex Panel Gallery/index.html",
40+
img: "05 - Flex Panel Gallery/image/05_port.jpg"
3641
}
3742
];

0 commit comments

Comments
 (0)