├── 1_BASIC_JS ├── index.js ├── program28.js ├── Task1.txt ├── index.html ├── Task6.txt ├── program9.js ├── program38.js ├── program14.js ├── program15.js ├── program8.js ├── program19.js ├── program16.js ├── program17.js ├── Task7.txt ├── program1.js ├── Task5.txt ├── program12.js ├── program29.js ├── Task4.txt ├── program4.js ├── FOR_FOREACH.js ├── program37.js ├── Task2.txt ├── program6.js ├── program18.js ├── program27.js ├── program10.js ├── program7.js ├── program21.js ├── program26.js ├── program22.js ├── program13.js ├── program11.js ├── program20.js ├── Task3.txt ├── program3.js ├── program2.js ├── program25.js ├── program23.js └── program5.js ├── 3_JS HTML DOM ├── 5_DOM_EVENTS │ ├── onsubmit │ │ ├── style.css │ │ ├── index.js │ │ └── index.html │ ├── mouse-events │ │ ├── style.css │ │ ├── index.html │ │ └── index.js │ ├── focus-events │ │ ├── index.html │ │ └── index.js │ ├── clipboard-events │ │ ├── index.html │ │ └── index.js │ ├── keyboard-events │ │ ├── index.html │ │ └── index.js │ ├── index.html │ ├── index.js │ ├── media-events │ │ ├── index.html │ │ └── index.js │ ├── more-event-object │ │ ├── index.html │ │ └── index.js │ └── onchange │ │ ├── index.html │ │ └── onchange.js ├── 4_CSS_STYLING │ ├── style.css │ ├── index.js │ └── index.html ├── 6_DOM_EVENT_LISTENER │ ├── index.html │ └── index.js ├── 1_FIND_HTML_ELEMENTS │ ├── index.html │ └── program27.js ├── 3_CREATE_ADD_REMOVE_HTML_ELEMENTS │ ├── index.html │ └── index.js ├── 2_CHANGE_HTML_ELEMENTS │ ├── index.html │ └── program28.js └── 7_DOM_SUMMARY │ └── index.js ├── 4_Browser_BOM ├── style.css ├── index.html ├── index1.js ├── index.js └── index2.js ├── 6_ES6 FEATURES ├── 6_ES6_MODULES │ ├── myModule.js │ ├── index.js │ └── index.html ├── 7_ES6_CLASS │ └── index.js ├── 8_ASYNCHRONOUS_PROG │ ├── index.html │ ├── index5.js │ ├── index4.js │ ├── index2.js │ ├── index1.js │ └── index3.js ├── 1_ES6_SYNTAX │ ├── 1.4_DEFAULT_AND_REST_PARAMETER.js │ ├── 1.3_TEMPLATE_LITERAL.js │ ├── 1.1_ES6_VARIABLES.js │ ├── 1.7_FOROF_FORIN.js │ ├── 1.2_HOISTING_STRICTMODE.js │ ├── 1.6_OBJECT_LITERAL.js │ └── 1.5_SPREAD_OPERATOR.js ├── 5_STRING_METHODS │ └── index.js ├── 4_ARRAY_METHODS │ └── index.js ├── 3_DESTRUCTURING │ └── index.js └── 2_ARROW_FUNCTION │ └── ARROW_FUNCTION.js ├── 9_Storage ├── cookie-example.js ├── index.html ├── session-storage.js └── local-storage.js ├── 11_PROJECT └── image-slider-project │ ├── images │ ├── flower-1.jpg │ ├── flower-2.jpg │ └── flower-3.jpg │ ├── scripts │ └── index.js │ ├── styles │ └── style.css │ └── index.html ├── 8_JSON ├── friends.json └── index.js ├── 2_DATA_STRUCTURE ├── index.html ├── index4.js ├── index3.js ├── index5.js ├── index1.js └── index2.js ├── 5_Error_Handling ├── ERROR_HANDLING_1.js └── ERROR_HANDLING_2.js ├── 7_API_CALLING ├── scripts │ ├── jquery.js │ ├── xhr.js │ ├── axios.js │ └── fetch.js └── index.html └── README.md /1_BASIC_JS/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/onsubmit/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /4_Browser_BOM/style.css: -------------------------------------------------------------------------------- 1 | .para { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /6_ES6 FEATURES/6_ES6_MODULES/myModule.js: -------------------------------------------------------------------------------- 1 | export let text = "Welcome to module"; 2 | 3 | 4 | -------------------------------------------------------------------------------- /6_ES6 FEATURES/6_ES6_MODULES/index.js: -------------------------------------------------------------------------------- 1 | import {text as message} from './myModule.js' 2 | 3 | console.log(message) 4 | -------------------------------------------------------------------------------- /9_Storage/cookie-example.js: -------------------------------------------------------------------------------- 1 | document.cookie = "username=anisul; expires= Mon, 23 Feb 2022 20:27:00 GMT"; 2 | 3 | console.log(document.cookie); 4 | -------------------------------------------------------------------------------- /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/mouse-events/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | background-color: tomato; 3 | height: 20rem; 4 | width: 20rem; 5 | padding: 2rem; 6 | } 7 | -------------------------------------------------------------------------------- /11_PROJECT/image-slider-project/images/flower-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/javascript-tutorials-code/HEAD/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/HEAD/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/HEAD/11_PROJECT/image-slider-project/images/flower-3.jpg -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /8_JSON/friends.json: -------------------------------------------------------------------------------- 1 | { 2 | "friends": [{ 3 | "name": "Anar", 4 | "age": 25 5 | }, 6 | { 7 | "name": "Ruhul", 8 | "age": 28 9 | } 10 | ] 11 | } -------------------------------------------------------------------------------- /1_BASIC_JS/Task1.txt: -------------------------------------------------------------------------------- 1 | /* Program for Task 1*/ 2 | // A program to print your details info 3 | document.write("Name : Anisul Islam
") 4 | document.write("Nationality : Bangladeshi
") 5 | document.write("Email : anisul2010s@yahoo.co.uk") -------------------------------------------------------------------------------- /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') -------------------------------------------------------------------------------- /1_BASIC_JS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /2_DATA_STRUCTURE/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /6_ES6 FEATURES/6_ES6_MODULES/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /1_BASIC_JS/program38.js: -------------------------------------------------------------------------------- 1 | // map, filter 2 | 3 | var numbers = [22, 31, 4, 5, 35, 26, 78]; 4 | var squareNumbers = numbers.map(function (x) { 5 | return x * x; 6 | }); 7 | console.log(squareNumbers); 8 | 9 | var numbers = [22, 31, 4, 5, 35, 26, 78]; 10 | var newNumbers = numbers.filter(function (x) { 11 | return x > 10; 12 | }); 13 | console.log(newNumbers); 14 | -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /6_ES6 FEATURES/7_ES6_CLASS/index.js: -------------------------------------------------------------------------------- 1 | // es6 class, object, set, get 2 | class Student { 3 | constructor(id, name) { 4 | this.id = id; 5 | this.name = name; 6 | } 7 | 8 | set studentName(name) { 9 | this.name = name; 10 | } 11 | get studentInfo() { 12 | return this.id + " " + this.name; 13 | } 14 | } 15 | 16 | let s1 = new Student(101, "Anis"); 17 | console.log(s1.studentInfo); 18 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /6_ES6 FEATURES/8_ASYNCHRONOUS_PROG/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | asynchronous 7 | 8 | 9 |
10 |
    11 |
    12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /6_ES6 FEATURES/1_ES6_SYNTAX/1.4_DEFAULT_AND_REST_PARAMETER.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | //example of default parameter 4 | function message(text='Hello Everyone') { 5 | console.log(text); 6 | } 7 | message(); 8 | message("love js es6"); 9 | 10 | 11 | 12 | //example of rest parameter 13 | function printNumbers(x,y, ...z){ 14 | console.log(`x = ${x}, y = ${y}, z= ${z}`) 15 | } 16 | printNumbers(10,20,30,40,50); 17 | 18 | -------------------------------------------------------------------------------- /6_ES6 FEATURES/1_ES6_SYNTAX/1.3_TEMPLATE_LITERAL.js: -------------------------------------------------------------------------------- 1 | // In ES6, you can create a template literal by using your text inside backticks. 2 | 3 | var x = 20; 4 | var y = 10; 5 | var sum = x + y; 6 | console.log(`sum is ${x+y}`); 7 | console.log(`sum is ${sum}`); 8 | 9 | let uniName = `This is a template literal` 10 | 11 | let fullName = "Anisul Islam"; 12 | let message = `I am ${fullName}. I am teaching ES6`; 13 | console.log(message); -------------------------------------------------------------------------------- /6_ES6 FEATURES/8_ASYNCHRONOUS_PROG/index5.js: -------------------------------------------------------------------------------- 1 | const loadData = () => { 2 | fetch("https://jsonplaceholder.typicode.com/posts") 3 | .then((response) => response.json()) 4 | .then((data) => { 5 | let lists = ""; 6 | data.map((data, index) => { 7 | lists += `
  1. ${data.title}
    2. `; 8 | }); 9 | document.querySelector(".container ol").innerHTML = lists; 10 | }); 11 | }; 12 | 13 | loadData(); 14 | -------------------------------------------------------------------------------- /4_Browser_BOM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /8_JSON/index.js: -------------------------------------------------------------------------------- 1 | const data = require("./friends.json"); 2 | console.clear(); 3 | 4 | // Accessing JSON Data 5 | // console.log(data); 6 | // console.log(data.friends[0]); 7 | // console.log(data.friends[0].name); 8 | 9 | // Modify JSON Data 10 | // data.friends[0].age = 35; 11 | // console.log(data.friends[0]); 12 | 13 | // delete JSON data 14 | // delete data.friends[0].age; 15 | // console.log(data.friends[0]); 16 | 17 | // conversion between js and json 18 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /9_Storage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /5_Error_Handling/ERROR_HANDLING_1.js: -------------------------------------------------------------------------------- 1 | // Error handling -> try , catch, finally , throw 2 | // try ... catch handle run time errors (program which is runable), but not syntax error 3 | // Error object 4 | // The finally statement -> execute code, after try and catch 5 | 6 | try{ 7 | // code test 8 | alert("Hi Everyone"); 9 | alert(x); 10 | alert("Not gonna work"); 11 | 12 | }catch(err){ 13 | console.log(err); 14 | }finally{ 15 | alert("Bye Everyone"); 16 | } 17 | 18 | -------------------------------------------------------------------------------- /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/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 -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/keyboard-events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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") -------------------------------------------------------------------------------- /5_Error_Handling/ERROR_HANDLING_2.js: -------------------------------------------------------------------------------- 1 | // Error handling - try, catch, finally 2 | // The throw statement -> create custom errors. 3 | 4 | document.querySelector("#checkButton").addEventListener("click",function(){ 5 | 6 | var num = document.querySelector("#numTextfield").value; 7 | 8 | try{ 9 | if(num < 5) 10 | { 11 | throw "input is too low" 12 | } else if(num > 10) 13 | { 14 | throw "input is too high" 15 | } 16 | 17 | }catch(err){ 18 | console.log(err); 19 | } 20 | 21 | }) -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM Events 7 | 8 | 9 |

    10 | DOM EVENT 11 |

    12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /3_JS HTML DOM/6_DOM_EVENT_LISTENER/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM EVENT LISTENER 7 | 8 | 9 | 10 |

    No button is clicked yet

    11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /9_Storage/session-storage.js: -------------------------------------------------------------------------------- 1 | // localStorage vs sessionStorage 2 | // 10mb vs 5mb 3 | // permanent vs session (tab) 4 | 5 | // sessionStorage.setItem("user1", "anis"); 6 | // sessionStorage.setItem("user2", "linkon"); 7 | // const userName = sessionStorage.getItem("user"); 8 | // console.log(userName); 9 | 10 | // sessionStorage.removeItem("user"); 11 | 12 | // sessionStorage.clear(); 13 | 14 | const user = { id: "101", name: "anisul" }; 15 | sessionStorage.setItem("user", JSON.stringify(user)); 16 | 17 | const userInfo = JSON.parse(sessionStorage.getItem("user")); 18 | console.log(userInfo); 19 | -------------------------------------------------------------------------------- /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/FOR_FOREACH.js: -------------------------------------------------------------------------------- 1 | var numbers = [10,20,30] 2 | 3 | //for loops 4 | for(let x=0; x {"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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /1_BASIC_JS/program37.js: -------------------------------------------------------------------------------- 1 | // for vs foreach example 2 | 3 | // var numbers = [10,20,30,40]; 4 | // for(var x=0; x 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /6_ES6 FEATURES/1_ES6_SYNTAX/1.7_FOROF_FORIN.js: -------------------------------------------------------------------------------- 1 | // for..of loop can iterate over iterable objects such as string, array, map, set etc. 2 | const students1 = ["s1", "s2", "s3", "s4"]; 3 | for(let name of students1){ 4 | console.log(name) 5 | } 6 | 7 | // For loop through object we can use for/in loop 8 | const students2 = { 9 | name: "Anisul", 10 | age: 25, 11 | cgpa : 3.75 12 | } 13 | for(let x in students2){ 14 | console.log(x); //printing all the keys 15 | console.log(students2[x]); //printing all the values 16 | } 17 | 18 | let students = { 19 | ID : 101, 20 | name : 'Anisul Islam', 21 | cgpa : 3.91 22 | } 23 | 24 | for(let x in students){ 25 | console.log(`${x} : ${students[x]}`) 26 | } 27 | -------------------------------------------------------------------------------- /6_ES6 FEATURES/1_ES6_SYNTAX/1.2_HOISTING_STRICTMODE.js: -------------------------------------------------------------------------------- 1 | // collected form w3school website 2 | // In JavaScript, a variable can be declared after it has been used. 3 | // Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function). 4 | 5 | fullName = "Anisul Islam"; 6 | console.log(fullName); 7 | var fullName; // valid 8 | 9 | x = 25; 10 | console.log(x); 11 | let x; // reference error 12 | 13 | y = 10; 14 | console.log(y); 15 | const y; // syntax error 16 | 17 | // The purpose of "use strict" is to indicate that the code should be executed in "strict mode". 18 | "use strict"; 19 | x = 3.14; // This will cause an error because x is not declared -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /4_Browser_BOM/index1.js: -------------------------------------------------------------------------------- 1 | // js BOM 2 | // popup boxes - alert, confirm, prompt 3 | 4 | // function deleteSomething() { 5 | // let value = confirm("Do you want to delete?"); 6 | // if (value) { 7 | // console.log("deleted"); 8 | // } else { 9 | // console.log("not deleted"); 10 | // } 11 | // } 12 | // deleteSomething(); 13 | 14 | function welcomeMessage() { 15 | var h1 = document.createElement("h1"); 16 | let text; 17 | 18 | var name = prompt("Enter your name: "); 19 | if (name == null || name == "") { 20 | text = "no name found"; 21 | } else { 22 | text = "welcome " + name; 23 | } 24 | var textNode = document.createTextNode(text); 25 | h1.appendChild(textNode); 26 | document.body.appendChild(h1); 27 | } 28 | 29 | welcomeMessage(); 30 | -------------------------------------------------------------------------------- /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/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) -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /6_ES6 FEATURES/5_STRING_METHODS/index.js: -------------------------------------------------------------------------------- 1 | // es6 string methods 2 | // startsWith(searchString, position) -> check a string starts with another string 3 | // all these methods are case sensitive 4 | 5 | const message = "Today is friday"; 6 | 7 | console.log(message.startsWith("Today")); 8 | console.log(message.startsWith("Today", 0)); 9 | console.log(message.startsWith("Today", 5)); 10 | console.log(message.startsWith("today")); 11 | 12 | // endsWith(searchString, length) -> check a string ends with another string 13 | console.log(message.endsWith("today")); 14 | console.log(message.endsWith("friday")); 15 | 16 | // includes(searchString, position) -> check if a string contains another string 17 | console.log(message.includes("Today")); 18 | console.log(message.includes("is")); 19 | console.log(message.includes("that")); 20 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 = "<br/>"; 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /6_ES6 FEATURES/4_ARRAY_METHODS/index.js: -------------------------------------------------------------------------------- 1 | // Array methods 2 | // find() returns the value of the first array element that passes certain condition 3 | let numbers = [5, 55, 30, 40, 50]; 4 | 5 | const evenNumbers = (value, index, array) => { 6 | if (value % 2 === 0) { 7 | return value; 8 | } 9 | }; 10 | 11 | let newNumbers = numbers.find(evenNumbers); 12 | // let newNumbers = numbers.find(x => x>25) 13 | console.log(newNumbers); 14 | 15 | // findIndex() returns the index of the first array element that passes certain condition 16 | console.log(numbers.findIndex(evenNumbers)); 17 | 18 | const students = [ 19 | { 20 | id: 101, 21 | gpa: 3.5, 22 | }, 23 | { 24 | id: 102, 25 | gpa: 2, 26 | }, 27 | { 28 | id: 103, 29 | gpa: 4.5, 30 | }, 31 | { 32 | id: 104, 33 | gpa: 5, 34 | }, 35 | ]; 36 | 37 | console.log(students.find((x) => x.gpa > 4)); 38 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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); -------------------------------------------------------------------------------- /3_JS HTML DOM/6_DOM_EVENT_LISTENER/index.js: -------------------------------------------------------------------------------- 1 | var h1 = document.querySelector("h1"); 2 | var buttonsLength = document.querySelectorAll(".my-button").length; 3 | 4 | for(let x=0; x<buttonsLength; x++){ 5 | document.querySelectorAll(".my-button")[x].addEventListener("click", function(){ 6 | h1.innerHTML = this.innerHTML + " is clicked"; 7 | }) 8 | 9 | } 10 | 11 | 12 | document.querySelector("#input-id").addEventListener("change", function(e){ 13 | console.log(e.target.value) 14 | }) 15 | 16 | 17 | 18 | // adding document keypress listener 19 | document.addEventListener("keypress", function(event){ 20 | console.log(event.key) 21 | }) 22 | 23 | // adding mouseout, mouseover listener 24 | h1.addEventListener("mouseover", function(){ 25 | h1.style.color = "green"; 26 | h1.style.fontSize = "3rem"; 27 | }); 28 | h1.addEventListener("mouseout", function(){ 29 | h1.style.color = "black"; 30 | h1.style.fontSize = "2rem"; 31 | }); 32 | 33 | -------------------------------------------------------------------------------- /6_ES6 FEATURES/1_ES6_SYNTAX/1.6_OBJECT_LITERAL.js: -------------------------------------------------------------------------------- 1 | // Object Literal 2 | 3 | // Object property initializer shorthand - ES6 allows to eliminate the duplication 4 | function studentInfo1(name, age){ 5 | return { 6 | name : name, 7 | age : age 8 | } 9 | } 10 | function studentInfo2(name, age){ 11 | return { 12 | name, 13 | age 14 | } 15 | } 16 | 17 | console.log(studentInfo1("Rokibul Islam", 27)); 18 | console.log(studentInfo2("Anisul Islam", 30)); 19 | 20 | 21 | // Concise method syntax 22 | // previous 23 | let message1 = { 24 | body : function(){ 25 | return (`Eid is always special day for us.`); 26 | } 27 | } 28 | console.log(message1.body()) 29 | 30 | // present one 31 | let message2 = { 32 | body(){ 33 | return (`Eid is always special day for us.`); 34 | } 35 | } 36 | console.log(message2.body()) 37 | 38 | let message3 = { 39 | 'body name'(){ 40 | return (`Eid is always special day for us.`); 41 | } 42 | } 43 | console.log(message3['body name']()) -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /4_Browser_BOM/index.js: -------------------------------------------------------------------------------- 1 | // BOM (Browser Object Model) 2 | // window object 3 | // location object 4 | 5 | /** 6 | * Paste the following code in your index.html file 7 | * <h1>BOM</h1> 8 | <div class="location-div"> 9 | <p></p> 10 | <p></p> 11 | <p></p> 12 | <p></p> 13 | <p></p> 14 | </div> 15 | 16 | <button id="visit-button">visit my website</button> 17 | */ 18 | console.clear(); 19 | 20 | var locationDiv = document.querySelector(".location-div"); 21 | 22 | var p1 = locationDiv.children[0]; 23 | p1.textContent = location.href; 24 | 25 | var p2 = locationDiv.children[1]; 26 | p2.textContent = location.protocol; 27 | 28 | var p3 = locationDiv.children[2]; 29 | p3.textContent = location.hostname; 30 | 31 | var p4 = locationDiv.children[3]; 32 | p4.textContent = location.port; 33 | 34 | var p5 = locationDiv.children[4]; 35 | p5.textContent = location.pathname; 36 | 37 | const visitButton = document.getElementById("visit-button"); 38 | visitButton.addEventListener("click", function () { 39 | location.assign("https://www.studywithanis.com"); 40 | }); 41 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /9_Storage/local-storage.js: -------------------------------------------------------------------------------- 1 | // Web storage API - allows us to store & read data in browser 2 | // Web storage API - localStorage, sessionStorage 3 | 4 | // localStorage - store, read, update and remove data 5 | // no expiry date: data never gets lost even if you close the browser 6 | 7 | // localStorage store data as key value pair - string 8 | 9 | // setItem(key, value) 10 | // localStorage.setItem("userName", "anisul islam"); 11 | // localStorage.setItem("password", "0123456789"); 12 | 13 | // getItem(key) 14 | // const userName = localStorage.getItem("userName"); 15 | // const userPassword = localStorage.getItem("password"); 16 | // console.log(userName, userPassword); 17 | 18 | // removeItem(key) 19 | // localStorage.removeItem("userName"); 20 | // localStorage.removeItem("password"); 21 | 22 | // setItem(key, value) 23 | // const countries = ["Australia", "Bangladesh", "Nepal"]; 24 | // localStorage.setItem("countries", JSON.stringify(countries)); 25 | 26 | // // getItem(key) 27 | // const countriesList = JSON.parse(localStorage.getItem("countries")); 28 | // console.log(countriesList); 29 | 30 | // localStorage.clear(); 31 | -------------------------------------------------------------------------------- /7_API_CALLING/scripts/jquery.js: -------------------------------------------------------------------------------- 1 | // 4 ways to call api - XMLHttpRequest, fetch, axios, jquery 2 | // add jquery libraray cdn 3 | // ajax - asynchronous javascript and xml 4 | 5 | console.clear(); 6 | 7 | const makeRequest = async (url, method, data) => { 8 | try { 9 | const result = await $.ajax({ 10 | url: url, 11 | method: method, 12 | data: data, 13 | }); 14 | return result; 15 | } catch (err) { 16 | console.log(err); 17 | } 18 | }; 19 | 20 | const deleteData = () => { 21 | makeRequest("https://jsonplaceholder.typicode.com/posts/1", "DELETE").then( 22 | (res) => console.log(res) 23 | ); 24 | }; 25 | deleteData(); 26 | // const createData = () => { 27 | // makeRequest("https://jsonplaceholder.typicode.com/posts/1", "PUT", { 28 | // id: 1, 29 | // title: "fooma", 30 | // body: "barma", 31 | // userId: 1, 32 | // }).then((res) => console.log(res)); 33 | // }; 34 | // createData(); 35 | 36 | // const getData = () => { 37 | // makeRequest("https://jsonplaceholder.typicode.com/posts/1", "GET").then( 38 | // (res) => console.log(res) 39 | // ); 40 | // }; 41 | // getData(); 42 | -------------------------------------------------------------------------------- /7_API_CALLING/index.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html lang="en"> 3 | 4 | <head> 5 | <meta charset="UTF-8" /> 6 | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 7 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 8 | <title>Document 9 | 10 | 11 | 12 | 13 | 14 | 15 |

    API Calling in JS

    16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /3_JS HTML DOM/5_DOM_EVENTS/onchange/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 15 | 16 | 25 | 26 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | //