sample.js

// THIS IS A COMMENT
/* THIS IS ALSO A COMMENT */
// console.log("My name is Antarikshya Mitra");
// VARIABLES AND DATATYPES

// NUMBER
// let $k1 = 123.45;
// var $k2 = 123.56;
// const $k3 = 15;
// console.log($k3+20);

// BOOLEAN
// let bl = true;
// bl = false;

// STRINGS
// let s1 = 'Hello';
// s1 = "Car";

// Camelcased 
// let noOfStudents = "14";
// let n1;
// console.log(typeof(n1));
// let n2 = null;
// console.log(typeof(n2));
// let _abc = 146615849578796468465498796884848978964565746;
// console.log(typeof(_abc));

// Conditionals --> <,>,<=,>=,==,!=,===,!==,+=,-=,++,--
// let s1 = true;
// let s2 = "1";
// console.log(s1==s2);
// let age = 18;
// let valid = (age>=18)?"HE IS VALID":"HE IS NOT VALID";
// console.log(valid);
// let age = 15;
// if(age>=18)
// {
//     console.log("He is valid");
// }
// else
// {
//     console.log("He ain't Valid");
// }

// let s1 = (0 || 5);
// console.log(s1);

// BITWISE OPERATIONS -->  &,^,|,~,>>,<<
// >> --> /2^b && << --> *2^b
// let ca = 2;
// switch(ca)
// {
//     case 1:
//         console.log("Monday");
//         break;
//     case 2:
//         console.log("Tuesday");
//         break;
//     case 3:
//         console.log("Wednesday");
//         break;
//     default:
//         console.log("Another Day");
//         break;
// }

// // FUNCTIONS
// // WAY 1
// function  getAvg(num1,num2) {
//     return (num1+num2)>>2;
// }

// console.log(getAvg(45,56));

// // WAY 2
// const getAvg2 = function(num1,num2) {
//     return (num1+num2)>>2;
// }
// let avg = getAvg2(23,54);
// console.log(avg);

// // WAY 3
// // Arrow Functions
// const getAvg3 = (num1,num2) => {
//     return (num1+num2)>>2;
// }
// let avg$ = getAvg3(78,96);
// console.log(avg$);

// STRUCTURES && ARRAYS

// let abc = {
//     "Firstname" : "Antarikshya",
//     "Lastname" : "Mitra",
//     "id" : 798451,
//     "phone_no" : 8444001324,
//     greet : (Firstname,Lastname) => {
//         console.log(`Hello!! I am ${Firstname} ${Lastname}`);
//     },
//     my_id : function(id) {
//         console.log(`My id is- ${id}`);
//     }
// }

// let obj1 = abc; // Shallow Copy
// console.log(abc);
// abc.greet(abc.Firstname,abc.Lastname);
// abc.my_id(abc.id);

// ARRAYS


// let arr = [1,2,3,4,true,false,null,48,57,"Love"];
// console.log(arr);
// let brr = arr;
// arr = arr.filter((number) => {
//     return (typeof(number)=="number");
// });
// brr = arr.map((number) => {
//     return (number+2);
// })
// console.log(arr);
// console.log(brr); // Reference Copying Not Value Copying

// brr = new Array(1,2,3,4,true,false,null,48,57,"Love");
// brr = brr.map((x) => {
//     return x + 3;
// })
// console.log(brr);
 
// brr.push("56");
// brr.pop();
// brr.shift();
// brr.unshift("Love Guru");
// let crr = brr.slice(2,5);
// console.log(crr);
// console.log(brr);

// let arr = [1,2,3,4,5,6];
// // // arr = arr.forEach((val,idx) => {
// // //     val--;
// // //     console.log(`Index :${idx}`,`Value :${val}`);
// // // });

// // for(let val of arr)
// // {
// //     val++;
// //     console.log(val);
// // }

// arr.forEach((val,idx,arr) => {
//     arr[idx]--;
//     console.log(`Prev Value = ${val}`);
//     console.log(arr[idx]);
// })

// const summer = function(arr) {
//     let sum = 0;
//     arr.forEach((val,idx,arr)=>{
//         arr[idx]--;
//         console.log(arr[idx]);
//     })
// }


// let arr = [1,2,3,4,5,6];
// summer(arr);


// function getIdAndVal(obj){
//     for(let id in obj){
//         console.log(`${id} = ${obj[id]}`);
//     }
// }

// let obj = {
//     "name" : "Antariksh",
//     "id" : 1234,
//     "telephone" : 8444001324,
// };

// getIdAndVal(obj);

// Variable Hoisting
// {
//     console.log(name);
//     var name;
// }

// Function Hoisting

// greet("Antarikshya");

// function greet(name) {
//     console.log(`My name is ${name}`);
// }



// let choose = function(choice) {
//     switch(choice){
//         case 1:
//             return '+';
//         case 2:
//             return '-';
//         case 3:
//             return '*';
//         default:
//             return '/';
//     }
// }

// let solve = function(choose,a,b) {
//     if(choose == '+') {
//         return a+b;
//     } 
//     else if(choose == '-') {
//         return a-b;
//     } 
//     else if(choose == '*') {
//         return a*b;
//     } 
//     else {
//         return a/b;
//     }
// }

// let chz = choose(3);
// console.log(solve(chz,26,13));


// let funcarr = [
//     function fun1() {
//         console.log("Hii Option 1");
//     },
//     function fun2() {
//         console.log("Hii Option 2");
//     },
//     function fun3() {
//         console.log("Hii Option 3");
//     }
// ]

// let chs = funcarr[2];
// chs();


// class Car {
//     company = "None";
//     model = "None";
//     id = -1;
//     #tuning = true;
//     #availaibility() {
//         console.log("It is availaible");
//     }
//     servicing() {
//         console.log("It is in-accessible for servicing");
//     }
//     constructor(company,model,id) {
//         this.company = company;
//         this.model = model;
//         this.id = id;
//     } 
//     set getTuning(decision) {
//         this.#tuning = decision;
//     }
//     get accessTuning() {
//         return this.#tuning;
//     }
// }

// let obj1 = new Car("BMW","M4",4563);
// console.log(obj1.accessTuning);
// obj1.getTuning = false;
// console.log(obj1.accessTuning);
// let obj2 = new Car("Benz","B23",7896);
// console.log(obj2.accessTuning);



// class Car {
//     company = "None";
//     model = "None";
//     id = -1;
//     #made = "GER";
//     constructor(com,mod,id) {
//         this.company = com;
//         this.model = mod;
//         this.id = id;
//     }
//     #drift = true;
//     specifics() {
//         console.log(`This Car is tuned for drifting = ${this.#drift}`);
//     }
//     set changeDrifting(value) {
//         this.#drift = value;
//     }
//     get driftingStatus() {
//         return this.#drift;
//     }
// }

// let obj1 = new Car("BMW","M7",126);
// obj1.specifics();
// console.log(obj1.driftingStatus);
// obj1.changeDrifting = false;
// console.log(obj1.driftingStatus);


// Error Handling
// try {
//     console.log("TRY BLOCK STARTS HERE!!");
//     console.log(X);
//     console.log("TRY BLOCK ENDS HERE!!");
// }
// catch (err){
//     console.log("Error Block Starts here!!");
//     console.log("The Error is - ",err);
// }
// finally {
//     console.log("You have reached finally block");
// }
// let errorcode = 101;
// if(errorcode===101)
// {
//     throw new Error("Internet is a MANIAC!");
// }



// Functions Throwing
// let arr = new Array(1,2,3,4,5);

// let add = (arr) => {
//     let sum = 0;
//     for(let x of arr)
//     {
//         sum+=x;
//     }
//     return sum;
// }

// console.log(add(arr));

// let modify = arr.filter((number) => {
//     return number&(number-1);
// })
// console.log(modify);

// let obj = {
//     "name" : "Antarikshya",
//     "id" : 1234,
//     arr : [1,2,3,4],
//     adder(arr) {
//         let sum = 0;
//         for(let i of arr)
//         {
//             sum+=i;
//         }
//         return sum;
//     }
// };

// // let obj2 = obj; // Shallow Copy
// let obj3 = {...obj}; // Deep Copy
// let obj4 = Object.assign({},obj);



// console.log(obj);
// console.log(obj.adder(obj.arr));


// class Car {
//     company = "None";
//     model = "None";
//     id = -1;
//     constructor(com,mod,id) {
//         this.company = com;
//         this.model = mod;
//         this.id = id;
//     }
//     #price = 50000;
//     #buyer = "Mr. Nobody";
//     set pricing(pr) {
//         this.#price = pr;
//     }
//     set buyer_details(buy) {
//         this.#buyer = buy;
//     }
//     get buying_details() {
//         this.#buyerdetails();
//     }
//     details() {
//         console.log(`Your Car's maker is ${this.company}`);
//         console.log(`Your Car's id is ${this.id}`);
//         console.log(`Your Car's model is ${this.model}`);
//     }
//     #buyerdetails(){
//         console.log(`The Price of this car is ${this.#price}`);
//         console.log(`The Buyer of this Car is ${this.#buyer}`);
//     }
// };

// let car1 = new Car("BMW","M4",12879);
// car1.pricing = 12000000;
// car1.buyer_details = "Mr. Sinha";
// car1.buying_details;
// car1.details();




// Code Performance
// const t1 = performance.now();

// let mydiv = document.createElement("div");

// for(let i = 1; i<=100; i++)
// {
//     let fpara = document.createElement("p");
//     fpara.textContent = `Para ${i}`;
//     mydiv.appendChild(fpara);
// }
// document.body.appendChild(mydiv);

// const t2 = performance.now();
// console.log(t2-t1);

// const t3 = performance.now();


// for(let i = 1; i<=100; i++)
// {
//     let fpara = document.createElement("p");
//     fpara.textContent = `Para ${i}`;
//     document.body.appendChild(fpara);
// }

// const t4 = performance.now();
// console.log(t4-t3);

// const t5 = performance.now();
// let fragment = document.createDocumentFragment();

// for(let i = 1; i<=100; i++)
// {
//     let fpara = document.createElement("p");
//     fpara.textContent = `Para ${i}`;
//     fragment.appendChild(fpara);
// }
// document.body.appendChild(fragment);
// const t6 = performance.now();
// console.log(t6-t5);


// Event Loop Logic

// identify Sync or Async Code during Flow 
// if Sync put it in Call Stack and Execute
// if Async put it in Browser API Calls and after it's execution/running insert into callback queue
// When Call Stack Empty, pop from Queue and insert in Call Stack and execute and repeat untill Queue.empty()!=NULL

// PROMISES

// function sayMyName() {
//     console.log("Antarikshya");
// }

// let firstPromise = new Promise((resolve, reject) => {
//     setTimeout(() => {
//         sayMyName();
//     }, 2000);
//     reject("Promise Rejected, Internal Server Error:");

// });

// firstPromise
// .then((num) => {
//     console.log("This will NOT run");
// })
// .catch((err) => {
//     console.log("The Error is " + err);
// })
// .finally(() => {
//     console.log("Ended");
// });

// Closures

// function outer_func() {
//     let take = 1;
//     function inner() {
//         console.log(take);
//         let non_take = -1;
//         function inner_inner() {
//             console.log(non_take);
//         }
//         inner_inner();
//     }
//     inner();
// }
// outer_func();


// let take = 1;
//     function inner() {
//         console.log(take);
//         let non_take = -1;
//         function inner_inner() {
//             console.log(non_take);
//         }
//         inner_inner();
//     }

// inner();

// let parent = document.querySelector("#Firstdiv");
// parent.innerHTML()

// async function getRequest() {
//     let request = await fetch("https://catfact.ninja/fact");
//     let data = await request.json();
//     console.log(`The Cat Fact is- `+ data.fact);
// }

// getRequest();

// let url = "https://catfact.ninja/fact";
// async function getFacts() {
//     try {
//         let res = await axios.get(url);
//         // let data = await res.json();
//         return res.fact;
//     }
//     catch(err) {
//         return { "type" : "ERROR", "error" : err};
//     }
// }

let catFactURL = "https://catfact.ninja/fact";
let dogFactURL = "https://dog-api.kinduff.com/api/facts";
let dogImageURL = "https://dog.ceo/api/breeds/image/random";

let btn = document.querySelector("#button");
let parent = document.querySelector("#parent");

// ---------------- FETCH FUNCTIONS ----------------

async function getCatFact() {
    let res = await axios.get(catFactURL);
    return res.data.fact;
}

async function getDogFact() {
    let res = await axios.get(dogFactURL);
    return res.data.facts[0];
}

async function getDogImage() {
    let res = await axios.get(dogImageURL);
    return res.data.message;
}

// ---------------- UI HELPERS ----------------

function createCard(title, imgURL, fact) {
    let card = document.createElement("div");
    card.style.border = "1px solid #ccc";
    card.style.padding = "10px";
    card.style.margin = "10px";
    card.style.width = "300px";
    card.style.textAlign = "center";

    let h3 = document.createElement("h3");
    h3.innerText = title;

    let img = document.createElement("img");
    img.src = imgURL;
    img.style.width = "100%";

    let p = document.createElement("p");
    p.innerText = fact;

    card.appendChild(h3);
    card.appendChild(img);
    card.appendChild(p);

    return card;
}

// ---------------- BUTTON CLICK ----------------

btn.addEventListener("click", async () => {
    parent.innerHTML = ""; // Clear previous output

    // Fetch all data in parallel
    let [catFact, dogFact, dogImage] = await Promise.all([
        getCatFact(),
        getDogFact(),
        getDogImage()
    ]);

    let catCard = createCard("🐱 Cat", "https://cataas.com/cat", catFact);
    let dogCard = createCard("🐶 Dog", dogImage, dogFact);

    parent.appendChild(catCard);
    parent.appendChild(dogCard);
});