Skip to content

3rd task of codsoft virtual internship - a calculator. This is a beautifully styled calculator that can perform the basic calculations.

Notifications You must be signed in to change notification settings

tsdebug/codsoft_task-3

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

5 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿงฎ Interactive Web Calculator

Status HTML5 CSS3 JavaScript

๐Ÿ’ก The Logic Challenge

This project serves as the final milestone (Task 3) of my CodSoft Virtual Internship.

After mastering structure and design in my previous tasks, this project was dedicated to Algorithmic Logic. The goal was to build a fully functional calculator that doesn't just look good, but thinks correctlyโ€”handling user inputs, processing arithmetic operations, and returning accurate results in real-time.

๐Ÿ”— Live Demo

Click here to try the Calculator (If the link doesn't work here, check the "About" section on the right side of this repository!)

โšก Features

  • Arithmetic Operations: Performs addition, subtraction, multiplication, and division flawlessly.
  • Responsive UI: A clean, grid-based layout that keeps buttons accessible and easy to read.
  • Interactive Feedback: Buttons respond visually to clicks, providing a tactile feel to the web application.
  • Error Handling: Handles basic calculation edge cases smoothly.

๐Ÿง  Technical Learnings

Transitioning from static pages to a dynamic application taught me the fundamentals of programming logic:

  1. DOM Manipulation: I learned how to "listen" to button clicks in HTML and trigger specific functions in JavaScript.
  2. String Parsing & Evaluation: Understanding how to take a string of text (e.g., "5+5") and process it as a mathematical equation.
  3. UI/UX Grid Systems: I used CSS Grid/Flexbox to ensure the keys were perfectly aligned, mimicking the familiarity of a physical calculator.
  4. State Management: Tracking the current input versus the stored result.

๐Ÿ’ป Tech Stack

  • HTML5: Structure of the display screen and keypads.
  • CSS3: Styling the "look and feel," focusing on color contrast and button layout.
  • JavaScript: The brain behind the calculator (handling the math logic).

๐Ÿƒ๐Ÿปโ€โ™€๏ธ How to Run Locally

  1. Clone the repository:
    git clone https://github.com/tsdebug/codsoft_task-3.git
  2. Navigate to the project folder.
  3. Open index.html in your browser.

Built to calculate, coded to learn.

About

3rd task of codsoft virtual internship - a calculator. This is a beautifully styled calculator that can perform the basic calculations.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published