Skip to content

Commit 8b725cc

Browse files
wesboswesbos
committed
demos
1 parent f3d3946 commit 8b725cc

File tree

7 files changed

+385
-0
lines changed

7 files changed

+385
-0
lines changed

‎exercises/70 - Async Prompts/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Async Prompt</title>
8+
<link rel="stylesheet" href="../../base.css">
9+
<link rel="stylesheet" href="./style.css">
10+
</head>
11+
12+
<body>
13+
14+
<div class="wrapper">
15+
<button class="askMe" data-question="What is your name?">Enter Name</button>
16+
<button class="askMe" data-cancel data-question="What is your age?">Enter Age</button>
17+
</div>
18+
<script src="./scripts.js"></script>
19+
20+
</body>
21+
22+
</html>

‎exercises/70 - Async Prompts/scripts-FINISHED.js‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
function wait(ms = 0) {
2+
return new Promise(resolve => setTimeout(resolve, ms));
3+
}
4+
5+
async function destroyPopup(popup) {
6+
popup.classList.remove('open');
7+
await wait(1000);
8+
// remove the popup entirely!
9+
popup.remove();
10+
/* eslint-disable no-param-reassign */
11+
popup = null;
12+
/* eslint-enable no-param-reassign */
13+
}
14+
15+
function ask(options) {
16+
return new Promise(async function(resolve) {
17+
// First we need to create a popup with all the fields in it
18+
const popup = document.createElement('form');
19+
popup.classList.add('popup');
20+
popup.insertAdjacentHTML(
21+
'afterbegin',
22+
`<fieldset>
23+
<label>${options.title}</label>
24+
<input type="text" name="input"/>
25+
<button type="submit">Submit</button>
26+
</fieldset>
27+
`
28+
);
29+
30+
// check if they want a cancel button
31+
if (options.cancel) {
32+
const skipButton = document.createElement('button');
33+
skipButton.type = 'button';
34+
skipButton.textContent = 'Cancel';
35+
popup.firstElementChild.appendChild(skipButton);
36+
// TODO: listen for a click on that cancel button
37+
skipButton.addEventListener(
38+
'click',
39+
function() {
40+
resolve(null);
41+
destroyPopup(popup);
42+
},
43+
{ once: true }
44+
);
45+
}
46+
// listen for the submit event on the inputs
47+
popup.addEventListener(
48+
'submit',
49+
function(e) {
50+
e.preventDefault();
51+
console.log('SUBMITTED');
52+
resolve(e.target.input.value);
53+
// remove it from the DOM entirely
54+
destroyPopup(popup);
55+
},
56+
{ once: true }
57+
);
58+
// when someone does submit it, resolve the data that was in the input box!
59+
60+
// insert that popup into the DOM
61+
document.body.appendChild(popup);
62+
// put a very small timeout before we add the open class
63+
64+
await wait(50);
65+
popup.classList.add('open');
66+
});
67+
}
68+
69+
// select all button that have a question
70+
async function askQuestion(e) {
71+
const button = e.currentTarget;
72+
const cancel = 'cancel' in button.dataset;
73+
74+
const answer = await ask({
75+
title: button.dataset.question,
76+
cancel,
77+
});
78+
console.log(answer);
79+
}
80+
81+
const buttons = document.querySelectorAll('[data-question]');
82+
buttons.forEach(button => button.addEventListener('click', askQuestion));
83+
84+
const questions = [
85+
{ title: 'What is your name?' },
86+
{ title: 'What is your age?', cancel: true },
87+
{ title: 'What is your dogs name?' },
88+
];
89+
90+
async function asyncMap(array, callback) {
91+
// make an array to store our results
92+
const results = [];
93+
// loop over our array
94+
for (const item of array) {
95+
results.push(await callback(item));
96+
}
97+
// when we are done the loop, return it!
98+
return results;
99+
}
100+
101+
async function go() {
102+
const answers = await asyncMap(questions, ask);
103+
console.log(answers);
104+
}
105+
106+
go();
107+
108+
// async function askMany() {
109+
// for (const question of questions) {
110+
// const answer = await ask(question);
111+
// console.log(answer);
112+
// }
113+
// }
114+
115+
// askMany();

‎exercises/70 - Async Prompts/scripts.js‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
function wait(ms = 0) {
2+
return new Promise(resolve => setTimeout(resolve, ms));
3+
}
4+
5+
async function destroyPopup(popup) {
6+
popup.classList.remove('open');
7+
await wait(1000);
8+
// remove the popup entirely!
9+
popup.remove();
10+
/* eslint-disable no-param-reassign */
11+
popup = null;
12+
/* eslint-enable no-param-reassign */
13+
}
14+
15+
function ask(options) {
16+
return new Promise(async function(resolve) {
17+
// First we need to create a popup with all the fields in it
18+
const popup = document.createElement('form');
19+
popup.classList.add('popup');
20+
popup.insertAdjacentHTML(
21+
'afterbegin',
22+
`<fieldset>
23+
<label>${options.title}</label>
24+
<input type="text" name="input"/>
25+
<button type="submit">Submit</button>
26+
</fieldset>
27+
`
28+
);
29+
30+
// check if they want a cancel button
31+
if (options.cancel) {
32+
const skipButton = document.createElement('button');
33+
skipButton.type = 'button';
34+
skipButton.textContent = 'Cancel';
35+
console.log(popup.firstChild);
36+
popup.firstElementChild.appendChild(skipButton);
37+
// TODO: listen for a click on that cancel button
38+
skipButton.addEventListener(
39+
'click',
40+
function() {
41+
resolve(null);
42+
destroyPopup(popup);
43+
},
44+
{ once: true }
45+
);
46+
}
47+
// listen for the submit event on the inputs
48+
popup.addEventListener(
49+
'submit',
50+
function(e) {
51+
e.preventDefault();
52+
console.log('SUBMITTED');
53+
resolve(e.target.input.value);
54+
// remove it from the DOM entirely
55+
destroyPopup(popup);
56+
},
57+
{ once: true }
58+
);
59+
// when someone does submit it, resolve the data that was in the input box!
60+
61+
// insert that popup into the DOM
62+
document.body.appendChild(popup);
63+
// put a very small timeout before we add the open class
64+
65+
await wait(50);
66+
popup.classList.add('open');
67+
});
68+
}
69+
70+
// select all button that have a question
71+
async function askQuestion(e) {
72+
const button = e.currentTarget;
73+
const cancel = 'cancel' in button.dataset;
74+
75+
const answer = await ask({
76+
title: button.dataset.question,
77+
cancel,
78+
});
79+
console.log(answer);
80+
}
81+
82+
const buttons = document.querySelectorAll('[data-question]');
83+
buttons.forEach(button => button.addEventListener('click', askQuestion));
84+
85+
const questions = [
86+
{ title: 'What is your name?' },
87+
{ title: 'What is your age?', cancel: true },
88+
{ title: 'What is your dogs name?' },
89+
];
90+
91+
async function asyncMap(array, callback) {
92+
// make an array to store our results
93+
const results = [];
94+
// loop over our array
95+
for (const item of array) {
96+
results.push(await callback(item));
97+
}
98+
// when we are done the loop, return it!
99+
return results;
100+
}
101+
102+
async function go() {
103+
const answers = await asyncMap(questions, ask);
104+
console.log(answers);
105+
}
106+
107+
go();
108+
109+
// async function askMany() {
110+
// for (const question of questions) {
111+
// const answer = await ask(question);
112+
// console.log(answer);
113+
// }
114+
// }
115+
116+
// askMany();

‎exercises/70 - Async Prompts/style.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.popup {
2+
background: hsla(0, 0%, 30%, 0.5);
3+
position: fixed;
4+
height: 100vh;
5+
width: 100vw;
6+
transition: all 0.25s;
7+
top: 0;
8+
display: grid;
9+
justify-content: center;
10+
align-items: center;
11+
pointer-events: none;
12+
--opacity: 0;
13+
opacity: var(--opacity);
14+
}
15+
16+
.popup fieldset {
17+
background: var(--grey);
18+
padding: 2rem;
19+
border: 3px solid var(--pink);
20+
border-radius: 5px;
21+
box-shadow: var(--box-shadow);
22+
transition: all 0.2s;
23+
--scale: 0.3;
24+
transform: scale(var(--scale));
25+
}
26+
27+
.popup.open {
28+
--opacity: 1;
29+
pointer-events: all;
30+
}
31+
32+
.popup.open fieldset {
33+
--scale: 1;
34+
}

‎exercises/71 - Async Typer/index.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Type Me</title>
9+
<style>
10+
h2 {
11+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
12+
font-size: 50px;
13+
letter-spacing: -0.5px;
14+
}
15+
</style>
16+
</head>
17+
18+
<body>
19+
<h2 data-type data-type-min="100" data-type-max="300">This text will be typed</h2>
20+
<h2 data-type data-type-min="20" data-type-max="80">This text will be typed faster</h2>
21+
<h2 data-type>This text will be typed the default speed</h2>
22+
<p data-type data-type-min="1" data-type-max="6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere
23+
aut error assumenda quod quasi
24+
totam est officiis!
25+
Facilis eum quaerat vero, natus, odio quia, necessitatibus nam cumque est molestiae perspiciatis ratione fugiat ea
26+
nihil voluptatem suscipit. Iusto assumenda omnis beatae dolorum. Placeat molestiae non, reprehenderit repellat,
27+
omnis itaque odio aspernatur laborum nostrum similique provident dicta eligendi vitae suscipit. Sapiente voluptatem
28+
accusamus enim, eos soluta modi cum nesciunt omnis deleniti perspiciatis commodi necessitatibus accusantium ab nemo
29+
possimus, deserunt recusandae molestias adipisci nam harum delectus ex. Sit molestias molestiae aliquam natus hic
30+
ipsam ea ipsum reiciendis, odio eos rerum voluptatibus veritatis repellendus eligendi ex officiis, aperiam, fugiat
31+
perferendis? Aspernatur consequatur reiciendis laborum velit recusandae iure, in excepturi incidunt accusamus,
32+
maxime rem iusto sequi voluptate ducimus, veniam magnam? Sunt similique quasi earum omnis sapiente quisquam, in
33+
molestiae, nostrum, excepturi iste tenetur magnam? Unde ipsum maiores eligendi deleniti at eum soluta quisquam quasi
34+
blanditiis asperiores. Totam natus commodi sint nesciunt voluptates inventore explicabo architecto neque illo quas,
35+
ducimus dignissimos, reiciendis perspiciatis facere dolorem perferendis quasi. Dolorum ad facere sint, aspernatur
36+
vero saepe accusantium laudantium reiciendis asperiores fuga ut doloremque hic iusto natus inventore vitae, at esse,
37+
odit veniam debitis qui commodi delectus dolore libero! Itaque totam, assumenda quisquam labore illum accusantium
38+
exercitationem obcaecati quas animi iusto, saepe voluptate deleniti modi eaque delectus ullam, tempore sequi nemo
39+
odio incidunt ea odit magnam nisi! Atque, rem! Enim expedita laudantium reiciendis dolorum vitae ullam deserunt nemo
40+
sit. Ex illum ullam repudiandae aliquid et vel, itaque dolore, architecto, sequi ratione eveniet facere recusandae
41+
sapiente a soluta! Cupiditate nam sint iusto non debitis cum, unde modi? Omnis nisi, libero tempora obcaecati ad
42+
voluptas facilis culpa accusamus dolorum illo fugiat maxime! Odit nulla ullam, praesentium reiciendis aliquid
43+
voluptatibus quidem magni fuga libero, repudiandae fugit architecto maiores tempore reprehenderit, optio id eaque
44+
repellendus. Sunt accusamus rerum in expedita. Laudantium optio ipsum sapiente atque blanditiis, natus, accusamus
45+
temporibus quidem, minima eligendi eos numquam. Eos distinctio doloremque corporis, quo repellendus earum vel
46+
reiciendis repellat porro quaerat voluptates nihil natus error? Rerum est praesentium sed earum error molestias
47+
officiis modi, natus asperiores impedit reiciendis nihil dolores. Commodi atque repellat quaerat sequi? Est debitis
48+
eveniet id rem aperiam nulla molestiae in iure illum laborum tempora praesentium a unde quibusdam cumque accusamus,
49+
voluptatem totam tenetur suscipit esse repellendus explicabo eius? Autem eius ea exercitationem assumenda,
50+
laboriosam nam ut odit soluta enim sint praesentium, obcaecati nostrum ad.</p>
51+
<script src="./scripts.js"></script>
52+
53+
</body>
54+
55+
</html>

‎exercises/71 - Async Typer/scripts-FINISHED.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
function wait(ms = 0) {
2+
return new Promise(resolve => setTimeout(resolve, ms));
3+
}
4+
5+
function getRandomBetween(min = 20, max = 150, randomNumber = Math.random()) {
6+
return Math.floor(randomNumber * (max - min) + min);
7+
}
8+
9+
// async for of loop
10+
// async function draw(el) {
11+
// const text = el.textContent;
12+
// let soFar = '';
13+
// for (const letter of text) {
14+
// soFar += letter;
15+
// el.textContent = soFar;
16+
// // wait for some amount of time
17+
// const { typeMin, typeMax } = el.dataset;
18+
// const amountOfTimeToWait = getRandomBetween(typeMin, typeMax);
19+
// await wait(amountOfTimeToWait);
20+
// }
21+
// }
22+
23+
// recursion
24+
function draw(el) {
25+
let index = 1;
26+
const text = el.textContent;
27+
const { typeMin, typeMax } = el.dataset;
28+
async function drawLetter() {
29+
el.textContent = text.slice(0, index);
30+
index += 1;
31+
const amountOfTimeToWait = getRandomBetween(typeMin, typeMax);
32+
// exit condition
33+
await wait(amountOfTimeToWait);
34+
if (index <= text.length) {
35+
drawLetter();
36+
// wait for some time
37+
}
38+
}
39+
// when this function draw() runs, kick off drawLetter
40+
drawLetter();
41+
}
42+
43+
document.querySelectorAll('[data-type]').forEach(draw);

‎exercises/71 - Async Typer/scripts.js‎

Whitespace-only changes.

0 commit comments

Comments
 (0)