A web calculator built by HTML, CSS and JS

已于 2023-10-06 18:40:05 修改
阅读量146 收藏
点赞数 1
文章标签： 前端 html css
于 2023-10-03 22:37:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67137699/article/details/133501312
版权

文章目录

I. Introduction

This blog I will illustrate some details about how to construct a web calculator achieved by HTML, CSS and JS.HTML language can help me achieving the appearance of this calculator and CSS can decorate this calculator and add some colors for it, What’s more, JavaScript can give some functions to the calculator.

This type of calculator has some basic functions such as addition, subtraction, multiplication, division, clearing and this calculator can support the trigonometric operation, power operation and logarithm operation.

II. Student’s information

The Link Your Classhttps://bbs.csdn.net/forums/ssynkqtd-04
The Link of Requirement of This Assignmenthttps://bbs.csdn.net/topics/617332156
The Aim of This AssignmentCreate a calculator with a visual interface.
MU STU ID and FZU STU ID21125376_832102230

III. PSP

Personal Software Process StagesEstimated Time（minutes）Actual Time（minutes）
Planning
• Estimate3035
Development
• Analysis4050
• Design Spec6090
• Design Review6080
• Coding Standard90100
• Design120125
• Coding120150
• Code Review6070
• Test2035
Reporting
• Test Repor1315
• Size Measurement55
• Postmortem & Process Improvement Plan2440
Sum642795

IV. Some problem-solving ideas before creating the calculator

As we all know, there are lots of software can help us making the visual infereface such as Android studio, Unity and so on. But basing on my limit computer programming skill and some other factors, I choose to use the HTML, CSS and JS to create a simple calculator to finish this task on the Vscode which is a popular software to investigate front end, followed by some reasons:

  • Vscode will use less memory to help me creating a web page and the complexitiy of HTML, CSS and JS is simple for me.
  • Vscode have various types of plug-in to debug our code (such as Live Server, it can modify the result automatically according to the newest code.) These additional functions can reduce the difficulty of finishing the task.

After that, because I haven’t ever gotten in touch with how to create a web calculator, so firstly I searched some useful related information from some special websites such as Youtube, bilibili, CSDN and so on. Besides, I learnt how to design my own calculator’s apparance, I learnt how to add the button to my web, how to achieve the additional function and so on.

V. Design and implementation process

1. Page Layout

First and foremost, I focused on creating the user interface (UI) for the calculator. The goal was to design an intuitive and visually appealing layout, allowing users to input expressions and view results easily. I chose to use HTML and CSS to construct the page layout, ensuring responsiveness and user-friendliness. Here’s a key part of the page layout:

<div id="calculator">
        <input type="text" id="display">
        <div class="row">
            <button value="7" onclick="appendToDisplay('7')">7</button>
            <button value="8" onclick="appendToDisplay('8')">8</button>
            <button value="9" onclick="appendToDisplay('9')">9</button>
            <button value="/" onclick="appendToDisplay('/')">/</button>
        </div>
        <div class="row">
            <button value="4" onclick="appendToDisplay('4')">4</button>
            <button value="5" onclick="appendToDisplay('5')">5</button>
            <button value="6" onclick="appendToDisplay('6')">6</button>
            <button value="-" onclick="appendToDisplay('-')">-</button>
        </div>
        <div class="row">
            <button value="1" onclick="appendToDisplay('1')">1</button>
            <button value="2" onclick="appendToDisplay('2')">2</button>
            <button value="3" onclick="appendToDisplay('3')">3</button>
            <button value="+" onclick="appendToDisplay('+')">+</button>
        </div>
        <div class="row">
            <button value="0" onclick="appendToDisplay('0')">0</button>
            <button value="." onclick="appendToDisplay('.')">.</button>
            <button value="=" onclick="getResult()">=</button>
            <button value="C" onclick="clearAll()">C</button>
        </div>
        <div class="row">
            <button value="sin" onclick="Sin()">sin()</button>
            <button value="cos" onclick="Cos()">cos()</button>
            <button value="tan" onclick="Tan()">tan()</button>
            <button value="√" onclick="Sqrt()">√</button>
        </div>
        <div class="row">
            <button value="*" onclick="appendToDisplay('*')">*</button>
            <button value="^" onclick="appendToDisplay('**')">^</button>
            <button value="log" onclick="Log()">log()</button>
            <button value="←" onclick="moveCursor()">&#8592;</button> 
        </div>
    </div>

This is the code for CSS:

<style>
        /* CSS styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            /* Horizontally center align */
            align-items: center;
            /* Vertically center align */
            height: 100vh;
            /* Make the entire page fill the viewport height */
            margin: 0;
        }

        #calculator {
            width: 300px;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        #display {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 2px solid #ccc;
            /* Bold border */
            border-radius: 5px;
            font-size: 18px;
            max-width: 100%;
            /* Max width */
            text-align: right;
            /* Right-align text */
            box-sizing: border-box;
            /* Prevent border from adding to width */
        }

        .row {
            display: flex;
        }

        .row button {
            flex: 1;
            padding: 10px;
            margin: 5px;
            border: none;
            border-radius: 5px;
            background-color: #337ab7;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
        }

        .row button:hover {
            background-color: #23527c;
        }
    </style>

2. Button Functionality

To make the calculator interactive, I added onclick event handlers to each button. These handlers enable users to input numbers and operators by clicking buttons, displaying them on the calculator’s display screen. The aim was to ensure reliable and user-friendly button functionality.

function appendToDisplay(value) {
            // Append the user's input value to the display
            const display = document.getElementById('display');
            const startPos = display.selectionStart;
            const endPos = display.selectionEnd;
            const currentValue = display.value;
            const newValue = currentValue.substring(0, startPos) + value + currentValue.substring(endPos);
            display.value = newValue;
            display.setSelectionRange(startPos + value.length, startPos + value.length);
            display.focus();
        }

3. Calculation Logic

The heart of the project lies in implementing the calculation logic. I utilized JavaScript to handle user-input mathematical expressions and compute results. This encompassed basic arithmetic operations such as addition, subtraction, multiplication, and division, along with advanced mathematical operations like trigonometric functions (e.g. sin, cos, tan), square roots, logarithms, and more. My focus was on maintaining code readability and performance to ensure accurate calculations.When the user clicks the equals (=) button, I retrieve the expression string from the display screen and use JavaScript’s eval function to compute the result. If an error occurs during evaluation, I display an error message on the screen.

function getResult() {
            try {
                // Calculate the user's input expression and display the result
                const expression = document.getElementById('display').value;
                const result = eval(expression);
                document.getElementById('display').value = result;
            } catch (error) {
                // Display an error message if an error occurs during calculation
                document.getElementById('display').value = 'Error';
            }
        }

function Sin() {
            // Calculate sine value
            const angle = parseFloat(document.getElementById('display').value);
            const radians = (angle * Math.PI) / 180;
            const sinValue = Math.sin(radians);
            document.getElementById('display').value = sinValue.toFixed(8); // Round to 8 decimal places
        }

        function Cos() {
            // Calculate cosine value
            const angle = parseFloat(document.getElementById('display').value);
            const radians = (angle * Math.PI) / 180;
            const cosValue = Math.cos(radians);
            document.getElementById('display').value = cosValue.toFixed(8); // Round to 8 decimal places
        }

        function Tan() {
            // Calculate tangent value
            const angle = parseFloat(document.getElementById('display').value);
            const radians = (angle * Math.PI) / 180;
            const tanValue = Math.tan(radians);
            document.getElementById('display').value = tanValue.toFixed(8); // Round to 8 decimal places
        }

        function Sqrt() {
            // Calculate square root
            const value = parseFloat(document.getElementById('display').value);
            const sqrtValue = Math.sqrt(value);
            document.getElementById('display').value = sqrtValue.toFixed(8); // Round to 8 decimal places
        }

        function Log() {
            // Calculate base 10 logarithm
            const value = parseFloat(document.getElementById('display').value);
            const logValue = Math.log10(value);
            document.getElementById('display').value = logValue.toFixed(8); // Round to 8 decimal places
        }

        function moveCursor() {
            // Move the cursor one position to the left
            const display = document.getElementById('display');
            const currentPosition = display.selectionStart;
            if (currentPosition > 0) {
                display.setSelectionRange(currentPosition - 1, currentPosition - 1);
                display.focus();
            }
        }

4. Cursor Control

While cursor control is an additional feature, it greatly enhances the user input experience. I added a dedicated “←” button to allow users to move the cursor within the input box. This feature empowers users to easily edit their input.

function moveCursor() {
            // Move the cursor one position to the left
            const display = document.getElementById('display');
            const currentPosition = display.selectionStart;
            if (currentPosition > 0) {
                display.setSelectionRange(currentPosition - 1, currentPosition - 1);
                display.focus();
            }
        }

5. Clear Function

When user press the button “C”, the result will be cleared and the user can calculate again.

function clearAll() {
            // Clear the display
            document.getElementById('display').value = '';
        }

6. Page Styling

Lastly, I dedicated time to enhance the visual appeal of the page. Using CSS styles, I set background colors, button styles, input box borders, and other elements to improve the overall appearance and user experience.

7. The flow chart

在这里插入图片描述

VI. Code Description

This is the whole code:

<!DOCTYPE html>
<html>

<head>
    <title>Calculator</title>
    <style>
        /* CSS styles */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            /* Horizontally center align */
            align-items: center;
            /* Vertically center align */
            height: 100vh;
            /* Make the entire page fill the viewport height */
            margin: 0;
        }

        #calculator {
            width: 300px;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        #display {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 2px solid #ccc;
            /* Bold border */
            border-radius: 5px;
            font-size: 18px;
            max-width: 100%;
            /* Max width */
            text-align: right;
            /* Right-align text */
            box-sizing: border-box;
            /* Prevent border from adding to width */
        }

        .row {
            display: flex;
        }

        .row button {
            flex: 1;
            padding: 10px;
            margin: 5px;
            border: none;
            border-radius: 5px;
            background-color: #337ab7;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
        }

        .row button:hover {
            background-color: #23527c;
        }
    </style>
</head>

<body>
    <div id="calculator">
        <input type="text" id="display">
        <div class="row">
            <button value="7" onclick="appendToDisplay('7')">7</button>
            <button value="8" onclick="appendToDisplay('8')">8</button>
            <button value="9" onclick="appendToDisplay('9')">9</button>
            <button value="/" onclick="appendToDisplay('/')">/</button>
        </div>
        <div class="row">
            <button value="4" onclick="appendToDisplay('4')">4</button>
            <button value="5" onclick="appendToDisplay('5')">5</button>
            <button value="6" onclick="appendToDisplay('6')">6</button>
            <button value="-" onclick="appendToDisplay('-')">-</button>
        </div>
        <div class="row">
            <button value="1" onclick="appendToDisplay('1')">1</button>
            <button value="2" onclick="appendToDisplay('2')">2</button>
            <button value="3" onclick="appendToDisplay('3')">3</button>
            <button value="+" onclick="appendToDisplay('+')">+</button>
        </div>
        <div class="row">
            <button value="0" onclick="appendToDisplay('0')">0</button>
            <button value="." onclick="appendToDisplay('.')">.</button>
            <button value="=" onclick="getResult()">=</button>
            <button value="C" onclick="clearAll()">C</button>
        </div>
        <div class="row">
            <button value="sin" onclick="Sin()">sin()</button>
            <button value="cos" onclick="Cos()">cos()</button>
            <button value="tan" onclick="Tan()">tan()</button>
            <button value="√" onclick="Sqrt()">√</button>
        </div>
        <div class="row">
            <button value="*" onclick="appendToDisplay('*')">*</button>
            <button value="^" onclick="appendToDisplay('**')">^</button>
            <button value="log" onclick="Log()">log()</button>
            <button value="←" onclick="moveCursor()">&#8592;</button>
        </div>
    </div>

    <script>
        // JavaScript code
        function appendToDisplay(value) {
            // Append the user's input value to the display
            const display = document.getElementById('display');
            const startPos = display.selectionStart;
            const endPos = display.selectionEnd;
            const currentValue = display.value;
            const newValue = currentValue.substring(0, startPos) + value + currentValue.substring(endPos);
            display.value = newValue;
            display.setSelectionRange(startPos + value.length, startPos + value.length);
            display.focus();
        }

        function clearAll() {
            // Clear the display
            document.getElementById('display').value = '';
        }

        function getResult() {
            try {
                // Calculate the user's input expression and display the result
                const expression = document.getElementById('display').value;
                const result = eval(expression);
                document.getElementById('display').value = result;
            } catch (error) {
                // Display an error message if an error occurs during calculation
                document.getElementById('display').value = 'Error';
            }
        }

        function Sin() {
            // Calculate sine value
            const angle = parseFloat(document.getElementById('display').value);
            const radians = (angle * Math.PI) / 180;
            const sinValue = Math.sin(radians);
            document.getElementById('display').value = sinValue.toFixed(8); // Round to 8 decimal places
        }

        function Cos() {
            // Calculate cosine value
            const angle = parseFloat(document.getElementById('display').value);
            const radians = (angle * Math.PI) / 180;
            const cosValue = Math.cos(radians);
            document.getElementById('display').value = cosValue.toFixed(8); // Round to 8 decimal places
        }

        function Tan() {
            // Calculate tangent value
            const angle = parseFloat(document.getElementById('display').value);
            const radians = (angle * Math.PI) / 180;
            const tanValue = Math.tan(radians);
            document.getElementById('display').value = tanValue.toFixed(8); // Round to 8 decimal places
        }

        function Sqrt() {
            // Calculate square root
            const value = parseFloat(document.getElementById('display').value);
            const sqrtValue = Math.sqrt(value);
            document.getElementById('display').value = sqrtValue.toFixed(8); // Round to 8 decimal places
        }

        function Log() {
            // Calculate base 10 logarithm
            const value = parseFloat(document.getElementById('display').value);
            const logValue = Math.log10(value);
            document.getElementById('display').value = logValue.toFixed(8); // Round to 8 decimal places
        }

        function moveCursor() {
            // Move the cursor one position to the left
            const display = document.getElementById('display');
            const currentPosition = display.selectionStart;
            if (currentPosition > 0) {
                display.setSelectionRange(currentPosition - 1, currentPosition - 1);
                display.focus();
            }
        }
    </script>
</body>

</html>

VII. Dynamic presentation of output results

Result Display


In this video, I display some details about each buttons and do some operations for addition, abstraction, multiplication and division, also I test the functions of sin(), cos(), tan(), power and Logarithmic operation. These results can be output normally and these reflect calculator’s functions can be useful.

VIII. Summary

Through this project, I successfully created a web-based calculator with basic mathematical operations and cursor control functionality. This endeavor familiarized me with fundamental HTML, CSS, and JS concepts and honed my problem-solving skills. It also taught me how to apply the Personal Software Process (PSP) for planning and tracking work time in practical projects.

This calculator project provided valuable experience, not only strengthening my front-end development skills but also enhancing my user interface design capabilities. I look forward to applying this knowledge in future projects.At the same time, this calculator still has many shortcomings such as not meeting the standards of scientific calculators, and will participate in more in-depth research in the future.
The github link:https://github.com/hheehehdffrkfjr/EE301

CORSAKxmu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Learning Web Design by Jennifer Niederst Robbins
CodingIsFun
03-02 2954
Learning Web Design A BEGINNER’S GUIDE TO HTML, CSS,JAVASCRIPT, AND WEB GRAPHICS Jennifer Niederst Robbins My GitHub Files: https://github.com/Li-YangZhong/Learning_Web_Design_Book_by_Jennife...
Age Calculator Using HTML, CSS and JavaScript
11-08
标题中的“Age Calculator Using HTML, CSS and JavaScript”指的是一个基于前端技术实现的年龄计算器应用。这个应用使用HTML（超文本标记语言）构建页面结构，CSS（层叠样式表）进行样式设计，以及JavaScript来处理...
A calculator based on HTML/CSS/JS
asweets的博客
10-10 145
【代码】A calculator based on HTML/CSS/JS。
Making calculator (Web version, HTML, CSS, JS)
m0_64526784的博客
10-07 94
【代码】Making calculator (Web version, HTML, CSS, JS)
A super calculator based on html.
SWARDnb的博客
10-08 91
This is a blog that started writing a calculator based on HTML language from scratch. In this blog, I will provide a detailed introduction to the implementation of an HTML based web calculator and showcase the final product.
Web开发及人机交互导论 大作业
上山打老虎的博客
06-10 2344
Bike Sharing Web DevelopmentProject requirements：Project knowledge pointsPlanning, Analysis and Design Documentation1. Project Plan2. Audience Analysis3. Statement of Purpose and Market Analysis4. A Navigation Chart5. Visual Style (Storyboard / Mood board
Web calculator program based on HTML.
qq_30033587的博客
10-06 109
【代码】Web calculator program based on HTML.
[ZZ]CSS FRAME WORK – A SURVEY AND INTRODUCTION
网站开发初中级代码参考-转载
08-17 195
[my own word 09-8-17]:其实早就听说有CSS FRAME，不过总是没有上心，总觉得用那样的东西离现在还很远，总觉得用了FRAME的东西是很庞大的，有一种负重感。然而不经意间发现，这样的观点不但是错误的而且是有害的，对于软件构件这样的思想而言是一种反缪，这些能够加强软件复用的东西实在应该是作为基本的构件被广泛采用。反过来想想对现在这种动则什么什么框架，什么什么架构的态度是既反感，...
Front-Backend separation calculator programming on Idea and Vscode
m0_65328667的博客
10-22 91
【代码】Front-Backend separation calculator programming on Idea and Vscode。
Implementing native web calculators with 84.7% native js: Harness the power of JS in the browser
m0_70018390的博客
10-10 89
前端:从入门到转行后端
Calculator:使用HTML，CSS和JavaScript的计算器
05-12
【标题】"Calculator: 使用HTML，CSS和JavaScript的计算器"是一个项目，旨在通过结合三种基本的Web开发技术——HTML、CSS和JavaScript，构建一个功能齐全的在线计算器。这个计算器不仅展示了基本的算术运算，还可能...
Simple-Web-Calculator：仅用HTML，CSS和JavaScript制作的基本计算器
02-28
仅使用HTML，CSS和JavaScript制作的基本计算器。 这是一个简单的算术网络计算器，具有一些科学的实现。 要求 会费 拉请求是受欢迎的。 因此，如果您对如何改进此代码有所了解，我将感谢您提出一个问题来检查您要...
Loan Calculator App Using HTML, CSS and JavaScript.zip
11-08
在本项目中，"Loan Calculator App Using HTML, CSS and JavaScript.zip" 提供了一个基于Web的贷款计算器应用。这个应用利用了前端技术HTML、CSS和JavaScript，来实现一个用户友好的界面，以及计算贷款月供、总利息...
A-simple-Calculator-master_html_javascript_calculator_css_
10-04
标题 "A-simple-Calculator-master" 暗示我们正在探讨一个简单的计算器项目，它基于HTML、JavaScript和CSS技术。这个项目可能是一个基本的前端实现，允许用户进行基本的数学运算。接下来，我们将深入讨论这三个核心...
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1110
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
最新发布
OpenTiny的博客
07-17 672
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
cookies,sessionStorage和localStorage都有什么区别
qq_51856496的博客
07-17 201
cookies,sessionStorage和localStorage都有什么区别 cookies在请求数据传输的时候会携带至后台，sessionStorage,localStorage是纯客户端缓存 cookies有过期机制,sessionStorage是会话级缓存，窗口关闭后会销毁，localStorage是本地持久缓存手动才会清除 cookies只能存储4KB并且不推荐前端用js直接操作，sessionStorage,localStorage存储有5MB
【零基础】学JS之APIS第三天
大学生小郑的博客
07-12 1709
【零基础】学JS之APIS第三天
HTML+CSS+JS制作一个科学计算器
07-14
以下是一个简单的示例，展示如何使用HTML、CSS和JavaScript制作一个科学计算器： HTML部分： ```html <!DOCTYPE html> <html> 科学计算器 <link rel="stylesheet" type="text/css" href="style.css"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值