Software Engineering Practice First Assignment

832102103王兆猷

已于 2023-10-09 17:10:21 修改

阅读量70

点赞数

文章标签： css 前端 html javascript

于 2023-10-09 16:57:07 首次发布

本文链接：https://blog.csdn.net/m0_68813859/article/details/133687892

版权

1. Introduction

This blog will guide you through the process of creating a simple calculator visualization interface, from basic mathematical operations to designing user interfaces, and integrating them into a web page. We will delve into front-end design techniques and algorithmic programming languages to help you understand how to implement various functions, such as addition, subtraction, multiplication, division, etc.

The Link Your Class	2301-MUSE社区-CSDN社区云
The Link of Requirement of This Assignment	Software Engineering Practice First Assignment-CSDN社区
The complete code link of this project	8233244/wzy (github.com)
The Aim of This Assignment	Create a calculator with a visual interface.
MU STU ID and FZU STU ID	21125911_832102103

2. PSP table

Personal Software Process Stages	Estimated Time(minutes)	Actual Time(minutes)
Planning
• Estimate	30	35
Development
• Analysis	20	25
• Design Spec	20	30
• Design Review	10	15
• Coding Standard	15	10
• Design	60	70
• Coding	120	150
• Code Review	20	20
• Test	10	20
Reporting
• Test Repor	60	90
• Size Measurement	10	20
• Postmortem & Process Improvement Plan	30	30
Sum	405	515

3. Description of problem-solving ideas

In this subject, the basic functions completed include input numbers, addition, subtraction, multiplication, division, subtraction, and trigonometric functions related to advanced functions. We can use JS, Css and HTML languages to build simple web calculators. I chose the Vscode application. I created an html file inside. Then, I started writing code.

4. Design and implementation process

Generally speaking, the idea behind the underlying logical process of creating a simple calculator is to plan the layout of the calculator and the functions of its various buttons to conform to traditional calculator usage logic, which includes not only numbers and operators, but also comprehensive deletion and cancellation of buttons. Then we will set up the operation functions. In other words, when I press which button, for example, when I press the delete key, the last character is deleted, when I press the c key, the formula and result lines are cleared, and so on. In summary, I will write algorithm code based on this, add it to the compiler, and finally test the visual interface operation of this calculator.

5. Process

html

In this HTML code, we can see a basic calculator interface that includes numbers, operators, and other control buttons.

<!DOCTYPE html>
<html>
<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</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <div class="calculator dark">
            <div class="theme-toggler active">
                <i class="toggler-icon"></i>
            </div>
            <div class="display-screen">
                <div id="display"></div>
            </div>
            <div class="buttons">
                <table>
                    <tr>
                        <td><button class="btn-operator" id="clear">C</button></td>
                        <td><button class="btn-operator" id="/">&divide;</button></td>
                        <td><button class="btn-operator" id="*">&times;</button></td>
                        <td><button class="btn-operator" id="backspace"><</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-number" id="7">7</button></td>
                        <td><button class="btn-number" id="8">8</button></td>
                        <td><button class="btn-number" id="9">9</button></td>
                        <td><button class="btn-operator" id="-">-</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-number" id="4">4</button></td>
                        <td><button class="btn-number" id="5">5</button></td>
                        <td><button class="btn-number" id="6">6</button></td>
                        <td><button class="btn-operator" id="+">+</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-number" id="1">1</button></td>
                        <td><button class="btn-number" id="2">2</button></td>
                        <td><button class="btn-number" id="3">3</button></td>
                        <td rowspan="2"><button class="btn-equal" id="equal">=</button></td>
                    </tr>
                    <tr>
                        <td><button class="btn-operator" id="(">(</button></td>
                        <td><button class="btn-number" id="0">0</button></td>
                        <td><button class="btn-operator" id=")">)</button></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <script src="./script.js"></script>
</body>
</html>

css

This is a CSS code snippet that contains some CSS styles for setting the appearance and layout of the calculator. In this code, we can see some CSS selectors and properties that control the styles of different parts of the calculator. For example, the * selector sets the outer and inner margins, box model, and transition effects for all elements. The body selector sets the font family. The a selector sets the color and text decoration of the link.
In addition, we can also see some CSS class selectors, such as. container,. calculator, and. display screen, which are used to locate and style different parts of the calculator. For example, the. calculator class selector sets the position, height, width, fill, border radius, and shadow effects of the calculator.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
    transition: all 0.5s ease;
}
body{
    font-family: sans-serif;
}
a{
    text-decoration: none;
    color: #fff;
}

.container{
    height: 100vh;
    width: 100vw;
    display: grid;
    place-items: center;
}
.calculator{
    position: relative;
    height: auto;
    width: auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 30px #000;
}

#display::-webkit-scrollbar{
    display: block;
    height: 3px;
}
button{
    height: 60px;
    width: 60px;
    border: 0;
    border-radius: 30px;
    margin: 5px;
    font-size: 20px;
    cursor: pointer;
    transition: all 200ms ease;
}
button:hover{
    transform: scale(1.1);
}
button#equal{
    height: 130px;
}

.calculator.dark{
    background-color: #071115;
}
.calculator.dark #display{
    color: #f8fafd;
}
.calculator.dark button#clear{
    background-color: #2d191e;
    color: #bd3740;
}
.calculator.dark button.btn-number{
    background-color: #1b2f38;
    color: #f8fafb;
}
.calculator.dark button.btn-operator{
    background-color: #2e1f39;
    color: #aa00a4;
}
.calculator.dark button.btn-equal{
    background-color: #223323;
    color: #fff;
}

JavaScript

In this JavaScript code, you can see a basic calculator logic that includes numbers, operators, and other control buttons. In addition, we can see some DOM operations for getting and modifying the content and properties of HTML elements. For example, document.querySelector('#display') gets an HTML element with an ID of "display", and display.innertext sets or returns the text content of that element.

const display = document.querySelector('#display');
const buttons = document.querySelectorAll('button');

buttons.forEach((item) => {
    item.onclick = () => {
        if (item.id == 'clear'){
            display.innerText = '';
        } else if (item.id == 'backspace'){
            let string = display.innerText.toString();
            display.innerText = string.substr(0, string.length - 1);
        } else if (display.innerText != '' && item.id =='equal'){
            display.innerText = eval(display.innerText);
        } else if (display.innerText == '' && item.id == 'equal'){
            display.innerText = 'Empty!';
            setTimeout(() => (display.innerText = ''), 2000);
        } else {
            display.innerText += item.id;
        }
    }
})

const themeToggleBtn = document.querySelector('.theme-toggler');
const calculator = document.querySelector('.calculator');
const toggleIcon = document.querySelector('.toggler-icon');
let isDark = true;
themeToggleBtn.onclick = () => {
    calculator.classList.toggle('dark');
    themeToggleBtn.classList.toggle('active');
    isDark = !isDark;
}

6. Vedio demonstration

计算器 - 工作 - Microsoft Edge 2023-10-09 13-42-27 00_00_00-00_00_30

7. Summary

In this assignment, I learned how to create a simple front-end visual interaction page and how to create the simplest web page using programming languages such as CSS, JavaScript, and HTML. At the same time, I have also improved my ability to access information and write code. Of course, the simple calculator I made has many flaws, such as adding decimal operations and implementing trigonometric functions. I believe that after further mastering the relevant coding skills, I have the ability to achieve the above functions.