Web Calculators Based on HTML, JS and CSS

最新推荐文章于 2024-09-30 15:42:36 发布

xxxy2003

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量42

点赞数

文章标签：前端 html javascript css

本文链接：https://blog.csdn.net/xxxy2003/article/details/133716650

版权

catalogue

1 Introduction
2 Information Table
3 PSP Table
4 Description of problem-solving ideas
5 Design and implementation proces
6 Code description
7 Results Display
8 Summary

1 Introduction

EE308FZ Software Engineering Practice

This blog records the work and process of creating a calculator with a visual interface in the first assignment of EE308FZ software engineering practice.

In this project, our goal is to create a web version calculator that can perform basic addition, subtraction, multiplication, division, and clearing, as well as to complete advanced functions such as exponential and trigonometric functions.

Link to the finished project code:Link here

2 Information Table

The Link Your Class	EE308FZ Class
The Link of Requirement of This Assignment	Software Engineering Practice First Assignment
The Aim of This Assignment	Make an interface visual calculator
MU STU ID and FZU STU ID	21126488_832101211

3 PSP Table

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning
• Estimate	45	30
Development
• Analysis	30	30
• Design Spec	15	20
• Design Review	15	20
• Coding Standard	15	15
• Design	60	90
• Coding	180	240
• Code Review	60	60
• Test	60	70
Reporting
• Test Repor	20	15
• Size Measurement	10	15
• Postmortem & Process Improvement Plan	30	30
Sum	535	635

4 Description of problem-solving ideas

In this project, the learning focus of calculator development should be on the development of visual interfaces, with the basic goal of completing functions including input numbers and addition, subtraction, multiplication, division, subtraction, as well as subsequent implementation of advanced functions.

HTML, CSS, and JS are the three fundamental technologies for building web pages and web applications. So for this project, I chose to build my Web visualization calculator by learning to use HTML, CSS, and JS.

5 Design and implementation proces

The flowchart is shown in the figure:
在这里插入图片描述

6 Code description

*HTML code

Use HTML for web page construction and content creation for calculators, including number buttons, operator buttons, display area boxes, etc.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator in HTML CSS & JavaScript</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <input type="text" class="display" />

      <div class="buttons">
        <button class="operator" data-value="AC">AC</button>
        <button class="operator" data-value="DEL">DEL</button>
        <button class="operator" data-value="%">%</button>
        <button class="operator" data-value="/">/</button>

        <button data-value="7">7</button>
        <button data-value="8">8</button>
        <button data-value="9">9</button>
        <button class="operator" data-value="*">*</button>

        <button data-value="4">4</button>
        <button data-value="5">5</button>
        <button data-value="6">6</button>
        <button class="operator" data-value="-">-</button>

        <button data-value="1">1</button>
        <button data-value="2">2</button>
        <button data-value="3">3</button>
        <button class="operator" data-value="+">+</button>

        <button data-value="0">0</button>
        <button data-value="00">00</button>
        <button data-value=".">.</button>
        <button class="operator" data-value="=">=</button>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

*CSS code

Use CSS to define the style of the page, such as content color, width, height, font size, padding, margins, etc.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
}
.container {
  position: relative;
  max-width: 300px;
  width: 100%;
  border-radius: 12px;
  padding: 10px 20px 20px;
  background: #ffffff;
  box-shadow: 0 5px 10px rgba(4, 4, 4, 0.05);
}
.display {
  height: 80px;
  width: 100%;
  outline: none;
  border: none;
  text-align: right;
  margin-bottom: 10px; 
  font-size: 25px;
  color: #000e1a;
  pointer-events: none;
}
.buttons {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}
.buttons button {
  padding: 10px;
  border-radius: 6px;
  border: none;
  font-size: 20px;
  cursor: pointer;
  background-color: #cbe6f1;
}
.buttons button:active {
  transform: scale(0.99);
}
.operator {
  color: #2d98f6;
}

*JS code

Use JS to achieve interactive functions, such as handling number button clicks, operator button clicks, and so on, to complete the logical operation function of the computer.

const display = document.querySelector(".display");
const buttons = document.querySelectorAll("button");
const specialChars = ["%", "*", "/", "-", "+", "="];
let output = "";

//Define function to calculate based on button clicked.
const calculate = (btnValue) => {
  display.focus();
  if (btnValue === "=" && output !== "") {
    output = eval(output.replace("%", "/100"));
  } else if (btnValue === "AC") {
    output = "";
  } else if (btnValue === "DEL") {
    output = output.toString().slice(0, -1);
  } else {
    if (output === "" && specialChars.includes(btnValue)) return;
    output += btnValue;
  }

  display.value = output;
};

buttons.forEach((button) => {
  button.addEventListener("click", (e) => calculate(e.target.dataset.value));
});

7 Results Display

在这里插入图片描述

8 Summary

In this project, I first started from the requirement analysis, determined the way to complete and selected tools, learned the basic knowledge, and constantly solved problems to improve my code. For the first time, I learned the basic techniques of HTML, CSS and JS to build web pages and web applications, learned front-end knowledge, and applied it to visual development.

The whole task not only made me familiar with the knowledge of project design and development, but also improved my ability to solve problems. At the same time, writing a blog for the first time and participating in the programming community also exercised my ability to search, learn and summarize.

In the future, I will continue to optimize and upgrade the functionality of this basic calculator.