Skip to content

Commit 5af314b

Browse files
author
Axel
committed
Add exercise 25, 26 and update showcase
1 parent fd04faa commit 5af314b

File tree

11 files changed

+369
-1
lines changed

11 files changed

+369
-1
lines changed

‎25 - Event Capture, Propagation, Bubbling and Once/gulpfile.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
var gulp = require('gulp'),
2+
browserSync = require('browser-sync').create();
3+
4+
gulp.task('server', function() {
5+
6+
browserSync.init({
7+
server: "./",
8+
open: false
9+
});
10+
11+
gulp.watch("./*.html").on('change', browserSync.reload);
12+
});
13+
14+
gulp.task('default', ['server']);

‎25 - Event Capture, Propagation, Bubbling and Once/index.html

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>JS30</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7+
</head>
8+
<body>
9+
10+
<div class="one">
11+
<div class="two">
12+
<div class="three">
13+
</div>
14+
</div>
15+
</div>
16+
17+
<style>
18+
html {
19+
box-sizing: border-box;
20+
}
21+
*, *:before, *:after { box-sizing: inherit; }
22+
23+
div {
24+
width:100%;
25+
padding:100px;
26+
}
27+
28+
.one {
29+
background: thistle;
30+
}
31+
32+
.two {
33+
background:mistyrose;
34+
}
35+
36+
.three {
37+
background:coral;
38+
}
39+
</style>
40+
41+
<script>
42+
const divs = document.querySelectorAll("div");
43+
44+
function logText(e) {
45+
console.log(this.classList.value);
46+
e.stopPropagation();
47+
}
48+
49+
divs.forEach(div => div.addEventListener("click", logText, {
50+
capture: false,
51+
once: true
52+
}));
53+
54+
</script>
55+
</body>
56+
</html>

‎26 - Stripe Follow Along Nav/dist/main.css

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

‎26 - Stripe Follow Along Nav/dist/main.js

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

‎26 - Stripe Follow Along Nav/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']);

‎26 - Stripe Follow Along Nav/image/26_port.jpg

25.1 KB
Loading

‎26 - Stripe Follow Along Nav/index.html

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Stripe Follow Along Nav</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7+
<link href="dist/main.css" type="text/css" rel="stylesheet">
8+
</head>
9+
<body>
10+
<nav class="top">
11+
<div class="dropdownBackground">
12+
<span class="arrow"></span>
13+
</div>
14+
15+
<ul class="cool">
16+
<li>
17+
<a href="#">About Us</a>
18+
<div class="dropdown dropdown1">
19+
<div class="bio">
20+
<img src="https://unsplash.it/210">
21+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
22+
</div>
23+
</div>
24+
</li>
25+
<li>
26+
<a href="#">Courses</a>
27+
<ul class="dropdown courses">
28+
<li>
29+
<span class="code">RFB</span>
30+
<a href="https://ReactForBeginners.com">React For Beginners</a>
31+
</li>
32+
<li>
33+
<span class="code">ES6</span>
34+
<a href="https://ES6.io">ES6 For Everyone</a>
35+
</li>
36+
<li>
37+
<span class="code">STPU</span>
38+
<a href="https://SublimeTextBook.com">Sublime Text Power User</a>
39+
</li>
40+
<li>
41+
<span class="code">WTF</span>
42+
<a href="http://flexbox.io">What The Flexbox?!</a>
43+
</li>
44+
<li>
45+
<span class="code">LRX</span>
46+
<a href="http://LearnRedux.com">Learn Redux</a>
47+
</li>
48+
<li>
49+
<span class="code">CLPU</span>
50+
<a href="http://CommandLinePowerUser.com">Command Line Power User</a>
51+
</li>
52+
<li>
53+
<span class="code">MMD</span>
54+
<a href="http://MasteringMarkdown.com">Mastering Markdown</a>
55+
</li>
56+
</ul>
57+
</li>
58+
<li>
59+
<a href="#">Other Links</a>
60+
<ul class="dropdown dropdown3">
61+
<li><a class="button" href="http://twitter.com/wesbos">Twiter</a></li>
62+
<li><a class="button" href="http://facebook.com/wesbos.developer">Facebook</a></li>
63+
<li><a class="button" href="http://wesbos.com">Blog</a></li>
64+
<li><a class="button" href="http://wesbos.com/courses">Course Catalog</a></li>
65+
</ul>
66+
</li>
67+
</ul>
68+
</nav>
69+
70+
<script src="dist/main.js"></script>
71+
</body>
72+
</html>

‎26 - Stripe Follow Along Nav/main.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const triggers = document.querySelectorAll(".cool > li");
2+
const background = document.querySelector(".dropdownBackground");
3+
const nav = document.querySelector(".top");
4+
5+
function handleEnter() {
6+
this.classList.add('trigger-enter');
7+
setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
8+
background.classList.add('open');
9+
10+
const dropdown = this.querySelector(".dropdown");
11+
const dropdownCoords = dropdown.getBoundingClientRect();
12+
const navCoords = nav.getBoundingClientRect();
13+
14+
const coords = {
15+
height: dropdownCoords.height,
16+
width: dropdownCoords.width,
17+
top: dropdownCoords.top - navCoords.top,
18+
left: dropdownCoords.left - navCoords.left,
19+
};
20+
21+
background.style.setProperty('width', `${coords.width}px`);
22+
background.style.setProperty('height', `${coords.height}px`);
23+
background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
24+
}
25+
26+
function handleLeave() {
27+
this.classList.remove('trigger-enter', 'trigger-enter-active');
28+
background.classList.remove('open');
29+
}
30+
31+
triggers.forEach(trigger => trigger.addEventListener("mouseenter", handleEnter));
32+
triggers.forEach(trigger => trigger.addEventListener("mouseleave", handleLeave));

‎26 - Stripe Follow Along Nav/main.sass

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
@import "normalize"
2+
3+
html
4+
box-sizing: border-box
5+
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif
6+
7+
*, *:before, *:after
8+
box-sizing: inherit
9+
10+
body
11+
margin: 0
12+
min-height: 100vh
13+
background: linear-gradient(120deg, #87CEFA 50%, #fff)
14+
15+
h2
16+
margin-top: 0
17+
padding-top: .8em
18+
19+
nav
20+
position: relative
21+
perspective: 600px
22+
23+
.cool > li > a
24+
color: black
25+
text-decoration: none
26+
font:
27+
size: 24px
28+
weight: 300
29+
padding: 10px 20px
30+
display: inline-block
31+
margin: 20px
32+
&:hover
33+
color: #555
34+
35+
nav ul
36+
list-style: none
37+
margin: 0
38+
padding: 0
39+
display: flex
40+
justify-content: center
41+
42+
.cool > li
43+
position: relative
44+
display: flex
45+
justify-content: center
46+
47+
.dropdown
48+
opacity: 0
49+
position: absolute
50+
overflow: hidden
51+
padding: 20px
52+
top: -20px
53+
border-radius: 2px
54+
transition: all 0.5s
55+
transform: translateY(100px)
56+
will-change: opacity
57+
display: none
58+
59+
.trigger-enter .dropdown
60+
display: block
61+
62+
.trigger-enter-active .dropdown
63+
opacity: 1
64+
65+
.dropdownBackground
66+
width: 100px
67+
height: 100px
68+
position: absolute
69+
background: #fff
70+
border-radius: 4px
71+
box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1)
72+
transition: all 0.3s, opacity 0.1s, transform 0.2s
73+
transform-origin: 50% 0
74+
display: flex
75+
justify-content: center
76+
opacity: 0
77+
78+
.dropdownBackground.open
79+
opacity: 1
80+
81+
.arrow
82+
position: absolute
83+
width: 20px
84+
height: 20px
85+
display: block
86+
background: white
87+
transform: translateY(-50%) rotate(45deg)
88+
89+
.bio
90+
min-width: 500px
91+
display: flex
92+
justify-content: center
93+
align-items: center
94+
line-height: 1.7
95+
img
96+
float: left
97+
margin-right: 20px
98+
99+
.courses
100+
min-width: 300px
101+
li
102+
padding: 10px 0
103+
display: block
104+
display: flex
105+
span
106+
flex: 1
107+
a
108+
flex: 2
109+
&:not(:last-child)
110+
border-bottom: 1px solid rgba(0,0,0,0.1)
111+
112+
.dropdown a
113+
text-decoration: none
114+
color: #ffc600
115+
116+
a.button
117+
background: black
118+
display: block
119+
padding: 10px
120+
color: white
121+
margin-bottom: 10px
122+
123+
/* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
124+
.button[href*=twitter]
125+
background: #019FE9
126+
.button[href*=facebook]
127+
background: #3B5998
128+
.button[href*=courses]
129+
background: #ffc600

‎dist/main.js

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

0 commit comments

Comments
 (0)