├── 11_PROJECT └── image-slider-project │ ├── images │ ├── flower-1.jpg │ ├── flower-2.jpg │ └── flower-3.jpg │ ├── index.html │ ├── scripts │ └── index.js │ └── styles │ └── style.css ├── 1_BASIC_JS ├── FOR_FOREACH.js ├── Task1.txt ├── Task2.txt ├── Task3.txt ├── Task4.txt ├── Task5.txt ├── Task6.txt ├── Task7.txt ├── index.html ├── index.js ├── program1.js ├── program10.js ├── program11.js ├── program12.js ├── program13.js ├── program14.js ├── program15.js ├── program16.js ├── program17.js ├── program18.js ├── program19.js ├── program2.js ├── program20.js ├── program21.js ├── program22.js ├── program23.js ├── program25.js ├── program26.js ├── program27.js ├── program28.js ├── program29.js ├── program3.js ├── program37.js ├── program38.js ├── program4.js ├── program5.js ├── program6.js ├── program7.js ├── program8.js └── program9.js ├── 2_DATA_STRUCTURE ├── index.html ├── index1.js ├── index2.js ├── index3.js ├── index4.js └── index5.js ├── 3_JS HTML DOM ├── 1_FIND_HTML_ELEMENTS │ ├── index.html │ └── program27.js ├── 2_CHANGE_HTML_ELEMENTS │ ├── index.html │ └── program28.js ├── 3_CREATE_ADD_REMOVE_HTML_ELEMENTS │ ├── index.html │ └── index.js ├── 4_CSS_STYLING │ ├── index.html │ ├── index.js │ └── style.css ├── 5_DOM_EVENTS │ ├── clipboard-events │ │ ├── index.html │ │ └── index.js │ ├── focus-events │ │ ├── index.html │ │ └── index.js │ ├── index.html │ ├── index.js │ ├── keyboard-events │ │ ├── index.html │ │ └── index.js │ ├── media-events │ │ ├── index.html │ │ └── index.js │ ├── more-event-object │ │ ├── index.html │ │ └── index.js │ ├── mouse-events │ │ ├── index.html │ │ ├── index.js │ │ └── style.css │ ├── onchange │ │ ├── index.html │ │ └── onchange.js │ └── onsubmit │ │ ├── index.html │ │ ├── index.js │ │ └── style.css ├── 6_DOM_EVENT_LISTENER │ ├── index.html │ └── index.js └── 7_DOM_SUMMARY │ └── index.js ├── 4_Browser_BOM ├── index.html ├── index.js ├── index1.js ├── index2.js └── style.css ├── 5_Error_Handling ├── ERROR_HANDLING_1.js └── ERROR_HANDLING_2.js ├── 6_ES6 FEATURES ├── 1_ES6_SYNTAX │ ├── 1.1_ES6_VARIABLES.js │ ├── 1.2_HOISTING_STRICTMODE.js │ ├── 1.3_TEMPLATE_LITERAL.js │ ├── 1.4_DEFAULT_AND_REST_PARAMETER.js │ ├── 1.5_SPREAD_OPERATOR.js │ ├── 1.6_OBJECT_LITERAL.js │ └── 1.7_FOROF_FORIN.js ├── 2_ARROW_FUNCTION │ └── ARROW_FUNCTION.js ├── 3_DESTRUCTURING │ └── index.js ├── 4_ARRAY_METHODS │ └── index.js ├── 5_STRING_METHODS │ └── index.js ├── 6_ES6_MODULES │ ├── index.html │ ├── index.js │ └── myModule.js ├── 7_ES6_CLASS │ └── index.js └── 8_ASYNCHRONOUS_PROG │ ├── index.html │ ├── index1.js │ ├── index2.js │ ├── index3.js │ ├── index4.js │ └── index5.js ├── 7_API_CALLING ├── index.html └── scripts │ ├── axios.js │ ├── fetch.js │ ├── jquery.js │ └── xhr.js ├── 8_JSON ├── friends.json └── index.js ├── 9_Storage ├── cookie-example.js ├── index.html ├── local-storage.js └── session-storage.js └── README.md /11_PROJECT/image-slider-project/images/flower-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/javascript-tutorials-code/f1c6aed2e40c7512acf73dbbc58f389280860e74/11_PROJECT/image-slider-project/images/flower-1.jpg -------------------------------------------------------------------------------- /11_PROJECT/image-slider-project/images/flower-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/javascript-tutorials-code/f1c6aed2e40c7512acf73dbbc58f389280860e74/11_PROJECT/image-slider-project/images/flower-2.jpg -------------------------------------------------------------------------------- /11_PROJECT/image-slider-project/images/flower-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/javascript-tutorials-code/f1c6aed2e40c7512acf73dbbc58f389280860e74/11_PROJECT/image-slider-project/images/flower-3.jpg -------------------------------------------------------------------------------- /11_PROJECT/image-slider-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | Image slider project 15 | 16 | 17 | 18 |
19 |
20 |

Flowers

21 |
22 | 23 | flower-1 24 | 25 |
26 |

Developed with ♥ by Anisul Islam

27 |
28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /11_PROJECT/image-slider-project/scripts/index.js: -------------------------------------------------------------------------------- 1 | let images = [ 2 | "./images/flower-1.jpg", 3 | "./images/flower-2.jpg", 4 | "./images/flower-3.jpg", 5 | ]; 6 | let prev = document.getElementById("prev"); 7 | let next = document.getElementById("next"); 8 | let img = document.querySelector(".slide-img"); 9 | let count = 0; 10 | prev.addEventListener("click", () => { 11 | count--; 12 | if (count < 0) { 13 | count = images.length - 1; 14 | img.src = images[count]; 15 | } else { 16 | img.src = images[count]; 17 | } 18 | }); 19 | next.addEventListener("click", () => { 20 | count++; 21 | if (count > images.length - 1) { 22 | count = 0; 23 | img.src = images[count]; 24 | } else { 25 | img.src = images[count]; 26 | } 27 | }); 28 | -------------------------------------------------------------------------------- /11_PROJECT/image-slider-project/styles/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | body { 5 | margin: 0; 6 | padding: 0; 7 | background-color: rgb(192, 77, 77); 8 | } 9 | .container { 10 | width: 1000px; 11 | margin: 0 auto; 12 | text-align: center; 13 | } 14 | .title { 15 | margin: 0; 16 | font-size: 2.5rem; 17 | padding: 1rem; 18 | } 19 | 20 | .slide-container { 21 | position: relative; 22 | max-width: 100%; 23 | } 24 | button { 25 | position: absolute; 26 | top: 50%; 27 | transform: translate(-50%); 28 | border: none; 29 | font-size: 2rem; 30 | background-color: transparent; 31 | } 32 | .slide-img { 33 | width: 400px; 34 | height: 450px; 35 | margin: 0 2rem; 36 | } 37 | 38 | @media screen and (max-width: 768px) { 39 | .container { 40 | width: 100%; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /1_BASIC_JS/FOR_FOREACH.js: -------------------------------------------------------------------------------- 1 | var numbers = [10,20,30] 2 | 3 | //for loops 4 | for(let x=0; x") 4 | document.write("Nationality : Bangladeshi
") 5 | document.write("Email : anisul2010s@yahoo.co.uk") -------------------------------------------------------------------------------- /1_BASIC_JS/Task2.txt: -------------------------------------------------------------------------------- 1 | /* Program for Task 2*/ 2 | /* try this as internal js*/ 3 | // A program to understand string library functions 4 | 5 | //getting firstname and lastname from user 6 | var firstName = prompt("Enter the first Name : ") 7 | var lastName = prompt("Enter Your Last name") 8 | 9 | //adding firstname and lastname 10 | var fullName = firstName + lastName; 11 | 12 | //printing the full name 13 | document.write("Fullname is : " + fullName + "
") 14 | 15 | //printing the length of full name 16 | document.write("Length of full name : " + fullName.length + "
") 17 | 18 | //printing the full name in uppercase 19 | document.write("Uppercase Full name : " + fullName.toUpperCase()) 20 | -------------------------------------------------------------------------------- /1_BASIC_JS/Task3.txt: -------------------------------------------------------------------------------- 1 | /* Program for Task 3*/ 2 | // A program that calculates addition, subtraction, multiplication, division and remainder of 2 numbers 3 | 4 | //declaring all the variables 5 | var num1, num2, sum, sub, mul, div, rem; 6 | 7 | // getting num1 and num2 and also converting them into Integer. REMEMBER the default data type of prompt is String 8 | num1 = parseInt(prompt("Enter First Number : ")) 9 | num2 = parseInt(prompt("Enter Second Number : ")) 10 | 11 | // we could convert it like following 12 | // num1 = parseInt(num1, 10) 13 | 14 | //calculating the sum and then printing the result 15 | sum = num1 + num2 16 | document.write("Addition = " + sum + "
") 17 | 18 | //calculating the sub and then printing the result 19 | sub = num1 - num2 20 | document.write("subtraction = " + sub + "
") 21 | 22 | //calculating the multiplication and then printing the result 23 | mul = num1 * num2 24 | document.write("Multiplication = " + mul + "
") 25 | 26 | //calculating the division and then printing the result 27 | div = num1 / num2 28 | document.write("Division = " + div + "
") 29 | 30 | //calculating the remainder and then printing the result 31 | rem = num1 % num2 32 | document.write("Remainder = " + rem + "
") 33 | -------------------------------------------------------------------------------- /1_BASIC_JS/Task4.txt: -------------------------------------------------------------------------------- 1 | /* Program for Task 4*/ 2 | // Letter Grade Program. Happy coding 3 | 4 | var marks = parseInt(prompt("Enter Marks : ")) 5 | 6 | // checking the conditions 7 | if (marks >= 80) 8 | document.write("A+") 9 | else if (marks >= 70) 10 | document.write("A") 11 | else if (marks >= 60) 12 | document.write("A-") 13 | else if (marks >= 50) 14 | document.write("B") 15 | else if (marks >= 40) 16 | document.write("C") 17 | else if (marks >= 33) 18 | document.write("D") 19 | else 20 | document.write("Sorry. You are Failed") -------------------------------------------------------------------------------- /1_BASIC_JS/Task5.txt: -------------------------------------------------------------------------------- 1 | /* Program for Task 5*/ 2 | // Vowel or connsonant program using switch 3 | 4 | var letter = prompt("Enter a letter : ") 5 | letter = letter.toLowerCase() 6 | 7 | // checking the conditions for vowel and consonant 8 | switch (letter) { 9 | case "a": 10 | case "e": 11 | case "i": 12 | case "o": 13 | case "u": 14 | document.write("Vowel"); 15 | break; 16 | default: 17 | document.write("Consonant"); 18 | } 19 | // Happy coding with Anisul Islam -------------------------------------------------------------------------------- /1_BASIC_JS/Task6.txt: -------------------------------------------------------------------------------- 1 | /* Program for Task 6*/ 2 | // A program that will find sum of all numbers from 1 to 100 that are divisible by 3 and 5 3 | 4 | var sum = 0 5 | var i = 1 6 | while (i <= 100) { 7 | if (i % 3 == 0 && i % 5 == 0) { 8 | sum = sum + i 9 | } 10 | i = i + 1 11 | } 12 | document.write("sum is : " + sum) 13 | -------------------------------------------------------------------------------- /1_BASIC_JS/Task7.txt: -------------------------------------------------------------------------------- 1 | // creating a simple calculator that will add, sub, mul, div 2 | // Thanks for trying hard 3 | function add(num1, num2) { 4 | return num1 + num2; 5 | } 6 | function sub(num1, num2) { 7 | return num1 - num2; 8 | } 9 | function mul(num1, num2) { 10 | return num1 * num2; 11 | } 12 | function div(num1, num2) { 13 | return num1 / num2; 14 | } 15 | 16 | console.log(add(25, 20)); 17 | console.log(sub(25, 20)); 18 | console.log(mul(25, 20)); 19 | console.log(div(25, 20)); 20 | -------------------------------------------------------------------------------- /1_BASIC_JS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /1_BASIC_JS/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/javascript-tutorials-code/f1c6aed2e40c7512acf73dbbc58f389280860e74/1_BASIC_JS/index.js -------------------------------------------------------------------------------- /1_BASIC_JS/program1.js: -------------------------------------------------------------------------------- 1 | // output functions -> functions that will help you to show output 2 | // document.write(), console.log(), alert() 3 | // console.clear(), console.error(), console.info(), console.warn() 4 | 5 | document.write("Welcome to JS Program"); 6 | document.write("

Welcome to JS Program

"); 7 | document.write("

Welcome to JS Program

"); 8 | 9 | console.log("Welcome to JS Program"); 10 | 11 | //this alert() will display an alert message 12 | alert("welcome to js program"); 13 | -------------------------------------------------------------------------------- /1_BASIC_JS/program10.js: -------------------------------------------------------------------------------- 1 | // Relational Operator : >, >=, <, <=, 2 | // ==(for checking only value), ===(for checking value and data type), !=, !== 3 | // Logical Operator : &&, ||, ! 4 | 5 | // Relational and logical operators return true / false 6 | 7 | var num1 = 20; 8 | var num2 = 10; 9 | var num3 = "10"; 10 | var num4 = 20; 11 | var num5 = 15; 12 | 13 | console.log(num1 > num2); 14 | console.log(num1 >= num2); 15 | console.log(num1 < num2); 16 | console.log(num1 <= num2); 17 | console.log(num1 == num4); 18 | console.log(num1 != num4); 19 | console.log(num1 === num3); 20 | console.log("num2 === num3 : " + (num2 === num3)); 21 | console.log("num2 == num3 : " + (num2 == num3)); 22 | console.log(num1 !== num3); 23 | 24 | // logical operators helps us to compine multiple conditions 25 | console.log(num1 > num2 && num1 > num5); 26 | console.log(num1 > num2 || num1 > num5); 27 | -------------------------------------------------------------------------------- /1_BASIC_JS/program11.js: -------------------------------------------------------------------------------- 1 | // conditional control statement -> if, else if, else, switch 2 | 3 | // a program that will find a large number between 2 numbers 4 | var num1 = parseInt(prompt("Enter first numebr : ")); 5 | var num2 = parseInt(prompt("Enter second numebr : ")); 6 | 7 | // first method - using only if 8 | if (num1 > num2) { 9 | console.log("Large Number is : " + num1); 10 | } 11 | if (num1 < num2) { 12 | console.log("Large Number is : " + num2); 13 | } 14 | if (num1 == num2) { 15 | console.log("Equal numbers"); 16 | } 17 | 18 | // second method - more efficient than first method 19 | if (num1 > num2) { 20 | console.log("Large Number is : " + num1); 21 | } else if (num1 < num2) { 22 | console.log("Large Number is : " + num2); 23 | } else if (num1 == num2) { 24 | console.log("Equal numbers"); 25 | } 26 | 27 | // third method - more efficient than first and second method 28 | if (num1 > num2) { 29 | console.log("Large Number is : " + num1); 30 | } else if (num1 < num2) { 31 | console.log("Large Number is : " + num2); 32 | } else { 33 | console.log("Equal numbers"); 34 | } 35 | -------------------------------------------------------------------------------- /1_BASIC_JS/program12.js: -------------------------------------------------------------------------------- 1 | // A program that will find a letter is vowel or consonant 2 | var letter = prompt("Enter a letter : "); 3 | 4 | // convert any uppercase input into lower cause we set only lowercase letter in condition 5 | letter = letter.toLowerCase(); 6 | 7 | // Now check the condition 8 | if ( 9 | letter == "a" || 10 | letter == "e" || 11 | letter == "i" || 12 | letter == "o" || 13 | letter == "u" 14 | ) { 15 | console.log("Vowel"); 16 | } else { 17 | console.log("Consonant"); 18 | } 19 | -------------------------------------------------------------------------------- /1_BASIC_JS/program13.js: -------------------------------------------------------------------------------- 1 | // A program to understand switch -> digit spelling program 2 | // 0 -> Zero 3 | // 1 -> One 4 | // 2 -> Two 5 | // ... 6 | // ... 7 | // 9 -> Nine 8 | // if input is not a number then program will display "not a digit" 9 | 10 | var digit = parseInt(prompt("Enter a digit : ")); 11 | switch (digit) { 12 | case 0: 13 | document.write("Zero"); 14 | break; 15 | 16 | case 1: 17 | document.write("One"); 18 | break; 19 | 20 | case 2: 21 | document.write("Two"); 22 | break; 23 | 24 | case 3: 25 | document.write("Three"); 26 | break; 27 | 28 | case 4: 29 | document.write("Four"); 30 | break; 31 | 32 | case 5: 33 | document.write("Five"); 34 | break; 35 | 36 | case 6: 37 | document.write("Six"); 38 | break; 39 | 40 | case 7: 41 | document.write("Seven"); 42 | break; 43 | 44 | case 8: 45 | document.write("Eight"); 46 | break; 47 | 48 | case 9: 49 | document.write("Nine"); 50 | break; 51 | 52 | default: 53 | document.write("Not a digit"); 54 | } 55 | -------------------------------------------------------------------------------- /1_BASIC_JS/program14.js: -------------------------------------------------------------------------------- 1 | //A program to demonstrate for loop 2 | 3 | // for loop syntax 4 | for (var i = 1; i <= 10; i++) { 5 | document.write("Bangladesh" + "
"); 6 | } 7 | 8 | document.write("End of for loop"); 9 | 10 | // sum of numbers 1+2+..+100 11 | var sum = 0; 12 | for (var x = 1; x <= 100; x++) { 13 | sum = sum + x; 14 | } 15 | document.write("The sum is " + sum); 16 | -------------------------------------------------------------------------------- /1_BASIC_JS/program15.js: -------------------------------------------------------------------------------- 1 | //A program to demonstrate while loop 2 | // while loop syntax 3 | var i = 1; 4 | while (i <= 10) { 5 | document.write("Bangladesh" + "
"); 6 | i++; 7 | } 8 | 9 | document.write("End of for loop"); 10 | 11 | // sum of numbers 1+2+..+100 12 | var sum = 0; 13 | var x = 1; 14 | while (x <= 100) { 15 | sum = sum + x; 16 | x++; 17 | } 18 | document.write(sum); 19 | -------------------------------------------------------------------------------- /1_BASIC_JS/program16.js: -------------------------------------------------------------------------------- 1 | // A program to demonstrate do while loop 2 | // do while loop syntax 3 | var i = 1; 4 | do { 5 | document.write("Bangladesh" + "
"); 6 | i++; 7 | } while (i <= 10); 8 | 9 | document.write("End of do while loop"); 10 | 11 | // sum of numbers 1+2+..+100 12 | var sum = 0; 13 | var x = 1; 14 | do { 15 | sum = sum + x; 16 | x++; 17 | } while (x <= 100); 18 | document.write(sum); 19 | -------------------------------------------------------------------------------- /1_BASIC_JS/program17.js: -------------------------------------------------------------------------------- 1 | // break and continue program 2 | 3 | // The break statement "jumps out" of a loop or switch. 4 | for (var i = 1; i <= 100; i++) { 5 | if (i == 20) break; 6 | document.write(i + "
"); 7 | } 8 | 9 | // The continue statement breaks one iteration (in the loop), if a specified condition occurs, and continues with the next iteration in the loop. 10 | for (var i = 1; i <= 100; i++) { 11 | if (i == 20) continue; 12 | document.write(i + "
"); 13 | } 14 | -------------------------------------------------------------------------------- /1_BASIC_JS/program18.js: -------------------------------------------------------------------------------- 1 | // Function example 2 | 3 | // creating function without parameter 4 | function message() { 5 | document.write("Hello, I am a function without parameter" + "
"); 6 | } 7 | 8 | // creating function with one parameter 9 | function welcomeMessage(name) { 10 | document.write("welcome " + name + "
"); 11 | } 12 | 13 | // creating function with multiple parameters 14 | function addition(num1, num2) { 15 | var sum = num1 + num2; 16 | document.write("addition is " + sum + "
"); 17 | } 18 | 19 | // returning from a function 20 | function square(num) { 21 | return num * num; 22 | } 23 | 24 | 25 | //calling functions 26 | message(); 27 | welcomeMessage("Anisul Islam"); 28 | addition(2, 3); 29 | document.write("square of 5 is " + square(5) + "
"); -------------------------------------------------------------------------------- /1_BASIC_JS/program19.js: -------------------------------------------------------------------------------- 1 | // IIFEs (Immediately Invokeable Function Expressions) 2 | 3 | // (function display(message) { 4 | // console.log(message); 5 | // })('hi'); 6 | 7 | // Function Expressions 8 | var display2 = function displayMessage(msg) { 9 | console.log(msg); 10 | }; 11 | display2("I am message"); 12 | 13 | // ( ), { }, [ ], < > 14 | // Task 7: create an IIFEs that print sum of 2 numbers 15 | -------------------------------------------------------------------------------- /1_BASIC_JS/program2.js: -------------------------------------------------------------------------------- 1 | //you can run this program by using the command => node program2.js 2 | 3 | // keywords -> reserved words for specific reasons. example -> for,while, do while, if, else, else if, break, try,catch, function, var, const, let etc. 4 | 5 | // data type 6 | // primitive data type - String, Number (int,float,double), Boolean, Undefined, Null 7 | // Reference data type - Array, Object. 8 | // use typeof() to check the data type 9 | // comment -> single line comment, double line comment 10 | 11 | //This is a single line comment 12 | 13 | /* 14 | This is 15 | multiple line 16 | comment 17 | */ 18 | 19 | console.log(typeof 123); 20 | console.log(typeof 123.5); 21 | console.log(typeof "123"); 22 | console.log(typeof true); 23 | console.log(typeof false); 24 | 25 | //collected from w3school's website 26 | var car; // Value is undefined, type is undefined 27 | var car = ""; // The value is "", the typeof is "string" 28 | 29 | var person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" }; 30 | person = null; // Now value is null, but type is still an object 31 | 32 | var person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" }; 33 | person = undefined; // Now both value and type is undefined 34 | 35 | typeof "John"; // Returns "string" 36 | typeof 3.14; // Returns "number" 37 | typeof true; // Returns "boolean" 38 | typeof false; // Returns "boolean" 39 | typeof x; // Returns "undefined" (if x has no value) 40 | -------------------------------------------------------------------------------- /1_BASIC_JS/program20.js: -------------------------------------------------------------------------------- 1 | // Array -> is a collection of variables 2 | // Array VS Object -> arrays use numbered indexes. but, objects use named indexes. 3 | 4 | // creating an array with 20 variables 5 | var names = new Array(20); 6 | 7 | //array index always start with 0 8 | names[0] = "Anisul"; 9 | names[1] = "Sonali"; 10 | 11 | //printing an array elements 12 | console.log(names[1]); 13 | 14 | // creating an array with values 15 | var students = ["Anisul", "Sonali", "Priya", "Numan"]; 16 | console.log("students = " + students); 17 | console.log("studnet at 2 index : " + students[2]); 18 | 19 | //finding the length of an array 20 | console.log("Length of student array : " + students.length); 21 | 22 | //pusing an element in array 23 | students.push("musa"); 24 | console.log("after pushing students = " + students); 25 | 26 | //pusing an element in array 27 | students.pop("musa"); 28 | console.log("after poping students = " + students); 29 | 30 | // concatenation of arrays 31 | var num1 = [10, 20]; 32 | var num2 = [30, 40, 50, 60]; 33 | var num = num1.concat(num2); 34 | console.log("After concatenation : " + num); 35 | -------------------------------------------------------------------------------- /1_BASIC_JS/program21.js: -------------------------------------------------------------------------------- 1 | // Loop in one dimensional array program 2 | 3 | // declaring an array that has 5 elements 4 | var num = [10, 20, 30, 40, 50]; 5 | 6 | // we can print like following 7 | // console.log(num[0]); 8 | // console.log(num[1]); 9 | // console.log(num[2]); 10 | // console.log(num[3]); 11 | // console.log(num[4]); 12 | 13 | // but we will use for loop to do this task more easily 14 | for (var i = 0; i < num.length; i++) { 15 | console.log(num[i]); 16 | } 17 | 18 | // taking numbers from user using an array and finding the sum 19 | var numbers = []; 20 | var sum = 0; 21 | var n = parseInt(prompt("how many numbers you want to take? ")); 22 | for (var x = 0; x < n; x++) { 23 | numbers[x] = parseInt(prompt("Enter number : ")); 24 | // numbers.push(parseInt(prompt("Enter number : "))); 25 | sum = sum + numbers[x]; 26 | } 27 | console.log(numbers); 28 | console.log("sum is : " + sum); 29 | -------------------------------------------------------------------------------- /1_BASIC_JS/program22.js: -------------------------------------------------------------------------------- 1 | // Array methods program 2 | 3 | // you have already learned about pop(),push(),concat() 4 | // shift(), unshift(), splice(pos,noe,ele1,ele2..), splice(start INDEX,end INDEX), slice(4) 5 | // sort(), reverse() 6 | 7 | var names = ["Mina", "Rabeya", "Kolpona", "Anis"]; 8 | console.log(names); 9 | 10 | // // shift opposite of pop 11 | // names.shift(); 12 | // console.log(names); 13 | 14 | // // unshiftt opposite of push 15 | // names.unshift("Sagor"); 16 | // console.log(names); 17 | 18 | // adding elements using splice 19 | // names.splice(2,1,"Karim","Rahim"); 20 | // console.log(names); 21 | 22 | // removing elements using splice 23 | // names.splice(1,2); 24 | // console.log(names); 25 | 26 | // slice 27 | // var newArray = names.slice(1); 28 | // console.log(newArray) 29 | // console.log(names) 30 | 31 | // var sortedNames = names.sort(); 32 | // names.reverse(); 33 | // console.log(sortedNames) 34 | 35 | var numbers = [20, 5, 25, 45, 1]; 36 | numbers.sort(function (a, b) { 37 | return b - a; 38 | }); 39 | console.log(numbers); 40 | -------------------------------------------------------------------------------- /1_BASIC_JS/program23.js: -------------------------------------------------------------------------------- 1 | //sorting program 2 | 3 | // The sort() method sorts an array alphabetically: 4 | var fruits = ["Banana", "Orange", "Apple", "Mango"]; 5 | fruits.sort(); // Sorts the elements of fruits 6 | 7 | //The reverse() method reverses the elements in an array. 8 | // You can use it to sort an array in descending order: 9 | var fruits = ["Banana", "Orange", "Apple", "Mango"]; 10 | fruits.sort(); // First sort the elements of fruits 11 | fruits.reverse(); // Then reverse the order of the elements 12 | 13 | // You can fix this by providing a compare function: 14 | var points = [40, 100, 1, 5, 25, 10]; 15 | points.sort(function (a, b) { 16 | console.log(a + " , " + b); 17 | console.log(points); 18 | return a - b; 19 | }); 20 | 21 | // se the same trick to sort an array descending: 22 | var points = [40, 100, 1, 5, 25, 10]; 23 | points.sort(function (a, b) { 24 | return b - a; 25 | }); 26 | 27 | /* 28 | The Compare Function 29 | 30 | The purpose of the compare function is to define an alternative sort order. 31 | 32 | The compare function should return a negative, zero, or positive value, depending on the arguments: 33 | function(a, b){return a - b} 34 | 35 | When the sort() function compares two values, it sends the values to the compare function, and sorts the values according to the returned (negative, zero, positive) value. 36 | 37 | If the result is negative a is sorted before b. 38 | 39 | If the result is positive b is sorted before a. 40 | 41 | If the result is 0 no changes are done with the sort order of the two values. 42 | 43 | Example: 44 | 45 | The compare function compares all the values in the array, two values at a time (a, b). 46 | 47 | When comparing 40 and 100, the sort() method calls the compare function(40, 100). 48 | 49 | The function calculates 40 - 100 (a - b), and since the result is negative (-60), the sort function will sort 40 as a value lower than 100. 50 | 51 | */ 52 | -------------------------------------------------------------------------------- /1_BASIC_JS/program25.js: -------------------------------------------------------------------------------- 1 | // object program example 2 | // what is Object? 3 | // How to create an object? 4 | // How to access object properties? 5 | // Constructor, this keyword 6 | // function inside constructor 7 | 8 | // declaring variables and using them 9 | var name = "Anisul Islam"; 10 | var age = 27; 11 | var cgpa = 3.92; 12 | var lang = ["Bengali", "English"]; 13 | 14 | // declaring objects -> object is one type of variable that can store differnt types of variables 15 | var student1 = { 16 | // property : value 17 | name: "Anisul Islam", 18 | age: 27, 19 | cgpa: 3.92, 20 | lang: ["Bengali", "English"], 21 | } 22 | 23 | var student2 = { 24 | // property : value 25 | name: "Rokib", 26 | age: 28, 27 | cgpa: 2.92, 28 | lang: ["Hindi", "Bengali"], 29 | } 30 | 31 | var student3 = { 32 | // property : value 33 | name: "Sweety", 34 | age: 25, 35 | cgpa: 4.92, 36 | lang: ["Bengali", "Urdu"], 37 | } 38 | // printing object property's value 39 | // object properties can be accessed in two ways: objectName.propertyName or objectName["propertyName"] 40 | console.log(student1.name); 41 | console.log(student1[name]); 42 | console.log(student1); 43 | 44 | 45 | 46 | console.log("using constructor"); 47 | // adding constructor and simplifying the task 48 | 49 | function Student(name, age, cgpa, lang) { 50 | this.name = name; 51 | this.age = age; 52 | this.cgpa = cgpa; 53 | this.lang = lang; 54 | 55 | // adding function inside the constructor 56 | // this.display = function () { 57 | // console.log(this.name); 58 | // } 59 | 60 | } 61 | 62 | var s1 = new Student("Anisul Islam", 27, 3.92, ["Bengali", "English"]); 63 | var s2 = new Student("Rabeya Begum", 23, 4.92, ["Bengali", "Urdu"]); 64 | var s3 = new Student("Milon", 29, 4.68, ["Bengali", "Hindi"]); 65 | 66 | console.log(s1); 67 | console.log(s2); 68 | console.log(s3); -------------------------------------------------------------------------------- /1_BASIC_JS/program26.js: -------------------------------------------------------------------------------- 1 | // Math Object program 2 | // Math.PI, Math.abs() 3 | // Math.sin(), Math.cos() ... 4 | // Math.pow(x,y), Math.sqrt() 5 | // Math.floor(), Math.ceil(), Math.round(), 6 | // Math.min(), Math.max() 7 | 8 | console.log(Math.sqrt(25)); 9 | 10 | // sin(), cos(), tan() ... 11 | console.log(Math.sin(25)); 12 | 13 | 14 | console.log(Math.abs(-25)); 15 | 16 | console.log(Math.pow(2, 3)); 17 | 18 | console.log(Math.floor(2.4)); 19 | console.log(Math.ceil(2.4)); 20 | 21 | console.log(Math.round(2.4)); 22 | 23 | console.log(Math.max(2, 8)); 24 | console.log(Math.min(2, 8)); 25 | 26 | // returns value between 0 to 1 by default 27 | console.log(Math.random()); 28 | 29 | // returns value between 0 to 5 30 | console.log(Math.random() * 6); 31 | 32 | // returns value between 0 to 5 integer value 33 | console.log(Math.floor(Math.random() * 6)); 34 | 35 | // returns value between 1 to 5 integer value 36 | console.log(Math.floor(Math.random() * 5) + 1); -------------------------------------------------------------------------------- /1_BASIC_JS/program27.js: -------------------------------------------------------------------------------- 1 | /* Guessing Game */ 2 | var numberOfWins = 0 3 | var numberOfLost = 0 4 | 5 | // run the program for 5 times 6 | for (var i = 1; i <= 5; i++) { 7 | 8 | // Guess a number from 1 to 5 9 | var guessNumber = parseInt(prompt("Guess a number from 1 to 5 : ")) 10 | 11 | // Generate a random number between 1 to 5 12 | var randomNumber = Math.floor(Math.random() * 5) + 1; 13 | 14 | //check condition 15 | 16 | if (guessNumber == randomNumber) { 17 | numberOfWins++; 18 | console.log("You have won ") 19 | } 20 | else { 21 | numberOfLost++; 22 | console.log("You have lost. Random number was : " + randomNumber) 23 | } 24 | } 25 | console.log("Total win = " + numberOfWins) 26 | console.log("Total lost = " + numberOfLost) -------------------------------------------------------------------------------- /1_BASIC_JS/program28.js: -------------------------------------------------------------------------------- 1 | var number = Number(prompt("Enter a number ")); 2 | var result = number>0 ? "positive" : number<0 ? "Negative" : "zero"; 3 | console.log(result) 4 | 5 | -------------------------------------------------------------------------------- /1_BASIC_JS/program29.js: -------------------------------------------------------------------------------- 1 | // date object 2 | 3 | var date = new Date(); 4 | console.log(date); 5 | 6 | var year = date.getFullYear(); 7 | console.log(year); 8 | 9 | var month = date.getMonth(); 10 | console.log(month); 11 | 12 | var currentDate = date.getDate(); 13 | console.log(currentDate); 14 | 15 | var currentDay = date.getDay(); 16 | console.log(currentDay); 17 | 18 | var currentHour = date.getHours(); 19 | console.log(currentHour); 20 | 21 | var currentMinutes = date.getMinutes(); 22 | console.log(currentMinutes); 23 | -------------------------------------------------------------------------------- /1_BASIC_JS/program3.js: -------------------------------------------------------------------------------- 1 | ////you can run this program by using the command => node program3 .js or add the file to html 2 | 3 | // understanding variables 4 | // variables naming rules (collected from w3school) 5 | /* 6 | The general rules for constructing names for variables (unique identifiers) are: 7 | Names can contain letters, digits, underscores, and dollar signs. 8 | Names must begin with a letter 9 | Names can also begin with $ and _ (but we will not use it in this tutorial) 10 | Names are case sensitive (y and Y are different variables) 11 | Reserved words (like JavaScript keywords) cannot be used as names 12 | 13 | */ 14 | 15 | /* 16 | Underscore:first_name, last_name 17 | 18 | Upper Camel Case (Pascal Case):FirstName, LastName 19 | 20 | Lower Camel Case:firstName, lastName 21 | */ 22 | // printing student details 23 | // variable can be declared first and then initialize 24 | // var name, age, cgpa, lineBreak; 25 | // name = "Anisul Islam"; 26 | // age = 29; 27 | // cgpa = 3.92; 28 | // lineBreak = "
"; 29 | 30 | var name = "Anisul Islam"; 31 | var age = 29; 32 | var cgpa = 3.92; 33 | var lineBreak = "
"; 34 | 35 | // variable can be declared and initialize at the same time 36 | // var name = "Anisul Islam",age = 29,cgpa = 3.92,lineBreak = "
" 37 | 38 | document.write("Name : " + name + lineBreak); 39 | document.write("Age : " + age + lineBreak); 40 | document.write("CGPA : " + cgpa + lineBreak); 41 | -------------------------------------------------------------------------------- /1_BASIC_JS/program37.js: -------------------------------------------------------------------------------- 1 | // for vs foreach example 2 | 3 | // var numbers = [10,20,30,40]; 4 | // for(var x=0; x 10; 12 | }); 13 | console.log(newNumbers); 14 | -------------------------------------------------------------------------------- /1_BASIC_JS/program4.js: -------------------------------------------------------------------------------- 1 | //you can run this program by using the command => node program4 .js or adding this file in html 2 | 3 | // string -> a sequnces of characters 4 | // string concatenation -> adding multiple strings 5 | 6 | var fName = "Anisul"; 7 | var lName = "Islam"; 8 | 9 | // adding multiple strings here 10 | var fullName = fName + " " + lName; 11 | console.log(fullName); 12 | console.log("Today is" + " a " + "beautiful day"); 13 | console.log("My name is " + fullName); 14 | 15 | var num1 = 20; 16 | var num2 = 30; 17 | var sum = num1 + num2; 18 | console.log(num1 + " + " + num2 + " = " + sum); 19 | -------------------------------------------------------------------------------- /1_BASIC_JS/program5.js: -------------------------------------------------------------------------------- 1 | // string related library functions 2 | // length, prompt(), chartAt(5), 3 | // string.toUpperCase(), string.toLowerCase() 4 | // string1.concat(string2) 5 | // string.slice(0,3) 6 | 7 | // getting the input from user as string 8 | var text = prompt("Enter your name : "); 9 | document.write("Your name : " + text + "
"); 10 | 11 | //finding the length of a string 12 | var len = text.length; 13 | document.write("Number of characters : " + len + "
"); 14 | 15 | // finding the character at a specific position 16 | document.write(text.charAt(2) + "
"); 17 | 18 | // converting the string into uppercase or lowercase 19 | document.write(text.toUpperCase() + "
"); 20 | document.write(text.toLowerCase() + "
"); 21 | 22 | // concatenation function 23 | var text1 = " hi"; 24 | var text2 = "bye"; 25 | var text3 = text1.concat(text2); 26 | document.write(text3 + "
"); 27 | 28 | // slice function 29 | var text4 = "hello"; 30 | var result = text4.slice(0, 2); 31 | document.write(result + "
"); 32 | 33 | //collected from w3school 34 | var x = new String("John"); 35 | var y = new String("John"); 36 | 37 | // (x === y) is false because x and y are different objects 38 | 39 | /* 40 | There are 3 methods for extracting a part of a string: 41 | slice(start, end) 42 | substring(start, end) 43 | substr(start, length) 44 | 45 | 46 | 1) slice can take positive and negative parameter. 47 | If a parameter is negative, the position is counted from the end of the string. 48 | 49 | var str = "Apple, Banana, Kiwi"; 50 | var res = str.slice(-12, -6); // output - Banana 51 | 52 | var str = "Apple, Banana, Kiwi"; 53 | var res = str.slice(7); // output - Banana, Kiwi 54 | 55 | 56 | 2) substring() is similar to slice(). 57 | The difference is that substring() cannot accept negative indexes. 58 | var str = "Apple, Banana, Kiwi"; 59 | var res = str.substring(7, 13); // output - Banana 60 | 61 | 62 | 3)substr() is similar to slice(). 63 | The difference is that the second parameter specifies the length of the extracted part. 64 | var str = "Apple, Banana, Kiwi"; 65 | var res = str.substr(7, 6); // output - Banana 66 | */ 67 | -------------------------------------------------------------------------------- /1_BASIC_JS/program6.js: -------------------------------------------------------------------------------- 1 | //you can run this program by using the command => node program6 .js or adding this file in html 2 | 3 | var num = "20"; 4 | num = num.toString(); 5 | console.log(typeof num); 6 | 7 | var number = 20; 8 | console.log(typeof number); 9 | 10 | number = toString(20); 11 | console.log(typeof number); 12 | 13 | var x = 2.56789; 14 | // number of characters after the decimal point 15 | console.log(x.toFixed(1)); 16 | console.log(x.toFixed(2)); 17 | 18 | // total number of characters including the decimal point 19 | console.log(x.toPrecision(1)); 20 | console.log(x.toPrecision(2)); 21 | 22 | console.log(Number(true)); 23 | console.log(Number(false)); 24 | console.log(Number(" 10")); 25 | console.log(Number(" 10 ")); 26 | console.log(Number("10.25")); 27 | -------------------------------------------------------------------------------- /1_BASIC_JS/program7.js: -------------------------------------------------------------------------------- 1 | // //you can run this program by using the command => node program7 .js or adding this file in html 2 | 3 | // Arithmetic operator -> +, -, *, / , %, ++, --, ** (exponentiation) 4 | // Assignment operator -> =, +=, -=, *=, /=, %= 5 | 6 | var num1 = parseInt(prompt("Enter first number : ")); 7 | var num2 = parseInt(prompt("Enter second number : ")); 8 | var lineBreak = "
"; 9 | 10 | var result = num1 + num2; 11 | document.write("The sum is : " + result + lineBreak); 12 | 13 | result = num1 - num2; 14 | document.write("The sub is : " + result + lineBreak); 15 | 16 | result = num1 * num2; 17 | document.write("The multiplication is : " + result + lineBreak); 18 | 19 | result = num1 / num2; 20 | document.write("The division is : " + result + lineBreak); 21 | 22 | result = num1 % num2; 23 | document.write("The remainder is : " + result + lineBreak); 24 | -------------------------------------------------------------------------------- /1_BASIC_JS/program8.js: -------------------------------------------------------------------------------- 1 | // Area of various shapes 2 | //Area of triangel 3 | 4 | //getting user input for base 5 | var base = parseFloat(prompt("Enter Base = ")); 6 | 7 | //getting user input for height 8 | var height = parseFloat(prompt("Enter Height = ")); 9 | 10 | //calculating area 11 | var area = 0.5 * base * height; 12 | 13 | //printing area 14 | document.write("Area of triangle = " + area); 15 | -------------------------------------------------------------------------------- /1_BASIC_JS/program9.js: -------------------------------------------------------------------------------- 1 | //Temperature converter program 2 | 3 | var farn = parseFloat(prompt("Enter Fahrenheit = ")); 4 | var cels = (farn - 32) * (5 / 9); 5 | document.write("Celsius = " + cels + "
"); 6 | 7 | // var cels = parseFloat(prompt("Enter Celsius = ")); 8 | // var farn = (cels * (9 / 5)) + 32; 9 | // document.write("Fahrenheit = " + farn); 10 | -------------------------------------------------------------------------------- /2_DATA_STRUCTURE/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /2_DATA_STRUCTURE/index1.js: -------------------------------------------------------------------------------- 1 | // Array in js 2 | let demoArray = ["Anisul Islam", 3.92, null, true, undefined, { name: "anis" }]; 3 | console.log(demoArray); 4 | 5 | //length of an array 6 | console.log(demoArray.length); 7 | 8 | // accessing array element 9 | console.log(demoArray[2]); 10 | 11 | // check an item exist or not 12 | console.log(demoArray.indexOf(3.92)); 13 | 14 | // adding single or multiple items to the starting of an array 15 | demoArray.unshift("England"); 16 | // demoArray.unshift("England", "Pakistan"); 17 | console.log(demoArray); 18 | 19 | // adding items to the ending of an array 20 | demoArray.push("Finland"); 21 | // demoArray.push("Finland", "Canada"); 22 | console.log(demoArray); 23 | 24 | // removing single or multiple items to the starting of an array 25 | demoArray.shift("England"); 26 | // demoArray.shift("England", "Pakistan"); 27 | console.log(demoArray); 28 | 29 | // removing items to the ending of an array 30 | demoArray.pop("Finland"); 31 | // demoArray.pop("Finland", "Canada"); 32 | console.log(demoArray); 33 | 34 | // remove items using splice 35 | demoArray.splice(1, 2); 36 | console.log(demoArray); 37 | 38 | // Add items using splice - startIndex, NumberOfItemsToDelete, item / items) 39 | demoArray.splice(0, 1, 2); 40 | console.log(demoArray); 41 | 42 | // copy an array using spread operator 43 | let array1 = [4, 5, 6]; 44 | let array2 = [1, 2, 3, ...array1]; 45 | console.log(array2); 46 | 47 | let matrix = [ 48 | [1, 2], 49 | [3, 4], 50 | ]; 51 | 52 | console.log(matrix[0][1]); 53 | -------------------------------------------------------------------------------- /2_DATA_STRUCTURE/index2.js: -------------------------------------------------------------------------------- 1 | // object in js 2 | // Object -> key, value pair 3 | const tutorials = { 4 | html: 32, 5 | css: 48, 6 | js: 60, 7 | jquery: 8, 8 | bootstrap: 25, 9 | react: 15, 10 | java: 155, 11 | }; 12 | 13 | // printing the object 14 | console.log(tutorials); 15 | 16 | // accessing object property 17 | console.log(tutorials.html); 18 | 19 | // changing the property value 20 | tutorials.html = 33; 21 | console.log(tutorials.html); 22 | 23 | // add new property 24 | tutorials.node = 5; 25 | console.log(tutorials.node); 26 | 27 | // check object has a property 28 | console.log("tutorial has property html: " + tutorials.hasOwnProperty("html")); 29 | 30 | // how to access nested object 31 | let studentInfo = { 32 | id: 101, 33 | personalInfo: { 34 | phone: { 35 | mobile: "01710444700", 36 | home: "01710", 37 | }, 38 | }, 39 | }; 40 | console.log(studentInfo.personalInfo.phone.home); 41 | 42 | // bracket notation for accessing property 43 | // you can use it when property is unknown 44 | const subjectName = "c plus plus"; 45 | tutorials[subjectName] = 65; 46 | console.log(tutorials); 47 | 48 | const addProperty = (property, value) => { 49 | tutorials[property] = value; 50 | }; 51 | 52 | addProperty("python", 65); 53 | console.log(tutorials); 54 | 55 | // iterate through an object with for ... in 56 | for (const key in studentInfo) { 57 | console.log(`${key} = ${studentInfo[key]}`); 58 | } 59 | 60 | const students = { 61 | karim: { 62 | age: 25, 63 | }, 64 | rahim: { 65 | age: 35, 66 | }, 67 | sagor: { 68 | age: 30, 69 | }, 70 | nehal: { 71 | age: 29, 72 | }, 73 | }; 74 | 75 | // find out all the students whose age is less than 30 using for in loop 76 | const checkAge = (std) => { 77 | for (const x in std) { 78 | if (std[x].age <= 30) { 79 | console.log(x); 80 | } 81 | } 82 | }; 83 | checkAge(students); 84 | 85 | // how to get all the keys of an object inside in an array 86 | console.log(Object.keys(students)); 87 | -------------------------------------------------------------------------------- /2_DATA_STRUCTURE/index3.js: -------------------------------------------------------------------------------- 1 | // JSON - JavaScript Object Notation, test.json 2 | // You should already know the syntax -> {"key":"key_value"} 3 | // JSON Receives Boolean, Number, String, Array, Object 4 | // JSON.stringify() -> converts a JavaScript object or value to a JSON string 5 | // JSON.parse(JSONDATA) -> converts a JSON string to a JavaScript object or value 6 | 7 | const studentInfo = { 8 | id: 101, 9 | name: "Anisul Islam", 10 | gpa: 3.92, 11 | }; 12 | const studentInfoJSON = JSON.stringify(studentInfo); 13 | console.log(studentInfoJSON); 14 | 15 | const studentInfoJSObject = JSON.parse(studentInfoJSON); 16 | console.log(studentInfoJSObject); 17 | -------------------------------------------------------------------------------- /2_DATA_STRUCTURE/index4.js: -------------------------------------------------------------------------------- 1 | // One Dimensional Array 2 | // Create a function called highestScore that will 3 | // Receive a 1d array called scores 4 | // return the highest score 5 | console.clear(); 6 | function highestScore(scores) { 7 | var max = scores[0]; 8 | for (var x = 1; x < scores.length; x++) { 9 | if (max < scores[x]) { 10 | max = scores[x]; 11 | } 12 | } 13 | return max; 14 | } 15 | 16 | var scores = [21, 98, 1, 88, 15]; 17 | var maxScore = highestScore(scores); 18 | console.log(maxScore); 19 | -------------------------------------------------------------------------------- /2_DATA_STRUCTURE/index5.js: -------------------------------------------------------------------------------- 1 | // 2D Array 2 | // Create a function called highestRunScorer that will 3 | // Receive a 2d array called playersInfo 4 | // Based on highest score, return the name of the player 5 | 6 | function highestRunScorer(playersInfo) { 7 | var highestScorer = playersInfo[0][0]; 8 | var highestScore = playersInfo[0][1]; 9 | 10 | for (var x = 1; x < playersInfo.length; x++) { 11 | if (highestScore < playersInfo[x][1]) { 12 | highestScore = playersInfo[x][1]; 13 | highestScorer = playersInfo[x][0]; 14 | } 15 | } 16 | 17 | return highestScorer; 18 | } 19 | 20 | var playersInfo = [ 21 | ["Ashraful", 95], 22 | ["Mizan", 125], 23 | ["Rakib", 45], 24 | ["lu", 105], 25 | ]; 26 | 27 | var name = highestRunScorer(playersInfo); 28 | console.log(name); 29 | -------------------------------------------------------------------------------- /3_JS HTML DOM/1_FIND_HTML_ELEMENTS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

This is h1

11 |

This is h2

12 |

This is a paragraph1

13 |

This is a paragraph2

14 | Visit Google 15 | 16 |
17 |

I am h4

18 |
19 | 20 |
21 |
    22 |
  1. I am a list
    2. 23 |
24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /3_JS HTML DOM/1_FIND_HTML_ELEMENTS/program27.js: -------------------------------------------------------------------------------- 1 | // DOM -> Document Object Model 2 | // Using DOM We can Find / get, change, add, or delete HTML elements. 3 | 4 | // How to find HTML Elements 5 | // document.getElementById() 6 | // document.getElementsByTagName() 7 | // document.getElementsByClassName() 8 | // document.querySelector() 9 | 10 | 11 | // finding element by ID 12 | var h2 = document.getElementById("heading2"); 13 | console.log(h2) 14 | 15 | 16 | // finding element by tagName 17 | var h1 = document.getElementsByTagName("h1")[0]; 18 | console.log(h1) 19 | 20 | 21 | // finding element by tagName 22 | var p = document.getElementsByClassName("para")[0]; 23 | console.log(p) 24 | 25 | 26 | // finding element by querySelector 27 | var q1 = document.querySelector("#heading2"); 28 | console.log(q1) 29 | 30 | //it will get the first element of the h1 elements 31 | var q2 = document.querySelector("h1"); 32 | console.log(q2) 33 | 34 | //it will get the first element of the para class 35 | var q3 = document.querySelector(".para"); 36 | console.log(q3) 37 | 38 | var list = document.querySelector(".my-div li"); 39 | console.log(list) 40 | 41 | // finding element by querySelectorAll 42 | var q4 = document.querySelectorAll(".para"); 43 | console.log(q4) 44 | 45 | -------------------------------------------------------------------------------- /3_JS HTML DOM/2_CHANGE_HTML_ELEMENTS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | change html elements 7 | 8 | 9 | 10 |

This is h1

11 |

This is h2

12 |

This is a paragraph1

13 |

This is a paragraph2

14 | Visit Google 15 | 16 |
17 |

I am h4

18 |
19 | 20 |
21 |
    22 |
  1. I am a list
    2. 23 |
24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /3_JS HTML DOM/2_CHANGE_HTML_ELEMENTS/program28.js: -------------------------------------------------------------------------------- 1 | // How to change HTML Elements (collected from W3School website) 2 | // element.innerHTML = new html content -> Change the inner HTML of an element 3 | // element.attribute = new value -> Change the attribute value of an HTML element 4 | // element.style.property = new style -> Change the style of an HTML element 5 | 6 | 7 | // finding element by ID 8 | var h2 = document.getElementById("heading2"); 9 | 10 | // changing elements text, id 11 | h2.innerHTML = "I love Bangladesh"; 12 | h2.id = "heading2-new"; 13 | console.log(h2); 14 | 15 | var a = document.querySelector("a"); 16 | console.log(a) 17 | a.textContent="visit my website"; 18 | a.href="http://www.studywithanis.com" 19 | 20 | // changing style of element 21 | a.style.textDecoration = "none"; 22 | a.style.color = "green"; 23 | a.style.fontSize = "2rem"; 24 | 25 | 26 | -------------------------------------------------------------------------------- /3_JS HTML DOM/3_CREATE_ADD_REMOVE_HTML_ELEMENTS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

This is h1

11 |

This is h2

12 |

This is a paragraph1

13 |

This is a paragraph2

14 | Visit Google 15 | 16 |
17 |

I am h4

18 |
19 | 20 |
21 |
    22 |
  1. I am a list
    2. 23 |
24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /3_JS HTML DOM/3_CREATE_ADD_REMOVE_HTML_ELEMENTS/index.js: -------------------------------------------------------------------------------- 1 | //Create, remove, add html element 2 | 3 | // creating html element and adding to a div 4 | var firstDiv = document.querySelector("#first-div"); 5 | console.log(firstDiv) 6 | 7 | var heading3 = document.createElement("h3"); 8 | var text = document.createTextNode("This is heading 3"); 9 | heading3.appendChild(text); 10 | firstDiv.appendChild(heading3); 11 | 12 | var heading5 = document.createElement("h5"); 13 | var text = document.createTextNode("This is heading 5"); 14 | heading5.appendChild(text); 15 | firstDiv.appendChild(heading5); 16 | 17 | // remove element 18 | firstDiv.removeChild(heading5); 19 | 20 | //adding element before 21 | var heading6 = document.createElement("h6"); 22 | var text = document.createTextNode("This is heading 6"); 23 | heading6.appendChild(text); 24 | firstDiv.insertBefore(heading6, heading3); 25 | // firstDiv.insertAfter(heading6, heading3); 26 | -------------------------------------------------------------------------------- /3_JS HTML DOM/4_CSS_STYLING/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |

This is h1

12 |

This is h2

13 |

This is a paragraph1

14 |

This is a paragraph2

15 | Visit Google 16 | 17 |
18 |

I am h4

19 |
20 | 21 |
22 |
    23 |
  1. I am a list
    2. 24 |
25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /3_JS HTML DOM/4_CSS_STYLING/index.js: -------------------------------------------------------------------------------- 1 | // Adding & removing css style in js 2 | 3 | var h1 = document.querySelector("h1"); 4 | h1.innerHTML = "hiiii" 5 | console.log(h1) 6 | 7 | //add css style 8 | h1.classList.add('heading-style') 9 | 10 | //removing css style 11 | // h1.classList.remove('heading-style') -------------------------------------------------------------------------------- /3_JS HTML DOM/4_CSS_STYLING/style.css: -------------------------------------------------------------------------------- 1 | .heading-style{ 2 | color: green; 3 | font-size: 3rem; 4 | font-weight: bold; 5 | font-style: italic; 6 | } -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/clipboard-events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/clipboard-events/index.js: -------------------------------------------------------------------------------- 1 | // ClipboardEvent Object 2 | // oncopy 3 | // oncut 4 | // onpaste 5 | 6 | const input = document.querySelector("input"); 7 | const p = document.querySelector("p"); 8 | 9 | input.addEventListener("copy", function () { 10 | p.innerText = "you have copied"; 11 | }); 12 | input.addEventListener("cut", function () { 13 | p.innerText = "you have cut"; 14 | }); 15 | input.addEventListener("paste", function () { 16 | p.innerText = "you have pasted"; 17 | }); 18 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/focus-events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/focus-events/index.js: -------------------------------------------------------------------------------- 1 | // FocusEvent Object 2 | //
, , , <html>, <iframe>, <meta>, <param>, <script>, <style>, <base>, <bdo>, 3 | 4 | // 1. onblur 5 | // 2. onfocus 6 | // 3. onfocusin 7 | // 4. onfocusout 8 | 9 | const input = document.querySelector("input"); 10 | input.addEventListener("blur", function (e) { 11 | // console.log(e.target.value); 12 | input.value = e.target.value.toUpperCase(); 13 | }); 14 | input.addEventListener("focus", function () { 15 | // console.log("focus is occured"); 16 | // input.style.backgroundColor = "orange"; 17 | // input.style.padding = "2rem"; 18 | }); 19 | // input.addEventListener("focusin", function () { 20 | // console.log("focusin is occured"); 21 | // }); 22 | // input.addEventListener("focusout", function () { 23 | // console.log("focusout is occured"); 24 | // }); 25 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/index.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html lang="en"> 3 | <head> 4 | <meta charset="UTF-8" /> 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 | <title>DOM Events 7 | 8 | 9 |

10 | DOM EVENT 11 |

12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | DOM Events - mouse click (onclick), input field change (onchange),image loaded, page loaded, mouse over(onmouseover), mouse out(onmouseout), form submitted, keyboard key stroke 3 | */ 4 | 5 | function handleMouseOver(){ 6 | document.querySelector("h1").style.color = "green"; 7 | } 8 | function handleMouseOut(){ 9 | document.querySelector("h1").style.color = "red"; 10 | } 11 | 12 | function handleButtonClick(){ 13 | console.log("button is clicked") 14 | } 15 | 16 | function handleChange(){ 17 | var name = document.getElementById("name"); 18 | console.log(name.value) 19 | } 20 | 21 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/keyboard-events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/keyboard-events/index.js: -------------------------------------------------------------------------------- 1 | // KeyboardEvent Object 2 | // 1. Keydown - pressing a key, can repeat 3 | // 2. keypress (may not supported by some browsers) 4 | // 3. keyup 5 | // some properties - key, keyCode, code, shiftKey, ctlKey, repeat 6 | 7 | const textarea = document.querySelector("textarea"); 8 | textarea.addEventListener("keydown", function (e) { 9 | if (e.repeat) { 10 | alert("do not repeat"); 11 | } 12 | }); 13 | // textarea.addEventListener("keypress", function () { 14 | // console.log("keypress"); 15 | // }); 16 | // textarea.addEventListener("keyup", function (e) { 17 | // if (e.shiftKey) { 18 | // console.log("shift+" + e.key); 19 | // } 20 | // }); 21 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/media-events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/media-events/index.js: -------------------------------------------------------------------------------- 1 | // audio / video events 2 | // canplay, play, playing, pause, progress, ended, volumechange, waiting 3 | 4 | const video = document.querySelector("video"); 5 | video.addEventListener("canplay", function () { 6 | console.log("canplay"); 7 | }); 8 | 9 | video.addEventListener("play", function () { 10 | console.log("play"); 11 | }); 12 | video.addEventListener("playing", function () { 13 | console.log("playing"); 14 | }); 15 | 16 | video.addEventListener("pause", function () { 17 | console.log("pause"); 18 | }); 19 | video.addEventListener("ended", function () { 20 | console.log("Thanks for watching"); 21 | }); 22 | video.addEventListener("volumechange", function () { 23 | console.log("volumechange"); 24 | }); 25 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/more-event-object/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 | Anis 13 |

14 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit labore ea 15 | molestiae ratione maxime pariatur. 16 |

17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/more-event-object/index.js: -------------------------------------------------------------------------------- 1 | // load, unload, 2 | // scroll 3 | // resize 4 | // toggle - details 5 | 6 | // window.addEventListener("load", function () { 7 | // console.log("load"); 8 | // }); 9 | // window.addEventListener("unload", function () { 10 | // console.log("unload"); 11 | // }); 12 | 13 | // window.addEventListener("scroll", function () { 14 | // console.log("scroll"); 15 | // }); 16 | 17 | // window.addEventListener("resize", function () { 18 | // const width = window.outerWidth; 19 | // const height = window.outerHeight; 20 | // console.log(`height: ${height}, width: ${width}`); 21 | // }); 22 | 23 | const details = document.querySelector("details"); 24 | 25 | details.addEventListener("toggle", function (e) { 26 | console.log(e.target.open); 27 | }); 28 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/mouse-events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |

I am a div

13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/mouse-events/index.js: -------------------------------------------------------------------------------- 1 | // MouseEvent - , , , , <br>, <style>, <script>, <iframe>, <param>, <base>, <bdo> 2 | // 1. onclick 3 | // 2. ondblclick 4 | // 3. onmousedown 5 | // 4. onmousedup 6 | // 5. onmouseenter 7 | // 6. onmouseleave 8 | // 7. onmousemove 9 | // 8. onmouseover 10 | 11 | console.clear(); 12 | const div = document.querySelector("div"); 13 | 14 | div.addEventListener("click", function (e) { 15 | // console.log("click is occured"); 16 | // console.log(e.target); 17 | // console.log(e.target.id); 18 | // console.log(e.target.className); 19 | // console.log(e.target.innerHTML); 20 | // console.log(e.target.innerText); 21 | // console.log(e.target.textContent); 22 | }); 23 | 24 | // div.addEventListener("dblclick", function () { 25 | // console.log("dblclick is occured"); 26 | // }); 27 | // div.addEventListener("mousedown", function () { 28 | // console.log("mousedown is occured"); 29 | // }); 30 | // div.addEventListener("mouseup", function () { 31 | // console.log("mouseup is occured"); 32 | // }); 33 | // div.addEventListener("mouseenter", function () { 34 | // console.log("mouseenter is occured"); 35 | // }); 36 | // div.addEventListener("mouseleave", function () { 37 | // console.log("mouseleave is occured"); 38 | // }); 39 | // div.addEventListener("mouseover", function () { 40 | // console.log("mouseover is occured"); 41 | // }); 42 | // div.addEventListener("mousemove", function (e) { 43 | // // console.log("mousemove is occured"); 44 | // // console.log("clientX = " + e.clientX + ", clientY = " + e.clientY); 45 | // console.log("offsetX = " + e.offsetX + ", offsetY = " + e.offsetY); 46 | // }); 47 | 48 | const buttons = document.querySelectorAll(".btn"); 49 | 50 | Array.from(buttons).map((button) => { 51 | button.addEventListener("click", function (e) { 52 | console.log(e.target.innerText); 53 | }); 54 | }); 55 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/mouse-events/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | background-color: tomato; 3 | height: 20rem; 4 | width: 20rem; 5 | padding: 2rem; 6 | } 7 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/onchange/index.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html lang="en"> 3 | <head> 4 | <meta charset="UTF-8" /> 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 | <title>Document 8 | 9 | 10 | 11 | 15 | 16 | 25 | 26 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/onchange/onchange.js: -------------------------------------------------------------------------------- 1 | // - text, number, password, email, color, radio, checkbox, search, time, date, datetime, week, month, url, tel, file, 2 | //