console.log(`This is a template literal aka backtick`);
console.log("Hello");

window.alert("This is an alert");
window.alert(`I like Pizza`);

// comment
document.getElementById("myH1").textContent = `Hello`;
document.getElementById("myP").textContent = `I like Pizza!`;

// Eg.,
let x;
let x;
// This will raise a SyntaxError: Identifier 'x' hass already been declared!

let age = 25;
let price = 10.99;
let gpa = 2.1;

console.log(`you are ${age} years old`);
console.log(`The price is $${price}`);
console.log(`Your gpa is: ${gpa});
// you can also display the datatype of a variable using:
console.log(typeof gpa);

// lets use other datatypes!

// Strings: Strings is a series of characters that can contain numbers but we cannot use these numbers for any sort of maths 

let firstName = "Bro"; // we can use single quotes or template literals
let favoriteFood = "pizza";

console.log(typeof firstName); 
console.log(`Your name is ${firstName}`);
console.log(`You like ${favoriteFood}`);

// Boolean: is either true or false and they are typically used as a sort of flag

let online = false;
let forSale = true;
let isStudent = true;

console.log(`Bro is online: ${online}`);
console.log(`Is this car for sale: ${forSale}`);
console.log(`Enrolled: ${isStudent}`); // Enrolled: true
// Typically, we use them with if statements!

// Now, we will display this in the html element!

let fullName = "Bro Code";
let age = 25;
let isStudent = false;

// To change the text content of an html element we'll type document (to get the document of our webpage):
document.getElementById("p1").textContent = fullName;
document.getElementById("p1").textContent = age;
document.getElementById("p1").textContent = isStudent;

//we can also use a template literal :
document.getElementById("p1").textContent = `Your namne is ${fullName}`;

let students = 30;

students = students + 1; // and soo on...
// using modules operator, it is recom. to use a separate variable!

// We can also use Augmented assignment operators! which is a short hand for it!
students += 1;
students -= 1;
students *= 2;
students /= 2;
students **= 2;
students %=  2;

// % can be useful to determine if a number is odd or even!

// Increment or Decrement Operators:
students++;
students--;



console.log(students);

let result = 1 + 2 * 3 + 4 ** 2; // 23
let result = 12 % 5 + 8 /2;
let result  = 6/2 ** (2+5);

// Easy way:

let username;

username = window.prompt("What's your username?");
console.log(username);

let username;

document.getElementById("mySubmit").onclick = function(){
    username = document.getElementById("myText").value;
    console.log(username);
}

// Now, check this runs perfectly! 
// Now, we'll change the h1 text using this!
// Remove console.log from here and add id="myH1" along with this:

document.getElementById("mySubmit").onclick = function(){
    username = document.getElementById("myText").value;
    document.getElementById("myH1").textContent = `Hello ${username}`
}

let age = window.prompt("How old are you?");

age+=1;
console.log(age); //Output: 251 (we're doing string concatination here by default!
// To make it work, we'll need to typecast it first as:
age = Number(age);

// Along with the age variable, we can display the age type as:
console.log(age, typeof age); // 26 'number' prev, it'd be 251 string

let x = "pizza";
let y = "pizza";
let z = "pizza";

x = Number(x);
y = String(y);
z = Boolean(z);

console.log(x, typeof x);
console.log(y, typeof y);
console.log(z, typeof z);

// Let first do it using let!
let pi  = 3.14159;
let radius;
let circumference;

radius = window.prompt('Enter the radius of a circle');
radius = Number(radius);

circumference = 2 * pi * radius;
console.log(circumference);
// Works just fine!

const PI  = 3.14159;
let radius;
let circumference;

document.getElementById("mySubmit").onclick = function(){
    radius = document.getElementById("myText").value;
    radius = Number(radius);
    circumference = 2 * PI * radius;
    //make an h3 tag
    document.getElementById("myH3").textContent = circumference+ "cm";
}

const decreaseBtn = document.getElementById("decreaseBtn");
const resetBtn = document.getElementById("resetBtn");
const increaseBtn = document.getElementById("increaseBtn");
const countLabel = document.getElementById("countLabel");

let count = 0; // we'll be reassigning count we'll be incrementing and decrementing count!
// With our HTML elements, we do not plan on reassigning them so we can set them as constants
// Now , we need three functions (for each decrease, reset and increase)

increaseBtn.onclick = function(){
    count++;
    countLabel.textContent = count;

}
decreaseBtn.onclick = function(){
    count--;
    countLabel.textContent = count;
        
}
resetBtn.onclick = function(){
    count = 0;
    countLabel.textContent = count;
}

let x = -3.21;
let y = 2;
let z;

//z = Math.round(x);
//z = Math.floor(x);
//z = Math.ceil(x);
//z = Math.trunc(x);
//z = Math.pow(x,y);
//z = Math.sqrt(x);
//z = Math.log(x);
//z = Math.sin(x); // for x=45
//z = Math.cos(x);
//z = Math.tan(x);
//z = Math.abs(x);
//z = Math.sign(x); // for sign -1,0 and 1 , can be used to determine
let max = Math.max(x,y,z);
let min = Math.min(x,y,z);


console.log(z);

let randonNum = Math.random();
randomNum = Math.random() * 6; // this will give the random numbers between 0 to 5 but in decimals!
randomNum = Math.floor(Math.random() * 6) +1; // this will give from 1 to 6!

//to get a random number between a range:  
const min = 50;
const max = 100;

let randomNum = Math.floor(Math.random() * (max - min)) + min;


console.log(randomNum);  

const myButton = document.getElementById("myBtn");
const myLabel = document.getElementById("myLabel");
const min = 1;
const max = 6;
let randomNum;

myButton.onclick = function(){
    randomNum = Math.floor(Math.random() * max) + min;
    myLabel.textContent = randomNum;
}

let age = 13;

if(age >= 18){
    console.log("You are old enough to enter this site");
}
else{
    console.log("You must be 18+ to enter this site");
}

let isStudent = true;

if(isStudent){
    console.log("You are a student!");
}
else{
    console.log("You are NOT a student!");
}

let age = 25;
let hasLicense = false;

if(age >= 16){
    console.log("you are old enouth to drive");
    if(hasLicense){
        console.log("You have your license!");
    }
    else{
        console.log("You do not have your license yet!");
    }
}
else{
    console.log("you must be 16+ to have a license");
}

if(){}
else if(){}
else{}

const myCheckBox = document.getElementById("myCheckBox");
const visaBtn= document.getElementById("visaBtn");
const masterCardBtn= document.getElementById("masterCardBtn");
const payPalBtn = document.getElementById("payPalBtn");
const mySubmit= document.getElementById("mySubmit");
const subResult = document.getElementById("subResult");
const paymentResult = document.getElementById("paymentResult");

mySubmit.onclick = function(){

}

let age = 21;
let message = age >= 18 ? "You're an adult" : "You're a minor";
// This is useful if you want to assign a variable based on a condition.

let message;

if(age >= 18){
    message = "You're an adult";
}else{
    message = "You're an minor";
}

let time = 16;
let greeting = time < 12 ? "Good morning!" : "Good afternoon!";
console.log(greeting);

let isStudent = true;
let message = isStudent ? "You are a student" : "You are NOT a student";
console.log(message);

// Challenge Round!!!
// We'll have a purchase amount , as if someone is buying something! If somebodies purchase amount is over 100$ , they get a 10% discount!
let purchaseAmount = 125;
let discount = purchaseAmount >= 100 ? 10 : 0;
console.log(`Your total is $${purchaseAmount - purchaseAmount * (discount / 100)}`);

//eg.,
let day = 1;

if(day == 1){
    console.log("It is Monday");
}
else if(day == 2){
    console.log("It is Tuesday");
}
//...and so on...

//now with switch!
let day = 1;
switch(day){
    case 1:
        console.log("It is Monday");
        break;
    case 2:
        console.log("It is Tuesday");
        break;
    case 3:
        console.log("It is Wednesday");
        break;
    case 4:
        console.log("It is Thursday");
        break;
    case 5:
        console.log("It is Friday");
        break;
    case 6:
        console.log("It is Saturday");
        break;
    case 7:
        console.log("It is Sunday");
        break;
    default:
        console.log(`${day} is not a day`); // notice no break req. here!
}

// more complex eg.,
// Instead of values, we can also pass conditions in the switch cases as below!
let testScore = 92;
let letterGrade;

switch(true){
    case testScore >= 90:
        letterGrade = "A";
        break;
    case testScore >= 80:
        letterGrade = "B";
        break;
    case testScore >= 70:
        letterGrade = "C";
        break;
    case testScore >= 60:
        letterGrade = "D";
        break;
    default:
        letterGrade = "F";
}

console.log(letterGrade);

// eg., 
let username = "BroCode";

console.log(userName.charAt(0)); // B
console.log(userName.indexOf("O")); // returns the index of the first occurance of the character!
console.log(userName.lastIndexOf("o")); // returns the last index of char!
console.log(userName.length);
// to trim white space in a string like "     BroCode" or "BroCode     "
console.log(userName.trim());
console.log(userName.toUpperCase());
console.log(userName.toLowerCase());
console.log(userName.repeat(3)); // will repeat the userName 3 times!
// we could also do this => userName = userName.repeat(3); console.log(userName);
// To determine if a string starts with a given character we can use the starts with method, this will retrun a boolean!
let result = userName.startsWith(" "); // userName = " BroCode";
console.log(result); // true!
//This could be useful in if statement as:
if(result){
    console.log("Your username can't begin with ' '");
}else{
    console.log(userName);
}

// there's also a .endsWith()
userName.endsWith(" ");
// .includes()
let result = userName.includes(" "); // eg., userName = "Bro Code";
if(result){
    console.log("Your username can't include ' '");
}else{
    console.log(userName);
}

// now, we'll create a phone number with - and we'll eliminate all the dashes using the .replaceAll()
let phoneNumber = "123-456-7890";
phoneNumber = phoneNumber.replaceAll("-","");
console.log(phoneNumber);
// then we have .padStart() method!
phoneNumber = phoneNumber.padStart(15, "0");
phoneNumber = phoneNumber.padEnd(15, "0");

// we'll extract the first name and make a new string
const fullName = "Bro Code";

let firstName = fullName.slice(0, 3); //end is exclusive
let lastName = fullName.slice(4,8);
let lastName = fullName.slice(4); //this both works the same! 

let firstChar = fullName.slice(0,1);
//Negative indices works as well!
let lastChar = fullName.slice(-1); // e
let fromLast = fullName.slice(-4); // code

//to make this program more dynamic, we can combine string slicing with indexof method!
//and in the next example, we're gonna do exactly that!

const fullName = "Broseph Code";

let firstName = fullName.slice(0, fullName.indexOf(" ")); //Broseph
let lastName = fullName.slice(fullName.indexOf(" ")); // Code (with a space)
//To remove padding..
lastName = fullName.slice(fullName.indexOf(" ")+1); //code 

//Exercise
const email = "[email protected]";

let userName = email.slice(0, email.indexOf("@"));
let extension = email.slice(email.indexOf("@")+1);

let userName = window.prompt("Enter your username:"); // Input:      brOcOdE
//after this, we'll take the entered username and trim all the white spaces , make the first char UPPERCASE and all other lower and display the output!

userName = userName.trim();
let letter = userName.charAt(0);
letter = letter.toUpperCase();

let extraChars = userName.slice(1);
extraChars = extraChars.toLowerCase();
userName = letter + extraChars;

console.log(userName); // Output: Brocode

let userName = window.prompt("Enter your username: ");
userName = userName.trim().charAt(0).toUpperCase() + userName.trim().slice(1).toLowerCase(); //see the use of string concatination!
// Though, it helps avoiding extra variables use, but can make it harder to read if it's long! (like here we're pushing it to the limits!)

console.log(userName); // Works the same!

const temp = 20;

if(temp > 0 && temp <= 30){
    console.log("The weather is GOOD");
}else{
    console.log("The weather is BAD");
}

if(temp <= 0 || temp > 30){
    console.log("The weather is BAD");
}else{
    console.log("The weather is GOOD");
}

const isSunny = false;

if(!isSunny){
    console.log("It is CLOUDY");
}else{
    console.log("It is SUNNY");
}

let username = "";

while(username === ""){
    console.log(`You didn't enter your name`);
}
console.log(`Hello ${username}`);
//but this block of code runs forever and doesn't do anything! so , we'll re-write this code!

let username ="";

while(username === ""){
    username = window.prompt("Enter your name");
}
console.log(`Hello ${username}`); // but it will print null if pressed cancel
//to fix that, we can:
/*
    update the while loop as:
    while(username === "" || usernamm === null)
*/

// another example
let loggedIn = false;
let username;
let password;

while(!loggedIn){
    username = window.prompt("Enter your username");
    password = window.prompt(`Enter your password`);

    if(username === "myUsername" && password === "myPassword"){
        loggedIn = true;
        console.log("You are logged in!");
    }else{
        console.log("Invalid credentials! Please try again!");
    }
}

for(let i = 0; i <= 2; ++i){
    console.log(i);
}

const minNum = 1;
const maxNum = 100;
const answer = Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum;

const minNum = 1;
const maxNum = 100;
const answer = Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum;

let attempts = 0;
let guess;
let running = true;

while(running){
    guess = window.prompt(`Guess a number between ${minNum} - ${maxNum}`);
    guess = Number(guess);

    if(isNaN(guess)){
        window.alert("Please enter a valid number");
    }
    else if(guess < minNum || guess > maxNum){
        window.alert("Please enter a valid number");
    }
    else{
        attempts++; //what if we just write attempts; here??
        if(guess < answer){
            window.alert("TOO LOW! TRY AGAIN!");
        }
        else if(guess > answer){
            window.alert("TOO HIGH! TRY AGAIN!");
        }
        else{
            window.alert(`CONGRATS! ${answer} is the correct number! It took you ${attempts} attempts to guess!);
            running = false;
        }
    }
}

function happyBirthday(){
    console.log("Happy Birthday to you");
    console.log("Happy Birthday to you");
    console.log("Happy Birthday dear you");
    // console.log(`Happy Birthday dear ${username}, You're ${age} year old!`); // this will raise an Uncaught ReferenceError as username is not defined! You can use function arguments for this! but for that you'll need to set parameters! let's do this now in the next code snippet!
    console.log("Happy Birthday to you");
}

happyBirthday();
happyBirthday(); // shows code reusability!

function happyBirthday(username, age){ // Order of parameters matters here! (try switching username and age here and see!)
    console.log("Happy Birthday to you");
    console.log("Happy Birthday to you");
    console.log(`Happy Birthday Dear ${username}`);
    console.log("Happy Birthday to you");
    console.log(`You are ${age} year old`);
}

happyBirthday("Brocode", 25);
happyBirthday("Kishor", 22);

function add(x,y){
    let result = x + y;
    return result; // or shortcut: return x+y;
}

let answer = add(2,3);
console.log(answer);
// or console.log(add(2,3));

// similarly, make subtract, multiply, divide and isEven, isValidEmail functions yourself!

let x = 1;
let x = 2;
//doing this will raise an error : caught SyntaxError: Identifier 'x' has already been declared
// We cannot declare variables with the same name until the scope is different!

function1(); // invoke function1 before declaration! (valid in js!)
function2(); // functions are Hoisted (but not the Function Expression or Arrow Functions!)

function function1(){
    let x = 1;
    console.log(x);
}

function function2(){
    let x = 2; // here in this example, we can declare x since it's in different scope! (This is known as Local scope)
    console.log(x);
}

let fruits = ["apple", "orange", "banana"];
console.log(fruits); 
// output: ['apple', 'orange' , 'banana']
console.log(fruits[1]); // orange
console.log(fruits[10]); //if you try to access an index that does not exists yet, it will print undefined!
//we can also modify elements at a index as:
fruits[1] = "coconut";
// although, we can add a new element like avoid but we can also use the built-in method .push
fruits.push("mango");
fruits.pop(); // removes elements from last!
fruits.unshift("Guava"); // add an element to the beginning
fruits.shift(); // to remove an element from the beginning
fruits.length; // built-in method to count the number of elements in an array! (not .length has no parenthesis()! Why?)
let index  = fruits.indexOf("apple"); // return the index of "element" if found! and -1 if not found! (which can be used in if(statement)!)

for(let i=0; i<fruits.length; ++i){
    console.log(fruits[i]);
}
//enhanced for loop =>
for(let fruit of fruits){
    console.log(fruit);
}

fruits.sort(); // sort elements in alphabetical order!
fruits.sort().reverse(); // for reverse order!

let numbers = [1,2,3,4,5];
let maximum = Math.max(numbers); // to find the max

console.log(maximum); // NaN ❌
// for this we would need to use the spread operator!
maximum = Math.max(...numbers);
console.log(maximum); // 5 ✔️
console.log(let minimum = Math.min(...numbers)); // 1

let username = "Bro Code";
let letters = [...username];

console.log(letters); // ['B', 'r', 'o', ' ' , 'C', 'o' , 'd' , 'e']

letters = [...username].join("-"); // this joins the characters into string and also insert - in between them! Output: B-r-o- -C-o-d-e

// test.js
let fruits = ["apple", "orange", "banana"];
let newFruits = [...fruits];

newFruits[0] = "mango";

console.log(fruits);
console.log(newFruits);

// we can use the spread operator to combine arrays!
let fruits = ["Apple", "Orange", "Banana"];
let vegies = ["carrots", "celery", "potatoes"];

let foods = [...fruits, ...vegies];

console.log(foods);
// it also have this ability to append new data in the array, as:
vegies = [...fruits, ...vegies, "eggs", "milk"];

//eg. 1, 
function openFridge(...foods){
    console.log(...foods);
}
function getFood(...foods){
    return foods;
}

const food1 = "pizza";
const food1 = "hamburger";
const food1 = "hotdog";
const food1 = "sushi";
const food1 = "ramen";

//openFridge = getFood(food1, food2, food3, food4, food5);

console.log(foods);

// eg. 2,
function sum(...numbers){
    let result = 0;
    for(let number of numbers){
        result += number;
    }
    return result;
}

const total = sum(1,2,3,4,5);

console.log(`Your total is $${total}`);

//eg. 3,
function sum(...numbers){
    let result = 0;
    for(let number of numbers){
        result += number;
    }
    return result;
}

function getAverage(...numbers){

    let result = 0;
    for(let number of numbers){
        result += number;
    }
    return result / numbers.length;
}

const total = getAverage(75, 100, 85, 90, 50);

console.log(total);

//eg. 4, (we can also combines strings using ...rest operator!)
function combineStrings(...strings){
    return strings.join(" ");
}

const fullName = combineStrings("Mr." , "Spongebob", "Squarepants", "III");

console.log(fullName);

//eg. 1,
hello();
goodBye();

function hello(){
    console.log("Hello!");
}
function goodBye(){
    console.log("Goodbye!");
}

//Output: Hello!\nGoodbye!

//now, suppose for some reason the hello() takes some time to execute! Js won't wait for it and execute the next line and print Goodbye!\nHello! 
// we'll use setTimeOut() to demonstrate that! =>

{
    hello();
    goodBye();

    function hello(){
        setTimeout(function(){
            console.log("Hello!");
        },3000);
    }
    function goodBye(){
        console.log("Goodbye!");
    }
    // Output: Goodbye! *(after 3s) \nHello!
    // But the desired result was the other way around!
    // this is where callback function comes in picture and could be used to acheive the desired result!
}

{
    //now with callback()
    hello(goodBye); // using hello(goodBye()); will immediately invoke the goodBye function!

    hello(leave);
    hello(wait);

    function hello(callback){
        console.log("Hello!");
        callback();
    }

    function wait(){
        console.log("Wait!");
    }

    function leave(){
        console.log("Leave!");
    }

    function goodbye(){
        console.log("Goodbye!");
    }

    /*
        Output: 
        Hello!
        Goodbye!
        Hello!
        Leave!
        Hello!
        Wait!
    */
}

// eg. 2,

//invoke
sum(displayConsole, 1, 2); // output: 3

function sum(callback, x, y){
    let result = x + y;
    callback(result); //invoke
}

function displayConsole(result){
    console.log(result);
}

//lets create a function to display result on the webpage (DOM)
/*
    (required!)
    <h1 id="myH1"></h1>
*/
function displayPage(result){
    document.getElementById("myH1").textContent = result;
}

sum(displayPage, 2, 3); // DOM: 5

let numbers = [1,2,3,4,5];

numbers.forEach(display); //where is the element argument??

function display(element){
    console.log(element);
}
// output: 1\n2\n3\n4\n5

// eg. 2,
let numbers = [1,2,3,4,5];

numbers.forEach(double);
numbers.forEach(display);

function double(element, index, array){ //these are already provided
    array[index] = element * 2;
}

function display(element){
    console.log(element);
}

//eg. 3, more practical method!
let fruits = ["apple", "orange", "banana", "coconut"];

fruits.forEach(upperCase);
fruits.forEach(display);

function upperCase(element, index, array){
    array[index] = element.toUpperCase(); // rem: methods alway belongs to something where functions are Standalone
}

// similarly, make lowerCase() and capitalize() functions!

function display(element)){
    console.log(element);
}

//eg., 
const numbers = [1,2,3,4,5];
const squares = numbers.map(square);
const cubes = numbers.map(cube);

console.log(squares); // output: [1, 4, 9, 16, 25]
console.log(cube); // output: [1, 8, 27, 64, 125]

function square(element){
    return Math.pow(element, 2);
}

function cube(element){
    return Math.pow(element, 3);
}

// we still have our original numbers array as it is!

//eg. 2,
const students = ["Spongebob", "Patrick", "Squidward", "Sandy"];
const studentsUpper = students.map(upperCase);
const studentsLower = students.map(lowerCase);

console.log(studentsUpper);
console.log(studentsLower);

function upperCase(element){
    return element.toUpperCase();
}

function lowerCase(element){
    return element.toUpperCase();
}

// a more practical example (date format)
const dates = ["2024-1-10", "2025-2-20", "2026-3-30"];
const formattedDates = dates.map(formatDates);

console.log(formattedDates);

function formatDates(element){
    const parts = element.split("-");
    return `${parts[1]}/${parts[2]}/${parts[0]}`;
}

let numbers = [1, 2, 3, 4, 5, 6, 7];
let evenNums = numbers.filter(isEven);
let oddNums = numbers.filter(isOdd);

console.log(evenNums); // output: [2, 4, 6]
console.log(oddNums); // output: [1, 3, 5, 7]

function isEven(element){
    return element % 2 === 0; //this will return a boolean!
}

function isOdd(element){
    return element % 2 !== 0; //this will return a boolean!
}

// eg. 3,
const ages = [16, 17, 18, 19, 20, 60];
const adults = ages.filter(isAdult);
const children = ages.filter(isChild);

console.log(adults);
console.log(children);

function isAdult(element){
    return element >= 18;
}

function isChild(element){
    return element < 18;
}

//eg. 4, 
const words = ["apple", "orange", "banana", "kiwi", "pomegranate", "coconut"];
const shortWords = words.filter(getShortWords);
const longWords = words.filter(getLongWords);

console.log(shortWords);
console.log(longWords);

function getShortWords(element){
    return element.length <= 6;
}

function getLongWords(element){
    return element.length > 6;
}

//eg. 1,
const prices = [5, 30, 10, 25, 15, 20];

const total = prices.reduce(sum); // callback required!

console.log(`$${total.toFixed(2)}`);

function sum(accumulator, element){ // we could also write previous , next here!
    return accumulator + element;
}

//eg. 2,
const grades = [75, 50, 90, 80, 65, 95];

const maximum = grades.reduce(getMax); //95
const minimum = grades.reduce(getMin); //65

console.log(maximum);
console.log(minimum);

function getMax(accumulator, element){
    return Math.max(accumulator, element);
}

function getMin(accumulator, element){
    return Math.min(accumulator, element);
}

//eg., 
function hello(){
    console.log("Hello");
}

//eg. passing a function expression as a variable, 
const hello = function(){
    console.log("Hello");
}

hello(); // invoke to use that hello() function!

//eg. passing a function expression as a value,
function hello(){
    console.log("Hello");
}

setTimeout(hello, 3000); //setTimeout(callback, delay);

// instead of a callback, we will pass a function expression as a value to this function!
setTimeout(function(){
    console.log("Hello again!");
}, 3000);

//eg. 2, 
{
    // here in this block of code, we are using the function declaration!
    const numbers = [1, 2, 3, 4, 5];
    const squares = numbers.map(square); // taking a callback
    
    console.log(squares);
    
    function square(element){
        return Math.pow(element, 2);
    }
}

{
    // In this block of code, we have used the function expression passed as the value!
    const numbers = [1, 2, 3, 4, 5];
    const squares = numbers.map(function(element){
        return Math.pow(element, 2);
    });

    console.log(squares); // works the same!

/*
    Note: We don't need to think of a function name, one of the benefits of doing this is that we're not polluting the global Name space with function names. We're only going to be using this  function once, there's no need to declare a function!    
*/
}

{
    //similarly, make the cube function with function expression!
}

// Now, function expressions with filter!
const numbers = [1, 2, 3, 4, 5];

const evenNums = numbers.filter(function(element){
    return element % 2 === 0;
});

// make oddNums yourself!

console.log(evenNums);

//Now, function expression with reduce!
const numbers = [1, 2, 3, 4, 5];

const total = numbers.reduce(function(accumulator, element){
    return accumulator + element;
});

console.log(total);

{
    // Normal way!
    hello();
    
    function hello(){
        console.log("Hello");
    }
}
{
    // we'll first create a function expression and then convert it to an arrow function!
    const hello = function(){
        console.log("Hello");
    }

    hello(); // Invoked below declaration because function expressions are not hoisted!
}
{
    // Now with arrow function => 
    const hello = () => console.log("Hello");

    hello(); //works the same!
}
{
    //WE CAN ALSO PASS ARGUMENTS IN IT! 
    const hello = (name) => console.log(`Hello ${name}`);

    hello("Kishor"); // prints: Hello Kishor
}
{
    // within your code, if you want to insert more than one statement, wrap them in {}
    const hello= (name, age) => { //{} used for more statements, i.e, two console.log()'s
        console.log(`Hello ${name}`);
        console.log(`You're ${age} year old!`);
    }
    // Notice how we used multiple parameters this time!
    hello("Kishor", 22);
}

{
    // another example
    setTimeout(hello, 3000); //setTimeout(callback, delay)

    function hello(){
        console.log("Hello");
    }
}

{
    // Now with function expression =
    setTimeout(function(){
        console.log("Hello");
    },3000);
}

{
    // Now with arrow function =>
    setTimeout(() => console.log("Hello"), 3000); // works the same!    
}

// now, we'll use arrow functions with map, filter, and reduce!
const numbers = [1, 2, 3, 4, 5];

const squares = numbers.map((element) => Math.pow(element, 2));
const cubes = numbers.map((element) => Math.pow(element, 3));
const evenNums = numbers.filter((element) => element % 2 === 0); // we don't necessarily need to return statement if we have only one line of code! (like here!)
const oddNums = numbers.filter((element) => element % 2 !== 0);
const total = numbers.reduce((accumulator, element) => accumulator + element);

console.log(squares);
console.log(cubes);
console.log(evenNums);
console.log(oddNums);
console.log(total);

const person1 = {
    firstName: "Spongebob",
    lastName: "Squarepants",
    age: 30,
    isEmployed: true,
    // objects can have functions as well!
    sayHello: function(){console.log("Hi! I am Spongebob!")}, //this is going to be a function expression 

}

const person2 = {
    firstName: "Patrick",
    lastName: "Star",
    age: 42,
    isEmployed: false,
    sayHello: () => console.log("Hi! I am Patrick!..."), // here, we have used the arrow function =>
}

console.log(person1.firstName);
console.log(person1.lastName);
console.log(person1.age);
console.log(person1.isEmployed);
person1.sayHello();

console.log(person2.firstName);
console.log(person2.lastName);
console.log(person2.age);
console.log(person2.isEmployed);
person2.sayHello();

const person1 = {
    name: "Spongebob",
    favFood: "hamburgers",
    sayHello: function(){console.log(`Hi! I am ${this.name})`}, // Hi! I am , will be printed if not used this keyword! using this.name is same as using person1.name!
    eat: function(){console.log(`${this.name} is eating ${this.favFood}`)},
}
// one of the cool features of it , is when we copy this code for person2 , we only need to update the name and favFood property and it will work!
const person2 = {
    name: "Patrick",
    favFood: "Pizza",
    sayHello: function(){console.log(`Hi! I am ${this.name})`}, // Hi! I am , will be printed if not used this keyword! using this.name is same as using person1.name!
    eat: function(){console.log(`${this.name} is eating ${this.favFood}`)},
}

person1.sayHello();
person1.eat();
person2.sayHello();
person2.eat();

console.log(this);

const person1 = {
    name: "Spongebob",
    favFood: "hamburgers",
    eat: () => console.log(`${this.name} is eating ${this.favFood}`),
}
person1.eat(); // output:  is eating undefined

// In previous examples, we have learn to create objects and assign properties to each of those object, but what if we had to make a lot of objects?? There the constructor comes into picture! WE WILL USE CONSTRUCTORS TO CONSTRUCT MULTIPLE OBJECTS AUTOMATICALLY!

// First we'll make a function
function Car(make, model, year, color){ // DO PAY ATTENTION TO THE CAPITALISATION!
    this.make = make,
    this.model = model,
    this.year = year,
    this.color = color,
    this.drive = function(){console.log(`You drive the ${this.model}`)}
}
// Our Car constructor is a reusable method, where we can define the properties and methods of objects we create
// To use this constructor, we will create an instance of an object

const car1 = new Car("Mclaren", "P1", 2025, "Orange"); // Car() is a special method, we'll need to pass in some arguments!

console.log(car1.make);
console.log(car1.model);
console.log(car1.year);
console.log(car1.color);
car1.drive();

//similarly, make more cars!

// here in this eg., we have used the constructor
function Product(name, price){
    this.name = name;
    this.price = price;

    this.display = function(){
        console.log(`Product: ${this.name}`);
        console.log(`Price: $${this.price.toFixed(2)}`);
    };

    this.calculateTotal = function(salesTax){
        return this.price + (this.price * salesTax);
    }
}

const salesTax = 0.05;

const product1 = new Product("Shirt", 19.99);
const product1 = new Product("Pants", 22.50);
const product1 = new Product("Underwear", 100.00);

product1..displayProduct();

const totalPrice = product1.calculateTotal(salesTax);

console.log(`Total Price (with tax): $${totalPrice.toFixed(2)}`);

// we'll use classes to do the same thing but in much better/ efficient way!
class Product{ // our class will serve as a blueprint!
    constructor(name, price){
        this.name = name;
        this.price = price;
    }

    //inside of a class, we don't need to use the `function` keyword!
    displayProduct(){
        console.log(`Product: ${this.name}`);
        console.log(`Price: $${this.price.toFixed(2)}`);
    }

    calculateTotal(salesTax){
        return this.price +(this.price * salesTax);
    }
}

const salesTax = 0.05; // that is , 5%

// lets create some Product objects
const product1 = new Product("shirt", 19.99); // we use the `new` keyword to use the constructor of an object! (eg., const array = new Array(1,2,3)); )

product1.displayProduct();

const total = product1.calculateTotal(salesTax);
console.log(`Total price (with tax): $${total.toFixed(2)}`);


// similarly, create more products!

class MathUtil{
    static PI = 3.14159;

    static getDiameter(radius){
        return radius * 2;
    }

    static getCircumference(radius){
        return 2 * this.PI * radius;
    }

    static getArea(radius){
        return this.PI * radius * radius;
    }
}

console.log(MathUtil.PI); // here, we didn't need to create an object for class MathUtil in order to use that PI property of it! (If we call it via an object, it'll say undefined!)
// anything declared static, belong to the class itself! Not to the objects!

console.log(MathUtil.getDiameter(10)); // 20
console.log(MathUtil.getCircumference(10)); // 62.8318
console.log(MathUtil.getArea(10)); // 314.159

// In this example, we'll have a mix of regular properties and methods and static property and methods
class User{

    static userCount = 0;

    constructor(username){
        this.username = username;
        User.userCount++;
    }

    static getUserCount(){
        console.log(`There are ${User.userCount}  users online`); // here , this.userCount also does the same thing!
    }

    sayHello(){
        console.log(`Hello! My username is ${this.username}`);
    }
}

const user1 = new User("Spongebob");
const user2 = new User("Patrick");
const user3 = new User("Sandy");

// console.log(user1.username);
// console.log(user1.userCount); // this will print undefined, as static properties do not belong to the object!

console.log(user1.username);
console.log(user2.username);
console.log(user3.username);

user1.sayHello();
user2.sayHello();
user3.sayHello();
console.log(User.userCount); // prints : 1
User.getUserCount();

class Animal{
    alive = true; // Notice bro didn't wrote let or const here?? why??

    eat(){
        console.log(`This ${this.name} is eating`);
    }
    sleep(){
        console.log(`This ${this.name} is sleeping`);
    }
}
class Rabbit extends Animal{
    name= "rabbit";
}
class Fish extends Animal{
    name= "fish";
}
class Hawk extends Animal{
    name= "hawk";
}

const rabbit = new Rabbit();
const fish = new Fish();
const hawk = new Hawk();

//Ok, lets see if our rabbit is alive

// rabbit.alive = false;
console.log(rabbit.alive); // true
rabbit.eat();
rabbit.sleep();

console.log(fish.alive); // true
fish.eat();
fish.sleep();

console.log(hawk.alive); // true
hawk.eat();
hawk.sleep();

class Rabbit extends Animal{
    name= "rabbit";
    run(){
        console.log(`This ${this.name} is running!`);
    }
}
}
class Fish extends Animal{
    name= "fish";
    swin(){
        console.log(`This ${this.name} is swimming!`);
    }
}
class Hawk extends Animal{
    name= "hawk";
    fly(){
        console.log(`This ${this.name} is flying!`);
    }
}

class Animal{
    constructor(){

    }
}
class Rabbit extends Animal{
    constructor(name, age, runSpeed){
        super();
        this.name = name;
        this.age = age;
        this.runSpeed = runSpeed;
    }
}

class Fish extends Animal{
    constructor(name, age, swimSpeed){
        super();
        this.name = name;
        this.age = age;
        this.swimSpeed = swimSpeed;
    }
}

class Hawk extends Animal{
    constructor(name, age, flySpeed){
        super();
        this.name = name;
        this.age = age;
        this.flySpeed = flySpeed;
    }
}

const rabbit = new Rabbit("rabbit", 1, 25);
const fish = new Fish("fish", 2, 12);
const hawk = new Hawk("hawk", 3, 50);

class Animal{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}
class Rabbit extends Animal{
    constructor(name, age, runSpeed){
        super(name, age); // we need to pass in the arguments to the parent constructor!
        this.runSpeed = runSpeed;
    }
}

class Fish extends Animal{
    constructor(name, age, swimSpeed){
        super(name, age);
        this.swimSpeed = swimSpeed;
    }
}

class Hawk extends Animal{
    constructor(name, age, flySpeed){
        super(name, age);
        this.flySpeed = flySpeed;
    }
}

const rabbit = new Rabbit("rabbit", 1, 25);
const fish = new Fish("fish", 2, 12);
const hawk = new Hawk("hawk", 3, 50);


console.log(rabbit.name);
console.log(rabbit.age);
console.log(rabbit.runSpeed);

console.log(fish.name);
console.log(fish.age);
console.log(fish.runSpeed); // undefined as fishes don't have legs so they can't run , but they do have a swimSpeed!
console.log(fish.swimSpeed);

// works the same!
// So, all the sharing properties of children, can be passed in the parent class constructor for avoiding redundant code!