├── spread.js
├── default-parameter.js
├── arrow-function.js
├── let-const.js
├── big-arrow.js
├── summary.js
├── dom.js
├── basic.js
├── template-string.js
└── dom.html


/spread.js:
--------------------------------------------------------------------------------
 1 | const numbers = [23, 65, 99, 21, 34];
 2 | // console.log(numbers);
 3 | // console.log(...numbers);
 4 | 
 5 | const max = Math.max(23, 99, 65, 21, 34);
 6 | const maxInArray = Math.max(...numbers);
 7 | // console.log(max, maxInArray);
 8 | 
 9 | const numbers2 = [...numbers, 88];
10 | numbers.push(55);
11 | console.log(numbers);
12 | console.log(numbers2);
13 | 


--------------------------------------------------------------------------------
/default-parameter.js:
--------------------------------------------------------------------------------
 1 | function add(num1, num2 = 33) {
 2 |     // option 2
 3 |     // num2 = num2 || 0;
 4 |     // option 1
 5 |     // if (num2 == undefined) {
 6 |     //     num2 = 0;
 7 |     // }
 8 |     const total = num1 + num2;
 9 |     return total;
10 | }
11 | const result = add(15, 0);
12 | console.log(result);
13 | 
14 | function fullName(first, last = 'Chowdhury') {
15 |     const name = first + ' ' + last;
16 |     return name;
17 | }


--------------------------------------------------------------------------------
/arrow-function.js:
--------------------------------------------------------------------------------
 1 | // function declaration
 2 | function add(num1, num2) {
 3 |     return num1 + num2;
 4 | }
 5 | // function expression 
 6 | const add2 = function add2(num1, num2) {
 7 |     return num1 + num2;
 8 | }
 9 | // function expression (anonymous)
10 | const add3 = function (num1, num2) {
11 |     return num1 + num2;
12 | }
13 | //arrow function
14 | const add4 = (num1, num2) => num1 + num2;
15 | 
16 | const sum1 = add(15, 17);
17 | const sum2 = add2(15, 17);
18 | const sum3 = add3(15, 17);
19 | const sum4 = add4(15, 17);
20 | console.log(sum1, sum2, sum3, sum4);
21 | // document.getElementById('my-btn').onclick = function handleEvent(){
22 | 
23 | // }
24 | 
25 | 


--------------------------------------------------------------------------------
/let-const.js:
--------------------------------------------------------------------------------
 1 | // break up with var
 2 | let balance = 1240;
 3 | balance = 1340;
 4 | const userName = 'janpahi potas potas';
 5 | const weTogether = 'ami ' + userName;
 6 | console.log(weTogether);
 7 | // userName = 'moyna pakhi';
 8 | 
 9 | const numbers = [45, 23, 89, 60];
10 | // numbers = [99, 145, 3]; // not allowed
11 | numbers.push(555);
12 | numbers[1] = 333;
13 | 
14 | let sum = 0;
15 | for (let i = 0; i < numbers.length; i++) {
16 |     const number = numbers[i];
17 |     console.log(number);
18 |     sum = sum + number;
19 | }
20 | 
21 | const student = { roll: 101, name: 'mofij', job: 'intern' };
22 | student.name = 'MOfazzol';
23 | // student = { name: 'mofazzol' };
24 | 
25 | 


--------------------------------------------------------------------------------
/big-arrow.js:
--------------------------------------------------------------------------------
 1 | const add = (num1, num2) => num1 + num2;
 2 | const sum = add(22, 90);
 3 | 
 4 | const multiply = (num1, num2, num3) => num1 * num2 * num3;
 5 | const result = multiply(4, 12, 3);
 6 | 
 7 | const tenTimes = (num) => num * 10;
 8 | const output = tenTimes(17);
 9 | 
10 | const fiveTimes = num => num * 5;
11 | const value = fiveTimes(17);
12 | 
13 | const getName = () => 'Brandon Sam';
14 | const name = getName()
15 | console.log(name);
16 | 
17 | const doMath = (x, y) => {
18 |     const sum = x + y;
19 |     const diff = x - y;
20 |     const result = sum * diff;
21 |     const output = result * 5;
22 |     return output;
23 | }
24 | 
25 | const total = doMath(12, 5);
26 | console.log(total);
27 | 


--------------------------------------------------------------------------------
/summary.js:
--------------------------------------------------------------------------------
 1 | let priyoPerson = 'Koolsum Begum';
 2 | priyoPerson = 'Momotaj Begum';
 3 | const hubby = 'Akbar the great';
 4 | 
 5 | // default parameter
 6 | function getName(first, last = 'Chowdhury') {
 7 |     return first + ' ' + last;
 8 | }
 9 | 
10 | // template string
11 | const myPeople = `My lovely person is are ${hubby} and his fullName is ${getName('Akbar')}. My name is ${priyoPerson}.`
12 | 
13 | console.log(myPeople);
14 | 
15 | // arrow function
16 | const getName2 = (first, last) => first + ' ' + last;
17 | const fiveTimes = x => x * 5;
18 | const bigArrowFunc = (x, y, z) => {
19 |     const firstPart = x + y;
20 |     const secondPart = y * z;
21 |     const thirdPart = x / z;
22 |     const result = (firstPart + secondPart) * thirdPart;
23 |     return result;
24 | }
25 | 
26 | const numbers = [2, 4, 67, 54];
27 | const min = Math.min(...numbers)


--------------------------------------------------------------------------------
/dom.js:
--------------------------------------------------------------------------------
 1 | document.getElementById('add-border').addEventListener('click', function () {
 2 |     const container = document.getElementById('friend-container');
 3 |     container.style.border = '3px solid yellow';
 4 | });
 5 | 
 6 | function addBackgroundColor() {
 7 |     const friends = document.getElementsByClassName('friend');
 8 |     for (const friend of friends) {
 9 |         friend.style.backgroundColor = 'lightblue';
10 |     }
11 | }
12 | 
13 | document.getElementById('add-friend').addEventListener('click', function () {
14 |     const container = document.getElementById('friend-container');
15 |     const friendDiv = document.createElement('div');
16 |     friendDiv.classList.add('friend');
17 |     friendDiv.innerHTML = `
18 |             <h3 class="friend-name">New Friend</h3>
19 |             <p>Quam, sapiente.</p>
20 |     `;
21 |     container.appendChild(friendDiv);
22 | })


--------------------------------------------------------------------------------
/basic.js:
--------------------------------------------------------------------------------
 1 | // variable
 2 | var deposit = 400;
 3 | // condition
 4 | if (deposit > 500) {
 5 | 
 6 | }
 7 | else if (deposit < 200) {
 8 | 
 9 | }
10 | else if (deposit == 500) {
11 | 
12 | }
13 | else if (deposit != 500) {
14 | 
15 | }
16 | else if (deposit >= 500) {
17 | 
18 | }
19 | else if (deposit <= 500) {
20 | 
21 | }
22 | else {
23 | 
24 | }
25 | 
26 | // array
27 | const numbers = [45, 6587, 124, 45, 1, 365];
28 | const numberCount = numbers.length;
29 | numbers.pop();
30 | numbers.push(111);
31 | numbers[2] = 555;
32 | // check whether 222 included in the array
33 | if (numbers.indexOf(222) != -1) {
34 | 
35 | }
36 | if (numbers.includes(222)) {
37 | 
38 | }
39 | 
40 | // loop
41 | // while, for
42 | for (const number of numbers) {
43 | 
44 | }
45 | // function
46 | function fullName(first, second) {
47 |     const name = first + ' ' + second;
48 | }
49 | const person = fullName('Rahim', 'Ali');
50 | 
51 | // object 
52 | const bottle = { color: 'yellow', contain: 'water', price: 50 }


--------------------------------------------------------------------------------
/template-string.js:
--------------------------------------------------------------------------------
 1 | const priya = 'Asif Akbar';
 2 | const meye = "Meye tumi ki dukkho chino";
 3 | const kobita = `kobita tumi sopno charini`;
 4 | const multiLine = 'This is my first line. \n' +
 5 |     'this is my second line.\n' +
 6 |     'third line text here\n' +
 7 |     'fourth line text here';
 8 | 
 9 | const multiLineNew = `this is is multi line
10 | this is second line
11 | this is third line
12 | fourth line
13 | `;
14 | const friends = ['abul', 'babul', 'kabul', 'sabul'];
15 | const count = 5;
16 | const old = '<h3 class="friend-name">Friend-5</h3>'
17 | const old2 = '<h3 class="friend-name">Friend-' + count + '</h3>';
18 | const old2 = `<h3 class="friend-name">Friend-${count}</h3>`;
19 | const new1 = `<h3 class="friend-name">Friend-${friends.length}</h3>`;
20 | 
21 | const first = 'Mamun';
22 | const last = 'Chowdhury';
23 | const fullOld = 'This person name is ' + first + ' ' + last;
24 | const fullNew = `This person name is: ${first} ${last}. Has money ${(friends.length + 10) * 500}. He lives in Dhaka.`;
25 | 
26 | console.log(fullNew);


--------------------------------------------------------------------------------
/dom.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>DOM</title>
 9 | </head>
10 | 
11 | <body>
12 |     <div id="friend-container">
13 |         <div class="friend">
14 |             <h3 class="friend-name">Friend-1</h3>
15 |             <p>Lorem, ipsum.</p>
16 |         </div>
17 |         <div class="friend">
18 |             <h3 class="friend-name">Friend-2</h3>
19 |             <p>Voluptatem, nesciunt?</p>
20 |         </div>
21 |         <div class="friend">
22 |             <h3 class="friend-name">Friend-3</h3>
23 |             <p>Repudiandae, inventore.</p>
24 |         </div>
25 |         <div class="friend">
26 |             <h3 class="friend-name">Friend-4</h3>
27 |             <p>Quam, sapiente.</p>
28 |         </div>
29 |     </div>
30 |     <div>
31 |         <h2>Control room</h2>
32 |         <button id="add-border">Add border</button>
33 |         <button onclick="addBackgroundColor()">Add Background</button>
34 |         <button id="add-friend">Add Friend</button>
35 |         <button>Color friend Name</button>
36 |         <button>Extra</button>
37 |     </div>
38 |     <script src="dom.js"></script>
39 | </body>
40 | 
41 | </html>


--------------------------------------------------------------------------------