Day 8 - Session 2:HTML, CSS, and JavaScript - a Units Changing App!!

Hello Coders!!

Today’s session was very productive and interesting because I built a small real-world utility project using HTML, CSS, and JavaScript — a Unit Changing App!

Project: Unit Changing App

This app helps convert values between different units like:

1.Kilometers to Miles
2.Miles to Kilometers
3.Kilograms to Pounds
4.Pounds to Kilograms
5.Celsius to Fahrenheit
6.Fahrenheit to Celsius

It’s a simple project but very useful for learning core JavaScript concepts.

Topics Covered Today:
1.parseFloat()

We used parseFloat() to convert input string values into numbers. It allows us to handle decimal numbers correctly during calculations.

Example:

js

let number = parseFloat(my_input);

2.if-else Statement

To decide which conversion formula to use, we wrote a chain of if...else if... statements. This helped perform the correct calculation based on the user's dropdown selection.

3.option Tag in HTML

The dropdown was built using the <select> and <option> elements. Each option has a value that we read in JavaScript to determine the conversion type.

Example:
html

<select id="unit-to-convert">
  <option value="km to mile">km to mile</option>
  <option value="mile to km">mile to km</option>
</select>

4.querySelector in JavaScript

One of the important topics today was using the querySelector() method. It helps us select any HTML element by ID, class, or tag — similar to CSS selectors.

Example:
js

let input = document.querySelector("#input-box");
let resultBox = document.querySelector(".result");

5.addEventListener()

We added an event listener to the button so that when the user clicks Convert, the function runs and shows the result.

Example:

document.getElementById("btn").addEventListener('click', convert)

6.toFixed(2)

What it does:

• toFixed(2) converts a number to a string with 2 digits after the decimal point.
• It's useful for formatting decimal numbers, especially for things like currency, measurements, or calculations.

Example:

let result = 7.4567;
result.toFixed(2); // "7.46"

Even if the number is whole:

let result = 5;
result.toFixed(2); // "5.00"

So toFixed(2) ensures the number always has two decimal places.

I Learned:

1.How to take user input using input fields
2.How to use a dropdown with option values
3.How to handle conversions using basic math formulas
4.The importance of validating input using isNaN()
5.How to use querySelector() to access HTML elements
6.Displaying output dynamically using JavaScript.

Final Code:
js

function convert() {
    let number = parseFloat(document.querySelector("#input-box").value);
    let selectedOption = document.querySelector("#unit-to-convert").value;
    let result = document.querySelector(".result");

    if (isNaN(number)) {
        result.textContent = "Please enter a valid number.";
        return;
    }

    if (selectedOption === "km to mile") {
        number *= 0.621371;
    } else if (selectedOption === "mile to km") {
        number /= 0.621371;
    } else if (selectedOption === "kg to pounds") {
        number *= 2.20462;
    } else if (selectedOption === "pounds to kg") {
        number /= 2.20462;
    } else if (selectedOption === "celsius to fahrenheit") {
        number = (number * 9 / 5) + 32;
    } else if (selectedOption === "fahrenheit to celsius") {
        number = (number - 32) * 5 / 9;
    }

    result.textContent = ">>Result: " + number.toFixed(2);
}

Today's Knows:

Today’s session helped me combine HTML input forms, CSS styling, and JavaScript logic into one interactive mini-project. I understood how to use querySelector to select and work with elements easily, and how important conditional logic is in JavaScript.

See you in the next session with more hands-on projects and learning!!

Keep Learning!! Happy Coding!!!...