📘 Daily Learnings

We learned about the three keywords used to declare variables in JavaScript: var, let, and const.

• var – function-scoped, hoisted. ❌ Not recommended due to unpredictable behavior.
• let – block-scoped, can be reassigned. ✅ Use this for most variables.
• const – block-scoped, cannot be reassigned. ✅ Use this by default if the value won’t change.

We also explored JavaScript data types:

• String – e.g., "hello"
• Number – both integers and floats, e.g., 42, 3.14
• Boolean – true or false
• undefined – declared but not assigned
• null – intentional absence of value
• Object – key-value pairs
• Array – ordered list of values

// Variable declarations
let name = "Alice";
const age = 25;
var oldWay = "Avoid using var";

// Data types
let str = "Hello";
let num = 42;
let float = 3.14;
let isActive = true;
let unknown;
let empty = null;
let person = { name: "Bob", age: 30 };
let items = [1, 2, 3, "four"];

          

We practiced using JavaScript for basic arithmetic operations like addition, subtraction, multiplication, and division.

We also learned how to use the prompt() method to get input from the user, and how to convert string input into numbers using parseInt() or parseFloat().

• + for addition
• - for subtraction
• * for multiplication
• / for division

// Get input from user
const num1 = prompt("Enter first number:");
const num2 = prompt("Enter second number:");

// Convert to numbers
const a = parseInt(num1);
const b = parseInt(num2);

// Arithmetic operations
console.log("Addition:", a + b);
console.log("Subtraction:", a - b);
console.log("Multiplication:", a * b);
console.log("Division:", a / b);

    

We explored what functions are and how they are created using the function keyword. We covered how to define and use parameters and manipulate them within functions.

Additionally, we touched on the concept of variable scope and learned how to perform operations using user input through functions.

We also introduced if-else conditions and comparison operators to make decisions in our code.

let input1, input2;

input1 = prompt("Enter value 1:");
input2 = prompt("Enter value 2:");

function addTwo(num1, num2) {
  num1 = parseInt(num1);
  num2 = parseInt(num2);

  return num1 + num2;
}

function subTwo(num1, num2) {
  num1 = parseInt(num1);
  num2 = parseInt(num2);

  return num1 - num2;
}

function multTwo(num1, num2) {
  num1 = parseInt(num1);
  num2 = parseInt(num2);

  return num1 * num2;
}

function divTwo(num1, num2) {
  num1 = parseInt(num1);
  num2 = parseInt(num2);

  return num1 / num2;
}

let result;

result = addTwo(input1, input2);
console.log(result);

result = subTwo(input1, input2);
console.log(result);

result = multTwo(input1, input2);
console.log(result);

result = divTwo(input1, input2);
console.log(result);

alert("You're an adult.");

    

Today we explored different ways to concatenate strings in JavaScript, using both the + operator and modern template literals with backticks (`).

We also revisited the assignment operator =, and learned about comparison operators like ==, !=, >, <, and their type-safe counterparts === and !==.

Understanding the difference between value comparison and type + value comparison is crucial when writing bug-free conditional logic.

let firstName = "John";
let lastName = "Doe";

// Concatenation using +
let fullName = firstName + " " + lastName;
console.log(fullName);

// Concatenation using template literals
let greeting = `Hello, ${firstName} ${lastName}!`;
console.log(greeting);

// Comparison operators
console.log(5 == "5");   // true (value only)
console.log(5 === "5");  // false (value + type)
console.log(5 != "5");   // false
console.log(5 !== "5");  // true

// Assignment operator
let age = 25; // assigns 25 to age

    

Today we learned about for loops — how they work, why they are useful, and how we can leverage them to iterate through arrays and print their elements.

We explored the loop structure for(initialization; condition; increment) and used it to display array values in sequence.

// Array of car brands
let car = ["BMW", "Audi", "Mercedes"];

// Loop through the array and print each element
for (let i = 0; i < car.length; i++) {
    console.log(car[i]);
}

    

On this day, we explored the while loop — how it runs as long as a condition is true. We practiced by creating a simple number guessing game where the loop keeps asking for a guess until the correct number is entered.

let number = 10;
let guess = parseInt(prompt("Enter a number"));

while (guess != number) {
    guess = prompt("WRONG! Enter another number");
}

console.log("Yay!!!");

    

Today we learned about the Document Object Model (DOM) — what it is and why we use it in JavaScript. The DOM represents the structure of a webpage as objects, allowing us to manipulate HTML and CSS dynamically.

We explored how to select elements using document.getElementById() and update their content or styles.

// Select an element by its ID and change its text
document.getElementById("title").innerText = "Hello DOM!";

    

We extended our DOM knowledge by learning about document.getElementsByClassName(), which allows us to select multiple elements that share the same class name.

We practiced selecting a single element from the collection using array indexing, then changing its style. We also briefly explored document.querySelector() for selecting elements using CSS selectors.

// Change the color of the first element with the class "item"
document.getElementsByClassName("item")[0].style.color = "red";

// Using querySelector to select the first matching element
document.querySelector("div#container div.row").style.fontWeight = "bold";

    

Is din humne event listeners aur forEach loops cover kiye. Event listeners se hum kisi element par user actions (jaise click) ka response set karte hain. forEach loops arrays ke har element par ek callback run karne ke liye use hotay hain — aur in dono ko combine karke interactive UI banaya ja sakta hai.

• Event Listener syntax: element.addEventListener("event", handler)
• forEach syntax: array.forEach(callback)
• Advanced: buttons ko loop karke har button par click listener attach karna aur container ka background change karna.

// Step 1: select button
const btn = document.querySelector("#container button#changeColor");

// step 2: add event listener
btn.addEventListener("click", handleClick);

// step 3: add functionality to button.
function handleClick(){
    const paragraph = document.querySelector("#container p");
    paragraph.style.color = "blue";
}

const fruits = ["Bananas", "Strawberries", "Oranges", "Peaches", "Watermelon"];

fruits.forEach(printName);

function printName(name, index){
    console.log(name);
}

// 1: Select elements
const buttons = document.querySelectorAll(".btn");
const container = document.querySelector("#container");

// 2: Event Handler
function handleClick(index) {
    // Get innerText value for current button
    const color = buttons[index].innerText;
    // Set background color of div container
    container.style.backgroundColor = color;
}

// 3: ForEach callback
function changeColor(item, index) {
  item.addEventListener("click", () => handleClick(index));
}

// 4: run a foreach loop for every button in buttons
buttons.forEach(changeColor);

<div id="container">
  <div style="height: 150px;">
    <p>This is a demo paragraph. Click a button to change container color.</p>
  </div>
  <button class="btn">Blue</button>
  <button class="btn">Green</button>
  <button class="btn">Red</button>
  <button class="btn">Pink</button>
</div>

<!-- include your script that contains the advanced forEach example -->
<script src="forEachAdvanced.js"></script>