Skip to content

Commit 4fdb65f

Browse files
tkumpanenkotkumpanenko
committed
fetch
1 parent 6948291 commit 4fdb65f

4 files changed

Lines changed: 97 additions & 10 deletions

File tree

‎02 - JS + CSS Clock/index-START.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<div class="hand second-hand"></div>
1515
</div>
1616
</div>
17-
17+
1818

1919
<style>
2020
html {
@@ -81,9 +81,9 @@
8181
let minutes = date.getMinutes();
8282
let hours = date.getHours();
8383

84-
(seconds / 60 == 0) ? secondHand.style.transition = 'none' ? secondHand.style.transition = '';
85-
(minutes / 60 == 0) ? minHand.style.transition = 'none' ? minHand.style.transition = '';
86-
(hours / 12 == 0) ? hourHand.style.transition = 'none' ? hourHand.style.transition = '';
84+
secondHand.style.transition = (seconds / 60 === 0) ? 'none' : '';
85+
minHand.style.transition = (minutes / 60 === 0) ? 'none' : '';
86+
hourHand.style.transition = (hours / 12 === 0) ? 'none' : '';
8787

8888
hourHand.style.transform = `rotate(${Number(hours*360/12 + 90)}deg)`;
8989
minHand.style.transform = `rotate(${Number(minutes*360/60 + 90)}deg)`;

‎03 - CSS Variables/index-START.html‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,22 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
2121
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
2222

2323
<style>
24-
24+
:root{
25+
--base: #ffc600;
26+
--spacing: 10px;
27+
--blur: 10px;
28+
}
2529
/*
2630
misc styles, nothing to do with CSS variables
2731
*/
28-
32+
img{
33+
padding: var(--spacing);
34+
background: var(--base);
35+
filter: blur(var(--blur));
36+
}
37+
.hl{
38+
color: var(--base);
39+
}
2940
body {
3041
text-align: center;
3142
}
@@ -53,6 +64,16 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
5364
</style>
5465

5566
<script>
67+
const inputs = document.querySelectorAll('.controls input');
68+
69+
function handleUpdate(){
70+
let sufix = this.dataset.sizing || "";
71+
document.documentElement.style.setProperty(`--${this.name}`, `${this.value}${sufix}`);
72+
}
73+
74+
inputs.forEach(input => input.addEventListener('change', handleUpdate));
75+
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
76+
5677
</script>
5778

5879
</body>

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

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,18 @@
2424
.panels {
2525
min-height:100vh;
2626
overflow: hidden;
27+
display: flex;
28+
2729
}
2830

2931
.panel {
32+
33+
flex: 1;
3034
background:#6B0F9C;
3135
box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
3236
color:white;
3337
text-align: center;
34-
align-items:center;
38+
align-items: center;
3539
/* Safari transitionend event.propertyName === flex */
3640
/* Chrome + FF transitionend event.propertyName === flex-grow */
3741
transition:
@@ -41,6 +45,10 @@
4145
font-size: 20px;
4246
background-size:cover;
4347
background-position:center;
48+
justify-content: center;
49+
align-items: center;
50+
display: flex;
51+
flex-direction: column;
4452
}
4553

4654

@@ -51,11 +59,20 @@
5159
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
5260

5361
.panel > * {
62+
align-items: center;
63+
justify-content: center;
64+
flex: 1 0 auto;
5465
margin:0;
5566
width: 100%;
67+
display: flex;
5668
transition:transform 0.5s;
5769
}
58-
70+
.panel > *:first-child{
71+
transform: translateY(-100%);
72+
}
73+
.panel > *:last-child{
74+
transform: translateY(100%);
75+
}
5976
.panel p {
6077
text-transform: uppercase;
6178
font-family: 'Amatic SC', cursive;
@@ -65,9 +82,12 @@
6582
.panel p:nth-child(2) {
6683
font-size: 4em;
6784
}
68-
85+
.panel.open-active > *{
86+
transform: translate(0);
87+
}
6988
.panel.open {
7089
font-size:40px;
90+
flex: 5;
7191
}
7292

7393
.cta {
@@ -107,7 +127,18 @@
107127
</div>
108128

109129
<script>
110-
130+
const panels = document.querySelectorAll('.panel');
131+
132+
panels.forEach(key => key.addEventListener('click', toggle));
133+
panels.forEach(key => key.addEventListener('transitionend', toggleActive));
134+
135+
function toggle(e){
136+
this.classList.toggle('open');
137+
}
138+
function toggleActive(e){
139+
if (e.propertyName.includes("flex"))
140+
this.classList.toggle('open-active');
141+
}
111142
</script>
112143

113144

‎06 - Type Ahead/index-START.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,41 @@
1616
</form>
1717
<script>
1818
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
19+
const searchFiled = document.querySelector('.search');
20+
const resultList = document.querySelector('.suggestions');
21+
22+
const cities = [];
23+
24+
fetch(endpoint)
25+
.then(blob => blob.json())
26+
.then(data => cities.push(...data));
27+
28+
function findMathces(wordToMath, cities){
29+
return cities.filter(place => {
30+
let regex = new RegExp(wordToMath,'gi');
31+
return place.city.match(regex) || place.state.match(regex);
32+
});
33+
}
34+
35+
function displayMatches(){
36+
let match = findMathces(this.value, cities);
37+
let html = match.map(place => {
38+
39+
let regexp = new RegExp(this.value, 'gi');
40+
let cityName = place.city.replace(regexp, `<mark>${this.value}</mark>`)
41+
let stateName = place.state.replace(regexp, `<mark>${this.value}</mark>`)
42+
return `<li>
43+
<span class="name">${cityName},${stateName}</span>
44+
<span class="population">${place.population}</span>
45+
</li>`}).join('');
46+
resultList.innerHTML = html;
47+
48+
}
49+
50+
51+
52+
searchFiled.addEventListener('change', displayMatches);
53+
searchFiled.addEventListener('keyup', displayMatches);
1954

2055
</script>
2156
</body>

0 commit comments

Comments
 (0)