[Nazmus-Sakib007]: Number comparator

[KaziNazmusSakib]

Project Name:

Number comparator

Description

📌 Summary

This pull request introduces a simple Number Comparator App built using HTML, TailwindCSS, and JavaScript.
The app compares two numbers entered by the user and displays whether the first number is larger, the second number is larger, or both numbers are equal.

🚀 Features Added

1. UI Implementation (HTML + TailwindCSS)

Two numeric input fields (number1, number2)
A Compare button to check which number is greater
A Reset button to clear inputs and results
A display section to show comparison results

2. JavaScript Functionality
   Fetch input values using DOM selectors
   Convert values to float using parseFloat()
   Compare two numbers using conditional statements
   Display output messages dynamically

Reset inputs and result on button click

🧩 Steps Implemented (Technical Breakdown)

1. Created the HTML structure
   Added a centered container
   Added two input fields for the numbers
   Added Compare and Reset buttons
   Allocated a results

   area

2. Linked TailwindCSS via CDN
   Used:

<script src="https://cdn.tailwindcss.com"></script>

3. Connected JavaScript file

<script src="number-comparator.js"></script>

4. Captured DOM Elements
   const numberInput1 = document.getElementById("number1");
   const numberInput2 = document.getElementById("number2");
   const result = document.getElementById("result");

5. Added Compare Logic
   Parse values
   Check:
   If number1 > number2
   If number1 < number2
   If both are equal
   Display the corresponding message

6. Added Reset Logic
   Reset inputs to 0
   Clear result text

Fig. 01: UI of the Number comparator

QA Steps

1. Open the HTML file in any browser.
2. Enter any two numbers.
3. Click Compare:
4. You will see the correct message appear.
5. Click Reset to clear the input fields and result area.