Skip to content

Commit 894115f

Browse files
rikreddy97rikreddy97
committed
async JS part 2
1 parent c5852dd commit 894115f

File tree

9 files changed

+1986
-75
lines changed

9 files changed

+1986
-75
lines changed

‎JavaScript/Async JS part 2/css/main.css

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
-webkit-box-sizing: border-box;
5+
box-sizing: border-box;
6+
}
7+
8+
html {
9+
font-family: Arial, Helvetica, sans-serif;
10+
font-size: 16px;
11+
}
12+
13+
body {
14+
min-height: 100vh;
15+
display: -webkit-box;
16+
display: -ms-flexbox;
17+
display: flex;
18+
-webkit-box-orient: vertical;
19+
-webkit-box-direction: normal;
20+
-ms-flex-direction: column;
21+
flex-direction: column;
22+
-webkit-box-pack: center;
23+
-ms-flex-pack: center;
24+
justify-content: center;
25+
-webkit-box-align: center;
26+
-ms-flex-align: center;
27+
align-items: center;
28+
}
29+
30+
main {
31+
display: -webkit-box;
32+
display: -ms-flexbox;
33+
display: flex;
34+
-webkit-box-orient: vertical;
35+
-webkit-box-direction: normal;
36+
-ms-flex-direction: column;
37+
flex-direction: column;
38+
-webkit-box-pack: center;
39+
-ms-flex-pack: center;
40+
justify-content: center;
41+
-webkit-box-align: center;
42+
-ms-flex-align: center;
43+
align-items: center;
44+
background-color: #708090;
45+
border: 1px solid #000;
46+
width: 100%;
47+
}
48+
49+
.height100 {
50+
height: 100px;
51+
}
52+
.purple {
53+
background-color: purple;
54+
}
55+
.blue {
56+
background-color: blue;
57+
}
58+
.darkblue {
59+
background-color: #00008b;
60+
}
61+
.black {
62+
background-color: #000;
63+
}
64+
65+
nav {
66+
display: -webkit-box;
67+
display: -ms-flexbox;
68+
display: flex;
69+
-webkit-box-pack: justify;
70+
-ms-flex-pack: justify;
71+
justify-content: space-between;
72+
-webkit-box-align: center;
73+
-ms-flex-align: center;
74+
align-items: center;
75+
padding: 1rem;
76+
width: 100%;
77+
height: 48px;
78+
position: fixed;
79+
top: 0;
80+
border-bottom: 1px solid #fff;
81+
z-index: 2;
82+
background-color: #000;
83+
color: #fff;
84+
}
85+
86+
section {
87+
display: -webkit-box;
88+
display: -ms-flexbox;
89+
display: flex;
90+
-webkit-box-orient: vertical;
91+
-webkit-box-direction: normal;
92+
-ms-flex-direction: column;
93+
flex-direction: column;
94+
-webkit-box-pack: center;
95+
-ms-flex-pack: center;
96+
justify-content: center;
97+
-webkit-box-align: center;
98+
-ms-flex-align: center;
99+
align-items: center;
100+
width: 100%;
101+
height: 100vh;
102+
z-index: 1;
103+
padding-top: 48px;
104+
}
105+
106+
/* Depending on the view example (1, 2, or 3),
107+
you will want to set display:none for the other two
108+
and display:flex for the example you want to see. */
109+
.view1 {
110+
display: -webkit-box;
111+
display: -ms-flexbox;
112+
display: flex;
113+
-webkit-box-orient: horizontal;
114+
-webkit-box-direction: normal;
115+
-ms-flex-direction: row;
116+
flex-direction: row;
117+
-ms-flex-wrap: wrap;
118+
flex-wrap: wrap;
119+
-webkit-box-pack: space-evenly;
120+
-ms-flex-pack: space-evenly;
121+
justify-content: space-evenly;
122+
background-color: #d3d3d3;
123+
color: #000;
124+
}
125+
126+
.view1 div {
127+
display: -webkit-box;
128+
display: -ms-flexbox;
129+
display: flex;
130+
-webkit-box-orient: vertical;
131+
-webkit-box-direction: normal;
132+
-ms-flex-direction: column;
133+
flex-direction: column;
134+
-webkit-box-pack: center;
135+
-ms-flex-pack: center;
136+
justify-content: center;
137+
-webkit-box-align: center;
138+
-ms-flex-align: center;
139+
align-items: center;
140+
width: 100px;
141+
height: 100px;
142+
background-color: #000;
143+
color: #fff;
144+
margin: 10px;
145+
}
146+
147+
.view2 {
148+
display: -webkit-box;
149+
display: -ms-flexbox;
150+
display: flex;
151+
-webkit-box-orient: vertical;
152+
-webkit-box-direction: normal;
153+
-ms-flex-direction: column;
154+
flex-direction: column;
155+
-webkit-box-pack: center;
156+
-ms-flex-pack: center;
157+
justify-content: center;
158+
-webkit-box-align: center;
159+
-ms-flex-align: center;
160+
align-items: center;
161+
display: none;
162+
color: #fff;
163+
max-width: 400px;
164+
max-height: 60%;
165+
padding-top: 0;
166+
}
167+
168+
.view2 div {
169+
display: -webkit-box;
170+
display: -ms-flexbox;
171+
display: flex;
172+
-webkit-box-orient: vertical;
173+
-webkit-box-direction: normal;
174+
-ms-flex-direction: column;
175+
flex-direction: column;
176+
-webkit-box-pack: center;
177+
-ms-flex-pack: center;
178+
justify-content: center;
179+
-webkit-box-align: center;
180+
-ms-flex-align: center;
181+
align-items: center;
182+
width: 200px;
183+
height: 200px;
184+
color: #fff;
185+
margin: 10px;
186+
}
187+
188+
.view3 {
189+
display: -webkit-box;
190+
display: -ms-flexbox;
191+
display: flex;
192+
-webkit-box-orient: vertical;
193+
-webkit-box-direction: normal;
194+
-ms-flex-direction: column;
195+
flex-direction: column;
196+
-webkit-box-pack: center;
197+
-ms-flex-pack: center;
198+
justify-content: center;
199+
-webkit-box-align: center;
200+
-ms-flex-align: center;
201+
align-items: center;
202+
display: none;
203+
background-color: #d3d3d3;
204+
border: 1px solid #000;
205+
max-width: 400px;
206+
padding: 2rem;
207+
}
208+
209+
.view3 form label {
210+
color: #000;
211+
margin-right: 1rem;
212+
font-size: 1.5rem;
213+
}
214+
215+
.view3 form input {
216+
width: 100%;
217+
line-height: 1.5rem;
218+
font-size: 1.5rem;
219+
}
220+
221+
.view3 form button {
222+
display: block;
223+
margin-top: 1rem;
224+
margin-left: auto;
225+
font-size: 1.25rem;
226+
padding: 0.75rem;
227+
border-radius: 10px;
228+
}

‎JavaScript/Async JS part 2/index.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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>My Page</title>
8+
<link rel="stylesheet" href="css/main.css" />
9+
<script type = "module" src="js/main.js"></script>
10+
</head>
11+
12+
<body>
13+
<nav>
14+
<h1>My Page</h1>
15+
</nav>
16+
<main>
17+
<section id="view1" class="view1">
18+
<div>1</div>
19+
<div>2</div>
20+
<div>3</div>
21+
<div>4</div>
22+
<div>5</div>
23+
<div>6</div>
24+
<div>7</div>
25+
<div>8</div>
26+
<div>9</div>
27+
<div>10</div>
28+
<div>11</div>
29+
<div>12</div>
30+
</section>
31+
<section id="view2" class="view2 darkblue">
32+
<div class="black">
33+
<h2>My 2nd View</h2>
34+
</div>
35+
</section>
36+
<section id="view3" class="view3">
37+
<form id="myForm">
38+
<label for="myTextInput">Text Input:</label>
39+
<input type="text" id="myTextInput" autocomplete="off" />
40+
<button type="submit">Submit</button>
41+
</form>
42+
</section>
43+
</main>
44+
45+
</body>
46+
47+
</html>

‎JavaScript/Async JS part 2/js/main.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// Fetch API requires dicussion of...
2+
// callbacks, Promises, Thenables , Async , Await
3+
4+
/* Nature of Javascript
5+
Synchronous - line by line execution of code , can perform only 1 task at a time , single threaded
6+
Asynchronous - different blocks of code is executed at the same time parallely, multi threaded, this is achieved using { Promises , Thenables } --> later replaced by {Async & Await}
7+
8+
much before promises callbacks where used .. branching multiple callbacks inside one another made i hard to follow the code known as callback hell --> to prevent this in ES6 Promises where introduced which where later replaced by Async & await */
9+
10+
/* How does a Promise work ?
11+
a Promise has 3 States : Pending , Fulfilled , Rejected
12+
a Promise is an object that will produce a single value sometime in future. If the promise is successfull it'll produce a resolved value else a rejected value.*/
13+
14+
/*Promise constructor accept a single parameter which is a function called executor that has 2 paramenters resolve, reject -
15+
Syntax :
16+
const myPromise = new Promise((resolve,reject)=>{
17+
//conditions to resolve or reject a promise
18+
})
19+
here Again resolve & reject are functions which have optional parameter like resolve value & rejected reason respectively.
20+
*/
21+
22+
// const getUserEmail = async ()=>{
23+
// const userData = await fetch("https://jsonplaceholder.typicode.com/users");
24+
// const userDataRefined = await userData.json();
25+
// const userEmails = userDataRefined.map(user =>{
26+
// return user.email;
27+
// })
28+
29+
// postUserEmails(userEmails);
30+
// }
31+
32+
// const postUserEmails = (data)=>{
33+
// console.log(data);
34+
// }
35+
// getUserEmail();
36+
37+
38+
/* 2nd Parameter of Fetch */
39+
40+
const makeJoke = async (category)=>{
41+
const getJoke = await fetch(`https://api.chucknorris.io/jokes/random?category=${category}`);
42+
const parseJoke = await getJoke.json();
43+
console.log(parseJoke.value);
44+
}
45+
46+
makeJoke("religion");

0 commit comments

Comments
 (0)