https://github.com/dalascript/calculator

ZTM JS Web Projects Course | Calculator | Project 17/20
https://github.com/dalascript/calculator

calculator css html javascript zerotomastery

Last synced: 5 months ago
JSON representation

ZTM JS Web Projects Course | Calculator | Project 17/20

• Host: GitHub
• URL: https://github.com/dalascript/calculator
• Owner: DalaScript
• Created: 2025-08-28T07:12:30.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2025-08-31T10:39:19.000Z (6 months ago)
• Last Synced: 2025-09-07T11:19:20.198Z (6 months ago)
• Topics: calculator, css, html, javascript, zerotomastery
• Language: JavaScript
• Homepage: https://dalascript.github.io/calculator/
• Size: 127 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Calculator | ZTM JS Web Projects Course

**Project 17/20**

A simple yet powerful Calculator App built with HTML, CSS, and JavaScript. It supports basic arithmetic operations, handles decimals, and provides a clean responsive UI.

---

## 📚 Table of Contents

- [🔎 Overview](#-overview)

  - [📸 Screenshot](#-screenshot)

  - [🔗 Links](#-links)

  - [📌 Features](#-features)

  - [🛠️ Built with](#️-built-with)

- [🧠 My process](#-my-process)

  - [🗃️ Useful resources](#️-useful-resources)

  - [🔙 Previous Project](#-previous-project)

  - [🔜 Next Project](#-next-project)

- [👤 Author](#-author)

  - [🌐 Connect with Me](#-connect-with-me)

  - [💻 Coding Profiles](#-coding-profiles)

---

## 🔎 Overview

### 📸 Screenshot

![Live Preview Screenshot](./assets/screenshot.jpg)

### 🔗 Links

- [🔴 Live Demo](https://dalascript.github.io/calculator/)

- [🗂️ GitHub Repository](https://github.com/DalaScript/calculator)

### 📌 Features

- ✅ Perform basic operations

- ✅ Clear button to reset the calculator instantly

- ✅ Decimal support for precise calculations

- ✅ Prevents multiple decimals in a single number

- ✅ Continuous calculations (chain operations without resetting)

- ✅ Responsive design

### 🛠️ Built with

- HTML5

- CSS3

- JavaScript

---

## 🧠 My Process

### 🗃️ Useful resources

- [uiGradients – Background Gradients](https://uigradients.com/#MoonlitAsteroid)

- [W3Schools – Custom Scrollbar](https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp)

- [MDN – CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)

- [MDN – grid-column](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column)

- [MDN – grid-row](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row)

- [MDN – Number Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)

### 🔙 Previous Project

- Drag And Drop | *Project 16/20* → [View Repository](https://github.com/DalaScript/drag-and-drop)

### 🔜 Next Project

- Splash Page | *Project 18/20* → [View Repository](https://github.com/DalaScript/splash-page)

---

## 👤 Author

### 🌐 Connect with Me

- [Instagram](https://www.instagram.com/DalaScript)

- [YouTube](https://www.youtube.com/@DalaScript)

### 💻 Coding Profiles

- [freeCodeCamp](https://www.freecodecamp.org/DalaScript)

- [FrontendMentor](https://www.frontendmentor.io/profile/DalaScript)

- [GitHub](https://github.com/DalaScript)

*🙌 Thanks for checking out my project! More coming soon. Stay tuned 🚀*