├── index.html ├── index.js ├── project 1.html └── project 2.html /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JavaScript Tutorial 8 | 9 | 27 | 28 |

welcome to the JavaScript Tutorial

29 |
30 | 31 |

this is a paragraph

32 |
33 |
34 |

this is a paragraph

35 |
36 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | //1.way to print js 2 | //console.log("hello word",4+6,"another log"); 3 | // alert("me"); 4 | // document .write("this is document write"); 5 | 6 | //2. console api of JavaScript 7 | //console.log("hello word",4+6,"another log"); 8 | // alert("me"); 9 | // document .write("this is document write"); 10 | //console.warn("this a warning"); 11 | //console.error("this is an error"); 12 | 13 | //3. Javascript variable container to stores data values 14 | //4. datatype in Javascript 15 | //Numbers 16 | var number1 = 34; 17 | var number2 = 62; 18 | // console.log(number2+number1); 19 | 20 | //string 21 | var str1 = "ths is a string"; 22 | var str2 = 'ths is also string'; 23 | 24 | //objects 25 | var marks = { 26 | Ravi: 34, 27 | Shubham: 78, 28 | Harry: 99.977 29 | } 30 | 31 | //booleans 32 | var a = true; 33 | var b = false; 34 | // console.log(a,b); 35 | var und; 36 | var und2 = undefined; 37 | // console.log(marks); 38 | // console.log(und2); 39 | 40 | var n = null; 41 | // console.log(n); 42 | 43 | 44 | /*at a very high level, there are two types of data types in javascript 45 | 1.primitive:undefined,null,number,string,boolean,symbol 46 | 2.Reference:arraya and object 47 | */ 48 | 49 | var arr = [1, 2, 3, 4, "bablu", "Tanbir", 7, 8, 9,]; 50 | // console.log(arr); 51 | 52 | // operator in Jvascript 53 | //arithmetic operator 54 | 55 | var a = 500; 56 | var b = 100; 57 | /*console.log("The valuae of a + b",a+b); 58 | console.log("The valuae of a - b",a-b); 59 | console.log("The valuae of a / b",a/b); 60 | console.log("The valuae of a * b",a*b);*/ 61 | 62 | //Assingment Operators 63 | 64 | var c = b; 65 | //c+= 250; 66 | //c-= 250; 67 | //c*= 250; 68 | //c/= 250; 69 | // console.log(c); 70 | 71 | var x = 34; 72 | var y = 56; 73 | /*console.log(x == y); 74 | console.log(x <= y); 75 | console.log(x >= y); 76 | console.log(x < y); 77 | console.log(x > y);*/ 78 | // logical and 79 | // console.log(true && true); 80 | // console.log(true && false); 81 | // console.log(false && true); 82 | // console.log(false && false); 83 | 84 | //logical or 85 | // console.log(true || true); 86 | // console.log(true || false); 87 | // console.log(false|| true); 88 | // console.log(false|| false); 89 | 90 | //logical not 91 | // console.log(!false) 92 | // console.log(!true) 93 | 94 | //Function in javascript 95 | // DRY = Do not repeat yourself 96 | function avg(a, b) { 97 | c = (a + b) / 2; 98 | return c; 99 | } 100 | 101 | c1 = avg(4, 6); 102 | c2 = avg(14, 16); 103 | // console.log(c1,c2); 104 | 105 | // conditional in Javascript 106 | 107 | // var age = 31; 108 | //if else tabele 109 | /*if(age > 18){ 110 | console.log('you are not a kid'); 111 | } 112 | else{ 113 | console.log('you are a kid') 114 | } 115 | */ 116 | //single if statement 117 | 118 | // if(age > 18){ 119 | // console.log('you are not a kid'); 120 | // } 121 | 122 | // if-else ladder 123 | // if(age >32){ 124 | // console.log("you are not a kid") 125 | // } 126 | // else if(age >26){ 127 | // console.log("Bache nahi rahe"); 128 | // } 129 | // else if(age >22){ 130 | // console.log("yes Bache nahi rahe"); 131 | // } 132 | // else if(age >18){ 133 | // console.log("18 Bache nahi rahe"); 134 | // } 135 | // else{ 136 | // console.log("bache rahe") 137 | // } 138 | // console.log("end of ladder") 139 | //var arr = [1, 2, 3, 4, 5, 6, 7]; 140 | //for(var i = 0;i remove an element 223 | 224 | // selecting using query 225 | // sel = document.querySelector(".container") 226 | // console.log(sel); 227 | 228 | // events in javaScript 229 | 230 | // function clicked(){ 231 | // console.log('button was clicked') 232 | // } 233 | 234 | // window.onload = function(){ 235 | // console.log('document was clicked') 236 | 237 | // } 238 | 239 | // firstcontainer.addEventListener('click',function() 240 | // { 241 | // document.querySelectorAll('.container')[1].innerHTML = " we have clicked" 242 | // console.log("click hua") 243 | // }) 244 | 245 | // firstcontainer.addEventListener('mouseover',function(){ 246 | // console.log("mouse on container") 247 | // }) 248 | // firstcontainer.addEventListener('mouseout',function(){ 249 | // console.log("mouse out of container") 250 | // }) 251 | 252 | // let prevHTMl = document.querySelectorAll('.container')[1].innerHTML; 253 | 254 | 255 | // firstcontainer.addEventListener('mouseup',function(){ 256 | // document.querySelectorAll('.container')[1].innerHTML = prevHTMl; 257 | // console.log("mouse up when clicked on container") 258 | // }) 259 | // firstcontainer.addEventListener('mousedown',function(){ 260 | // console.log("mouse down when clicked on container") 261 | // }) 262 | 263 | 264 | // arrow function 265 | // function sum(a, b){ 266 | // return a+b; 267 | // } 268 | summ = (a,b)=>{ 269 | return a+b; 270 | } 271 | 272 | // setTimeout and setInterval 273 | logkaro = ()=>{ 274 | document.querySelectorAll('.container')[1].innerHTML = " we have clicked after 5 sec" 275 | // console.log("I am your log time") 276 | } 277 | // clr = setTimeout(logkaro, 5000); 278 | // clr = setInterval(logkaro, 2000); 279 | 280 | // use clearInterval(clr)/clearTimeout(clr) to cancel setInterval/setTimeout 281 | 282 | 283 | // Javasript localStorage 284 | //localstrorage 285 | //localstrorage.setItem("name","harry") localstorage.clear() localstorage.getItem('') 286 | // localStorage.removeItem('name') 287 | // localStorage.clear(); 288 | 289 | 290 | 291 | //JSON 292 | // obj = {name: "Monster", length: 1, a: {this: 'tha\\ "t'}} 293 | // jso = JSON.stringify(obj); 294 | // console.log(jso) 295 | // parsed = JSON.parse(`{"name":"Monster","length":1,"a":{"this":"tha\\"t"}}`) 296 | 297 | // console.log(parsed); 298 | 299 | //template literals-backtricks 300 | a = 34; 301 | // console.log(`this is my ${a}`) 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | -------------------------------------------------------------------------------- /project 1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | show me times 12 | 13 | 25 | 26 | 27 | 28 | 64 | 65 |
66 | 67 |
68 |

current time is

69 |

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

70 |
71 |

It uses utility classes for typography and spacing to space content out within the larger container.

72 | browse times 73 |
74 | 75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 88 | 89 | -------------------------------------------------------------------------------- /project 2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | to do list 12 | 13 | 14 | 15 | 16 | 52 | 53 |
54 |

todos list

55 | 56 | 57 |
58 | 59 | 60 |
Add an item to the list.
61 |
62 |
63 | 64 | 65 |

66 | 67 | 68 | 69 |
70 |

yours items

71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 |
snoitemitem descriptionAction
1get some coffeeyou need a coffee as you are a coder
92 | 93 | 94 |
95 |
96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 108 | 146 | 147 | 148 | 149 | 150 | --------------------------------------------------------------------------------