├── .vscode └── settings.json ├── style.css ├── script.js └── index.html /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | h1{ 6 | text-align: center; 7 | text-decoration: underline red; 8 | color: black; 9 | margin-top: 30px; 10 | font-size: 40px; 11 | font-weight: 800; 12 | } 13 | hr{ 14 | background: grey; 15 | height: 2px; 16 | width: 100%; 17 | margin-top: 30px; 18 | margin-bottom: 30px; 19 | } 20 | .maincontanier{ 21 | width: 90vw; 22 | margin: auto; 23 | } 24 | .bold{ 25 | font-size: 20px; 26 | font-weight: 600; 27 | } 28 | .ans{ 29 | color: blue; 30 | } 31 | .inline{ 32 | display: inline-block; 33 | } 34 | .red{ 35 | color: red; 36 | } -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // Question 1 2 | let ans1 = document.getElementById("ans1") 3 | 4 | function calculate(num1, num2){ 5 | return num1 * num2 6 | } 7 | 8 | function displayDate(name, age){ 9 | console.log(`${name} : age is ${age}`) 10 | ans1.innerHTML = ` ${name} : age is ${age} ` 11 | } 12 | 13 | displayDate("Nitin", calculate(19,1)); 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | // Question 2 22 | 23 | let ans2 = document.getElementById("ans2") 24 | 25 | setTimeout(()=>{ 26 | console.log("1") 27 | ans2.innerHTML = "1
" 28 | setTimeout(()=>{ 29 | console.log("2") 30 | ans2.innerHTML = ans2.innerHTML+ "2
" 31 | setTimeout(()=>{ 32 | console.log("3"); 33 | ans2.innerHTML = ans2.innerHTML + "3
" 34 | setTimeout(()=>{ 35 | console.log("4"); 36 | ans2.innerHTML = ans2.innerHTML + "4
" 37 | setTimeout(()=>{ 38 | console.log("5"); 39 | ans2.innerHTML = ans2.innerHTML + "5
" 40 | setTimeout(()=>{ 41 | console.log("6"); 42 | ans2.innerHTML = ans2.innerHTML+ "6
" 43 | setTimeout(()=>{ 44 | console.log("7") 45 | ans2.innerHTML = ans2.innerHTML + "7
" 46 | },7000) 47 | },6000) 48 | },5000) 49 | },4000) 50 | },3000) 51 | },2000) 52 | },1000) 53 | 54 | 55 | 56 | 57 | 58 | 59 | // Question 3 60 | let ans3 = document.getElementById("ans3") 61 | function promiseChain(alpha, timeout){ 62 | return new Promise((res, rej)=>{ 63 | setTimeout(()=>{ 64 | console.log(alpha); 65 | ans3.innerHTML = ans3.innerHTML + alpha + "
" 66 | 67 | res("This promise is resolved !!!....") 68 | },timeout); 69 | }) 70 | } 71 | 72 | function visible(){ 73 | promiseChain("1",1000) 74 | .then(()=>promiseChain("2", 2000)) 75 | .then(()=>promiseChain("3", 3000)) 76 | .then(()=>promiseChain("4", 4000)) 77 | .then(()=>promiseChain("5", 5000)) 78 | .then(()=>promiseChain("6", 6000)) 79 | .then(()=>promiseChain("7", 7000)) 80 | } 81 | 82 | visible(); 83 | 84 | 85 | 86 | 87 | 88 | 89 | // Question 4 90 | let ans4 = document.getElementById("ans4") 91 | let variable = true 92 | 93 | function promiseFun(){ 94 | return new Promise((resolve,reject)=>{ 95 | if(variable === true){ 96 | resolve("Promise resolve succesfully....") 97 | } 98 | else{ 99 | reject(Error("Promise rejected !!!")) 100 | } 101 | }) 102 | } 103 | 104 | promiseFun(variable).then((data)=>{ 105 | console.log(data) 106 | ans4.innerHTML = data 107 | }).catch((err)=>{ 108 | console.log(err) 109 | }) 110 | 111 | 112 | 113 | 114 | 115 | 116 | // Question 5 117 | let ans5 = document.getElementById("ans5") 118 | function divide(num1, num2, callback) { 119 | let output = num1 / num2; 120 | callback(output); 121 | } 122 | 123 | function division(output) { 124 | console.log('The result is: ' + output); 125 | ans5.innerHTML = " This result is " + output 126 | } 127 | 128 | divide(100, 100, division); 129 | 130 | 131 | 132 | 133 | 134 | 135 | // Question 6 136 | let ans6 = document.getElementById("ans6") 137 | 138 | setTimeout(()=>{ 139 | console.log("1") 140 | ans6.innerHTML = "1
" 141 | setTimeout(()=>{ 142 | console.log("2") 143 | ans6.innerHTML = ans6.innerHTML+ "2
" 144 | setTimeout(()=>{ 145 | console.log("3"); 146 | ans6.innerHTML = ans6.innerHTML + "3
" 147 | setTimeout(()=>{ 148 | console.log("4"); 149 | ans6.innerHTML = ans6.innerHTML + "4
" 150 | setTimeout(()=>{ 151 | console.log("5"); 152 | ans6.innerHTML = ans6.innerHTML + "5
" 153 | setTimeout(()=>{ 154 | console.log("6"); 155 | ans6.innerHTML = ans6.innerHTML+ "6
" 156 | setTimeout(()=>{ 157 | console.log("7") 158 | ans6.innerHTML = ans6.innerHTML + "7
" 159 | },7000) 160 | },6000) 161 | },5000) 162 | },4000) 163 | },3000) 164 | },2000) 165 | },1000) 166 | 167 | 168 | 169 | 170 | 171 | // Question 7 172 | let ans7 = document.getElementById("ans7") 173 | function findSum(num1,num2){ 174 | let pr = new Promise(function(res,rej){ 175 | setTimeout(function(){ 176 | let sum = num1 + num2; 177 | if(isNaN(sum)) 178 | { 179 | rej("Try Again! Enter a valid number"); 180 | } 181 | else 182 | { 183 | res(sum); 184 | } 185 | }, 2000) 186 | }) 187 | return pr; 188 | } 189 | 190 | findSum(26,23).then(function(ans){ 191 | console.log("Sum =", ans); 192 | ans7.innerHTML = "Sum = " + ans 193 | }).catch(function(err){ 194 | console.log(err); 195 | }) 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | // question 8 204 | let ans8 = document.getElementById("ans8") 205 | function fetchData() { 206 | return new Promise(resolve => { 207 | setTimeout(() => resolve('Data received!'), 2000); 208 | }); 209 | } 210 | 211 | async function printData() { 212 | console.log("Fetching data..."); 213 | ans8.innerHTML = "Fetching data....." + "
" 214 | const data = await fetchData(); 215 | console.log(data); 216 | ans8.innerHTML = ans8.innerHTML + data 217 | } 218 | 219 | printData(); 220 | 221 | 222 | 223 | // Question 9 224 | let ans9 = document.getElementById("ans9") 225 | function mypromise(num ){ 226 | return new Promise((resolve, reject)=>{ 227 | if(num%2 === 0){ 228 | resolve("This is even ") 229 | } 230 | else{ 231 | rej("This is Odd ") 232 | } 233 | }) 234 | } 235 | 236 | const mypromise1 = new Promise((resolve, reject)=>{ 237 | if(true){ 238 | resolve(" hi EAC _01 ") 239 | } 240 | else{ 241 | reject(" Soryy !!!! ") 242 | } 243 | }) 244 | 245 | Promise.all([mypromise(20), mypromise1]).then((data)=>{ 246 | console.log(data) 247 | ans9.innerHTML = data 248 | }).catch((data)=>{ 249 | console.log(data) 250 | ans9.innerHTML = data 251 | }) 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Promise Async Await 8 | 9 | 10 | 11 | 12 | 13 |

*PROMISE, ASYNC & AWAIT *

14 |
15 |
16 |
17 |

Q1: Write one example explaining how you can write a callback function.

18 |

ANS :-

19 |
 20 |                 function calculate(num1, num2){
 21 |                     return num1 * num2
 22 |                 }
 23 |                 
 24 |                 function displayDate(name, age){
 25 |                     console.log(`${name} : age is ${age}`)
 26 |                 }
 27 |                 
 28 |                 displayDate("Nitin", calculate(19,1));
 29 |             
30 |

OUTPUT :-

31 |
32 |
33 |
34 |

Q2: Write a callback function to print numbers from 1 to 7, in which 1 should be printed after 1 sec, 2 should be printed after 2 sec, 3 should be printed after 3 sec, and so on. 35 |
36 | Explain callback hell. 37 |
38 | Numbers 39 |
40 | 1
41 | 2
42 | 3
43 | 4
44 | 5
45 | 6
46 | 7 47 |

48 |

ANS :-

49 |
 50 |                 setTimeout(()=>{
 51 |                     console.log("1")
 52 |                     setTimeout(()=>{
 53 |                         console.log("2")
 54 |                         setTimeout(()=>{
 55 |                             console.log("3");
 56 |                             setTimeout(()=>{
 57 |                                 console.log("4");
 58 |                                 setTimeout(()=>{
 59 |                                     console.log("5");
 60 |                                     setTimeout(()=>{
 61 |                                         console.log("6");
 62 |                                         setTimeout(()=>{
 63 |                                             console.log("7")
 64 |                                         },7000)
 65 |                                     },6000)
 66 |                                 },5000)
 67 |                             },4000)
 68 |                         },3000)
 69 |                     },2000)
 70 |                 },1000)
 71 |             
72 |

OUTPUT :-

73 |
74 |
75 |
76 |

Q1: "Write the promise function to print numbers from 1 to 7, in which 1 should be printed after 1 sec, 2 should be printed after 2 sec, 3 should be printed after 3 sec, and so on. 77 |
78 | Numbers
79 | 1
80 | 2
81 | 3
82 | 4
83 | 5
84 | 6
85 | 7
86 |

87 |
 88 |                 let ans3 = document.getElementById("ans3")
 89 |                 function promiseChain(alpha, timeout){
 90 |                     return new Promise((res, rej)=>{
 91 |                         setTimeout(()=>{
 92 |                             console.log(alpha);
 93 |                             res("This promise is resolved !!!....")
 94 |                         },timeout);
 95 |                     })
 96 |                 }
 97 |                 function visible(){
 98 |                     promiseChain("1",1000)
 99 |                     .then(()=>promiseChain("2", 2000))
100 |                     .then(()=>promiseChain("3", 3000))
101 |                     .then(()=>promiseChain("4", 4000))
102 |                     .then(()=>promiseChain("5", 5000))
103 |                     .then(()=>promiseChain("6", 6000))
104 |                     .then(()=>promiseChain("7", 7000))
105 |                 }
106 |                 visible();
107 |             
108 |

OUTPUT :-

109 |
110 |
111 |
112 |

Q4: Create a promise function accepting an argument, if yes is passed to the function then it should go to resolved state and print Promise Resolved, and if nothing is passed 113 | then it should go to reject the state and catch the error and print Promise Rejected 114 |

115 |

ANS :-

116 |
117 |                 let variable = true 
118 |                 function promiseFun(){
119 |                     return new Promise((resolve,reject)=>{
120 |                         if(variable === true){
121 |                             resolve("Promise resolve succesfully....")
122 |                         }
123 |                         else{
124 |                             reject(Error("Promise rejected !!!"))
125 |                         }
126 |                     })
127 |                 }
128 |                 
129 |                 promiseFun(variable).then((date)=>{
130 |                     console.log(date)
131 |                 }).catch((err)=>{
132 |                     console.log(err)
133 |                 })
134 |             
135 |

OUTPUT :-

136 |
137 |
138 |
139 |

Q5: Create examples to explain callback function

140 |

ANS :-

141 |

#A callback function is a function passed to another function as an argument. Callbacks promote asynchronous programming

142 |
143 | 
144 | 
145 |                 function divide(num1, num2, callback) {
146 |                     let output = num1 / num2;
147 |                     callback(output);
148 |                     }
149 |                           
150 |                     function division(output) {
151 |                     console.log('The result is: ' + output);
152 |                     }
153 |                           
154 |                 divide(100, 100,  division);
155 |             
156 |

OUTPUT :-

157 |
158 |
159 |
160 |

Q6: Create examples to explain callback hell function

161 |

ANS:-

162 |

The phenomenon which happens when we nest multiple callbacks within a function is called a callback hell. The shape of the resulting code structure resembles a pyramid and hence callback hell is also called the “pyramid of the doom”. It makes the code very difficult to understand and maintain.

163 |
164 | 
165 | 
166 | 
167 |                 setTimeout(()=>{
168 |                     console.log("1")
169 |                     setTimeout(()=>{
170 |                         console.log("2")
171 |                         setTimeout(()=>{
172 |                             console.log("3");
173 |                             setTimeout(()=>{
174 |                                 console.log("4");
175 |                                 setTimeout(()=>{
176 |                                     console.log("5");
177 |                                     setTimeout(()=>{
178 |                                         console.log("6");
179 |                                         setTimeout(()=>{
180 |                                             console.log("7")
181 |                                         },7000)
182 |                                     },6000)
183 |                                 },5000)
184 |                             },4000)
185 |                         },3000)
186 |                     },2000)
187 |                 },1000)   
188 |             
189 |

OUTPUT :-

190 |
191 |
192 |
193 |

Q7 :Create examples to explain promises function

194 |

ANS :-

195 |

Promise Function are the functions that return a promise object. A promise is an object which represents the completion or failure of an asynchronous operation 196 | along with its result. They come with in-built error handling. Here inside the findSum() function, promise object "pr" has been created. 197 | Then the function is called and ".then" block is attached to handle the resolved part and ".catch" handles the reject part.

198 |
199 | 
200 | 
201 |                 function findSum(num1,num2){
202 |                     let pr = new Promise(function(res,rej){
203 |                         setTimeout(function(){
204 |                             let sum = num1 + num2;
205 |                             if(isNaN(sum))
206 |                             {
207 |                                 rej("Try Again! Enter a valid number");
208 |                             }
209 |                             else
210 |                             {
211 |                                 res(sum);
212 |                             }
213 |                         }, 2000)
214 |                     })
215 |                     return pr;
216 |                 }
217 |                 
218 |                 findSum(26,23).then(function(ans){
219 |                     console.log("Sum =", ans);
220 |                 }).catch(function(err){
221 |                     console.log(err);
222 |                 })
223 |             
224 |

OUTPUT :-

225 |
226 |
227 |
228 |

Q8: Create examples to explain async await function

229 |

ANS :-

230 |
231 |                 function fetchData() {
232 |                     return new Promise(resolve => {
233 |                       setTimeout(() => resolve('Data received!'), 2000);
234 |                     });
235 |                   }
236 |                   
237 |                   async function printData() {
238 |                     console.log("Fetching data...");
239 |                     const data = await fetchData();
240 |                     console.log(data);
241 |                   }
242 |                   
243 |                   printData();
244 |             
245 |

OUTPUT :-

246 |
247 |
248 |
249 |

Q9: Create examples to explain promise.all function

250 |

ANS :-

251 |
252 |                 function mypromise(num ){
253 |                     return new Promise((resolve, reject)=>{
254 |                         if(num%2 === 0){
255 |                             resolve("This is even")
256 |                         }
257 |                         else{
258 |                             rej("This is Odd")
259 |                         }
260 |                     })
261 |                 }
262 |                 
263 |                 const mypromise1 = new Promise((resolve, reject)=>{
264 |                     if(true){
265 |                         resolve("hi EAC _01")
266 |                     }
267 |                     else{
268 |                         reject("Soryy !!!!")
269 |                     }
270 |                 })
271 |                 
272 |                 Promise.all([mypromise(20), mypromise1]).then((data)=>{
273 |                     console.log(data)
274 |                 }).catch((data)=>{
275 |                     console.log(data)
276 |                 })
277 |             
278 |

OUTPUT :-

279 |
280 | 281 |
282 | 283 | 284 | 285 | --------------------------------------------------------------------------------