https://github.com/tsdebug/codsoft_task-3

3rd task of codsoft virtual internship - a calculator. This is a beautifully styled calculator that can perform the basic calculations.
https://github.com/tsdebug/codsoft_task-3

calculator codsoft codsoft-virtual-internship css3 html-css-javascript html5 javascript

Last synced: 27 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/tsdebug/codsoft_task-3
• Owner: tsdebug
• Created: 2024-09-13T19:10:35.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-12-30T18:39:53.000Z (about 2 months ago)
• Last Synced: 2026-01-03T15:46:29.879Z (about 2 months ago)
• Topics: calculator, codsoft, codsoft-virtual-internship, css3, html-css-javascript, html5, javascript
• Language: HTML
• Homepage: https://tsdebug.github.io/codsoft_task-3/
• Size: 8.79 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🧮 Interactive Web Calculator

![Status](https://img.shields.io/badge/Status-Completed-success)

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=flat&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=flat&logo=css3&logoColor=white)

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=flat&logo=javascript&logoColor=%23F7DF1E)

## 💡 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](https://tsdebug.github.io/codsoft_task-3/)**

*(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:

    ```bash

    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.*