cheatsheet.js

// name is a preserved word in browser it already exists as window.name so we can't use only name
// && mean AND - both conditions must be true
// >= means greater than or equal to
// == checks if value are equal 



// ARRAY
// in array push is used to add item in array from the last and pop is used to delete from the last ans shift is used to delete from the start and unshift is used to add items from the start
// forEach method is used to loop through every item one by one
// two ways to write it
// old
Skills.forEach(function(Skill){
    console.log(" i am learning "+Skill+ " and it will get me a job");
});
// new
Skills.forEach((Skill)=>{
console.log(" i know "+Skill);
})  
// if i use Skills instead of Skill inside foreach method function console.log it will run in one go on all element not one by one
// we can define function parameter with res which is a short form of result
// // Cannot use a variable inside its own declaration
// forEach returns undefined it does not store anything and neither return it
// forEach — it just like we wanna do something with items performing some task but don't store it
// it just loop through array and perform action does not return new array
// Use it when → printing, displaying, sending emails, showing notifications. Just DOING something. Not storing anything new.
// map in JS return new array
// map — when we want to perform task or transform array
// it returns new Array
// Use it when → converting data, adding text to items, transforming API data before showing on screen. React uses map everywhere to display lists on webpage.
// filter — in this if any items matches the condition even it is one item
// we use it when we want to filter some things on items like for example in number odd even number etc.
// For real life example we use it in search bar and while shopping online by filtering color, price, size,discount etc.
let jobs = [
  {title: "React Developer", salary: 40000, city: "Delhi"},
  {title: "Node Developer", salary: 25000, city: "Mumbai"},
  {title: "UI Designer", salary: 35000, city: "Delhi"},
  {title: "React Developer", salary: 50000, city: "Bangalore"}
]

// filter - only high paying jobs
let highPaying = jobs.filter((job) => job.salary > 30000)

// map - show only titles
let titles = highPaying.map((job) => job.title)

// forEach - display each one
titles.forEach((title) => console.log(title))

// find
// find is used to find one specific item like finding a specifice user by id etc.
// find()- returns first single items that matches the condition
// stops immediately when it finds the first match like if else condition
// filter() returns all matches,find() returns only First one
// array of objects - real world data looks like this
// access object property inside array method using dot notation
// student.name, student.marks, student.city
// in array there is slice  methode which start from starting index and end to ending index but we don't count ending index
// ------real life example of slice in real world-----
// show only first 3 products on homepage
let products = ["phone", "laptop", "shoes", "shirt", "watch"]
let featuredProducts = products.slice(0, 3)
// ["phone", "laptop", "shoes"]
// original products array untouched!!

// pagination - show items 5 to 10
let page2 = products.slice(5, 10)

// get last 3 notifications
let recent = notifications.slice(-3)

// ---splice------------------------------
// slice- slice do not change the original array make the copies of it and splice directly changed the original array
// splice(start,deleteCount)-remove items change original
// splice(start,0,newItem)- adds item at that position

// ------------Real examples:
// User deletes a todo → splice removes it from array
// Insert notification at top of list → splice adds at index 0
// Remove a product from cart → splice deletes it

// ---------------------includes & indexOf-------------------------
// includes returns boolean value true or false if item does not exist it returns false otherwise
// includes is used to know whether this item exists
// indexOf return index of item and returns -1 if item does not exist
// i had problem in combining indexof and slice to find index and delete at the same time so have to practice this
//------------------------ object--------------------------------

// in object we group related data about one thing in the box
// and there is no need for let when adding new property
// we can access single property with the dot notation
// in real world example like we store user data like email password username etc. and job listing
// MongoDB documents are literally JS objects
// if i am performig some task like like filtering mapping foreach and find first see and study the question 4-5 times and understand what it says
// and we can perform task like chain connected to each other by using their variables like we can use filter's variable in map to build logic performing task only filtered value and this was my big mistake today so read and understand question
// and if array has object we will use res.property if it does not have objects but strings and numbers then we will use only just res inside method function got it!
// there is two ways to access object property:
// dot notation when you know the properety name
example- student.name
//and second is bracket notation when propeerty name is in a variable
example- student[key]
// in object Object.keys().foreach() is the best way to loop through object
// use bracket notation scores[score] when key is in a variable
//  if we write scores.react i mean one specific key value then it will print on all in foreach but i want all key with their value so we don't use any specifice key value or key we just use bracket notation
// dot notation gives one specific fixed value and bracket notation changes dynamically every loop
// that is why we use bracket notation inside foreach
// ----------------------important---------------
// when we use object.key it converts object into array so we can perform array functions and methods
// in object we can use double notation to get the specific object's key value
// first it checks which item in array then which property in object



// ---------------functions------------------------------
// we use function for repetitive task
//  like adding and substracting through this we do not have to write logic again and again once we made a function and write the  logic  only one time we can use it 
// my weak topic is function right now forgetting syntax
// and instead of returning and storing i print them so i do not have to repeat this mistake again
// and i can do normal functions and logic i get stuck on callback and its logic
// we use call back when we want one function to do different task based on situation
// in real world we use callbacks for example we want to add delete and edit task so we can do this through callback

// ==================26 april 2026  update===================================

// still have to practice on array

// ===================27 april 2026 update===================================

// filanally learnt where i need to create new variable for logic and use
// i solved some problems by myself if there was not then i had made symmitrical syntax and logic structure
// struggling less with logic
// created my own little exercise and solved but struggled with little logic  
// practiced some exercises from previous day without seeing it to improve my logic 


// ----------------------------------DOM-------------------------------------------------
// getElemnetById grabs html elements by ids
// to change the text on web page with the help javascript we use variableName.textcontent and add the new text
// with the help of style.color we can style the webpage through JS
// to add functionality in web page we use functions
// when we want to show something from input box on webpage we use .value next to input variable
// if we want to show numbers on webpage we use either Number() or parseInt() because we have to show number in form of int not string textcontext gives string
// again i don'n read questions with full focus so try to read and understand question and logic first
// to add functionality we use addeventlistener appenchiled when we want to add an element on webpage and removechild when we want to remove element from the webpage
// example--------

addBtn.addEventListener("click", () => {
  // add task
  // update counter
  // clear input
  // focus input
  // ALL in one place!!
})

// ============================28 april 2026 ======================================


// today i learnt some elemnets and functions
// classList.add,remove,toggle
// real life usage active button dark mode navbar highlight clicked tab
//  all the examples
// user typed "Buy milk"
let li = document.createElement("li")  
// creates <li></li> in memory - not on page yet!!

li.textContent = "Buy milk"            
// <li>Buy milk</li> - added text!!

taskList.appendChild(li)               
// NOW it appears on page at END!!

taskList.prepend(li)                   
// appears at TOP instead!!

// example 2
// navbar menu open/close
menuBtn.addEventListener("click", () => {
  navbar.classList.toggle("hidden")
  // open? → adds hidden → closes!!
  // closed? → removes hidden → opens!!
})

// dark mode button
darkBtn.addEventListener("click", () => {
  document.body.classList.toggle("dark")
  // toggle dark class on whole page!!
})

// active tab in navigation
tab1.addEventListener("click", () => {
  tab1.classList.add("active")     // highlight clicked tab
  tab2.classList.remove("active")  // unhighlight others!!
  tab3.classList.remove("active")
})

// example 3
// use when you want formatting inside!!
element.innerHTML = "<b>Hello</b> <i>Muskan</i>"
// shows: Hello Muskan (bold + italic!!)

// real world - showing a card!!
card.innerHTML = `
  <h2>${product.name}</h2>
  <p>${product.price}</p>
  <button>Add to Cart</button>

`
// solved and practiced some DOM activities on web page
// today i googled how to add type of input in JS



// ==========================29 april 2026====================================



// we use e in function it is an object and it's stands for event that contains all information about what just happend
input.addEventListener("keypress", (e) => {
  console.log(e)  // print whole event object!!
})
// if i am using keypress in event listener than it tells which key was pressed
// where mouse was
// what time it happend
// which element was clicked
// and much more
// and we use e.preventDefault() - to stop default browser behaviours!!
 
//-------- EVENT TYPES TABLE --------
// Event          When it fires            Real world use
// click          full mouse click         buttons, forms, links
// input          typing in input          live search, validation
// keypress       any key pressed          shortcuts, Enter to submit
// mouseover      mouse enters element     dropdowns, tooltips
// mouseout       mouse leaves element     close dropdowns
// mousedown      mouse button pressed     drag start, drawing
// mouseup        mouse button released    drag end, stop drawing
// mousemove      mouse moving             custom cursor, parallax
// scroll         page scrolling           sticky navbar, infinite scroll
// submit         form submitted           form validation
// change         value changed            color picker, select box
// load           page fully loaded        run code after page ready

// -------- SYNTAX --------
// element.addEventListener("eventType", (e) => {
//   e.key        which key pressed
//   e.clientX    mouse X position
//   e.clientY    mouse Y position
//   e.target     element that triggered event
// })
// click event is the combination of mousedown and mouseup means when we click the element we press finger down and then up on mouse that is a  mousedown and mouseup event
//  mouseleave and mouseout do the same thing

// i  practiced and solved DOM exercises which helped me to buld more logic and making more sense
// i did silly logic errors so i have to be more attentive in terms of logic
// when i got stucked i googled and then tried by myself mostly got successfull and when it failed after trying so many times then used ai to give hints
// today googled how to add disabled functionality on textarea and how to add href link to anchorTag in js
// created random color generator and form validation
// random hex color generator

// JavaScript has something called ASI — Automatic Semicolon Insertion!!
// so basically if we don not use semicolon at the end of code it automatically add semicolon where it thinks it should go!!

// ===========================30 april 2026=======================================

// today i learned setTimeout which runs code after delay
// syntax of setTimeout is---setTimeout(()=>{code}.milliseconds)
// 1000ms=1 second
// can have multiple setTimeouts---they run in parallel
// practiced promise and setTimeOut inside it
// promise has 3 states-------pending-waiting,resolved-success(then),rejected-error(catch)
// .then() only runs when promise is resolved means its successful
// .catch() only runs when promise is rejected means it failed through this we can catch errors
// .finally() always runs whether promise is resolved or rejected


// in modern development we use async await for promise it gives clean structure to the coding
// it also prevents callback hell 
// --------real world example--------------------
// we use async await and promise in real world we use where it takes time to give results for example when we want to fetch api and get data from it
// async await made code wait for slow things
// javascript is synchronus by default so promise async await made it behave like a asynchronus
// asynchronus means which task complete first it will give result not wait for other tasks to complete

// ---------------------traditional way---------------------

let promise2=new Promise((resolve,reject)=>{
        let random=Math.random();
        setTimeout(() => {
            if(random>0.1){
                resolve(random)
            }else{
                reject("failed")
            }
        }, 2000);
    })
    promise2.then((result)=>{     //through .then
        console.log(result)
    }).catch((e)=>{
        console.log(e)
    })

    // async await
// ----------modern way-------------------
let promise3=new Promise((resolve)=>{
        setTimeout(() => {
            resolve("hello")
        }, 3000);
    })
    async function sayHello(){
        let result=await promise3;
        console.log(result)
    }
    sayHello()

    // solved 4 exercise of promise and async await
    // for 2 exercises i had quite idea and in exercise 3 i did not used properly try and catch syntax
    // so i have to focus and practice on that
    // on exercise 4 again i was making it complex not reading questions well
    // today's achievement------i know why when and how to use promises and async await
    // today's problem------i get confused on promises and async await syntaxes cause they have many type of syntax to write
    // so have to pracitce bit more


    
    // ======================= 1 may 2026======================================
    
    
    // in fetch we don't need to add promise it automatically returns promise internally
    // means fetch is a built-in-promise no need to create one
    // i made the github profile finder by myself
    // googled how to add img through js on webpage through fetch api