779 |
780 | 781 | ## Lecture 2: All DOM Selector 782 | 783 | - Open wiki page of ajavascript, as the wiki page is created so cleanly 784 | - We will see here, what element we can catch, and what the things we can do manipulate it. 785 | - Focus on Javascript rather than react, angular, sevelt, who knows future 786 | - Focus on selecting element then apply methods to manipulate it. 787 | - Behind the scene, document understand it as className not class 788 | - we can get the attibute using: 789 | 790 | ```javascript 791 | document.getElementById('title').getAttribute('id') 792 | ``` 793 | 794 | - We should remember not to override the existing attribute 795 | ```javascript 796 | document.getElementById('title').setAttribute('class','test heading') 797 | ``` 798 | 799 | - here, new class is test, existing class is heading 800 | - We can set the styling of element as below, 801 | 802 | ```javascript 803 | const title = document.getElementById("title"); 804 | title.style.backgroundColor = 'green' 805 | ``` 806 | 807 | ### How to add the content 808 | - We will be using textContent, innerHTML, innerText 809 | - **InnerContent vs InnerText:** InnerText will give the text which is visible, but InnerContent will give the text which is hidden as well. 810 | - innerHTML will give the complete value 811 | - In real time, we will be using other query selector, like querySelector, querySelectorAll etc 812 | **Example:** 813 | ```javascript 814 | document.querySlector('h1') 815 | //we will be getting the 1st h1 element 816 | ``` 817 | - querySelector is quite similar to jquery 818 | - **Example:** 819 | ```javascript 820 | document.querySelector('#title'); 821 | //we can use othe selectors as well, like class selector 822 | document.querySelector('.heading'); 823 | // we can select the input slector as well 824 | document.querySlector(input); 825 | //we can select the attribute as well 826 | document.querySelector('input[type="password"]') 827 | //select 1st child of paragraph 828 | document.querySelector('p:first-child'); 829 | ``` 830 | - Try to use emmet shortcuts, how sir is using, 831 | **Example:** To write 3 list item, use ul>;i*3 832 | - We can select element and manipulate the element as below 833 | **Example:** 834 | ```javascript 835 | const myUl = document.querySelector('ul'); 836 | myUl.querySelector('li') 837 | const turnGreen = myUl.querySelector('li') 838 | turnGreen.style.backgroundColor = "green" 839 | turnGreen.style.padding = "10px"; 840 | turnGreen.innerText = "five" 841 | ``` 842 | 843 | - Remember, querySelector will only gives 1 value 844 | - To select all list item, use querySelectorAll() 845 | - Nodelist are not pure array 846 | ```javascript 847 | const tempLiList = document.querySelectorAll('li'); 848 | tempLiList[0].style.color = "green" 849 | // to manipulate whole details, we can use forEach loop 850 | tempLiList.forEach(l=>{ 851 | l.style.backgroundColor = 'green' 852 | }) 853 | ``` 854 | - In querySelectorAll, it is important to know what datatype it is returning 855 | - Scenario: We need to apply class on each element of list 856 | - **Array.from():** This method will convert nodelist into the array 857 | ```javascript 858 | const tempClassList = document.getElementsByClassName('list-item'); 859 | Array.from(tempClassList); 860 | ``` 861 | ```javascript 862 | const myConvertedArray = Array.from(tempClassList); 863 | myConvertedArray.forEach(function(li){ 864 | li.style.color = "orange" 865 | }) 866 | ``` 867 | - we can manipulate the page value as 868 | ```javascript 869 | const myH2 = document.querySelectorAll('.mw-headline') 870 | myH2.forEach(function(h){ 871 | h.style.color = "black" 872 | h.style.backgroundColor = "green" 873 | h.style.color = "white" 874 | h.style.padding = "10px" 875 | h.innerText = "Sarfaraz" 876 | }) 877 | ``` 878 |
879 |
880 | 881 | ## Lecture 3: How to create a new element 882 | 883 | - Knowledge on DOM will help to crack the interview, so dont take it lightly before starting react 884 | - We will focus here on relations, like parent-child relation, parent-parent relations etc 885 | - Scenario: we need to create the element ➜ create the query from DB ➜ Set into array ➜ display in UI 886 | - Play with DOM to add or remove an element 887 | - to create div with4 elements use shortcut: div.day*4 888 | - Lets check the value in the parent 889 | - parent.children will give the list of html collection 890 | - To select 1 element in array: parent.children[0] 891 | - To access the inner value of it, we can use parent.children[0].innerHTML 892 | - We can create the new element using document.createElement('div'), so here div is created 893 | - The document will be visible when it is attached using appenChild method 894 | 895 |
896 |
897 | 898 | ## Lecture 4: Edit and remove DOM element 899 | 900 | - Remember: Everything declared in function scope is not accessible outside 901 | - Better to use appendChild rather InnerHTML 902 | - There is not much difference between innerHTML and innerContent 903 | - Mentioned everything in comment in the file, practice a bit from w3school for querySelectors 904 | 905 |
906 |
907 | 908 | ## Lecture 5: Lets build 4 Javascript Project 909 | 910 | ### Project 1: 911 | 912 | - Without events, it is not possible to do big projects 913 | - We can view the markup file view in vs code, the short cut is available in the right corner of vscode. 914 | - Go the stackblitz folder, copy html, css file content from 915 | - project 1 Select all the box 916 | - **e.target:** means from which target we got the event 917 | 918 | ### Project 2: BMI Calculator 919 | - From the input form, we need to need to get the value. 920 | - First we need to select the form, as form has submit button. 921 | - Here, we have submit button 922 | 923 | ### Project 3: Digital Clock 924 | - Please learn flexbox in css, as flexbox is used here to center the div 925 | - We need to create the digital clock, which need to be change on every second 926 | - setInterval controls the interval, we set the time, it will run continuesly 927 | **Example:** 928 | ```javascript 929 | //Syntax: 930 | setInterval(function(){}, 1000) 931 | ``` 932 | 933 | ### Project 4: Guess the number 934 | 935 | - Generate the random number and guess is it correct or not. 936 | - Random number will give always new value, to get 10 number multiply by 10, add 1 to get number above 0 937 | - To get the number in interger we use parseInt 938 | - We often need to write the validation logic, like, is the number available in DB, is the number is unique etc 939 | 940 |
941 |
942 | 943 | ## Lecture 6: Events in Javascript 944 | 945 | - Whatever the eventd run in the javascript, it runs in sequentially 946 | - But in asynchronous programming, we deviate the sequence and come back, same like browser event, it acitivate in browser events. 947 | - Write a logic that is scalable in javascript, so better avoid writing onclick on button in js. 948 | - Dont write simply onclick event but use addEventListener, as it will give much detail like propogation, or gives less features if use onclick. 949 | - Add the event listener in string. 950 | - We should learn about type, timestamp(how to change the date), preventDefault(to overrid the default value of any tag), target, toElement, srcElement, currentTarget. - Need to know clientX, clientY, screenX, screenY related to positions. 951 | - altKey, ctrlKey, shiftKey, keyCode(what is the key code of any character, or to check keyboard speed). 952 | - Event Propogation is of 2 types, Event bubbling(default), Event capturing. 953 | - If we add the addEventlistener on parent and child, we should think, which will be clicked first?. 954 | - The answer is Event bubbling, means the event propogates from low to high. Here 1st from li then ul. 955 | - If we apply e.stopPropogation, then event will not propogate to the parent. 956 | - **e.target:** it will give the targeted element 957 | - **e.target.parentNode:** Here, we can select the parent element. 958 | - **remove():** It will remove the element from nodeList. 959 | - **removeChild():** It will remove the child element from parent Node. 960 | - Read more about event, that help in understanding the events 961 | 962 |
963 |
964 | 965 | ## Lecture 7: Async code (Theory) 966 | 967 | - We will focus on basic on sync javascript, so that It will be helpful to learn promises, async-await etc 968 | - We should know basics like, Javascript is 969 | 1) Synchronous: Execute one line of code at a time. 970 | 2) Single threaded languge: Work on 1 thread, slow language as compared to other 971 | 3) Execution context: Execute one line of code at a time. Here Each operation waits for the last one to complete before executing 972 | - There are 2 types of code in javascript 973 | 1) Blocking Code: Block the flow of the program ➜ Read the file 974 | 2) Non-Blocking Code:Does not block execution ➜ Read file Async 975 | - It is based on the use case, what code we need to use either blocking or non blocking 976 | - Example for non blocking code, till we store the data in db and get response that entry is done ➜ then give the message to the user that registration is successful or not, then we should go ahead with non blocking operation. 977 | - JS Engine: It is a complete javascript engine, which execute the javascript 978 | - JS Engine is made up of 1) Memory Heap 2) Call stack 979 | - Web API: We will get Web API in browser, we wont get anywhere, we call it in sometime Node environment 980 | - If we consider Node for web API, then we wont get DOM API 981 | - Task queue: Task queue only make the JS engine fast 982 | - Promise has different high priority queue, we call it high priority queue 983 | - How the program executes: 984 | - 1st callstack is created ➜ created the global execution context and one by one function is loaded ➜ whenever work of function is completed, functions are unloaded 985 | - **Memory heap:** here memory is allocated - Async code, we use, we say, yaar do this work and please remember me in future ha, ➜ it is registerd in Register callback, who register all the events 986 | - Async code are like settimeout, setinterval etc Task Queue: Once the task is completed, the register callback send the details to task queue. task queue add to the callback and add back to call stack. Task queue is last in first out. 987 | - fetch is just a high priority call 988 | 989 |
990 |
991 | 992 | 993 | ## Lecture 8: 2 Projects with async 994 | 995 | - We will get the functions like setTimeput, setInterval are functions of window object. 996 | - If we use setTimeout, then after 2 sec, name will be printed only once. 997 | 998 | **Example:** 999 | ```javascript 1000 | setTimeout(function(){ 1001 | console.log("Sarfaraz"); 1002 | }, 2000) 1003 | ``` 1004 | - In settimeinterval, the work will be executed after every specific time interval 1005 | - clearTimeout: we can remove the settimeout function, but cleartimeout seek reference of what timeout need to be removed. ➜ cleartimeout say remove everything for that reference what is there in call stack 1006 | - We will call the clearTimeout on button click 1007 | ```javascript 1008 | document.querySelector('#stop').addEventListener('click',function(){ 1009 | clearTimeout(changeMe); 1010 | console.log('Stopped'); 1011 | }) 1012 | ``` 1013 | - We will be getting the name after every 1 sec 1014 | ```javascript 1015 | setInterval(function(){ console.log("Hitesh"); },1000) 1016 | ``` 1017 | - We can stop the interval using clearInterval, here clearInterval seek the reference to pass. 1018 | - Here, the scenario is, if we click on start button then start the interval, if we click on stop button, it should stop the interval. 1019 | 1020 | ## Project 6: Unlimited colors 1021 | - Onchange of start button change the background color, after every sec background color should change. 1022 | 1023 |
1024 |
1025 | 1026 | ## Lecture 9: API request and v8 engine 1027 | - API is the talking language 1028 | between 2 systems - famous API is of github 1029 | - To know the basic 1030 | information about github user, Example: 1031 | https://api.github.com/users/hiteshchoudhary 1032 | - format is API, having big 1033 | object having values. 1034 | - other example: https://randomuser.me - We can use 1035 | jsonformatter.org to format the API and check the details in tree format - 1036 | Before fetch method, we use to send the XMLHttpRequest: It is completly 1037 | ajax programming 1038 | - Reference: 1039 | https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest - just for 1040 | knowledge we are ready XMLHttpRequest 1041 | - XMLHttpRequest: we can send or 1042 | recive the data, it is a class - open() method cant be called directly ➜ 1043 | if we do send() then we can say it is called. 1044 | - When we talk about current 1045 | context, then we use this 1046 | - Most of the time we get the data, it is in string format 1047 | - **JSON.parse():** It will convert the object from string to JSON. 1048 | - **console.log():** It is browser dev tool, it is not a part of javascript 1049 | - v8 engine gives all the tools of debugging. actual implementation of console.log is available here in v8 engine code. 1050 | 1051 |
1052 |
1053 | 1054 | ## Lecture 10: Promise 1055 | 1056 | - Before understanding the fetch, it is important to learn about promise 1057 | - In javascript, we use less reference to class, everthing we see as an object reference. 1058 | - **Reference:** https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise 1059 | - When we do any task in promise, then it will complete now.but it will complete in future. 1060 | - Promise has 3 state: 1061 | - **Pending:** niether fullfilled nor rejected 1062 | - **fullfilled:** means the operation is completed successfully 1063 | - **rejected:** means operation is failed 1064 | - Most of the time, we can see promises are mostly consumed. 1065 | - It is better to create promise then learn how to consume it. 1066 | - Promise itself is an object - with new key we get the new instance. 1067 | - Promises are introduced in ES6 1068 | - Before promise, Q, Bluebird library were used, now this library is integrated in nodejs by default. 1069 | - Promise reduces the callback hell 1070 | - Promise take callback function which take 2 parameters resolve and reject. 1071 | 1072 | - **.then()** has direct connect with resolve, .then() has callback function, it return the value 1073 | - To connect promise with then(), we need to call resolve() method in promise creation. 1074 | - Mostly the data passed is an object in promise. 1075 | - We can use .then().then() this is called chaining, in 2nd then we will get the value what we returned from 1st then. 1076 | - **finally():** It tell, after x amount of time, it is done or not. 1077 | - Promise is in general the thing which will be done in future. 1078 | 1079 | ### Async Await 1080 | - It is like promise concept only, just wait, if work done then only it will proceed else it will give error 1081 | there itself. - Suntax: async await 1082 | - The problem with async- awit, we cant handle the error directly 1083 | - We can use dummy response: https://jsonplaceholder.typicode.com/users 1084 | - If we use fetch(), it will take time, so we need to write await in async function. 1085 | - response.json(): we are saying, hey response convert into json, as the data what we got is in the string format. 1086 | 1087 |
1088 |
1089 | 1090 | ## Lecture 11: fetch (Theory) 1091 | 1092 | - fetch is a method in nodejs 1093 | - Blog Reference: https://blog.logrocket.com/fetch-api-node-js/ 1094 | - Back then we were using XMLHttpRequest, but it was very hard to implement with other libraries like jquery etc. 1095 | - Fetch API was available but not included in nodejs environment, as fetch api was heavily dependent on browser. 1096 | - We can stop the node request using abortController. 1097 | - So now onwards all async calls will be done using fetch only. 1098 | - fetch is a global mothod which start the process to fetch the resource from a network. It return the promise 1099 | - Reference: https://developer.mozilla.org/en-US/docs/Web/API/fetch 1100 | 1101 |  1102 | 1103 | - Special queue is created for fetch in event loop or called as "Micro task queue or Priority queue or fetch queue", It is VIP line. 1104 | - fetch works in 2 parts 1105 | 1) Web browser: Here nodejs add the feature of brower, It will handle the web API ➜ From it will call the network request ➜ either we will get the date then it goes to onfulfilled or if no data found it goes to onRejection. 1106 | 2) Data: To reserve the memory space, we may call data, other is arrays, onFulfilled, onRejection. We can't access those arrays. These are private field. 1107 | - Initially data is empty 1108 | - Its data's responsibility to fullfill the memory 1109 | 1110 | ## ------------------------ Classes & Objects : (bit theory) ------------------------ 1111 | 1112 | ## Lecture 12: Object Oriented Javascript 1113 | - Technically javascript is not having class but yes javascript does have classes. class is afeature of ES6. 1114 | - We should use chatGPT while working in javascript or react. 1115 | - Javascript is a prototyped based language, it is syntactic sugar over existing prototype based inheritance mechanism. 1116 | 1117 | ### Object literal: 1118 | - Create the object literally 1119 | ```javascript 1120 | const user = { 1121 | username : "Hitesh", 1122 | loginCount: 8, 1123 | signedIn : true 1124 | } //we can access using dot or [] notation 1125 | user["username"]; 1126 | ``` 1127 | - Object is a collection of properties and methods 1128 | - With the help of new keyword, we can create multiple instances, And we call it as constructor function. 1129 | - the left hand side shows the variable name and right side shows the value. 1130 | - When we use new keyword, empty object is created. 1131 | - Constrcutor function is called on new call 1132 | - this keyword is injected 1133 | 1134 |
1135 |
1136 | 1137 | ## Lecture 13: Magic of Prototype: Js Behind the scene 1138 | - Here, we will understand the prototype, which help to understand the internals of javascript - Prototype is the behaviour 1139 | - We will look into new keyword, what is the behaviour of function 1140 | ```javascript 1141 | const newHero = ["Hulk","spiderman"] 1142 | console.log(newHero); 1143 | ``` 1144 | - Here, when we console the output, we not only get the array element but we get the Prototype keyward as well, we will explore it more. 1145 | - Javascript is prototypal inheritance: Javascript search at the top till it gets null value.This is prorypal behaviour of javascript 1146 | - Due to prototype bahviour only, we get new keyward, classes and this key works due to this. 1147 | - Everything in javascript is Object, Object is no parent ➜ Object has null reference 1148 | - Srting, Array redirect to object, means it is object. 1149 | - Function is a function as well as it is object in javascript 1150 | - From 'this', we set the current context 1151 | - **prototype:** it gives not only methods but also gives some proprties as well. 1152 | - All about 'new' keyword: 1153 | - **new** keyword initiate the creation of a new javascript object 1154 | - newly created object is linked to constructor's prototype ➜ then constructor is called ➜ finally we get the new object 1155 | - Everything goes through object 1156 | - In Prototypal inheritance we say that how can we access other's properties. 1157 | ```javascript 1158 | //modern syntax of prototypal inheritance 1159 | //copy the details of TeachingSupport ➜ into Teacher 1160 | Object.setPrototypeOf(TeachingSupport, Teacher) 1161 | ``` 1162 | - Whoever is called, it is having this reference 1163 | 1164 |
1165 |
1166 | 1167 | ## Lecture 14: Call and this 1168 | - Earlier we were using bind in reactjs version 1, as library was not so defined 1169 | - When there is global context, then this reference to window object while node refere to emoty object 1170 | - call: it is a method to call another method, it pass the current execution context to another function. 1171 | - call method used to call the reference, here this gives the current context. 1172 | 1173 |
1174 |
1175 | 1176 | ## Lecture 15: Class and constructor 1177 | - **class** is the keyword in javascript 1178 | - Behind the scene of classes, it is simply a function with some protypal properties and methods 1179 | - We can extends the properties using 'extends' keyword 1180 | - 'static': it is a keyword which restrict to access, as like we want to restrict not to give unique id everytime for everyone. 1181 | 1182 |
1183 |
1184 | 1185 | ## Lecture 16: Bind 1186 | - **bind** is used in eary version of reactjs 1187 | - Bind says about attachment 1188 | - Through bind, we can have access for everything related to that function. 1189 | 1190 |
1191 |
1192 | 1193 | 1194 | ## Lecture 17: Now you know Objects 1195 | 1196 | - Object has so many properties 1197 | ```javascript 1198 | const mynewObj = {username: "sarfaraz"} 1199 | mynewObj; 1200 | ``` 1201 | - getOwnPropertyDescriptor: It gives the internal properties of object details 1202 | **Example:** 1203 | ```javascript 1204 | Object.getOwnPropertyDescriptor(Math) 1205 | ``` 1206 | - Can we change the value of object property? Yes we can using Object.defineProperty 1207 | ```javascript 1208 | const chai = { 1209 | name: "ginger chai", 1210 | price: 250, 1211 | isAvailable: true, 1212 | 1213 | orderChai: function(){ 1214 | console.log("Chai nahi bani"); 1215 | } 1216 | } 1217 | 1218 | console.log(Object.getOwnPropertyDescriptor(chai, "name")); 1219 | 1220 | //which property to change 1221 | Object.defineProperty(chai, 'name',{ 1222 | writable: false, 1223 | enumerable: false, 1224 | }) 1225 | 1226 | console.log(Object.getOwnPropertyDescriptor(chai, "name"); 1227 | ``` 1228 | - Object is not iteratable by default, we can make object iterable using Object.entries 1229 | 1230 |
1231 |
1232 | 1233 | ## Lecture 18: Getters and setters 1234 | 1235 | - Suppose, we dont want to give the property of class, then we can use getter and setters. 1236 | - it is compulsory to setter and if getter is written 1237 | - getter helps to get the value 1238 | - It is better to create a property by using undescore to avoid the setter, getter race condition 1239 | - Function behave in 2 ways, one is function and other is object. 1240 | - **Object.defineProperty:** it is a property of getter and setter property, Old code before classes it is used in function. 1241 | - We need to write setters and getter, so that others cant access it. 1242 | - here underscore **_** define the private property, cant be used by normal user. 1243 | 1244 | 1245 |
1246 |
1247 | 1248 | ## Lecture 19: Lexical scope and closure 1249 | 1250 | - **Closure Reference:** https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures 1251 | - Closure gives you access to an outer function's scope from an inner function. 1252 | - If the outer function has inner function then at this time memory is shared. 1253 | - The variable decalred in outer function has access in both outer and inner function. 1254 | - It is not possible to access the variable declared inside function to outside of function. 1255 | - While we return the function reference, we return the whole lexical scope, means it return the variable as well. 1256 | 1257 |
1258 |
1259 | 1260 | ## Lecture 20: Javascript ends with story 1261 | 1262 | - When you do project ➜ you stuck ➜ you solve ➜ you only learn 1263 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
-
12 |
- Javascript 13 |
16 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/src/06_dom/three-creating-nodes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 17 | DOM learning on Chai aur code 18 | 19 |
20 |Lorem, ipsum dolor.
21 |Lorem, ipsum dolor.
22 |Lorem, ipsum dolor.
23 |Lorem ipsum dolor sit amet.
24 | 25 |-
26 |
- One 27 |
- Two 28 |
- Three 29 |
- Four 30 |
10 |
18 |
19 |
44 |
45 |
--------------------------------------------------------------------------------
/src/07_projects/1-colorChanger/chaiaurcode.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HSarfaraz/chai-aur-javascript/83873deb632493918af6f47304a4e89432cb6c96/src/07_projects/1-colorChanger/chaiaurcode.js
--------------------------------------------------------------------------------
/src/07_projects/1-colorChanger/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Monday
11 | Tuesday
12 | Wednesday
13 | Thursday
14 | Friday
15 | Satursday
16 | Sunday
17 |
19 |
31 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/src/07_projects/1-colorChanger/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | margin: 0;
3 | }
4 |
5 | span {
6 | display: block;
7 | }
8 | .canvas {
9 | margin: 100px auto 100px;
10 | width: 80%;
11 | text-align: center;
12 | }
13 |
14 | .button {
15 | width: 100px;
16 | height: 100px;
17 | border: solid black 2px;
18 | display: inline-block;
19 | }
20 |
21 | #grey {
22 | background: grey;
23 | }
24 |
25 | #white {
26 | background: white;
27 | }
28 | #blue {
29 | background: blue;
30 | }
31 | #yellow {
32 | background: yellow;
33 | }
34 |
--------------------------------------------------------------------------------
/src/07_projects/2-BMICalculator/chaiaurcode.js:
--------------------------------------------------------------------------------
1 | // we will get the form
2 | const form = document.querySelector("form");
3 |
4 | //form submition will be post, so we need to stop the submission
5 | //on submit click, get the values of height and weight
6 | form.addEventListener("submit", function (e) {
7 | //to stop the default submission
8 | e.preventDefault();
9 |
10 | //step to get the value of input
11 | //parseInt: convert the string value into int
12 | const height = parseInt(document.querySelector("#height").value);
13 | const weight = parseInt(document.querySelector("#weight").value);
14 | const results = document.querySelector("#results");
15 |
16 | //apply some checks, if those checks are correct than add the values
17 | //height should not be empty
18 | if (height === "" || height < 0 || isNaN(height)) {
19 | results.innerHTML = `Please give a valid height ${height}`;
20 | // height.innerHTML = '';
21 | // weight.innerHTML = '';
22 | } else if (weight === "" || weight < 0 || isNaN(weight)) {
23 | results.innerHTML = `Please give a valid weight ${weight}`;
24 | } else {
25 | //if everything is fine, then calculate the BMI
26 | const bmi = (weight / ((height * height) / 10000)).toFixed(2);
27 |
28 | //Show the results
29 |
30 | //check the result, whether it is under weight or over weight
31 | if (bmi < 18.6) {
32 | results.innerHTML = ` You have under weight of ${bmi}`;
33 | } else if (bmi > 18.6 && bmi < 24.6) {
34 | results.innerHTML = ` You have Normal Range of ${bmi}`;
35 | } else if (bmi > 24.6) {
36 | results.innerHTML = ` You have over weight of ${bmi}`;
37 | }
38 | }
39 | });
40 |
--------------------------------------------------------------------------------
/src/07_projects/2-BMICalculator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Color Scheme Switcher
32 | 33 | 34 | 35 | 36 |37 | Try clicking on one of the colors above 38 | to change the background color of this page! 39 |
40 |
19 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/src/07_projects/2-BMICalculator/style.css:
--------------------------------------------------------------------------------
1 | .container {
2 | width: 575px;
3 | height: 825px;
4 |
5 | background-color: #797978;
6 | padding-left: 30px;
7 |
8 | color: #fff;
9 | font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
10 | }
11 | #height,
12 | #weight {
13 | width: 150px;
14 | height: 25px;
15 | margin-top: 30px;
16 | }
17 |
18 | #weight-guide {
19 | margin-left: 75px;
20 | margin-top: 25px;
21 | }
22 |
23 | #results {
24 | font-size: 35px;
25 | margin-left: 90px;
26 | margin-top: 20px;
27 | color: rgb(241, 241, 241);
28 | }
29 |
30 | button {
31 | width: 150px;
32 | height: 35px;
33 | margin-left: 90px;
34 | margin-top: 25px;
35 | background-color: #fff;
36 | padding: 1px 30px;
37 | border-radius: 8px;
38 | color: #212121;
39 | text-decoration: none;
40 | border: 2px solid #212121;
41 |
42 | font-size: 25px;
43 | }
44 |
45 | h1 {
46 | padding-left: 15px;
47 | padding-top: 25px;
48 | }
49 |
--------------------------------------------------------------------------------
/src/07_projects/3-digitalClock/chaiaurcode.js:
--------------------------------------------------------------------------------
1 | // We can use querySelector, but we are using getElementById
2 | // const clock = document.querySelector("#clock");
3 | const clock = document.getElementById("clock");
4 | console.log(clock);
5 |
6 | //we need to update the date and run it everytime
7 | //setInterval controls the interval, we set the time, it will run continuesly
8 |
9 | setInterval(function () {
10 | let date = new Date();
11 | // console.log(date.toLocaleTimeString());
12 | clock.innerHTML = date.toLocaleTimeString();
13 | }, 1000);
14 |
--------------------------------------------------------------------------------
/src/07_projects/3-digitalClock/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | BMI Calculator
20 | 32 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/07_projects/3-digitalClock/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #212121;
3 | color: #fff;
4 |
5 | font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
6 | }
7 | .center {
8 | display: flex;
9 | height: 100vh;
10 | justify-content: center;
11 | align-items: center;
12 | flex-direction: column;
13 | }
14 | #clock {
15 | font-size: 40px;
16 | background-color: orange;
17 | padding: 20px 50px;
18 | margin-top: 10px;
19 | border-radius: 10px;
20 | }
21 |
--------------------------------------------------------------------------------
/src/07_projects/4-GuessNumber/chaiaurcode.js:
--------------------------------------------------------------------------------
1 | let randomNumber = parseInt(Math.random() * 100 + 1);
2 |
3 | const submit = document.querySelector("#subt");
4 | //get user input
5 | const userInput = document.querySelector("#guessField");
6 | const guessSlot = document.querySelector(".guesses");
7 | //show the last result
8 | const remaining = document.querySelector(".lastResult");
9 | const lowOrHi = document.querySelector(".lowOrHi");
10 | const startOver = document.querySelector(".resultParas");
11 |
12 | //to create the paragraph
13 | const p = document.querySelector("p");
14 |
15 | //store the value in array
16 | let prevGuess = [];
17 | let numGuess = 1;
18 | let playGame = true;
19 |
20 | //logic of the project
21 |
22 | //check, if it is available for game or not or user is allowed to play game or not
23 | if (playGame) {
24 | submit.addEventListener("click", function (e) {
25 | //prevent the value to send
26 | e.preventDefault();
27 | //select the user input
28 | const guess = parseInt(userInput.value);
29 | console.log(guess);
30 | //pass the function
31 | validateGuess(guess);
32 | });
33 | }
34 |
35 | //Create the function to validate between 1 to 100
36 | function validateGuess(guess) {
37 | if (isNaN(guess)) {
38 | alert("Please enter a valid number");
39 | } else if (guess < 1) {
40 | alert("Please enter a number more than 1");
41 | } else if (guess > 100) {
42 | alert("Please enter a number less than 100");
43 | } else {
44 | //push in array
45 | prevGuess.push(guess);
46 | //check is this last attempt
47 | if (numGuess === 11) {
48 | displayGuess(guess);
49 | displayMessage(`Game over Random number was ${randomNumber}`);
50 | endGame();
51 | } else {
52 | displayGuess(guess);
53 | //check whether the guess is correct or not, whether the number is higher or low
54 | checkGuess(guess);
55 | }
56 | }
57 | }
58 |
59 | //function to create the guess, if it is correct to validated number, tell that you won the game else reduce availibilty
60 | function checkGuess(guess) {
61 | if (guess === randomNumber) {
62 | displayMessage(`You guessed it right`);
63 | endGame();
64 | } else if (guess < randomNumber) {
65 | displayMessage(`Number is Too low`);
66 | } else if (guess > randomNumber) {
67 | displayMessage(`Number is Too high`);
68 | }
69 | }
70 |
71 | //display guess, clean the guess, update array
72 | function displayGuess(guess) {
73 | //update the userinput value with empty value or cleanup
74 | userInput.value = "";
75 | //add the values in guess slot
76 | guessSlot.innerHTML += `${guess} `;
77 | //increase the guess number
78 | numGuess++;
79 | //reduce the available guess
80 | remaining.innerHTML = `${11 - numGuess}`;
81 | }
82 |
83 | //display the message, based on user input value, if wrong reduce the number available. Print the user message
84 | function displayMessage(message) {
85 | //print the message here
86 | lowOrHi.innerHTML = `${message}
`; 87 | } 88 | 89 | function endGame() { 90 | //first clear the input values 91 | userInput.value = ""; 92 | //restrict the userinput, so that no new value to be added 93 | userInput.setAttribute("disabled", ""); 94 | p.classList.add("button"); 95 | p.innerHTML = `Start new Game
`; 96 | startOver.appendChild(p); 97 | playGame = false; 98 | newGame(); 99 | } 100 | 101 | function newGame() { 102 | const newGameButton = document.querySelector("#newGame"); 103 | newGameButton.addEventListener("click", function (e) { 104 | // e.preventDefault(); 105 | randomNumber = parseInt(Math.random() * 100 + 1); 106 | //reset the previous value 107 | prevGuess = []; 108 | numGuess = 1; 109 | guessSlot.innerHTML = ""; 110 | remaining.inner = `${11 - numGuess}`; 111 | userInput.removeAttribute("disabled"); 112 | startOver.removeChild(p); 113 | playGame = true; 114 | }); 115 | } 116 | -------------------------------------------------------------------------------- /src/07_projects/4-GuessNumber/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
20 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/src/07_projects/4-GuessNumber/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-family: sans-serif;
3 | }
4 |
5 | body {
6 | width: 300px;
7 | max-width: 750px;
8 | min-width: 480px;
9 | margin: 0 auto;
10 | background-color: #212121;
11 | padding-top: 10px;
12 | }
13 |
14 | .lastResult {
15 | color: white;
16 | padding: 7px;
17 | }
18 |
19 | .guesses {
20 | color: white;
21 | padding: 7px;
22 | }
23 |
24 | button {
25 | background-color: #141414;
26 | color: #fff;
27 | width: 250px;
28 | height: 50px;
29 | border-radius: 25px;
30 | font-size: 30px;
31 | border-style: none;
32 | margin-top: 30px;
33 | /* margin-left: 50px; */
34 | }
35 |
36 | #subt {
37 | background-color: #161616;
38 | color: #ffffff;
39 | width: 200px;
40 | height: 50px;
41 | border-radius: 10px;
42 | font-size: 20px;
43 | border-style: none;
44 | margin-top: 50px;
45 | /* margin-left: 75px; */
46 | }
47 |
48 | #guessField {
49 | color: #000;
50 | width: 250px;
51 | height: 50px;
52 | font-size: 30px;
53 | border-style: none;
54 | margin-top: 25px;
55 |
56 | /* margin-left: 50px; */
57 | border: 5px solid #6c6d6d;
58 | text-align: center;
59 | }
60 |
61 | #guess {
62 | font-size: 55px;
63 | /* margin-left: 90px; */
64 | margin-top: 120px;
65 | color: #fff;
66 | }
67 |
68 | .guesses {
69 | background-color: #7a7a7a;
70 | }
71 |
72 | #wrapper {
73 | box-sizing: border-box;
74 | text-align: center;
75 | width: 450px;
76 | height: 550px;
77 | background-color: #474747;
78 | color: #fff;
79 | font-size: 25px;
80 | }
81 |
82 | h1 {
83 | background-color: #161616;
84 |
85 | color: #fff;
86 | text-align: center;
87 | }
88 |
89 | p {
90 | font-size: 16px;
91 | text-align: center;
92 | }
93 | a {
94 | padding: 5px;
95 | border: 1ps solid #000;
96 | border-radius: 4px;
97 | display: inline;
98 | color: #000;
99 | background-color: #ccc;
100 | text-decoration: none;
101 | }
102 |
--------------------------------------------------------------------------------
/src/07_projects/5-keyboard/chaiaurcode.js:
--------------------------------------------------------------------------------
1 | const insert = document.querySelector("#insert");
2 |
3 | //add event listenenr on whole window
4 | window.addEventListener("keydown", function (e) {
5 | insert.innerHTML = `
6 | Number guessing game
21 |Try and guess a random number between 1 and 100.
22 |You have 10 attempts to guess the right number.
23 | 24 | 29 | 30 |
31 |
35 | Previous Guesses:
32 |Guesses Remaining: 10
33 | 34 |
7 |
8 |
19 |
20 | `;
21 | });
22 |
--------------------------------------------------------------------------------
/src/07_projects/5-keyboard/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | | Key | 10 |Keycode | 11 |Code | 12 |
|---|---|---|
| ${e.key === " " ? "Space" : e.key} | 15 |${e.keyCode} | 16 |${e.code} | 17 |
40 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/src/07_projects/5-keyboard/style.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HSarfaraz/chai-aur-javascript/83873deb632493918af6f47304a4e89432cb6c96/src/07_projects/5-keyboard/style.css
--------------------------------------------------------------------------------
/src/07_projects/6-UnlimitedColors/chaiaurcode.js:
--------------------------------------------------------------------------------
1 | //Generate random color
2 |
3 | const randomColor = function () {
4 | const hexValue = "0123456789ABCDEF";
5 | let color = "#";
6 |
7 | for (let i = 0; i < 6; i++) {
8 | color += hexValue[Math.floor(Math.random() * 16)];
9 | }
10 | return color;
11 | };
12 |
13 | //we will get the generated value, we need 16 value, so we will get value from 0 to 16
14 | // console.log(Math.floor(Math.random() * 16));
15 |
16 | // console.log(randomColor());
17 | let intervalId;
18 | const startChangingColor = function () {
19 | if (!intervalId) {
20 | intervalId = setInterval(changeBGColor, 1000);
21 | }
22 | function changeBGColor() {
23 | document.body.style.backgroundColor = randomColor();
24 | }
25 | };
26 | document.querySelector("#start").addEventListener("click", startChangingColor);
27 | const stopChangingColor = function () {
28 | clearInterval(intervalId);
29 | intervalId = null;
30 | };
31 | document.querySelector("#stop").addEventListener("click", stopChangingColor);
32 |
--------------------------------------------------------------------------------
/src/07_projects/6-UnlimitedColors/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
41 |
43 | Press the key and watch magic
42 | Start should change the Background color every second
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/07_projects/6-UnlimitedColors/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HSarfaraz/chai-aur-javascript/83873deb632493918af6f47304a4e89432cb6c96/src/07_projects/6-UnlimitedColors/style.css -------------------------------------------------------------------------------- /src/07_projects/projectset1.md: -------------------------------------------------------------------------------- 1 | # Projects related to DOM 2 | 3 | ## Project link 4 | 5 | [Click here](https://stackblitz.com/edit/dom-project-chaiaurcode?file=index.html) 6 | 7 | # Solution Code 8 | 9 | ## Project 1 10 | 11 | ```javascript 12 | console.log("Sarfaraz"); 13 | const buttons = document.querySelectorAll(".button"); 14 | const body = document.querySelector("body"); 15 | 16 | //As we got nodelist, so we can use forEach loop 17 | buttons.forEach(function (button) { 18 | console.log(button); 19 | //apply event listener on this button: means need to apply to listen 20 | button.addEventListener("click", function (e) { 21 | console.log(e); 22 | console.log(e.target); 23 | //check the id in target of the event 24 | if (e.target.id === "grey") { 25 | body.style.backgroundColor = e.target.id; 26 | } 27 | if (e.target.id === "white") { 28 | body.style.backgroundColor = e.target.id; 29 | } 30 | if (e.target.id === "blue") { 31 | body.style.backgroundColor = e.target.id; 32 | } 33 | if (e.target.id === "yellow") { 34 | body.style.backgroundColor = e.target.id; 35 | } 36 | }); 37 | }); 38 | ``` 39 | 40 | ## Project 2 41 | 42 | ```javascript 43 | // we will get the form 44 | const form = document.querySelector("form"); 45 | 46 | //form submition will be post, so we need to stop the submission 47 | //on submit click, get the values of height and weight 48 | form.addEventListener("submit", function (e) { 49 | //to stop the default submission 50 | e.preventDefault(); 51 | 52 | //step to get the value of input 53 | //parseInt: convert the string value into int 54 | const height = parseInt(document.querySelector("#height").value); 55 | const weight = parseInt(document.querySelector("#weight").value); 56 | const results = document.querySelector("#results"); 57 | 58 | //apply some checks, if those checks are correct than add the values 59 | //height should not be empty 60 | if (height === "" || height < 0 || isNaN(height)) { 61 | results.innerHTML = `Please give a valid height ${height}`; 62 | // height.innerHTML = ''; 63 | // weight.innerHTML = ''; 64 | } else if (weight === "" || weight < 0 || isNaN(weight)) { 65 | results.innerHTML = `Please give a valid weight ${weight}`; 66 | } else { 67 | //if everything is fine, then calculate the BMI 68 | const bmi = (weight / ((height * height) / 10000)).toFixed(2); 69 | 70 | //Show the results 71 | 72 | //check the result, whether it is under weight or over weight 73 | if (bmi < 18.6) { 74 | results.innerHTML = ` You have under weight of ${bmi}`; 75 | } else if (bmi > 18.6 && bmi < 24.6) { 76 | results.innerHTML = ` You have Normal Range of ${bmi}`; 77 | } else if (bmi > 24.6) { 78 | results.innerHTML = ` You have over weight of ${bmi}`; 79 | } 80 | } 81 | }); 82 | ``` 83 | 84 | ## Project 3 85 | 86 | ```javascript 87 | // We can use querySelector, but we are using getElementById 88 | // const clock = document.querySelector("#clock"); 89 | const clock = document.getElementById("clock"); 90 | console.log(clock); 91 | 92 | //we need to update the date and run it everytime 93 | //setInterval controls the interval, we set the time, it will run continuesly 94 | 95 | setInterval(function () { 96 | let date = new Date(); 97 | // console.log(date.toLocaleTimeString()); 98 | clock.innerHTML = date.toLocaleTimeString(); 99 | }, 1000); 100 | ``` 101 | 102 | ## Project 4 103 | 104 | ```javascript 105 | let randomNumber = parseInt(Math.random() * 100 + 1); 106 | 107 | const submit = document.querySelector("#subt"); 108 | //get user input 109 | const userInput = document.querySelector("#guessField"); 110 | const guessSlot = document.querySelector(".guesses"); 111 | //show the last result 112 | const remaining = document.querySelector(".lastResult"); 113 | const lowOrHi = document.querySelector(".lowOrHi"); 114 | const startOver = document.querySelector(".resultParas"); 115 | 116 | //to create the paragraph 117 | const p = document.querySelector("p"); 118 | 119 | //store the value in array 120 | let prevGuess = []; 121 | let numGuess = 1; 122 | let playGame = true; 123 | 124 | //logic of the project 125 | 126 | //check, if it is available for game or not or user is allowed to play game or not 127 | if (playGame) { 128 | submit.addEventListener("click", function (e) { 129 | //prevent the value to send 130 | e.preventDefault(); 131 | //select the user input 132 | const guess = parseInt(userInput.value); 133 | console.log(guess); 134 | //pass the function 135 | validateGuess(guess); 136 | }); 137 | } 138 | 139 | //Create the function to validate between 1 to 100 140 | function validateGuess(guess) { 141 | if (isNaN(guess)) { 142 | alert("Please enter a valid number"); 143 | } else if (guess < 1) { 144 | alert("Please enter a number more than 1"); 145 | } else if (guess > 100) { 146 | alert("Please enter a number less than 100"); 147 | } else { 148 | //push in array 149 | prevGuess.push(guess); 150 | //check is this last attempt 151 | if (numGuess === 11) { 152 | displayGuess(guess); 153 | displayMessage(`Game over Random number was ${randomNumber}`); 154 | endGame(); 155 | } else { 156 | displayGuess(guess); 157 | //check whether the guess is correct or not, whether the number is higher or low 158 | checkGuess(guess); 159 | } 160 | } 161 | } 162 | 163 | //function to create the guess, if it is correct to validated number, tell that you won the game else reduce availibilty 164 | function checkGuess(guess) { 165 | if (guess === randomNumber) { 166 | displayMessage(`You guessed it right`); 167 | endGame(); 168 | } else if (guess < randomNumber) { 169 | displayMessage(`Number is Too low`); 170 | } else if (guess > randomNumber) { 171 | displayMessage(`Number is Too high`); 172 | } 173 | } 174 | 175 | //display guess, clean the guess, update array 176 | function displayGuess(guess) { 177 | //update the userinput value with empty value or cleanup 178 | userInput.value = ""; 179 | //add the values in guess slot 180 | guessSlot.innerHTML += `${guess} `; 181 | //increase the guess number 182 | numGuess++; 183 | //reduce the available guess 184 | remaining.innerHTML = `${11 - numGuess}`; 185 | } 186 | 187 | //display the message, based on user input value, if wrong reduce the number available. Print the user message 188 | function displayMessage(message) { 189 | //print the message here 190 | lowOrHi.innerHTML = `${message}
`; 191 | } 192 | 193 | function endGame() { 194 | //first clear the input values 195 | userInput.value = ""; 196 | //restrict the userinput, so that no new value to be added 197 | userInput.setAttribute("disabled", ""); 198 | p.classList.add("button"); 199 | p.innerHTML = `Start new Game
`; 200 | startOver.appendChild(p); 201 | playGame = false; 202 | newGame(); 203 | } 204 | 205 | function newGame() { 206 | const newGameButton = document.querySelector("#newGame"); 207 | newGameButton.addEventListener("click", function (e) { 208 | // e.preventDefault(); 209 | randomNumber = parseInt(Math.random() * 100 + 1); 210 | //reset the previous value 211 | prevGuess = []; 212 | numGuess = 1; 213 | guessSlot.innerHTML = ""; 214 | remaining.inner = `${11 - numGuess}`; 215 | userInput.removeAttribute("disabled"); 216 | startOver.removeChild(p); 217 | playGame = true; 218 | }); 219 | } 220 | ``` 221 | 222 | ## Project 6 223 | 224 | ```javascript 225 | //Generate random color 226 | 227 | const randomColor = function () { 228 | const hexValue = "0123456789ABCDEF"; 229 | let color = "#"; 230 | 231 | for (let i = 0; i < 6; i++) { 232 | color += hexValue[Math.floor(Math.random() * 16)]; 233 | } 234 | return color; 235 | }; 236 | 237 | //we will get the generated value, we need 16 value, so we will get value from 0 to 16 238 | // console.log(Math.floor(Math.random() * 16)); 239 | 240 | // console.log(randomColor()); 241 | let intervalId; 242 | const startChangingColor = function () { 243 | if (!intervalId) { 244 | intervalId = setInterval(changeBGColor, 1000); 245 | } 246 | function changeBGColor() { 247 | document.body.style.backgroundColor = randomColor(); 248 | } 249 | }; 250 | document.querySelector("#start").addEventListener("click", startChangingColor); 251 | const stopChangingColor = function () { 252 | clearInterval(intervalId); 253 | intervalId = null; 254 | }; 255 | document.querySelector("#stop").addEventListener("click", stopChangingColor); 256 | ``` 257 | 258 | ## Project 5 259 | 260 | ```javascript 261 | const insert = document.querySelector("#insert"); 262 | 263 | //add event listenenr on whole window 264 | window.addEventListener("keydown", function (e) { 265 | insert.innerHTML = ` 266 |
267 |
268 |
279 |
280 | `;
281 | });
282 | ```
283 |
--------------------------------------------------------------------------------
/src/08-events/eventsbasics.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HSarfaraz/chai-aur-javascript/83873deb632493918af6f47304a4e89432cb6c96/src/08-events/eventsbasics.js
--------------------------------------------------------------------------------
/src/08-events/one.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | | Key | 270 |Keycode | 271 |Code | 272 |
|---|---|---|
| ${e.key === " " ? "Space" : e.key} | 275 |${e.keyCode} | 276 |${e.code} | 277 |
Amazing images
12 | 13 |-
14 |
16 | 
18 | 
20 | 
22 | 
24 |
Chai aur javascript
10 | 11 | 12 | 13 | 34 | 35 | -------------------------------------------------------------------------------- /src/08-events/two-setTimeout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |Chai aur code
10 | 11 | 12 | 34 | 35 | -------------------------------------------------------------------------------- /src/09_advance_one/ApiRequest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |10 | Value State Description 11 | 0 UNSENT Client has been created. open() not called yet. 12 | 1 OPENED open() has been called. 13 | 2 HEADERS_RECEIVED send() has been called, and headers and status are available. 14 | 3 LOADING Downloading; responseText holds partial data. 15 | 4 DONE The operation is complete. 16 |17 | 18 |
19 | ![avatar image]()
20 | Follower count: 21 |
22 |
23 |
50 |
51 |
--------------------------------------------------------------------------------
/src/09_advance_one/promises.js:
--------------------------------------------------------------------------------
1 | //creating the promise
2 | const promiseOne = new Promise(function (resolve, reject) {
3 | //do an async calls like DB Calls, cryptography calls, network related calls
4 | setTimeout(function () {
5 | console.log("Aysnc task is complete");
6 | resolve();
7 | }, 1000);
8 | });
9 |
10 | //consume the promise
11 | promiseOne.then(function () {
12 | console.log("promise consumed");
13 | });
14 |
15 | //------------------- 2nd way of creating the promise directly
16 | new Promise(function (resolve, reject) {
17 | setTimeout(function () {
18 | console.log("Async task 2");
19 | resolve();
20 | }, 1000);
21 | }).then(function () {
22 | console.log("async task 2 resolved");
23 | });
24 |
25 | //------------------ 3rd way of creating the promise: accessing the data
26 | const promiseThree = new Promise(function (resolve, reject) {
27 | setTimeout(function () {
28 | console.log("Aynsc task 3");
29 | resolve({ username: "chai", email: "chai@example.com" });
30 | }, 1000);
31 | });
32 |
33 | promiseThree.then(function (user) {
34 | console.log("Async task 3 is executed", user);
35 | });
36 |
37 | //-------------------- 4th way of creating the promise: lets see both resolve, reject
38 | //create the promise
39 | const promiseFour = new Promise(function (resolve, reject) {
40 | setTimeout(function () {
41 | console.log("Async task 4");
42 | let error = true;
43 | //if there is no error then resolve it
44 | if (!error) {
45 | resolve({ username: "hitesh", password: "123" });
46 | } else {
47 | reject("ERROR: Something went wrong");
48 | }
49 | }, 1000);
50 | });
51 |
52 | //consume the promise
53 | promiseFour
54 | .then((user) => {
55 | console.log("task 4 then");
56 | //lets see how to avoid callback hell
57 | console.log(user);
58 | return user.username;
59 | })
60 | .then((username) => {
61 | console.log("task 4 username");
62 | console.log(username);
63 | })
64 | .catch(function (error) {
65 | console.log(error);
66 | })
67 | .finally(function () {
68 | console.log("The promise is either resolve or reject");
69 | });
70 |
71 | //-------------------------- 5ht way to create the promise
72 | //create a promise
73 | const promiseFive = new Promise(function (resolve, reject) {
74 | setTimeout(function () {
75 | console.log("Async code 5");
76 | let error = false;
77 | if (!error) {
78 | console.log("resolved");
79 | resolve({ username: "javascript", password: "123" });
80 | } else {
81 | reject("ERROR: JS went wrong");
82 | }
83 | }, 1000);
84 | });
85 |
86 | //consume a promise
87 | async function consumePromiseFive() {
88 | try {
89 | //here i am just waiting, whether the result is resolved or rejected
90 | const response = await promiseFive;
91 | console.log("response:", response);
92 | } catch (error) {
93 | console.log(error);
94 | }
95 | }
96 |
97 | consumePromiseFive();
98 |
99 | //------------------------------- fetch using async await
100 |
101 | const url = "https://jsonplaceholder.typicode.com/users";
102 |
103 | async function getAllUsers() {
104 | try {
105 | const response = await fetch(url);
106 | console.log(response);
107 | const data = await response.json();
108 | console.log("response using fetch ", data);
109 | } catch (error) {
110 | console.log("Error:", error);
111 | }
112 | }
113 |
114 | getAllUsers();
115 |
116 | //------------------------- fetch using .then .catch: no need to write try-catch
117 | fetch(url)
118 | .then((response) => {
119 | return response.json();
120 | })
121 | .then((data) => {
122 | console.log(data);
123 | })
124 | .catch((error) => console.log(error));
125 |
--------------------------------------------------------------------------------
/src/10_classes_and_oop/1-oop.js:
--------------------------------------------------------------------------------
1 | const user = {
2 | username: "Hitesh",
3 | loginCount: 8,
4 | signedIn: true,
5 | getUserDetails: function () {
6 | // console.log("Got user details from DB");
7 | // console.log(`Username ${this.username}`);
8 | console.log(this);
9 | }
10 | };
11 | /*
12 | console.log(user["username"]);
13 | console.log(user.getUserDetails()); */
14 |
15 | //contructor function<
16 | //here with the help of new keyword, we can create multiple instances
17 | /* const promiseOne = new Promise()
18 | const date = new Date(); */
19 |
20 | function User(username, loginCount, isLoggedIn) {
21 | this.username = username;
22 | this.loginCount = loginCount;
23 | this.isLoggedIn = isLoggedIn;
24 |
25 | this.greeting = function () {
26 | console.log(`Welcome ${this.username}`);
27 | };
28 | return this;
29 | }
30 |
31 | const userOne = new User("Hitesh");
32 | const userTwo = new User("ChaiAurCode", 11, false);
33 |
34 | console.log(userOne.constructor);
35 | console.log(userTwo);
36 |
--------------------------------------------------------------------------------
/src/10_classes_and_oop/10-getter_setter.js:
--------------------------------------------------------------------------------
1 | class User {
2 | constructor(email, password) {
3 | this.email = email;
4 | this.password = password;
5 | }
6 | //getter method, it is compulsory to setter and if getter is written
7 | //getter helps to get the value
8 | get password() {
9 | // return this._password.toUpperCase();
10 | return `${this._password} Hitesh`;
11 | }
12 |
13 | get email() {
14 | return this._email.toUpperCase();
15 | }
16 |
17 | set email(value) {
18 | this._email = value;
19 | }
20 |
21 | set password(value) {
22 | this._password = value.toUpperCase();
23 | }
24 | }
25 |
26 | const hitesh = new User("chai@fb.com", "123");
27 | console.log(hitesh.password);
28 | console.log(hitesh.email);
29 |
--------------------------------------------------------------------------------
/src/10_classes_and_oop/11_properties_get_set.js:
--------------------------------------------------------------------------------
1 | function User(email, password) {
2 | this._email = email;
3 | this._password = password;
4 |
5 | Object.defineProperty(this, "email", {
6 | get: function () {
7 | return this._email.toUpperCase();
8 | },
9 | set: function (value) {
10 | this._email = value;
11 | }
12 | });
13 |
14 | Object.defineProperty(this, "password", {
15 | get: function () {
16 | return this._password.toUpperCase();
17 | },
18 | set: function (value) {
19 | this._password = value;
20 | }
21 | });
22 | }
23 |
24 | const chai = new User("chai@chai.com", "chai");
25 | console.log(chai.email);
26 |
--------------------------------------------------------------------------------
/src/10_classes_and_oop/12-object_get_set.js:
--------------------------------------------------------------------------------
1 | const User = {
2 | _email: "h@hc.com",
3 | _password: "abc",
4 |
5 | //need to write setters and getter, so that others cant access it.
6 | get email() {
7 | return this._email.toUpperCase();
8 | },
9 |
10 | get password() {
11 | return this._password.toUpperCase();
12 | },
13 |
14 | set email(value) {
15 | this._email = value;
16 | },
17 |
18 | set password(value) {
19 | this._password = value;
20 | }
21 | };
22 |
23 | //create User object using factory function
24 | const tea = Object.create(User);
25 | console.log(tea.email);
26 |
--------------------------------------------------------------------------------
/src/10_classes_and_oop/2-Object.js:
--------------------------------------------------------------------------------
1 | function multiplyByFive(num) {
2 | return num * 5;
3 | }
4 |
5 | multiplyByFive.power = 2;
6 |
7 | console.log(multiplyByFive(5));
8 | console.log(multiplyByFive.power);
9 | console.log(multiplyByFive.prototype);
10 |
11 | function createUser(username, score) {
12 | this.username = username;
13 | this.score = score;
14 | }
15 |
16 | //create a function which increase the score
17 | createUser.prototype.increment = function () {
18 | this.score++;
19 | };
20 |
21 | createUser.prototype.printMe = function () {
22 | console.log(`Score is ${this.score}`);
23 | };
24 |
25 | //when a call is happen, it is necessary to understand the context where to go,
26 | //as your mom, dad call, her we understand the context who called, so using this, we can mention the current context
27 | const chai = new createUser("chai", 25);
28 | const tea = new createUser("tea", 250);
29 |
30 | chai.printMe();
31 |
--------------------------------------------------------------------------------
/src/10_classes_and_oop/3-Prototype.js:
--------------------------------------------------------------------------------
1 | let myName = "hitesh ";
2 | let myChannel = "chai ";
3 |
4 | // console.log(myName.trim().length);
5 | // console.log(myName.truelength); //need to resolve in future
6 |
7 | let myHero = ["thor", "spiderman"];
8 |
9 | let heroPower = {
10 | thor: "hammer",
11 | spiderman: "sling",
12 |
13 | getSpiderPower: function () {
14 | console.log(`Spidy power is ${this.spiderman}`);
15 | }
16 | };
17 |
18 | Object.prototype.hitesh = function () {
19 | console.log(`Hitesh is present in all objects`);
20 | };
21 |
22 | // heroPower.hitesh();
23 | // myHero.hitesh();
24 |
25 | //let modify the power of array
26 | Array.prototype.heyHitesh = function () {
27 | console.log(`Hitesh says hello`);
28 | };
29 |
30 | // heroPower.heyHitesh();
31 | //myHero.heyHitesh(); //array can access the method
32 |
33 | //------------------------------ Inheritance:
34 | const user = {
35 | name: "chai",
36 | emai: "chai@google.com"
37 | };
38 | const Teacher = {
39 | makeVideo: true
40 | };
41 |
42 | const TeachingSupport = {
43 | isAvailable: false
44 | };
45 |
46 | const TASupport = {
47 | makeAssignment: "JS assignment",
48 | fullTime: true,
49 | ___proto__: TeachingSupport //Protypal Inheritance, it is out dated
50 | };
51 |
52 | //modern syntax of prototypal inheritance
53 | Object.setPrototypeOf(TeachingSupport, Teacher);
54 |
55 | //Scenario: need to calculate the true length of the string
56 | let anotherUsername = "ChaiAurCode ";
57 | String.prototype.truelength = function () {
58 | // console.log(`${this.anotherUsername.trim().length}`);
59 | console.log(`${this}`);
60 | console.log(`True length is: ${this.trim().length}`);
61 | };
62 | anotherUsername.truelength();
63 |
64 | "hitesh".truelength();
65 | "icetea".truelength();
66 |
--------------------------------------------------------------------------------
/src/10_classes_and_oop/4-call.js:
--------------------------------------------------------------------------------
1 | function SetUsername(username) {
2 | //complex DB Call
3 | this.username = username;
4 | console.log("called");
5 | }
6 |
7 | function createUser(username, email, password) {
8 | SetUsername.call(this, username);
9 |
10 | this.email = email;
11 | this.password = password;
12 | }
13 |
14 | const chai = new createUser("chai", "chai@fb.com", "123");
15 | console.log(chai);
16 |
--------------------------------------------------------------------------------
/src/10_classes_and_oop/5-myClasses.js:
--------------------------------------------------------------------------------
1 | // After ES6
2 |
3 | //class is the keyword in javascript
4 | // we can add properties and functions here
5 | //constructor is called when object is initialised from class with the help of new keyward
6 |
7 | /* class User{
8 | constructor(username, email, password){
9 | this.username = username;
10 | this.email = email;
11 | this.password = password;
12 | }
13 |
14 | encryptPassword(){
15 | return `${this.password}abc`
16 | }
17 | changeUsername(){
18 | return `${this.username.toUpperCase()}`
19 | }
20 | }
21 |
22 | //create the new instance
23 | const chai = new User("chai", "chai@gmail.com", "123");
24 | console.log(chai.encryptPassword());
25 | console.log(chai.changeUsername());
26 | */
27 |
28 | //------------------------- Behind the scene---------------------------------
29 | function User(username, email, password) {
30 | this.username = username;
31 | this.email = email;
32 | this.password = password;
33 | }
34 |
35 | //can inject the properties
36 | User.prototype.encryptPassword = function () {
37 | return `${this.password}abc`;
38 | };
39 |
40 | User.prototype.changeUsername = function () {
41 | return `${this.username.toUpperCase()}`;
42 | };
43 |
44 | const tea = new User("tea", "tea@gmail.com", "123");
45 | console.log(tea.encryptPassword());
46 | console.log(tea.changeUsername());
47 |
--------------------------------------------------------------------------------
/src/10_classes_and_oop/6-inheritance.js:
--------------------------------------------------------------------------------
1 | class User {
2 | constructor(username) {
3 | this.username = username;
4 | }
5 | logMe() {
6 | console.log(`USERNAME Is ${this.username}`);
7 | }
8 | }
9 |
10 | class Teacher extends User {
11 | constructor(username, email, password) {
12 | super(username); //it will do this, this.username = username;
13 | this.email = email;
14 | this.password = password;
15 | }
16 |
17 | addCourse() {
18 | console.log(`A new course was added by ${this.username}`);
19 | }
20 | }
21 |
22 | //create the object of teacher
23 | const chai = new Teacher("chai", "chai@teacher.com", "123");
24 | chai.addCourse();
25 | chai.logMe();
26 |
27 | const masalaChai = new User("masalaChai");
28 | masalaChai.logMe();
29 |
30 | console.log(chai === masalaChai);
31 | console.log(chai === Teacher);
32 |
33 | console.log(chai instanceof User);
34 |
--------------------------------------------------------------------------------
/src/10_classes_and_oop/7-staticprop.js:
--------------------------------------------------------------------------------
1 | //create class user
2 | class User {
3 | constructor(username) {
4 | this.username = username;
5 | }
6 |
7 | logMe() {
8 | console.log(`Username: ${this.username}`);
9 | }
10 |
11 | //asap give the id when user is created
12 | static createId() {
13 | return `123`;
14 | }
15 | }
16 |
17 | const hitesh = new User("hitesh");
18 | // console.log(hitesh.createId());
19 |
20 | class Teacher extends User {
21 | constructor(username, email) {
22 | super(username);
23 | this.email = email;
24 | }
25 | }
26 |
27 | const iphone = new Teacher("iphone", "1@phone.com");
28 | console.log(iphone.createId()); // cant allow to acces, as it is static method
29 |
--------------------------------------------------------------------------------
/src/10_classes_and_oop/8-bind.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 20 | Follower count: 21 |