Build a Simple Calculator Website-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Build a Simple Calculator Website

王林

Aug 23, 2024 pm 02:33 PM

Build a Simple Calculator Website

Introduction

Hello, fellow developers! I'm thrilled to share my latest project: a Simple Calculator. This project is a perfect way to explore the basics of JavaScript, especially in handling mathematical operations, updating the DOM dynamically, and creating an interactive user interface. Whether you're new to web development or looking to sharpen your JavaScript skills, this Simple Calculator project is a great starting point.

Project Overview

The Simple Calculator is a web-based application that allows users to perform basic arithmetic operations like addition, subtraction, multiplication, and division. This project highlights how to create a responsive and user-friendly interface while efficiently handling user inputs to perform calculations.

Features

Intuitive Interface: Clean and straightforward design for easy interaction.
Basic Arithmetic Operations: Supports addition, subtraction, multiplication, and division.
Clear and Delete Functionality: Users can clear the input or delete the last entry with a single click.
Responsive Design: Ensures consistent usability across different devices and screen sizes.

Technologies Used

HTML: Structures the web page and input elements.
CSS: Styles the calculator interface, ensuring a clean and responsive design.
JavaScript: Manages the calculation logic and user interactions.

Project Structure

Here's a quick look at the project structure:

Simple-Calculator/
├── index.html
├── styles.css
└── script.js

Copy after login

index.html: Contains the HTML structure for the Simple Calculator.
styles.css: Includes CSS styles to enhance the appearance and responsiveness of the calculator.
script.js: Manages the calculation logic and user interactions.

Installation

To get started with the project, follow these steps:

Clone the repository:

git clone https://github.com/abhishekgurjar-in/Simple-Calculator.git

Copy after login

Open the project directory:
```
cd Simple-Calculator
```
Copy after login
Run the project:
- Open the index.html file in a web browser to start using the Simple Calculator.

Usage

Open the website in a web browser.
Enter numbers and perform arithmetic operations using the calculator buttons.
Use the "AC" button to clear all input, or "DEL" button to delete the last entry.
Click the "=" button to see the result of the calculation.

Code Explanation

HTML

The index.html file provides the basic structure of the Simple Calculator, including the display area and buttons for arithmetic operations. Here’s a snippet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Calculator</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="header">
      <h1>Simple Calculator</h1>
    </div>
    <div class="container">
      <div class="calculator">
        <input type="text" id="inputBox" placeholder="0" />
        <div>
          <button class="button operator">AC</button>
          <button class="button operator">DEL</button>
          <button class="button operator">%</button>
          <button class="button operator">/</button>
        </div>
        <div>
          <button class="button">7</button>
          <button class="button">8</button>
          <button class="button">9</button>
          <button class="button operator">*</button>
        </div>
        <div>
          <button class="button">4</button>
          <button class="button">5</button>
          <button class="button">6</button>
          <button class="button operator">-</button>
        </div>
        <div>
          <button class="button">1</button>
          <button class="button">2</button>
          <button class="button">3</button>
          <button class="button operator">+</button>
        </div>
        <div>
          <button class="button">00</button>
          <button class="button">0</button>
          <button class="button">.</button>
          <button class="button equalBtn">=</button>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

Copy after login

CSS

The styles.css file styles the Simple Calculator, providing a modern and user-friendly layout. Here are some key styles:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(45deg, #0a0a0a, #3a4452);
}

.header {
    color: white;
    margin: 30px;
    text-align: center;
}

.calculator {
    border: 1px solid #717377;
    padding: 20px;
    border-radius: 16px;
    background: transparent;
    box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
}

input {
    width: 320px;
    border: none;
    padding: 24px;
    margin: 10px;
    background: transparent;
    box-shadow: 0px 3px 15px rgba(84, 84, 84, 0.1);
    font-size: 40px;
    text-align: right;
    cursor: pointer;
    color: #ffffff;
}

input::placeholder {
    color: #ffffff;
}

button {
    border: none;
    width: 60px;
    height: 60px;
    margin: 10px;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font-size: 20px;
    box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.equalBtn {
    background-color: #fb7c14;
}

.operator {
    color: #6dee0a;
}

.footer {
    color: white;
    margin: 50px;
    text-align: center;
}

Copy after login

JavaScript

The script.js file manages the logic for performing calculations and handling user interactions. Here’s a snippet:

let input = document.getElementById("inputBox");
let buttons = document.querySelectorAll("button");

let string = "";
let arr = Array.from(buttons);

arr.forEach((button) => {
  button.addEventListener("click", (e) => {
    if (e.target.innerHTML === "=") {
      string = eval(string);
      input.value = string;
    } else if (e.target.innerHTML === "AC") {
      string = "";
      input.value = string;
    } else if (e.target.innerHTML === "DEL") {
      string = string.substring(0, string.length - 1);
      input.value = string;
    } else {
      string += e.target.innerHTML;
      input.value = string;
    }
  });
});

Copy after login

Live Demo

You can check out the live demo of the Simple Calculator here.

Conclusion

Creating this Simple Calculator was a rewarding experience that deepened my understanding of JavaScript and how to build interactive web applications. I hope this project encourages you to experiment with your own JavaScript projects. Happy coding!

Credits

This project was developed as part of my journey to enhance my web development skills, focusing on JavaScript and user interaction.

Author

Abhishek Gurjar
- GitHub Profile

The above is the detailed content of Build a Simple Calculator Website. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055612 fails to install in Windows 10?

4 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Nordhold: Fusion System, Explained

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1672

CakePHP Tutorial

1428

Laravel Tutorial

1332

PHP Tutorial

1277

C# Tutorial

1257

Related knowledge

A Comparison of Static Form Providers Apr 16, 2025 am 11:20 AM

Let’s attempt to coin a term here: "Static Form Provider." You bring your HTML

A Proof of Concept for Making Sass Faster Apr 16, 2025 am 10:38 AM

At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads

Weekly Platform News: HTML Loading Attribute, the Main ARIA Specifications, and Moving from iFrame to Shadow DOM Apr 17, 2025 am 10:55 AM

In this week's roundup of platform news, Chrome introduces a new attribute for loading, accessibility specifications for web developers, and the BBC moves

Some Hands-On with the HTML Dialog Element Apr 16, 2025 am 11:33 AM

This is me looking at the HTML element for the first time. I've been aware of it for a while, but haven't taken it for a spin yet. It has some pretty cool and

Paperform Apr 16, 2025 am 11:24 AM

Buy or build is a classic debate in technology. Building things yourself might feel less expensive because there is no line item on your credit card bill, but

Weekly Platform News: Text Spacing Bookmarklet, Top-Level Await, New AMP Loading Indicator Apr 17, 2025 am 11:26 AM

In this week's roundup, a handy bookmarklet for inspecting typography, using await to tinker with how JavaScript modules import one another, plus Facebook's

Where should 'Subscribe to Podcast' link to? Apr 16, 2025 pm 12:04 PM

For a while, iTunes was the big dog in podcasting, so if you linked "Subscribe to Podcast" to like:

Options for Hosting Your Own Non-JavaScript-Based Analytics Apr 15, 2025 am 11:09 AM

There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used

See all articles