├── 01_introduction_to_js ├── index.html └── script.js ├── 02_datatypes ├── index.html └── script.js ├── 03_operators ├── index.html └── script.js ├── 04_logic&controlflow ├── .vscode │ └── settings.json ├── index.html └── script.js ├── 05_functions ├── index.html └── script.js ├── 06_events ├── .vscode │ └── settings.json ├── index.html └── script.js ├── 07_eventsProject ├── .vscode │ └── settings.json ├── images │ ├── image1.png │ ├── image2.png │ ├── image3.jpg │ └── image4.png ├── index.html └── script.js ├── 08_array ├── index.html └── script.js ├── 09_objects ├── index.html └── script.js ├── 10_objects ├── index.html └── script.js ├── 11_fns_obje_arr ├── index.html └── script.js ├── 13_arrow_fns ├── index.html └── script.js ├── 14_switch ├── index.html └── script.js ├── 15_truthy&falsy ├── index.html └── script.js ├── 16_for-loop ├── index.html ├── new.py └── script.js ├── 17_while&dowhile ├── index.html └── script.js ├── 18_high-order-arr-loop ├── index.html └── script.js ├── 19_for-each-loop ├── index.html └── script.js ├── 20-filter-map ├── index.html └── script.js ├── 21-map ├── index.html └── script.js ├── 22-reducejs ├── index.html └── script.js ├── 23_DOM └── index.html ├── 24-Dom2 └── index.html ├── 25_Dom3 ├── index.html └── style.css ├── 26-settime&clrTime ├── index.html └── script.js ├── 27_timeIntervels&projects ├── .vscode │ └── settings.json ├── DOom-project-1 │ ├── index.html │ └── script.js ├── index.html └── script.js ├── 28_projectRandomclrChanger ├── .vscode │ └── settings.json ├── index.html └── script.js ├── 29-Api ├── index.html └── script.js ├── API-Project2 ├── index.html ├── script.js └── style.css ├── API-project1 ├── index.html ├── script.js └── style.css ├── AdvanceThemePicker ├── index.html └── script.js ├── BMI calculator ├── index.html └── script.js ├── Dom-project3 ├── index.html └── script.js ├── To-Do-List ├── .vscode │ └── settings.json ├── images │ ├── checked.png │ ├── icon.png │ └── unchecked.png ├── index.html ├── script.js └── style.css ├── chatbot.txt ├── colorPicker ├── index.html └── script.js ├── dom-project2 ├── .vscode │ └── settings.json ├── index.html ├── script.js └── style.css ├── dom-project4 ├── .vscode │ └── settings.json ├── DOom-project-1 │ ├── index.html │ └── script.js ├── index.html └── script.js ├── dom-project5 ├── index.html └── script.js ├── img glry ├── .vscode │ └── settings.json ├── index.html └── script.js ├── jsm projects ├── index.html ├── script.js └── style.css ├── projects ├── project-2_converter │ ├── index.html │ └── script.js └── project-3_colorChanger │ ├── .vscode │ └── settings.json │ ├── index.html │ └── script.js ├── promises&Api ├── index.html └── script.js ├── promises ├── index.html └── script.js ├── test.txt └── test └── script.js /01_introduction_to_js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Introduction to javascript 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /01_introduction_to_js/script.js: -------------------------------------------------------------------------------- 1 | // console.log("Hello , World!"); 2 | //this is for checking 3 | 4 | // variables and datatypes 5 | let variableName = 'Hello World'; 6 | // console.log(variableName); 7 | 8 | variableName = 'Muhammad'; 9 | console.log(variableName); 10 | 11 | 12 | 13 | // one more method is const jise hum re assign nahi kar sakte 14 | 15 | // steps 16 | // 1- identifier must be unique 17 | // 2- name of the identifer should not be a any js reserverd key wordds 18 | // 3- the name sholf be start with a later or _,$ . 19 | 20 | // const function = xxxxxxxxxx 21 | 22 | 23 | 24 | // note - js is a case sensitive language 25 | 26 | -------------------------------------------------------------------------------- /02_datatypes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /02_datatypes/script.js: -------------------------------------------------------------------------------- 1 | //..................strings......................... 2 | // let singleQoutes = 'im a single qoutes string '; 3 | // let doubleQoutes = "im a double qoutes string"; 4 | 5 | // let backTicks = `im a backTicks string`; 6 | 7 | 8 | // let name = 'muhammad'; 9 | // let message = `hello, ${name}, Wellcome `; 10 | // console.log(message); 11 | 12 | // // let test = `2 + 2`; 13 | // // console.log(test); 14 | 15 | // let test = `${2 + 2}`; 16 | // console.log(test); 17 | 18 | 19 | //.......................Numbers......................... 20 | //note-- javascript is a untyped prohramming language 21 | 22 | // const firstNumber = 6; 23 | // const secondNumber =0.5645; 24 | 25 | // // const result = firstNumber + secondNumber ; 26 | // const result = firstNumber * secondNumber ; 27 | 28 | // // console.log(firstNumber); 29 | // // console.log(secondNumber); 30 | // console.log(result); 31 | 32 | 33 | // .....................Booleans............... 34 | 35 | // true == yes ,corerct , 1 36 | // false == no , incorrect , 0 37 | 38 | // const isCool = true; 39 | // // console.log(isCool); 40 | 41 | // // example 42 | // if (isCool) { 43 | // console.log("Hi man, You'r Cool ") 44 | // } 45 | // else{ 46 | // console.log('Oh, hi') 47 | // } 48 | 49 | // ex-2 50 | // const age = 23; 51 | // console.log(age > 23); 52 | 53 | // .....................Null.............. 54 | 55 | // let age = null; 56 | 57 | // age = 23; 58 | // console.log(typeof age) 59 | // console.log(typeof null) 60 | 61 | // ye javascript men ak bht bara bug he jo solve nahi kar sakte ab 62 | 63 | // console.log(age); 64 | 65 | // .................undefined .......... 66 | 67 | // let x; 68 | // let x = undefined; 69 | // console.log(x); 70 | // console.log(typeof x) 71 | // console.log(typeof undefined) 72 | 73 | // ..........................Objects.................. 74 | 75 | // const person={ 76 | 77 | // name: 'noman', 78 | // age: 23 79 | // } 80 | // console.log(person); 81 | // Dot Notation 82 | // const detail = `My name is ${person.name} and i'm ${person.age} yrs Old`; 83 | 84 | // console.log(detail); 85 | 86 | -------------------------------------------------------------------------------- /03_operators/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /03_operators/script.js: -------------------------------------------------------------------------------- 1 | // ....................operators........... 2 | // operators ka answer hamesha boolean hota he 3 | // const a = 13; 4 | // const b = 25; 5 | 6 | // console.log(a>=b); 7 | // console.log(a<=b); 8 | // console.log(ab); 10 | // console.log(a==b); 11 | 12 | // Two types of arthimatic operators 13 | // 1- strict equality (===) 14 | // 2- lose equality (==) 15 | 16 | // 1- it compare both value and data types 17 | // 1- it compare only values not datatypes 18 | 19 | // lets check them 20 | 21 | // console.log( 5 == '5') // true 22 | // console.log( 5 === '5') //false 23 | 24 | // javascript ka pagal pan 25 | 26 | // console.log(0 == '') 27 | // console.log('0' == ''); 28 | 29 | // console.log(true == '1'); 30 | // console.log(true === '1'); 31 | 32 | // note : always use strict equality or === sighn 33 | 34 | 35 | // .................Logical operators................ 36 | 37 | 38 | // AND && => when all the operands are true 39 | 40 | // console.log( true && true ); 41 | // console.log( true && true && false ); 42 | 43 | // OR operator || at least one operand is true 44 | // console.log(true || true ); 45 | // console.log(true || true || false ); 46 | 47 | // NOT ! operator ==> it reverse the o/p of the given operand 48 | 49 | console.log(!true); 50 | 51 | 52 | -------------------------------------------------------------------------------- /04_logic&controlflow/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /04_logic&controlflow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /04_logic&controlflow/script.js: -------------------------------------------------------------------------------- 1 | // const age = 18; 2 | 3 | // if(age>18){ 4 | // console.log("You can Vote!"); 5 | // } else if(age === 18){ 6 | // console.log("you just turned 18"); 7 | // } 8 | // else { 9 | // console.log("Grow Up"); 10 | // } 11 | 12 | 13 | // while lopp 14 | // const i = 0; 15 | // let i = 0; 16 | // while(i<10){ 17 | // console.log(i) 18 | // i++; 19 | 20 | // } 21 | 22 | 23 | for (let i = 0; i < 10; i++) { 24 | console.log(i); 25 | 26 | } 27 | -------------------------------------------------------------------------------- /05_functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /05_functions/script.js: -------------------------------------------------------------------------------- 1 | // console.log("hello"); 2 | 3 | // functions 4 | // 1- fn decleration 5 | 6 | // function square(number) { 7 | // console.log("i'm here") 8 | // return number * number; 9 | 10 | // } 11 | 12 | // // 2- calling a function 13 | // const result = square(6); 14 | // console.log(result); 15 | 16 | // Arrow function 17 | 18 | // 19 | // const sayHi =(name)=>{ 20 | // console.log(`Hi! ${name}`); 21 | // } 22 | 23 | // sayHi("Nom"); 24 | 25 | // const sqr =(num)=>{ 26 | // return num * num; 27 | 28 | // } 29 | 30 | // const res = sqr(10); 31 | // console.log(res); 32 | 33 | 34 | // const sqr1 =(num)=> num * num; 35 | 36 | 37 | 38 | // const res1 = sqr(10); 39 | // console.log(res1); 40 | 41 | 42 | 43 | // ........................ litle bit complex......... 44 | 45 | // function sayMyName (){ 46 | 47 | // console.log("N") 48 | // console.log("O") 49 | // console.log("M") 50 | // console.log("A") 51 | // console.log("N") 52 | // } 53 | 54 | // sayMyName(); 55 | 56 | // for add two numbers 57 | 58 | // function addTwoNumbers(number1 , number2){ 59 | // console.log(number1 + number2) ; 60 | // } 61 | // addTwoNumbers(); 62 | // ye print kare ga NAN q k hum ne koi argument pass nahi kia he 63 | 64 | 65 | // function addTwoNumbers(number1 , number2){ 66 | // console.log(number1 + number2) ; 67 | // } 68 | // // addTwoNumbers(3,4); 69 | // // addTwoNumbers(3, '4'); 70 | // addTwoNumbers(3, 'ab'); 71 | 72 | 73 | // most important concept releted to return 74 | 75 | // function addTwoNumbers(number1 , number2){ 76 | // console.log(number1 + number2) ; 77 | // } 78 | // const result = addTwoNumbers(3,4); 79 | // console.log(result) // is ka o/p undefine arha he q k ye result men is wakt koi value store he hi nhi 80 | 81 | // 82 | // function addTwoNumbers(number1 , number2){ 83 | // const result = (number1 + number2) ; 84 | // return result 85 | 86 | // console.log("muhammd ") // ye kabhi bhi console nhi hoga q k return jo ak cheez hogai wo ab dobara se execute nahi ho sakti he 87 | // } 88 | // const result = addTwoNumbers(3,7); 89 | // console.log("Result! " , result); 90 | 91 | // one more method 92 | 93 | // function addTwoNumbers(number1 , number2){ 94 | // return (number1 + number2) ; 95 | // } 96 | // const result = addTwoNumbers(3,8); 97 | // console.log("Result! " , result); 98 | 99 | 100 | // function useLoginMessage(username){ 101 | 102 | // return `${username} you are loged in now`; 103 | // } 104 | 105 | // // console.log(useLoginMessage()); 106 | // console.log(useLoginMessage("Nom")); 107 | 108 | 109 | // by using if statement to check if user enters its name then display login message 110 | 111 | function useLoginMessage(username){ 112 | if(!username){ 113 | console.log("please enter a user name "); 114 | return 115 | } 116 | else{ 117 | return `${username} You are logged in now`; 118 | } 119 | } 120 | console.log(useLoginMessage("")); 121 | 122 | // const a = "noman"; 123 | 124 | // console.log(typeof !a); 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | // 133 | -------------------------------------------------------------------------------- /06_events/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /06_events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Events in javascript 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /06_events/script.js: -------------------------------------------------------------------------------- 1 | // method 1 2 | // function clickBtn(){ 3 | // alert("button clicked ") 4 | // } 5 | 6 | // method 2 7 | 8 | // no need of onclick 9 | 10 | // let btn = document.getElementById("btn"); 11 | 12 | // btn.addEventListener('click', clickBtn ) 13 | 14 | // method 3 15 | // by using ananemous function 16 | 17 | // let btn = document.getElementById("btn"); 18 | 19 | // btn.addEventListener('click', function(){ 20 | // console.log('clicked') 21 | // } ) 22 | 23 | 24 | // note ---- ye we can implemet multiple events of one element at a same time 25 | // let btn1 = document.getElementById("btn"); 26 | 27 | // btn1.addEventListener('mouseover', function(){ 28 | // console.log('mouse over ') 29 | // } ) 30 | 31 | // combined method || professional method 32 | 33 | // let btn2 = document.getElementById('btn').addEventListener('click',function(){ 34 | 35 | // alert('Clicked'); 36 | 37 | // }, false) 38 | 39 | 40 | // on more important thing is 'e' 41 | 42 | let btn2 = document.getElementById('btn').addEventListener('click',function(e){ 43 | 44 | console.log(e); 45 | 46 | }, false) -------------------------------------------------------------------------------- /07_eventsProject/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /07_eventsProject/images/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Noman-Nom/My_javaScript/92c6aafcf515aeba5e643116da952411236dab36/07_eventsProject/images/image1.png -------------------------------------------------------------------------------- /07_eventsProject/images/image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Noman-Nom/My_javaScript/92c6aafcf515aeba5e643116da952411236dab36/07_eventsProject/images/image2.png -------------------------------------------------------------------------------- /07_eventsProject/images/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Noman-Nom/My_javaScript/92c6aafcf515aeba5e643116da952411236dab36/07_eventsProject/images/image3.jpg -------------------------------------------------------------------------------- /07_eventsProject/images/image4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Noman-Nom/My_javaScript/92c6aafcf515aeba5e643116da952411236dab36/07_eventsProject/images/image4.png -------------------------------------------------------------------------------- /07_eventsProject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Project on event 7 | 32 | 33 | 34 | 35 |
36 | 43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /07_eventsProject/script.js: -------------------------------------------------------------------------------- 1 | // let img1 = document.getElementById("img1").addEventListener('click', function(e){ 2 | 3 | // // alert('clicked') 4 | // console.log(e.target.parentNode) 5 | 6 | // let removeIt = e.target.parentNode; 7 | // removeIt.remove() 8 | 9 | // }, false) 10 | 11 | // one more simple method 12 | // let img1 = document.getElementById("img1").addEventListener('click', function(e){ 13 | 14 | // // alert('clicked') 15 | // console.log(e.target.parentNode) 16 | 17 | // let removeIt = e.target.parentNode; 18 | 19 | // removeIt.style.display ="none"; 20 | // }, false) 21 | 22 | 23 | // yahan par to hamre pas 4 images hen hm is trha se ak aka ko select kaar k remove karenge to ye useful method nhi he agar hamre pas 500 images hoti to ye method blkl bhi useful na hota is lie ab hum ak new method ko use karne wale hen 24 | 25 | document.querySelector("#items").addEventListener('click',function(e){ 26 | 27 | console.log(e.target.parentNode) 28 | let removeIt = e.target.parentNode; 29 | 30 | removeIt.remove(); 31 | }, false) 32 | 33 | // -------------------------------------------------------------------------------- /08_array/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Array in js 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /08_array/script.js: -------------------------------------------------------------------------------- 1 | // const arr = [1 , 2, 3 ,4 ,5 ,6 ] 2 | // const myFrnds= ["ibraheem" , "Raza" , "Ahmed" , "Waqas"] 3 | // const myArr2 = new Array(1, 2, 3 ,4 ,5) 4 | 5 | // console.log(arr[2]) 6 | 7 | // methods 8 | // arr.push(9); // is sse add hojata he arr men 9 | 10 | // arr.pop() // it will delete the last element from tha arry 11 | // arr.unshift(12); // ye arr k start mn add kr deta he pr ye useful nhi he ziada 12 | // arr.shift(); // remove from start of arr 13 | 14 | 15 | // console.log(arr.includes(56)); /// ye check kare ga k ye mojod he ya nhi he 16 | 17 | // const newArr = arr.join() // ye convert kar de ga arr ko string me 18 | // console.log(arr);s 19 | // console.log(newArr); 20 | // console.log(typeof newArr) 21 | 22 | // console.log("A", arr) // original arry 23 | // console.log("B", arr) 24 | // const myNewArr1 = arr.slice(1,3) 25 | // console.log(myNewArr1) 26 | 27 | // in men bht bara difference he 28 | 29 | // console.log("c", arr) 30 | // const myNewArr2 = arr.splice(1,3) 31 | // // console.log(arr) 32 | // console.log(myNewArr2) 33 | 34 | 35 | 36 | // little bit complex 37 | 38 | const my_frnds1 = ["ibraheem", "yaseen" , "Raza"]; 39 | const my_frnds2 = ["Ahmed", "Waqas" , "Umair"]; 40 | // my_frnds1.push(my_frnds2) 41 | // console.log(my_frnds1) 42 | // yahan par problm ye hoi he k ak arry men dosra arry shamil hogya he 43 | 44 | // is ki jagh hum concate use kar sakte the 45 | 46 | // const all_Frnds = my_frnds1.concat(my_frnds2); 47 | // console.log(all_Frnds); 48 | 49 | // concate k bad new variable men save krwana zarori tha 50 | 51 | // more easy method 52 | 53 | // const all_Frnds = [...my_frnds1,...my_frnds2] 54 | // console.log(all_Frnds) 55 | 56 | // iskja faida ye he k hum more then two arry ko bhi combine kar sakte hen 57 | 58 | 59 | // rare cases 60 | 61 | // const another_arr = [1,2,3, [7,8,9], [4,9, [5,8]]] 62 | // const solve_another_arr = another_arr.flat(Infinity); 63 | // console.log(solve_another_arr) 64 | 65 | 66 | // console.log(Array.isArray("Noman")); 67 | // console.log(Array.from("Noman")); 68 | 69 | const score1 = 100; 70 | const score2 = 200; 71 | const score3 = 300; 72 | 73 | console.log(Array.of(score1,score2,score3)) -------------------------------------------------------------------------------- /09_objects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Objects in js 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /09_objects/script.js: -------------------------------------------------------------------------------- 1 | const JsUser= { 2 | name : "muhammad Noman", 3 | "full name" : "Muhammad Noman", 4 | age: 23, 5 | email: "noman5456318@gmail.com", 6 | loggedin : false, 7 | friends : ["Raza" , "Ibrahim"] 8 | } 9 | 10 | 11 | // console.log(JsUser.email) 12 | // .notation bht ziada efficient nahi he 13 | 14 | // console.log(JsUser["email"]) 15 | // ye wlai ziada efffiecent he par use ziada . wali hoti he 16 | 17 | // reason why dot notation is not effiecent 18 | 19 | // console.log(JsUser.full name) error aye ga 20 | // console.log(JsUser["full name"]) 21 | 22 | 23 | // more detail about objects 24 | 25 | // changing is possible 26 | 27 | // JsUser.email = "nomiabc@gmail.com" 28 | 29 | // console.log(JsUser.email) 30 | 31 | 32 | // when changing is not possible 33 | 34 | // Object.freeze(JsUser) 35 | // // freze k bad object mne changing possible nhi hoti he 36 | // JsUser.email = "nomiabc@gmail.com" 37 | // console.log(JsUser.email) 38 | 39 | 40 | // object with functions 41 | 42 | 43 | // function WelcomeMessage () { 44 | // console.log(`welcome ${JsUser.name}`) 45 | 46 | // } 47 | // JsUser.greetings= WelcomeMessage(); 48 | // console.log(JsUser.greetings) 49 | 50 | // 2nd method 51 | 52 | // JsUser.greetings = function(){ 53 | // console.log(`welcome ${this.name}`) 54 | // } 55 | 56 | // console.log(JsUser.greetings()) 57 | -------------------------------------------------------------------------------- /10_objects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Objects in js 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /10_objects/script.js: -------------------------------------------------------------------------------- 1 | const tinderUser={} 2 | 3 | 4 | tinderUser.id = "123abc" 5 | tinderUser.name = "Noman" 6 | tinderUser.email = "noman@gmail.com" 7 | tinderUser.isLoggedIn = false 8 | 9 | // console.log(tinderUser);s 10 | 11 | const regularUser = { 12 | email: "some@gmail.com", 13 | fullname: { 14 | userfullname: { 15 | firstname: "hitesh", 16 | lastname: "choudhary" 17 | } 18 | } 19 | } 20 | 21 | // console.log(regularUser.fullname.userfullname) 22 | 23 | // Addition of two objects 24 | 25 | const object1 = { 26 | 1: "a", 27 | 2: "b" 28 | } 29 | const object2 = { 30 | 3: "c", 31 | 4: "d" 32 | } 33 | const object3 = { 34 | 5: "e", 35 | 6: "f" 36 | } 37 | 38 | // method 1 jis meen ak object ak andar dosra object ata he which is not good 39 | // const object4 = {object1 , object2 , object3} 40 | // console.log(object4) 41 | 42 | // method 2 efficient and useful method 43 | 44 | // const object4 = {...object1, ...object2, ...object3} 45 | // console.log(object4) 46 | 47 | 48 | // more use full methods and techniques of objects 49 | // console.log(Object.keys(tinderUser)) 50 | // console.log(Object.values(tinderUser)) 51 | // console.log(Object.entries(tinderUser)) 52 | 53 | 54 | 55 | // imp topic || Object destructuring 56 | 57 | // is ka faida ye hua k hamri jan chot gai dot notation se or lamba lamba name likhen se 58 | 59 | const course = { 60 | 61 | coruseCode : "ce-230", 62 | courseName : "Programming Fundamentals", 63 | courseInstructor : "Dr Muhammad Ghazanfar" 64 | } 65 | 66 | const {coruseCode:ccd , courseName: cnm , courseInstructor: cin } = course 67 | 68 | console.log(ccd) 69 | console.log(cnm) 70 | console.log(cin) 71 | 72 | 73 | // next topic API ad json -------------------------------------------------------------------------------- /11_fns_obje_arr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | fns-arr-obj 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /11_fns_obje_arr/script.js: -------------------------------------------------------------------------------- 1 | // function calculateCartPrice(num1){ 2 | 3 | // return num1 4 | 5 | // } 6 | // console.log(calculateCartPrice(2,3,4,5,6,7,7)) 7 | 8 | // is situation men ap kese acces karenge 9 | 10 | 11 | 12 | // by using spread 13 | // function calculateCartPrice(...num1){ 14 | 15 | // return num1 16 | 17 | // } 18 | // console.log(calculateCartPrice(2,3,4,5,6,7,)) 19 | // function calculateCartPrice(val1 ,val2,...num1){ 20 | 21 | // return (num1 ) 22 | 23 | // } 24 | // console.log(calculateCartPrice(2,3,4,5,6,7,)) 25 | 26 | // output is different 27 | 28 | 29 | // with objects 30 | 31 | // const user = { 32 | // name: "Muhammad Noman", 33 | // age : 23 34 | 35 | // } 36 | 37 | // function handleObject (anyObject){ 38 | // console.log(`Hello everyone my name is ${anyObject.name} and i'm ${anyObject.age} yrs old `) 39 | // } 40 | 41 | // handleObject(user) 42 | 43 | // method 2 44 | // with objects 45 | 46 | const user = { 47 | name: "Muhammad Noman", 48 | age : 23 49 | 50 | } 51 | 52 | function handleObject (user){ 53 | console.log(`Hello everyone my name is ${user.name} and i'm ${user.age} yrs old `) 54 | } 55 | 56 | handleObject(user) -------------------------------------------------------------------------------- /13_arrow_fns/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrow fns 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /13_arrow_fns/script.js: -------------------------------------------------------------------------------- 1 | // const user={ 2 | 3 | // userName: "Muhammad Noman", 4 | // rollNo: 13, 5 | // welcomeMessage: function(){ 6 | // console.log(`${this.userName}, Welcome to website`) 7 | // console.log(this) 8 | // } 9 | 10 | 11 | 12 | // } 13 | 14 | // user.welcomeMessage() 15 | 16 | // user.userName = "Babar Azam" 17 | // user.welcomeMessage(); 18 | // console.log(this) 19 | 20 | 21 | // Arrow function 22 | 23 | const welcomeMessage = ()=>{ 24 | 25 | console.log("Welcome to website") 26 | console.log(this) 27 | } 28 | welcomeMessage() -------------------------------------------------------------------------------- /14_switch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Switch in js 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /14_switch/script.js: -------------------------------------------------------------------------------- 1 | 2 | // switch cases in js 3 | // it is more effiecient then if else statement 4 | 5 | const month = 4; 6 | 7 | switch (month) { 8 | case 1: 9 | console.log("jan") 10 | break; 11 | case 2: 12 | console.log("feb") 13 | break; 14 | case 3: 15 | console.log("march") 16 | break; 17 | case 4: 18 | console.log("April") 19 | break; 20 | 21 | default: 22 | break; 23 | } -------------------------------------------------------------------------------- /15_truthy&falsy/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Truthy and falsy 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /15_truthy&falsy/script.js: -------------------------------------------------------------------------------- 1 | // truthy and falsy ko koi operator se check nahi karwaya jata he 2 | 3 | // // const userEmail = "noman5456318@gmail.com" 4 | // const userEmail = ""; 5 | 6 | // if (userEmail) { 7 | // console.log("email is recieved"); 8 | // } else { 9 | // console.log("email not recieved"); 10 | // } 11 | 12 | // const emptyArr = [4 , 6 ,8]; 13 | const emptyArr = []; 14 | // if (emptyArr) { 15 | // console.log("arry is not empty"); 16 | // } else { 17 | // console.log("arry is empty"); 18 | // } 19 | 20 | // par yahan par to arry empty he 21 | // ye is lie ese aya he q k empty arr truthy value he 22 | 23 | 24 | if(emptyArr.length===0){ 25 | console.log("arry is empty") 26 | }else{ 27 | console.log("arry is not empty") 28 | } 29 | 30 | const emptyObj = {} 31 | 32 | if(Object.keys(emptyObj).length===0){ 33 | 34 | console.log("object is empty") 35 | } 36 | else{ 37 | console.log("object is not empty") 38 | } -------------------------------------------------------------------------------- /16_for-loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | for Loops 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /16_for-loop/new.py: -------------------------------------------------------------------------------- 1 | for i in range (1,11): 2 | for j in range (1,11): 3 | print(i," x " ,j ," = ", i*j) -------------------------------------------------------------------------------- /16_for-loop/script.js: -------------------------------------------------------------------------------- 1 | // basic program 2 | 3 | // for (let i = 0; i <= 10; i++) { 4 | // const element = i; 5 | // console.log(i) 6 | // } 7 | 8 | 9 | // for loop with if 10 | 11 | // for (let i = 0; i <= 10; i++) { 12 | 13 | // const element = i; 14 | // if(i===5){ 15 | // console.log("3 is my fvt number") 16 | // } 17 | 18 | // if (element === 9) { 19 | // console.log("9 is also my fvt number") 20 | 21 | // } 22 | 23 | // console.log(element) 24 | 25 | 26 | // } 27 | 28 | 29 | // loop with in the loop 30 | // for (let i = 1; i <= 5; i++) { 31 | // console.log(`outer loop ${i}`) 32 | // for (let j = 1; j <= 5; j++) { 33 | // console.log(`inner loop ${j} and outer loop ${i}`) 34 | 35 | // } 36 | 37 | // } 38 | 39 | 40 | 41 | // ................usefull program........... 42 | 43 | // print the table of number 1 - 10s 44 | 45 | for (let i = 1; i <=10; i++) { 46 | console.log(`Table of ${i}`) 47 | 48 | for (let j = 1; j <=10; j++){ 49 | console.log(`${i} * ${j} = ${i*j}`) 50 | 51 | } 52 | 53 | } 54 | 55 | 56 | 57 | // break and continue in loops 58 | // console.log('break in loops') 59 | // for (let i = 0; i <=10; i++) { 60 | // const element = i; 61 | // if (element===6) { 62 | // console.log("6 is detected") 63 | // break 64 | 65 | // } 66 | // console.log( element) 67 | 68 | // } 69 | 70 | // console.log('continue in lops') 71 | // for (let i = 0; i <=10; i++) { 72 | // const element = i; 73 | // if (element===6) { 74 | // console.log("6 is detected") 75 | // continue 76 | 77 | // } 78 | // console.log( element) 79 | 80 | // } 81 | -------------------------------------------------------------------------------- /17_while&dowhile/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | while and do while loop 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /17_while&dowhile/script.js: -------------------------------------------------------------------------------- 1 | // while loop in js 2 | 3 | // let index = 0 4 | 5 | // while (index <=10) { 6 | // console.log(`the value of in index = ${index}`) 7 | // index +=1 8 | // } 9 | 10 | // while loop with arry 11 | 12 | const myArr = ['noman' , 'ibrahim' , 'raza'] 13 | 14 | let arr = 0; 15 | while(arr<=myArr.length){ 16 | console.log(myArr[arr]) 17 | arr +=1 18 | 19 | } -------------------------------------------------------------------------------- /18_high-order-arr-loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | High order Arr loop 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /18_high-order-arr-loop/script.js: -------------------------------------------------------------------------------- 1 | // for off loops in js 2 | const numbers = [1,2,3,4,5] 3 | for (const num of numbers) { 4 | // console.log(num) 5 | } 6 | 7 | 8 | const greetings = "Helo world" 9 | 10 | for (const greets of greetings) { 11 | 12 | // console.log(`char of greet are, ${greets}`) 13 | 14 | } 15 | // const greetings = "Helo world" 16 | 17 | for (const greets of greetings) { 18 | if (greets == " ") { 19 | continue 20 | } 21 | else{ 22 | // console.log(`char of greet are, ${greets}`) 23 | } 24 | 25 | } 26 | 27 | 28 | const map = new Map() 29 | 30 | map.set('pk', 'pakistan' ) 31 | map.set('in', 'india' ) 32 | map.set('dxb', 'dubai' ) 33 | 34 | for (const [key,value] of map) { 35 | // console.log(key , ';-', value) 36 | } 37 | 38 | 39 | // object par for of loop nahi laga sakte hen us k lie for in lagaya jata he 40 | 41 | // objects with for in loop 42 | 43 | const myObj = { 44 | in : "india", 45 | pk : "pakistan", 46 | usa: "united state of america", 47 | dxb : "dubai" 48 | } 49 | for (const key in myObj) { 50 | // console.log(key) 51 | // console.log(`${key} is the shortcut for ${myObj[key]}`) 52 | 53 | 54 | } 55 | 56 | // for in loop in aarry 57 | 58 | const programming = ['js', 'py', 'cpp' , 'c#'] 59 | 60 | for (const key in programming) { 61 | console.log(programming[key]) 62 | } -------------------------------------------------------------------------------- /19_for-each-loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | for each loop 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /19_for-each-loop/script.js: -------------------------------------------------------------------------------- 1 | const myArr = ['js', 'cpp' ,'c#', 'py'] 2 | 3 | // callback fn dena hota he 4 | myArr.forEach(function(item){ 5 | // console.log(item) 6 | }) 7 | myArr.forEach((val)=>{ 8 | // console.log(val) 9 | }) 10 | 11 | function printArr(item){ 12 | // console.log(item) 13 | } 14 | myArr.forEach(printArr) 15 | 16 | // arry with objects 17 | 18 | const programming = [ 19 | { 20 | programminglanguage: "javascript", 21 | languageFileName : "js" 22 | }, 23 | { 24 | programminglanguage: "python", 25 | languageFileName : "py" 26 | }, 27 | { 28 | programminglanguage: "c++", 29 | languageFileName : "cpp" 30 | } 31 | ] 32 | 33 | programming.forEach((item)=>{ 34 | console.log(item.programminglanguage) 35 | }) -------------------------------------------------------------------------------- /20-filter-map/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Filter Map 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /20-filter-map/script.js: -------------------------------------------------------------------------------- 1 | const languages = ["cpp" , "c#", "java" , "javascript" , "python"] 2 | 3 | // const data = languages.forEach((item)=>{ 4 | // // console.log(item) 5 | // return item 6 | 7 | // }) 8 | 9 | 10 | 11 | // for each loop kabhi bhi return nahi karta he 12 | 13 | // filter method 14 | 15 | const myNums = [1,2,3,4,5,6,7,8,9,10] 16 | 17 | const values = myNums.filter((num)=>{ 18 | 19 | // any operations 20 | return num >=4 21 | 22 | // { } in ko js men scope kaha jata he agar apne scop use kia he to return use karna pare ga 23 | 24 | }) 25 | 26 | // console.log(values) 27 | 28 | 29 | const newNums = [] 30 | // myNums.forEach((num)=>{ 31 | // if(num>4){ 32 | // newNums.push(num) 33 | // } 34 | // }) 35 | 36 | myNums.forEach((num)=>{ 37 | if(num>4){ 38 | newNums.push(num) 39 | } 40 | 41 | }) 42 | // console.log(newNums) 43 | 44 | 45 | 46 | 47 | // console.log(newNums) 48 | 49 | // database se isi trha ka data ata he 50 | 51 | const books = [ 52 | { title: 'Book One', genre: 'Fiction', publish: 1981, edition: 2004 }, 53 | { title: 'Book Two', genre: 'Non-Fiction', publish: 1992, edition: 2008 }, 54 | { title: 'Book Three', genre: 'History', publish: 1999, edition: 2007 }, 55 | { title: 'Book Four', genre: 'Non-Fiction', publish: 1989, edition: 2010 }, 56 | { title: 'Book Five', genre: 'Science', publish: 2009, edition: 2014 }, 57 | { title: 'Book Six', genre: 'Fiction', publish: 1987, edition: 2010 }, 58 | { title: 'Book Seven', genre: 'History', publish: 1986, edition: 1996 }, 59 | { title: 'Book Eight', genre: 'Science', publish: 2011, edition: 2016 }, 60 | { title: 'Book Nine', genre: 'Non-Fiction', publish: 1981, edition: 1989 }, 61 | ]; 62 | 63 | // const userBooks = books.filter((bk)=>{ 64 | // return bk 65 | // }) 66 | // const userBooks = books.filter((bk)=>{ 67 | // return bk.genre === 'History' 68 | // }) 69 | const userBooks = books.filter((bk)=> 70 | 71 | { 72 | return bk.publish>=1987 && bk.genre === 'Science' && bk.edition >= 2016 73 | } ) 74 | // console.log(userBooks) 75 | 76 | -------------------------------------------------------------------------------- /21-map/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Map and Chaining 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /21-map/script.js: -------------------------------------------------------------------------------- 1 | const myNums = [1,2,3,4,5,6,7,8,9,10] 2 | 3 | const newNums = myNums.map((num)=>{ 4 | return num = num +10 5 | }) 6 | // console.log(newNums) 7 | 8 | 9 | const newValues = myNums 10 | .map((num)=>num*10) 11 | .map((num)=>num+1) 12 | .filter((num)=>num>=50) 13 | 14 | console.log(newValues) 15 | -------------------------------------------------------------------------------- /22-reducejs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Reduce fn 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /22-reducejs/script.js: -------------------------------------------------------------------------------- 1 | const myNumbers =[1,2,3] 2 | 3 | // accumulaator example 4 | const myTotal = myNumbers.reduce((accumulatorValue , currentValue)=>{ 5 | 6 | console.log(`accumulator value : ${accumulatorValue} , currentValue : ${currentValue}`) 7 | 8 | return accumulatorValue + currentValue 9 | },0) 10 | 11 | console.log(myTotal) 12 | 13 | 14 | // shoping cart example 15 | // add the price of all items 16 | 17 | const shopingCart =[ 18 | { 19 | item : "Shoes", 20 | price: 5000 21 | }, 22 | { 23 | item : "Shirt", 24 | price: 1200 25 | }, 26 | { 27 | item : "Bag", 28 | price: 2500 29 | }, 30 | { 31 | item : "AirPod", 32 | price: 6300 33 | }, 34 | ] 35 | 36 | const TotalPrice = shopingCart.reduce((accumulatorValue,item)=>{ 37 | console.log(`acc value: ${accumulatorValue} , item price : ${item.price}`) 38 | 39 | return accumulatorValue + item.price 40 | 41 | },0) 42 | 43 | console.log( "Total Price :- ", TotalPrice) -------------------------------------------------------------------------------- /23_DOM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM 7 | 8 | 9 |
10 |
day1
11 |
day2
12 |
day3
13 |
day4
14 |
day5
15 |
16 | 17 | 43 | -------------------------------------------------------------------------------- /24-Dom2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dom2 7 | 8 | 9 | 10 | 11 | 38 | 39 | -------------------------------------------------------------------------------- /25_Dom3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dom3 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 51 | -------------------------------------------------------------------------------- /25_Dom3/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | } 5 | body,html{ 6 | width:100%; 7 | height:100%; 8 | box-sizing: border-box; 9 | } -------------------------------------------------------------------------------- /26-settime&clrTime/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Time Intervels 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /26-settime&clrTime/script.js: -------------------------------------------------------------------------------- 1 | // set timeout -- itne time k bad is kam ko karna he 2 | 3 | 4 | // ----method 1 5 | 6 | setTimeout(function(){ 7 | // console.log("Muhammad Noman") 8 | },2000) 9 | 10 | // method 2 11 | const PrintName = ()=>{ 12 | // console.log('NOMAN') 13 | } 14 | setTimeout(PrintName ,2000) 15 | 16 | // 17 | const container = document.querySelector('#container') 18 | const sayHi = setTimeout(()=>{ 19 | container.innerHTML ="Hello Muhammad Noman" 20 | },2000) 21 | 22 | // if we want to stop this 23 | 24 | // clearTimeout(sayHi) 25 | // not efficient 26 | 27 | document.querySelector('#btn') 28 | .addEventListener( "click",function(){ 29 | clearTimeout(sayHi) 30 | console.log("Stop") 31 | }) 32 | // ............... extra work .............. 33 | 34 | // const start = document.querySelector('#start') 35 | // const stop = document.querySelector('#stop') 36 | // const container = document.querySelector(".container") 37 | // let msg; 38 | 39 | // const changeName = ()=>{ 40 | // container.innerHTML="Hello Raza...." 41 | // } 42 | 43 | // start.addEventListener('click',()=>{ 44 | // msg= setTimeout(changeName,2000) 45 | // }) 46 | 47 | // stop.addEventListener("click",()=>{ 48 | // clearTimeout(msg) 49 | 50 | // }) 51 | -------------------------------------------------------------------------------- /27_timeIntervels&projects/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /27_timeIntervels&projects/DOom-project-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bg color Changer 7 | 52 | 53 | 54 | 55 | 56 | 57 |
58 | 59 |
Blue
60 |
Red
61 |
Green
62 |
Black
63 |
brown
64 |
skyblue
65 |
violet
66 |
purple
67 |
68 | 69 | 72 | 73 | -------------------------------------------------------------------------------- /27_timeIntervels&projects/DOom-project-1/script.js: -------------------------------------------------------------------------------- 1 | 2 | // method 1 3 | const div = document.querySelectorAll(".colors"); 4 | // console.log(div) 5 | const body = document.querySelector("body"); 6 | 7 | div.forEach((div) => { 8 | // console.log(div) 9 | div.addEventListener("click", (e) => { 10 | // console.log(e.target.id) 11 | if (e.target.id === "red") body.style.backgroundColor = "#e46161"; 12 | if (e.target.id === "blue") body.style.backgroundColor = "#2F80ED"; 13 | if (e.target.id === "black") body.style.backgroundColor = "#20002c"; 14 | if (e.target.id === "green") body.style.backgroundColor = "#0f9b0f"; 15 | if (e.target.id === "violet") body.style.backgroundColor = e.target.id; 16 | if (e.target.id === "brown") body.style.backgroundColor = e.target.id; 17 | if (e.target.id === "purple") body.style.backgroundColor = e.target.id; 18 | if (e.target.id === "skyblue") body.style.backgroundColor = e.target.id; 19 | }); 20 | }); 21 | 22 | 23 | // method 2 24 | 25 | // const div = document.querySelectorAll('.colors') 26 | // const div = document.getElementById('blue') 27 | // console.log(div) 28 | 29 | -------------------------------------------------------------------------------- /27_timeIntervels&projects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | TimeIntervels 7 | 8 | 9 |

Hello Muhammad Noman

10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /27_timeIntervels&projects/script.js: -------------------------------------------------------------------------------- 1 | const h1 = document.querySelector('h1') 2 | const start = document.querySelector('#start') 3 | const stop1 = document.querySelector('#stop') 4 | let intervelId; 5 | 6 | 7 | const startMsg = ()=>{ 8 | h1.innerHTML = "Hello Raza" 9 | console.log("hello") 10 | 11 | } 12 | 13 | start.addEventListener('click', function(){ 14 | intervelId = setInterval(startMsg , 1000) 15 | console.log("start") 16 | }) 17 | 18 | stop1.addEventListener('click', function(){ 19 | // h1.innerHTML = "Hello Raza" 20 | clearInterval(intervelId) 21 | console.log("stop") 22 | }) 23 | 24 | 25 | -------------------------------------------------------------------------------- /28_projectRandomclrChanger/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5502 3 | } -------------------------------------------------------------------------------- /28_projectRandomclrChanger/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | RamdomClrGen 7 | 34 | 35 | 36 | 37 | 38 |

Background Color Changer

39 |
40 |

Start

41 |

Stop

42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /28_projectRandomclrChanger/script.js: -------------------------------------------------------------------------------- 1 | // method 1 2 | // const body = document.querySelector('body') 3 | 4 | 5 | // const randomColor=()=>{ 6 | 7 | // const hex = "0123456789ABCDEF" 8 | // let color ="#"; 9 | // for(i=0; i<6 ;i ++ ){ 10 | // color +=Math.floor(Math.random()*9) 11 | // } 12 | // console.log(color) 13 | // return color 14 | 15 | // } 16 | // randomColor() 17 | 18 | // let intervelId; 19 | 20 | // const bgChanger=()=>{ 21 | // body.style.backgroundColor = randomColor() 22 | // } 23 | 24 | // const startChangingColor = ()=>{ 25 | // intervelId= setInterval(bgChanger,1200) 26 | 27 | // } 28 | // const stopChangingColor = ()=>{ 29 | // clearInterval(intervelId) 30 | // } 31 | 32 | // document.querySelector("#start").addEventListener('click', startChangingColor) 33 | // document.querySelector("#stop").addEventListener('click', stopChangingColor) 34 | 35 | 36 | // method 2 37 | 38 | const body = document.querySelector('body') 39 | const stop = document.querySelector('#stop') 40 | const start = document.querySelector('#start') 41 | let intervelId; 42 | 43 | const randomColor=()=>{ 44 | const hex = "0123456789ABCDEF" 45 | let color = "#" 46 | for (let i = 0; i <6 ; i++) { 47 | color += hex[Math.floor(Math.random()*9)] 48 | 49 | } 50 | console.log(color) 51 | return color 52 | } 53 | randomColor() 54 | 55 | start.addEventListener("click", ()=>{ 56 | // setInterval(bgChanger,1100) 57 | 58 | intervelId = setInterval(bgChanger,1100) 59 | }) 60 | const bgChanger = ()=>{ 61 | body.style.backgroundColor=randomColor() 62 | } 63 | 64 | stop.addEventListener('click',()=>{ 65 | clearInterval(intervelId) 66 | }) 67 | 68 | -------------------------------------------------------------------------------- /29-Api/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | API 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /29-Api/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Noman-Nom/My_javaScript/92c6aafcf515aeba5e643116da952411236dab36/29-Api/script.js -------------------------------------------------------------------------------- /API-Project2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | API FOOD RECIPE 10 | 11 | 12 | 13 |
14 | 15 | 16 |

Feast Your Eyes: Discover Delicious Dishes

17 |
18 | 19 | 20 | 21 |
22 |
23 |

Your Search Food:

24 |
25 |
26 | 27 |

Chicken Tikka

28 | Get Recipe 29 |
30 | 31 |
32 | 33 |

Kabab Burgur

34 | Get Recipe 35 |
36 |
37 | 38 |

Dumplings

39 | Get Recipe 40 |
41 |
42 | 43 |

Beef Steak

44 | Get Recipe 45 |
46 |
47 | 48 |

Kabab

49 | Get Recipe 50 |
51 | 52 |
53 |
54 |
55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /API-Project2/script.js: -------------------------------------------------------------------------------- 1 | // https://www.themealdb.com/api/json/v1/1/filter.php?i=egg 2 | 3 | const SearchBtn =document.querySelector('#search-btn') 4 | const row = document.querySelector(".row") 5 | 6 | 7 | const getData= async()=>{ 8 | const SearchInput= document.querySelector('#search-el').value.trim() 9 | console.log(SearchInput) 10 | 11 | let url = `https://www.themealdb.com/api/json/v1/1/filter.php?i=${SearchInput}` 12 | 13 | const response = await fetch(url) 14 | const data = await response.json() 15 | console.log(data.meals) 16 | 17 | if (data && data.meals){ 18 | row.innerHTML="" 19 | data.meals.map((meal)=>{ 20 | 21 | const imageWrapper= document.createElement('div') 22 | imageWrapper.classList.add("col") 23 | const image = document.createElement('img') 24 | const heading = document.createElement('h4') 25 | heading.innerHTML=meal.strMeal 26 | image.src= meal.strMealThumb 27 | image.alt= meal.strMeal 28 | const imageLink = document.createElement('a') 29 | imageLink.href=meal.strMeal 30 | imageLink.target="_blank" 31 | imageLink.textContent= meal.strMeal 32 | 33 | imageWrapper.appendChild(image) 34 | imageWrapper.appendChild(heading) 35 | imageWrapper.appendChild(imageLink) 36 | row.appendChild(imageWrapper) 37 | 38 | 39 | }); 40 | } 41 | else{ 42 | row.innerHTML=`

No Result Found

` 43 | } 44 | 45 | 46 | 47 | 48 | 49 | 50 | } 51 | 52 | 53 | SearchBtn.addEventListener('click', ()=>{ 54 | 55 | getData() 56 | }) -------------------------------------------------------------------------------- /API-Project2/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,200;1,300;1,400;1,500&display=swap'); 2 | *{ 3 | margin:0; 4 | padding:0; 5 | box-sizing: border-box; 6 | } 7 | body{ 8 | background: linear-gradient(to right, #b993d6, #8ca6db); 9 | } 10 | h1{ 11 | font-size: 36px; 12 | font-weight: bold; 13 | text-align: center; 14 | margin: 40px 0 60px 0; 15 | } 16 | h1 span{ 17 | color: #b73b19; 18 | } 19 | .container{ 20 | min-height: calc(100vh-30px); 21 | } 22 | .search-box{ 23 | width: 100%; 24 | display: flex; 25 | align-items: center; 26 | justify-content: center; 27 | background: #edeef0; 28 | border-radius: 30px; 29 | max-width: 500px; 30 | padding-left:20px ; 31 | margin-bottom: 25px; 32 | position: relative; 33 | transform: translate(-50%,-50%); 34 | top: 10%; 35 | left: 50%; 36 | 37 | 38 | } 39 | input{ 40 | flex: 1; 41 | flex-wrap: wrap; 42 | border: none; 43 | outline: none; 44 | background: transparent; 45 | padding: 20px; 46 | font-size: 18px; 47 | color:rgb(74, 73, 73) ; 48 | } 49 | input::placeholder{ 50 | font-size: 18px; 51 | color: #8ca6db; 52 | } 53 | button{ 54 | border: none; 55 | outline: none; 56 | padding: 20px 50px; 57 | background: #fc744f; 58 | color: white; 59 | cursor: pointer; 60 | font-size: 18px; 61 | border-radius: 40px; 62 | 63 | } 64 | 65 | .smalContainer{ 66 | /* margin-top: 60px; */ 67 | max-width: 1000px; 68 | margin: auto; 69 | padding-left: 25px; 70 | padding-right: 25px; 71 | 72 | } 73 | .row{ 74 | display: flex; 75 | flex-wrap:wrap; 76 | align-items: center; 77 | justify-content: space-around; 78 | 79 | } 80 | .col{ 81 | flex-basis: 25%; 82 | min-width: 200px; 83 | padding: 10px; 84 | margin-bottom: 50px; 85 | transition: 1s all ease-in-out; 86 | 87 | } 88 | .col img{ 89 | width: 100%; 90 | } 91 | .col:hover{ 92 | scale: 1.1; 93 | } 94 | h4{ 95 | font-size: 22px; 96 | color: #b73b19; 97 | } 98 | a{ 99 | text-decoration: none; 100 | color: black; 101 | font-size: 18px; 102 | } 103 | h2 { 104 | font-size: 35px; 105 | font-weight: bold; 106 | color:#b73b19; 107 | text-align: center; 108 | margin-bottom: 30px; 109 | } -------------------------------------------------------------------------------- /API-project1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | API-Unsplash-Clone 8 | 9 | 10 | 11 |

Search Your Favorate Images

12 |
13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 |
22 | Beautiful Cat 23 |

Beautiful cat

24 |
25 |
26 | Beautiful Cat 27 |

Beautiful cat

28 |
29 |
30 | Beautiful Cat 31 |

Beautiful cat

32 |
33 | 34 | 35 |
36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /API-project1/script.js: -------------------------------------------------------------------------------- 1 | const key = "NiDhEnXNtbOWTueH0yzEr0xmZ2MCPfczCeZwmPZ-xwo" 2 | 3 | const form = document.querySelector('form') 4 | const inputSearch = document.querySelector("#search-input") 5 | const searchBtn = document.querySelector("#search-btn") 6 | 7 | const searchResult = document.querySelector(".search-result") 8 | const searchResults = document.querySelector(".search-results") 9 | const showMoreBtn = document.querySelector("#show-more-btn") 10 | 11 | 12 | // console.log(searchResults) 13 | let inputData = "" 14 | let page = 1; 15 | 16 | async function searchImages(){ 17 | 18 | inputData = inputSearch.value; 19 | // console.log(inputData) 20 | const url = `https://api.unsplash.com/search/photos/?page=${page}&query=${inputData}&client_id=${key}` 21 | 22 | const response = await fetch(url) 23 | const data = await response.json() 24 | 25 | console.log(data) 26 | const results = data.results 27 | 28 | if (page === 1) { 29 | searchResults.innerHTML = ""; 30 | 31 | } 32 | results.map((result)=>{ 33 | 34 | // searchResults.innerHTML=`
35 | //
36 | // ${result.alt_description} 37 | //

${result.alt_description}

38 | //
` 39 | 40 | 41 | const imageWrapper= document.createElement('div') 42 | imageWrapper.classList.add("col") 43 | const image = document.createElement('img') 44 | image.src= result.urls.small 45 | image.alt= result.alt_description 46 | const imageLink = document.createElement('a') 47 | imageLink.href=result.links.html 48 | imageLink.target="_blank" 49 | imageLink.textContent= result.alt_description 50 | 51 | imageWrapper.appendChild(image) 52 | imageWrapper.appendChild(imageLink) 53 | searchResults.appendChild(imageWrapper) 54 | 55 | 56 | 57 | }) 58 | 59 | page++ 60 | if(page>1){ 61 | showMoreBtn.style.display="block" 62 | } 63 | } 64 | 65 | form.addEventListener('submit',(e)=>{ 66 | 67 | e.preventDefault() 68 | page=1 69 | searchImages() 70 | inputSearch.value="" 71 | 72 | 73 | 74 | 75 | }) 76 | showMoreBtn.addEventListener('click',(e)=>{ 77 | 78 | 79 | 80 | searchImages() 81 | console.log("click") 82 | 83 | }) 84 | -------------------------------------------------------------------------------- /API-project1/style.css: -------------------------------------------------------------------------------- 1 | 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;1,200;1,300;1,400&display=swap'); 3 | 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | font-family: 'Poppins', sans-serif; 9 | 10 | } 11 | 12 | body{ 13 | line-height: 1.6; 14 | 15 | } 16 | h1{ 17 | font-size: 36px; 18 | font-weight: bold; 19 | text-align: center; 20 | margin: 40px 0 60px 0; 21 | } 22 | form{ 23 | width: 100% ; 24 | display: flex; 25 | align-items: center; 26 | justify-content: space-between; 27 | background: #edeef0; 28 | border-radius: 30px; 29 | max-width: 500px; 30 | padding-left: 20px; 31 | margin-bottom: 25px; 32 | position: relative; 33 | transform: translate(-50%,-50%); 34 | top: 10%; 35 | left: 50%; 36 | 37 | 38 | } 39 | input{ 40 | flex: 1; 41 | border: none; 42 | outline: none; 43 | background: transparent; 44 | padding:10px ; 45 | 46 | } 47 | button{ 48 | border: none; 49 | outline: none; 50 | padding: 16px 50px; 51 | background:#ff5945; 52 | color:#fff; 53 | font-size: 16px; 54 | cursor: pointer; 55 | border-radius: 40px; 56 | 57 | } 58 | .search-results{ 59 | 60 | 61 | display: flex; 62 | justify-content: space-between; 63 | 64 | 65 | } 66 | 67 | 68 | .col { 69 | 70 | width: 100px; 71 | height: 100px; 72 | flex: 1; 73 | 74 | display: flex; 75 | flex-direction: column; 76 | 77 | 78 | 79 | padding: 10px; 80 | margin-bottom: 50px; 81 | transition: all 1s ease-in-out .1s; 82 | 83 | } 84 | 85 | .col img{ 86 | width: 100%; 87 | } 88 | 89 | 90 | 91 | .search-result h4{ 92 | font-size: 20px; 93 | 94 | display: block; 95 | padding: 10px; 96 | text-transform: capitalize; 97 | 98 | } 99 | .search-result h4 a{ 100 | text-decoration: none; 101 | color: #ff5945; 102 | } 103 | #show-more-btn{ 104 | display: none; 105 | position: relative; 106 | left: 45%; 107 | 108 | 109 | 110 | } 111 | 112 | 113 | -------------------------------------------------------------------------------- /AdvanceThemePicker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Theme Picker 7 | 46 | 47 | 48 | 49 | 50 |
51 |
52 |

ColorCode:

53 | 54 | 55 |
56 | 57 | 58 | 59 |
60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /AdvanceThemePicker/script.js: -------------------------------------------------------------------------------- 1 | const start = document.querySelector('#start') 2 | const stop = document.querySelector('#stop') 3 | const clrCode = document.querySelector('#clrCode') 4 | const container = document.querySelector(".container") 5 | const body = document.querySelector("body") 6 | 7 | let color; 8 | let intervelId; 9 | 10 | const randomColor = ()=>{ 11 | // let hex ="0123456789ABCDEF" 12 | color = "#" 13 | for (let i = 0; i < 6; i++) { 14 | color = color+ Math.floor(Math.random()*9) 15 | } 16 | // console.log(Math.floor(Math.random()*9)) 17 | // console.log(color) 18 | return color 19 | } 20 | randomColor() 21 | 22 | const bgChanger=()=>{ 23 | body.style.backgroundColor= randomColor(); 24 | clrCode.innerHTML= color 25 | } 26 | 27 | start.addEventListener('click',()=>{ 28 | intervelId= setInterval(bgChanger,2000) 29 | 30 | 31 | }) 32 | // console.log(stop) 33 | stop.addEventListener('click',()=>{ 34 | clearInterval(intervelId) 35 | }) 36 | 37 | -------------------------------------------------------------------------------- /BMI calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fully function BMI calculator 7 | 17 | 18 | 19 | 20 |
21 |
22 |

My Fully Functional BMI Calculator

23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 |
35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /BMI calculator/script.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const form = document.querySelector('form') 4 | 5 | form.addEventListener('submit', (e)=>{ 6 | e.preventDefault() 7 | const height = parseInt(document.querySelector('#height').value) 8 | const weight =parseInt(document.querySelector('#weight').value) 9 | 10 | const calculate = document.querySelector('#calculate') 11 | 12 | // console.log(height) 13 | // console.log(typeof height) 14 | 15 | if(height==="" || isNaN(height) || height<=0){ 16 | alert("invalid height") 17 | } 18 | else if(weight==="" || isNaN(weight) || weight<=0){ 19 | alert("invalid Weight") 20 | } 21 | else{ 22 | const bmi = (weight /((height*height/10000))).toFixed(3) 23 | console.log(bmi) 24 | const result = document.querySelector('#result') 25 | result.innerHTML = bmi 26 | 27 | 28 | 29 | 30 | } 31 | 32 | 33 | }) -------------------------------------------------------------------------------- /Dom-project3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | KeyBoard press 7 | 23 | 24 | 25 |
26 |

press any key of keyboard

27 |
28 | 29 |
30 | 31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /Dom-project3/script.js: -------------------------------------------------------------------------------- 1 | const insert = document.querySelector('.insert') 2 | 3 | window.addEventListener('keydown',(e)=>{ 4 | insert.innerHTML= ` 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
KeyKeyCodeCode
${e.key === ' '?"space":e.key}${e.keyCode}${e.code}
` 23 | }) -------------------------------------------------------------------------------- /To-Do-List/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5503 3 | } -------------------------------------------------------------------------------- /To-Do-List/images/checked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Noman-Nom/My_javaScript/92c6aafcf515aeba5e643116da952411236dab36/To-Do-List/images/checked.png -------------------------------------------------------------------------------- /To-Do-List/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Noman-Nom/My_javaScript/92c6aafcf515aeba5e643116da952411236dab36/To-Do-List/images/icon.png -------------------------------------------------------------------------------- /To-Do-List/images/unchecked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Noman-Nom/My_javaScript/92c6aafcf515aeba5e643116da952411236dab36/To-Do-List/images/unchecked.png -------------------------------------------------------------------------------- /To-Do-List/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | To-Do-List 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |

To-Do List 17 |

18 |
19 | 20 | 21 |
22 | 23 |
    24 | 27 |
28 |
29 |
30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /To-Do-List/script.js: -------------------------------------------------------------------------------- 1 | const input = document.querySelector("#input-box") 2 | const list = document.querySelector('#list-container') 3 | 4 | const btn = document.querySelector("#addTask") 5 | 6 | const addTask=()=>{ 7 | if(input.value===""){ 8 | alert("please write some task...") 9 | } 10 | else{ 11 | let li = document.createElement("li") 12 | li.innerHTML = input.value 13 | list.appendChild(li); 14 | 15 | let span = document.createElement("span") 16 | span.innerHTML = "\u00d7" 17 | li.appendChild(span) 18 | 19 | } 20 | input.value = "" 21 | } 22 | 23 | 24 | list.addEventListener('click', (e)=>{ 25 | // console.log(e.target) 26 | if(e.target.tagName==="LI"){ 27 | e.target.classList.toggle("checked") 28 | } 29 | else if(e.target.tagName==="SPAN"){ 30 | e.target.parentElement.remove() 31 | } 32 | }) 33 | -------------------------------------------------------------------------------- /To-Do-List/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | box-sizing: border-box; 5 | } 6 | 7 | 8 | .container{ 9 | width: 100%; 10 | min-height:100vh; 11 | background: linear-gradient(to right, #1488cc, #2b32b2); 12 | 13 | } 14 | .todo-app{ 15 | width: 100%; 16 | max-width: 540px; 17 | background: #fff; 18 | margin: 100px auto 20px; 19 | top:20% ; 20 | left: 50%; 21 | transform: translate(-50%,-50%); 22 | 23 | position: absolute; 24 | 25 | padding: 40px 30px 70px; 26 | border-radius: 10px; 27 | } 28 | .todo-app h2{ 29 | color: #002765; 30 | display:flex ; 31 | align-items: center; 32 | margin-bottom: 20px; 33 | 34 | 35 | } 36 | .todo-app h2 img{ 37 | width: 30px; 38 | margin-left: 10px; 39 | } 40 | .row{ 41 | display: flex; 42 | align-items: center; 43 | justify-content: space-between; 44 | background: #edeef0; 45 | border-radius: 30px; 46 | padding-left: 20px; 47 | margin-bottom: 25px; 48 | width: 100% ; 49 | } 50 | input{ 51 | flex: 1; 52 | border: none; 53 | outline: none; 54 | background: transparent; 55 | padding:10px ; 56 | 57 | } 58 | button{ 59 | border: none; 60 | outline: none; 61 | padding: 16px 50px; 62 | background:#ff5945; 63 | color:#fff; 64 | font-size: 16px; 65 | cursor: pointer; 66 | border-radius: 40px; 67 | 68 | } 69 | /* ul{ 70 | position: absolute; 71 | } */ 72 | ul li{ 73 | list-style: none; 74 | font-size: 17px; 75 | padding: 12px 8px 12px 50px; 76 | user-select: none; 77 | cursor: pointer; 78 | position: relative; 79 | 80 | } 81 | 82 | ul li::before{ 83 | content: ""; 84 | position: absolute; 85 | height: 25px; 86 | width: 25px; 87 | border-radius: 50%; 88 | background-image: url(images/unchecked.png); 89 | background-size: cover; 90 | background-position: center; 91 | top: 12px; 92 | left: 8px; 93 | } 94 | ul li.checked{ 95 | color: #555; 96 | text-decoration: line-through; 97 | } 98 | ul li.checked::before{ 99 | 100 | background-image: url(images/checked.png); 101 | } 102 | ul li span{ 103 | position: absolute; 104 | right: 0%; 105 | top: 5px; 106 | width: 40px; 107 | height: 40px; 108 | font-size: 22px; 109 | color: #555; 110 | line-height: 40px; 111 | text-align: center; 112 | } 113 | ul li span:hover{ 114 | background: #edeef0; 115 | border-radius: 50%; 116 | } -------------------------------------------------------------------------------- /chatbot.txt: -------------------------------------------------------------------------------- 1 | .containerIcons{ 2 | display: flex; 3 | flex-direction: row; 4 | justify-content:flex-start; 5 | align-items: flex-start; 6 | gap: 0px; 7 | /* border: 1px solid red; */ 8 | 9 | 10 | } 11 | .icons{ 12 | width:80px; 13 | height: 100%; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | margin-top: 22px; 18 | gap: 2px; 19 | margin-bottom: 22px; 20 | /* border: 1px solid white; */ 21 | } 22 | .icons label{ 23 | display: flex; 24 | flex-direction:column; 25 | gap: 2px; 26 | justify-content: center; 27 | text-align: center; 28 | color: white; 29 | font-size: 10px; 30 | font-family:Verdana, Geneva, Tahoma, sans-serif; 31 | 32 | } 33 | .icons label i{ 34 | color: white; 35 | font-size: 12px; 36 | 37 | } 38 | 39 | 40 |
41 |
42 | 43 | 46 | 47 | 48 |
49 |
50 | 51 | 54 | 55 | 56 |
57 |
58 | 59 | 62 | 63 | 64 |
65 | 66 | 67 | 68 |
69 | -------------------------------------------------------------------------------- /colorPicker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Color Picker Project 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /colorPicker/script.js: -------------------------------------------------------------------------------- 1 | // Get references to the color picker and body elements 2 | const colorPicker = document.getElementById('colorPicker'); 3 | const body = document.body; 4 | 5 | // Add an event listener to the color picker 6 | colorPicker.addEventListener('input', () => { 7 | // Get the selected color from the color picker 8 | const selectedColor = colorPicker.value; 9 | 10 | // Update the background color of the body 11 | body.style.backgroundColor = selectedColor; 12 | }); 13 | -------------------------------------------------------------------------------- /dom-project2/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /dom-project2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | BMI CALCULATOR 10 | 11 | 12 | 13 |
14 |
15 |

BMI CALCULATOR

16 |
17 |
18 |
19 | 20 | 21 | 24 | 25 |
26 |
27 | 28 | 31 | 32 |
33 |
34 | 35 |
36 | 37 |
38 |
39 | 42 | 43 |
44 |
45 | 46 | 47 | 48 |
49 |
50 |
51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /dom-project2/script.js: -------------------------------------------------------------------------------- 1 | const form = document.querySelector('form') 2 | 3 | // console.log(form) 4 | form.addEventListener('submit', (e)=>{ 5 | e.preventDefault() 6 | 7 | const weight= parseInt(document.querySelector('#weight').value) 8 | const height= parseInt(document.querySelector('#height').value) 9 | const result = document.querySelector('#result') 10 | 11 | 12 | // console.log(weight) 13 | // console.log(height) 14 | 15 | if(height=== '' || height<= 0 || isNaN(height)){ 16 | console.log(`plese enter a valid height`) 17 | alert(`plese enter a valid height !! ${height} is not valid`) 18 | } 19 | else if(weight=== '' || weight<= 0 || isNaN(weight)){ 20 | 21 | console.log(`plese enter a valid height`) 22 | alert(`plese enter a valid weight !! ${weight} is not valid`) 23 | }else{ 24 | const bmi =(weight /((height*height/10000)).toFixed(3)) 25 | result.innerHTML= `${bmi}` 26 | } 27 | 28 | 29 | }) -------------------------------------------------------------------------------- /dom-project2/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | 6 | 7 | 8 | 9 | } 10 | body{ 11 | background-image:linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5)),url('https://images.pexels.com/photos/2261477/pexels-photo-2261477.jpeg'); 12 | background-size: cover; 13 | background-position: center; 14 | background-attachment: fixed; 15 | } 16 | .container{ 17 | width: 100%; 18 | height: 100%; 19 | 20 | position: relative; 21 | 22 | 23 | } 24 | .container__box{ 25 | width: 90%; 26 | max-width: 400px; 27 | position: absolute; 28 | top: 50%; 29 | left: 50%; 30 | transform: translate(-50% ,50%); 31 | background: white; 32 | padding: 50px 50px 20px; 33 | text-align: center; 34 | 35 | } 36 | .container__box h1{ 37 | font-size: 30px; 38 | margin-bottom: 30px; 39 | color: #3c00a0; 40 | position: relative; 41 | } 42 | .container__box h1::after{ 43 | content: ""; 44 | width: 100px; 45 | height: 4px; 46 | border-radius: 3px; 47 | background: #3c00a0; 48 | position: absolute; 49 | bottom: -12px; 50 | left: 50%; 51 | transform: translateX(-50%); 52 | } 53 | .input-field{ 54 | background: #eaeaea; 55 | margin: 15px 0; 56 | border-radius: 3px; 57 | display: flex; 58 | align-items: center; 59 | } 60 | input{ 61 | width: 100%; 62 | background: transparent; 63 | border: 0; 64 | outline: 0; 65 | padding: 18px 15px; 66 | color: #3c00a0; 67 | font-size: 18px; 68 | } 69 | #result{ 70 | width: 100%; 71 | height: 49px; 72 | background: transparent; 73 | border: 0; 74 | outline: 0; 75 | padding: 18px 15px; 76 | color: #3c00a0; 77 | font-size: 18px; 78 | } 79 | .input-field i{ 80 | margin-left: 15px; 81 | color: #0a0909; 82 | } 83 | .btn-field{ 84 | width: 100%; 85 | display: flex; 86 | justify-content: center; 87 | } 88 | .btn-field button{ 89 | flex-basis: 38%; 90 | background: #3c00a0; 91 | color: white; 92 | height: 40px; 93 | border-radius: 20px; 94 | border: 0; 95 | outline: 0; 96 | cursor: pointer; 97 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 98 | font-size: 18px; 99 | 100 | } 101 | .input-group{ 102 | height: 280px; 103 | } 104 | -------------------------------------------------------------------------------- /dom-project4/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /dom-project4/DOom-project-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bg color Changer 7 | 52 | 53 | 54 | 55 | 56 | 57 |
58 | 59 |
Blue
60 |
Red
61 |
Green
62 |
Black
63 |
brown
64 |
skyblue
65 |
violet
66 |
purple
67 |
68 | 69 | 72 | 73 | -------------------------------------------------------------------------------- /dom-project4/DOom-project-1/script.js: -------------------------------------------------------------------------------- 1 | 2 | // method 1 3 | const div = document.querySelectorAll(".colors"); 4 | // console.log(div) 5 | const body = document.querySelector("body"); 6 | 7 | div.forEach((div) => { 8 | // console.log(div) 9 | div.addEventListener("click", (e) => { 10 | // console.log(e.target.id) 11 | if (e.target.id === "red") body.style.backgroundColor = "#e46161"; 12 | if (e.target.id === "blue") body.style.backgroundColor = "#2F80ED"; 13 | if (e.target.id === "black") body.style.backgroundColor = "#20002c"; 14 | if (e.target.id === "green") body.style.backgroundColor = "#0f9b0f"; 15 | if (e.target.id === "violet") body.style.backgroundColor = e.target.id; 16 | if (e.target.id === "brown") body.style.backgroundColor = e.target.id; 17 | if (e.target.id === "purple") body.style.backgroundColor = e.target.id; 18 | if (e.target.id === "skyblue") body.style.backgroundColor = e.target.id; 19 | }); 20 | }); 21 | 22 | 23 | // method 2 24 | 25 | // const div = document.querySelectorAll('.colors') 26 | // const div = document.getElementById('blue') 27 | // console.log(div) 28 | 29 | -------------------------------------------------------------------------------- /dom-project4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | To Do List 7 | 26 | 27 | 28 |
29 |

My To-do App

30 |
31 | 32 | 33 |
34 |
    35 | 36 |
37 | 38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /dom-project4/script.js: -------------------------------------------------------------------------------- 1 | const inputBox = document.querySelector("#inputBox"); 2 | const addTask = document.querySelector("#addTask") 3 | const tasks = document.querySelector("#tasks") 4 | 5 | 6 | const todoTask = ()=>{ 7 | const li = document.createElement("li") 8 | li.innerHTML=`${inputBox.value} ` 9 | tasks.appendChild(li) 10 | inputBox.value="" 11 | const deleteBtn = document.querySelector('#deleteBtn') 12 | deleteBtn.addEventListener('click',(e)=>{ 13 | console.log(e.target.parentNode) 14 | removeIt = e.target.parentNode 15 | removeIt.remove() 16 | 17 | }) 18 | } 19 | 20 | 21 | 22 | 23 | addTask.addEventListener("click", ()=>{ 24 | if(inputBox.value===""){ 25 | alert("please add some task") 26 | } 27 | else{ 28 | todoTask() 29 | } 30 | console.log(inputBox.value) 31 | 32 | }) 33 | 34 | window.addEventListener('keydown',(e)=>{ 35 | if(e.key==="Enter"){ 36 | if(inputBox.value===""){ 37 | alert("please add some task") 38 | } 39 | else{ 40 | todoTask() 41 | 42 | } 43 | 44 | } 45 | 46 | }) 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /dom-project5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bgclr Changer 7 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /dom-project5/script.js: -------------------------------------------------------------------------------- 1 | const bgChanger= document.querySelector('#bgChanger') 2 | const body = document.querySelector('body') 3 | 4 | bgChanger.addEventListener('input',()=>{ 5 | 6 | // console.log("changed") 7 | const chngeBgClr = bgChanger.value 8 | body.style.backgroundColor = chngeBgClr 9 | 10 | }) -------------------------------------------------------------------------------- /img glry/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /img glry/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Gallery 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 |
15 | 16 | 17 | 18 |
19 | 20 |
21 | 22 |
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /img glry/script.js: -------------------------------------------------------------------------------- 1 | // Sample image data (you can replace this with your own images and categories) 2 | const images = [ 3 | { src: 'image1.jpg', category: 'nature' }, 4 | { src: 'image2.jpg', category: 'architecture' }, 5 | // Add more image data 6 | ]; 7 | 8 | // References to DOM elements 9 | const imageGallery = document.querySelector('.image-gallery'); 10 | const categories = document.querySelector('.categories'); 11 | const lightbox = document.querySelector('.lightbox'); 12 | 13 | // Function to display images in the gallery 14 | function displayImages(category) { 15 | // Clear the gallery 16 | imageGallery.innerHTML = ''; 17 | 18 | // Filter images by category 19 | const filteredImages = category 20 | ? images.filter(img => img.category === category) 21 | : images; 22 | 23 | // Create image cards and add them to the gallery 24 | filteredImages.forEach(imgData => { 25 | const imageCard = document.createElement('div'); 26 | imageCard.classList.add('image-card'); 27 | imageCard.innerHTML = `${imgData.category}`; 28 | 29 | // Add a click event listener to open the image in the lightbox 30 | imageCard.addEventListener('click', () => { 31 | const lightboxContent = `${imgData.category}`; 32 | lightbox.innerHTML = lightboxContent; 33 | lightbox.style.display = 'block'; 34 | }); 35 | 36 | imageGallery.appendChild(imageCard); 37 | }); 38 | } 39 | 40 | // Function to handle category button clicks 41 | function handleCategoryClick(event) { 42 | const selectedCategory = event.target.dataset.category; 43 | displayImages(selectedCategory); 44 | } 45 | 46 | // Add event listeners to category buttons 47 | categories.addEventListener('click', handleCategoryClick); 48 | 49 | // Display all images initially 50 | displayImages(null); 51 | -------------------------------------------------------------------------------- /jsm projects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /jsm projects/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Noman-Nom/My_javaScript/92c6aafcf515aeba5e643116da952411236dab36/jsm projects/script.js -------------------------------------------------------------------------------- /jsm projects/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Noman-Nom/My_javaScript/92c6aafcf515aeba5e643116da952411236dab36/jsm projects/style.css -------------------------------------------------------------------------------- /projects/project-2_converter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Foot to meter Converter 7 | 53 | 54 | 55 |
56 |
57 | 58 | 59 | 60 |
61 |
62 |

=

63 |
64 |
65 | 66 | 67 | 68 |
69 | 70 |
71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /projects/project-2_converter/script.js: -------------------------------------------------------------------------------- 1 | const foot = document.getElementById("foot"); 2 | const meter = document.getElementById("meter"); 3 | 4 | foot.addEventListener( 5 | "input", 6 | function () { 7 | // console.log('changed'); 8 | const f = this.value; 9 | // console.log(f) 10 | 11 | // this formula convert # of foot into meters 12 | const m = f * 0.304; 13 | // this expression display the value in meter input 14 | meter.value = m.toFixed(5); 15 | }, 16 | false 17 | ); 18 | 19 | meter.addEventListener( 20 | "input", 21 | function () { 22 | // console.log('changed'); 23 | const m = this.value; 24 | // console.log(m) 25 | 26 | const f = m * 3.28; 27 | foot.value= f.toFixed(5); 28 | }, 29 | false 30 | ); 31 | -------------------------------------------------------------------------------- /projects/project-3_colorChanger/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /projects/project-3_colorChanger/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Background Color Changer 7 | 17 | 18 | 19 | 20 |
21 | Red 22 | 23 |
24 | 25 | 29 | 30 | -------------------------------------------------------------------------------- /projects/project-3_colorChanger/script.js: -------------------------------------------------------------------------------- 1 | const clrChnger = document.getElementById('red'); 2 | console.log(clrChnger); 3 | const body = document.querySelector('body'); 4 | 5 | clrChnger.addEventListener('click', function(){ 6 | body.style.backgroundColor ="red"; 7 | }) -------------------------------------------------------------------------------- /promises&Api/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promises & Api 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /promises&Api/script.js: -------------------------------------------------------------------------------- 1 | // promises 2 | 3 | // const promis1 = new Promise((resolve,reject)=>{ 4 | // setTimeout(()=>{ 5 | // console.log("promise 1 ") 6 | // },1000) 7 | // }) 8 | 9 | // promis1.then(()=>{ 10 | // console.log("promise is resolved") 11 | // }) 12 | 13 | const promis1 = new Promise((resolve, reject) => { 14 | setTimeout(() => { 15 | // console.log("promise 1 ") 16 | resolve(); 17 | }, 1000); 18 | }); 19 | 20 | promis1.then(() => { 21 | // console.log("promise is resolved") 22 | }); 23 | 24 | // promise 2 25 | 26 | new Promise((resolve, reject) => { 27 | setTimeout(() => { 28 | // console.log("promise 1 ") 29 | resolve(); 30 | }, 1000); 31 | }).then(() => { 32 | // console.log("promise is resolved") 33 | }); 34 | 35 | // promise 3 36 | const promis3 = new Promise((resolve, reject) => { 37 | setTimeout(() => { 38 | // resolve({user:"noman", gmail: "abc@gmail.com"}) 39 | }, 1000); 40 | }); 41 | 42 | promis3.then((data) => { 43 | // console.log(data) 44 | }); 45 | 46 | // promise 4 47 | 48 | const promise4 = new Promise((resolve, reject) => { 49 | setTimeout(() => { 50 | resolve({ user: "noman", gmail: "abc@gmail.com" }); 51 | }, 1000); 52 | }); 53 | 54 | promise4.then((data) => { 55 | // console.log(data); 56 | return data.user; 57 | }) 58 | .then((user)=>{ 59 | // console.log(user) 60 | 61 | }) 62 | 63 | 64 | // 65 | const promise5 = new Promise((resolve,reject)=>{ 66 | setTimeout(()=>{ 67 | // let error = true; 68 | let error = false; 69 | if(!error){ 70 | resolve({userName:"noman",pass:123}) 71 | }else{ 72 | reject("Error: something went wrong") 73 | } 74 | },1000) 75 | }) 76 | promise5.then((user)=>{ 77 | // console.log(user) 78 | }) 79 | .catch((error)=>{ 80 | // console.log(error) 81 | }) 82 | .finally(()=>{ 83 | // console.log("Apun BAP he") 84 | }) 85 | 86 | // 87 | const promise6 = new Promise((resolve,reject)=>{ 88 | setTimeout(()=>{ 89 | // let error = true; 90 | let error = false; 91 | if(!error){ 92 | resolve({userName:"noman",pass:12367887}) 93 | }else{ 94 | reject("Error: something went wrong") 95 | } 96 | },1000) 97 | }) 98 | 99 | async function comsumePrmise6(){ 100 | try { 101 | const response = await promise6 102 | // console.log(response) 103 | 104 | } catch (error) { 105 | // console.log(error) 106 | } 107 | } 108 | comsumePrmise6() 109 | 110 | // with Api 111 | 112 | 113 | 114 | const getUser = async ()=>{ 115 | const response = await fetch("https://newsapi.org/v2/everything?q=tesla&from=2023-08-18&sortBy=publishedAt&apiKey=bcd2aeba084a4b89b74f151b9d2bd920") 116 | const data = await response.json() 117 | console.log(data) 118 | console.log(data.articles) 119 | 120 | } 121 | 122 | getUser() 123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /promises/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | promises in js 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /promises/script.js: -------------------------------------------------------------------------------- 1 | // promises 2 | 3 | // const prom1 = new Promise((resolve,reject)=>{ 4 | // setTimeout(()=>{ 5 | // console.log("Aysnc task is completed....!") 6 | 7 | 8 | // },1000) 9 | 10 | // }) 11 | 12 | // prom1.then(()=>{ 13 | // console.log("promise is consumed") 14 | // }) 15 | 16 | 17 | // with resolve 18 | const prom1 = new Promise((resolve,reject)=>{ 19 | setTimeout(()=>{ 20 | // console.log("Aysnc task is completed....!") 21 | resolve() 22 | 23 | 24 | },1000) 25 | 26 | }) 27 | 28 | prom1.then(()=>{ 29 | // console.log("promise is consumed") 30 | }) 31 | 32 | 33 | // promise 2 34 | 35 | new Promise((resolve,reject)=>{ 36 | setTimeout(()=>{ 37 | // console.log("promise Aysnc task 2") 38 | resolve() 39 | },1000) 40 | 41 | }).then(()=>{ 42 | // console.log("aync 2 resolved") 43 | }) 44 | 45 | 46 | // promise 3 handling with data 47 | 48 | const prom3 = new Promise((resolve,reject)=>{ 49 | setTimeout(()=>{ 50 | resolve({user:"M.Noman", UserEmail:"noman5456318@gmail.com"}) 51 | 52 | },1000) 53 | 54 | }) 55 | 56 | prom3.then((user)=>{ 57 | // console.log(user) 58 | }) 59 | 60 | const promise4 = new Promise((resolve,reject)=>{ 61 | setTimeout(()=>{ 62 | let error = false 63 | // let error = true 64 | if(!error){ 65 | resolve({userName:"noman",pass:123}) 66 | }else{ 67 | reject("Error: something went wrong") 68 | } 69 | },1000) 70 | 71 | 72 | }) 73 | 74 | promise4.then((user)=>{ 75 | // console.log(user) 76 | return user.userName 77 | }) 78 | .then((userName)=>{ 79 | // console.log(userName) 80 | }) 81 | .catch((error)=>{ 82 | // console.log(error) 83 | }) 84 | .finally(()=>{ 85 | // console.log("The promise is either resolved or rejected") 86 | }) 87 | 88 | // promise 5 89 | 90 | const promise5 = new Promise((resolve,reject)=>{ 91 | setTimeout(()=>{ 92 | // let error = false 93 | let error = true 94 | if(!error){ 95 | resolve({language:"javascript",pass:123}) 96 | }else{ 97 | reject("Error: something went wrong") 98 | } 99 | },1000) 100 | }) 101 | 102 | async function consumePromiseFive(){ 103 | try { 104 | const response = await promise5 105 | // console.log(response) 106 | 107 | } catch (error) { 108 | // console.log(error) 109 | 110 | } 111 | } 112 | 113 | // without try and cathc 114 | // async function consumePromiseFive(){ 115 | // const response = await promise5 116 | // console.log(response) 117 | // } 118 | consumePromiseFive() 119 | 120 | 121 | // with API 122 | 123 | 124 | // async function getUser(){ 125 | // const response = await fetch('https://jsonplaceholder.typicode.com/users') 126 | 127 | // const data = await response.json() 128 | // console.log(data) 129 | // } 130 | 131 | async function getUser(){ 132 | try { 133 | const response = await fetch('https://jsonplaceholder.typicode.com/users') 134 | 135 | const data = await response.json() 136 | // console.log(data) 137 | } catch (error) { 138 | // console.log("E: eror") 139 | } 140 | } 141 | 142 | getUser() 143 | 144 | // with then and catch 145 | 146 | fetch('https://jsonplaceholder.typicode.com/users') 147 | .then((response)=>{ 148 | return response.json() 149 | 150 | }) 151 | .then((data)=>{ 152 | console.log(data) 153 | 154 | }) 155 | .catch((error)=>{ 156 | console.log(error) 157 | }) -------------------------------------------------------------------------------- /test.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Noman-Nom/My_javaScript/92c6aafcf515aeba5e643116da952411236dab36/test.txt -------------------------------------------------------------------------------- /test/script.js: -------------------------------------------------------------------------------- 1 | console.log("hello world") --------------------------------------------------------------------------------