Skip to content

Commit 48732e3

Browse files
LeiGLeiG
committed
Finish challenge wesbos#11 
1 parent ea7fc60 commit 48732e3

File tree

4 files changed

+200
-0
lines changed

4 files changed

+200
-0
lines changed

‎06 - Type Ahead/index.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Type Ahead 👀</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<form class="search-form">
11+
<input type="text" class="search" placeholder="City or State">
12+
<ul class="suggestions">
13+
<li>Filter for a city</li>
14+
<li>or a state</li>
15+
</ul>
16+
</form>
17+
<script>
18+
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
19+
20+
const cities = [];
21+
22+
fetch(endpoint)
23+
.then(blob => blob.json())
24+
.then(data => cities.push(...data));
25+
26+
function findAllMatches(prefix, cities) {
27+
return cities.filter(place => {
28+
// 'gi' standards for gloabal, case insensitive search
29+
const regex = new RegExp(prefix, 'gi');
30+
return place.city.match(regex) || place.state.match(regex)
31+
});
32+
}
33+
34+
function numberWithCommas(x) {
35+
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
36+
}
37+
38+
function displayMatches() {
39+
const matchArray = findAllMatches(this.value, cities);
40+
const html = matchArray.map(place => {
41+
const regex = new RegExp(this.value, 'gi');
42+
const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
43+
const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
44+
return `
45+
<li>
46+
<span class="name">${cityName}, ${stateName}</span>
47+
<span class=population>${numberWithCommas(place.population)}</span>
48+
</li>
49+
`
50+
}).join('');
51+
suggestions.innerHTML = html;
52+
}
53+
54+
const searchInput = document.querySelector('.search');
55+
const suggestions = document.querySelector('.suggestions');
56+
57+
searchInput.addEventListener('change', displayMatches);
58+
searchInput.addEventListener('keyup', displayMatches);
59+
60+
</script>
61+
</body>
62+
</html>

‎09 - Dev Tools Domination/index.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Console Tricks!</title>
6+
</head>
7+
<body>
8+
9+
<p onClick="makeGreen()">×BREAK×DOWN×</p>
10+
11+
<script>
12+
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
13+
14+
function makeGreen() {
15+
const p = document.querySelector('p');
16+
p.style.color = '#BADA55';
17+
p.style.fontSize = '50px';
18+
}
19+
20+
// Regular
21+
console.log('hello');
22+
23+
// Interpolated
24+
var logMsg = "testing"
25+
console.log(`Hello I am a ${logMsg} string.`);
26+
27+
// Styled
28+
// console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')
29+
30+
// warning!
31+
console.warn('OOPS');
32+
33+
// Error :|
34+
console.error('BAD');
35+
36+
// Info
37+
console.info('Javascript is fun.');
38+
39+
// Testing
40+
const p = document.querySelector('p');
41+
console.assert(p.classList.contains('ouch'), 'That is wrong!');
42+
43+
// clearing
44+
console.clear();
45+
46+
// Viewing DOM Elements
47+
console.dir(p);
48+
49+
// Grouping together
50+
dogs.forEach(dog => {
51+
console.groupCollapsed(`${dog.name}`);
52+
console.log(`This is ${dog.name}`);
53+
console.log(`${dog.name} is ${dog.age} years old`);
54+
console.log(`${dog.name} is ${dog.age * 7} dog years old`);
55+
console.groupEnd(`${dog.name}`);
56+
});
57+
58+
// counting
59+
console.count('Wes');
60+
console.count('Wes');
61+
console.count('Steve');
62+
console.count('Steve');
63+
console.count('Wes');
64+
console.count('Steve');
65+
console.count('Wes');
66+
console.count('Steve');
67+
console.count('Steve');
68+
console.count('Steve');
69+
console.count('Steve');
70+
console.count('Steve');
71+
72+
// timing
73+
console.time('fetching data');
74+
fetch('https://api.github.com/users/wesbos')
75+
.then(data => data.json())
76+
.then(data => {
77+
console.timeEnd('fetching data');
78+
console.log(data);
79+
});
80+
81+
</script>
82+
</body>
83+
</html>

‎11 - Custom Video Player/scripts-START.js‎

Whitespace-only changes.

‎11 - Custom Video Player/scripts.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/* Get Elements */
2+
const player = document.querySelector('.player');
3+
4+
const video = player.querySelector('.viewer');
5+
const progress = player.querySelector('.progress');
6+
const progressBar = player.querySelector('.progress__filled');
7+
const toggle = player.querySelector('.toggle');
8+
const skipButtons = player.querySelectorAll('[data-skip]');
9+
const ranges = player.querySelectorAll('.player__slider');
10+
11+
function togglePlay() {
12+
const method = video.paused ? 'play' : 'pause';
13+
video[method]();
14+
}
15+
16+
function updateButton() {
17+
const icon = this.paused ? '►' : '❚ ❚';
18+
console.log(icon);
19+
toggle.textContent = icon;
20+
}
21+
22+
function handleProgress() {
23+
const percent = (video.currentTime / video.duration) * 100;
24+
progressBar.style.flexBasis = `${percent}%`;
25+
}
26+
27+
function skip() {
28+
video.currentTime += parseFloat(this.dataset.skip);
29+
}
30+
31+
function handleRangeUpdate() {
32+
video[this.name] = this.value;
33+
}
34+
35+
function scrub(e) {
36+
const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
37+
video.currentTime = scrubTime;
38+
}
39+
40+
/* Hook up the event listeners */
41+
video.addEventListener('click', togglePlay);
42+
video.addEventListener('play', updateButton);
43+
video.addEventListener('pause', updateButton);
44+
video.addEventListener('timeupdate', handleProgress);
45+
46+
toggle.addEventListener('click', togglePlay);
47+
skipButtons.forEach(button => button.addEventListener('click', skip));
48+
ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
49+
ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));
50+
51+
let mousedown = false;
52+
progress.addEventListener('click', scrub);
53+
progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
54+
progress.addEventListener('mousedown', () => mousedown = true);
55+
progress.addEventListener('mouseup', () => mousedown = false);

0 commit comments

Comments
 (0)