Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit62b1957

Browse files
changes in functions and promises
1 parent6faf5a8 commit62b1957

File tree

6 files changed

+252
-12
lines changed

6 files changed

+252
-12
lines changed

‎01 functions/script1.js

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
// }
2727
// console.log(add(1, 2));// 1 2 undefined NaN
2828
// console.log(add(1));// 1 undefined undefined NaN
29-
// console.log(add(1, 2, 3)); // 1 2 36
29+
//console.log(add(1, 2, 3)); // 1 2 36
3030

3131
//Arguments in Functions
3232
// function printAll() {
@@ -55,7 +55,7 @@
5555
// sum(12,23);
5656

5757
// var sum = (a,b)=>{
58-
// console.log(arguments); // not defined in arrow functions
58+
// console.log(arguments); //argumentsnot defined in arrow functions
5959
// }
6060
// sum(12,23);
6161

@@ -100,40 +100,44 @@
100100

101101
// function outer(){
102102
// let i=0;
103+
// var j = 10;
103104
// function middle(){
105+
104106
// function inner(){
105107
// i=10
106-
// console.log("inner",i);
108+
// var j=20; // can be use inside this block only
109+
// console.log("inner",i,j);
107110
// }
108111
// inner()
109-
// console.log("middle",i);
110-
112+
// console.log("middle",i,j);
111113
// }
112114
// //inner() // REference Error : inner is not defined
113-
// console.log("outer",i)
115+
// console.log("outer",i,j)
114116
// middle()
115-
// console.log("outer",i)
117+
// console.log("outer",i,j)
116118
// }
117119
// outer()
118120

119121
//function expression
122+
//console.log(factorial) // print undefined bcoz factorial is declared as undefined
123+
// console.log(factorial(3)); // Uncaught TypeError: factorial is not a function
120124
// var factorial = function fac(n) {
121125
// return n < 2 ? 1 : n * fac(n - 1);
122126
// };
123127
// console.log(factorial(3)); // print - 6
124128
// console.log(fac(3)); // fac is not defined
125129

126130
// Anonymous Functions
127-
//console.log(factorial) // print undefined bcoz factorial is declared as undefined
128-
//console.log(factorial(3)); //TypeError: factorial is not a function
131+
//console.log(factorial) // print undefined bcoz factorial is declared as undefined
132+
//console.log(factorial(3)); //TypeError: factorial is not a function
129133
// var factorial = function (n) {
130134
// var ans = 1;
131135
// for (var i = 2; i <= n; i++)
132136
// ans *= i;
133137
// return ans;
134138
// }
135139

136-
// console.log(factorial(3));
140+
//console.log(factorial(3));
137141

138142

139143
// passing functions / Callbacks
@@ -147,13 +151,13 @@
147151
// var ncr = function(n,r,fact){
148152
// return fact(n)/(fact(r) * fact(n-r))
149153
// }
150-
//console.log(ncr(5,3,factorial)) // factorial is passed as callback to ncr
154+
//console.log(ncr(5,3,factorial)) // factorial is passed as callback to ncr
151155

152156
// var ncr = function(n,r,fact){
153157
// return fact(n)/(fact(r) * fact(n-r))
154158
// }
155159

156-
// //// following function is a callback functions passed to ncr()
160+
//// following function is a callback functions passed to ncr()
157161
// console.log( ncr(5,3,function (n){
158162
// let ans=1;
159163
// for(let i=1;i<=n;i++)
@@ -167,3 +171,6 @@
167171
// console.log("Timer 2 sec");
168172
// },2000)
169173

174+
// setTimeout(function(){
175+
// console.log("timer 1 sec");
176+
// },1000)

‎12. promise/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
</head>
1010

1111
<body>
12+
<ahref="https://www.javascripttutorial.net/es6/javascript-promises/">Promises</a>
13+
<ahref="https://www.javascripttutorial.net/javascript-fetch-api/">Fetch API returns a Promise</a>
14+
<h2>If a function returns a Promise, you can place the await keyword in front of the function call.</h2>
15+
<ahref="https://www.javascripttutorial.net/es-next/javascript-async-await/">Async-Await</a>
1216
<h3>Promise introduced in ES6</h3>
1317
<h2>A promise is an Object that indicates the success and failure of an asychronous task.</h2>
1418
<pre>

‎dictionary-app/.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"git.ignoreLimitWarning":true
3+
}

‎dictionary-app/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8">
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0">
7+
<title>Dictionary app</title>
8+
<linkrel="stylesheet"href="./style.css">
9+
</head>
10+
<body>
11+
<nav>
12+
<divclass="container">
13+
<h1>Dictionary App</h1>
14+
</div>
15+
</nav>
16+
<section>
17+
<h2>Find any Word that exist in the 🌍</h2>
18+
<divclass="form__wrap">
19+
<divclass="input__wrap">
20+
<inputtype="text"placeholder="Type a Word"id="input">
21+
<buttonid="search">Search</button>
22+
</div>
23+
</div>
24+
</section>
25+
<sectionclass="data container">
26+
<spanclass="loading">Loading...</span>
27+
<pclass="definition"></p>
28+
<divclass="audio"></div>
29+
<divclass="not__found"></div>
30+
</section>
31+
<scriptsrc="./script.js"></script>
32+
</body>
33+
</html>

‎dictionary-app/script.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
letinput=document.querySelector("#input");
2+
letsearchBtn=document.querySelector("#search");
3+
letapiKey='f053ed4d-60c0-4f40-bd8e-ba36abf7ebec';
4+
letnotFound=document.querySelector(".not__found");
5+
letdefBox=document.querySelector(".definition");
6+
letaudioBox=document.querySelector(".audio");
7+
letloading=document.querySelector(".loading");
8+
9+
searchBtn.addEventListener('click',function(e){
10+
defBox.innerHTML="";
11+
notFound.innerHTML="";
12+
audioBox.innerHTML="";
13+
//get input data
14+
letword=input.value.trim();
15+
if(word===''){
16+
alert("Please Enter the Word to search");
17+
return;
18+
}
19+
// Call API
20+
getData(word);
21+
});
22+
23+
asyncfunctiongetData(word){
24+
loading.style.display="block";
25+
// Ajax Call
26+
notFound.innerHTML="";
27+
constresponse=awaitfetch(`https://www.dictionaryapi.com/api/v3/references/learners/json/${word}?key=${apiKey}`);
28+
constdata=awaitresponse.json();
29+
30+
if(data.length==0){
31+
loading.style.display="none";
32+
notFound.display="block";
33+
notFound.innerHTML="<h2>Not Found</h2>";
34+
return;
35+
}
36+
37+
// Print the Suggestions
38+
if(typeofdata[0]=="string"){
39+
loading.style.display="none";
40+
letheading=document.createElement("h2");
41+
heading.innerHTML=" Did you Mean?";
42+
notFound.appendChild(heading)
43+
data.forEach(element=>{
44+
letsuggestion=document.createElement("a");
45+
suggestion.addEventListener("click",function(e){
46+
e.preventDefault();
47+
input.value=element;
48+
notFound.innerHTML="";
49+
getData(element);
50+
});
51+
suggestion.classList.add("suggested");
52+
suggestion.innerHTML=element;
53+
notFound.appendChild(suggestion);
54+
});
55+
return;
56+
}
57+
// Result found
58+
loading.style.display="none";
59+
defBox.innerHTML=data[0]["shortdef"][0];
60+
61+
// Add sound
62+
constsoundName=data[0].hwi.prs[0].sound.audio;
63+
// if sound exists for the given Word
64+
if(soundName)
65+
addSound(soundName);
66+
}
67+
68+
functionaddSound(soundName){
69+
// https://media.merriam-webster.com/soundc11
70+
letsubfolder=soundName.charAt(0);
71+
letsoundSrc=`https://media.merriam-webster.com/soundc11/${subfolder}/${soundName}.wav?key=${apiKey}`;
72+
73+
letaud=document.createElement('audio');
74+
aud.src=soundSrc;
75+
aud.controls=true;
76+
audioBox.appendChild(aud);
77+
}

‎dictionary-app/style.css

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
@importurl('https://fonts.googleapis.com/css2?family=Muli:wght@300;400&display=swap');
2+
* {
3+
margin:0;
4+
padding:0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family:'Muli', sans-serif;
10+
min-height:100vh;
11+
}
12+
13+
.container {
14+
width:1152px;
15+
max-width:90%;
16+
margin:0 auto;
17+
}
18+
19+
nav {
20+
background:#33CC00 ;
21+
color:#fff;
22+
padding:1rem0;
23+
width:100%;
24+
}
25+
26+
section.input {
27+
padding-top:100px;
28+
}
29+
30+
h2 {
31+
text-align: center;
32+
font-size:36px;
33+
}
34+
35+
.form__wrap {
36+
display: flex;
37+
justify-content: center;
38+
}
39+
40+
.input__wrap {
41+
display: flex;
42+
align-items: center;
43+
border:1px solid#ddd;
44+
margin-top:20px;
45+
}
46+
47+
input {
48+
border: none;
49+
padding:10px;
50+
font-size:16px;
51+
min-width:400px;
52+
outline: none;
53+
}
54+
55+
button{
56+
background:#33CC00;
57+
border:2px solid#2fac06;
58+
color:#fff;
59+
height:100%;
60+
font-size:16px;
61+
padding:020px;
62+
cursor: pointer;
63+
}
64+
65+
section.data{
66+
max-width:600px;
67+
margin:0 auto;
68+
margin-top:20px;
69+
text-align: center;
70+
}
71+
72+
.loading {
73+
display: none;
74+
}
75+
76+
section.datap.definition {
77+
font-size:20px;
78+
color:#2D3748;
79+
line-height:1.6;
80+
}
81+
82+
.suggested {
83+
background:#33CC00;
84+
color:#fff;
85+
padding:2px10px;
86+
border-radius:4px;
87+
margin-right:10px;
88+
margin-top:5px;
89+
cursor: pointer;
90+
display: inline-block;
91+
}
92+
.audio {
93+
margin-top:20px;
94+
}
95+
96+
@media screenand (max-width:400px) {
97+
button{
98+
display: block;
99+
}
100+
.definition{
101+
margin:2px;
102+
}
103+
section.container{
104+
width:500px;
105+
max-width:100%;
106+
margin-left:0;
107+
}
108+
input {
109+
min-width:200px;
110+
}
111+
.audio{
112+
display: flex;
113+
justify-content: center;
114+
margin-left:0;
115+
}
116+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp