Simple Calculator Web App JavaScript Coding Exercise

Simple Calculator Web App JavaScript Coding Exercise

Laurence Svekis ? Laurence Svekis ?

Laurence Svekis ?

发布日期: 2023年12月28日
+ 关注

Download JavaScript PDF guide https://basescripts.com/simple-calculator-web-app-javascript-coding-exercise

Exercise 1: Simple Calculator

HTML (index.html):

<!DOCTYPE html>

<html lang="en">

<head>

??<meta charset="UTF-8">

??<meta name="viewport" content="width=device-width, initial-scale=1.0">

??<link rel="stylesheet" href="styles.css">

??<title>Simple Calculator</title>

</head>

<body>

??<div class="calculator">

????<input type="text" id="display" readonly>

????<div class="buttons">

??????<button onclick="clearDisplay()">C</button>

??????<button onclick="appendToDisplay('1')">1</button>

??????<button onclick="appendToDisplay('2')">2</button>

??????<button onclick="appendToDisplay('+')">+</button>

??????<!-- Add more buttons as needed -->

??????<button onclick="calculate()">=</button>

????</div>

??</div>

??<script src="script.js"></script>

</body>

</html>

CSS (styles.css):

body {

??display: flex;

??justify-content: center;

??align-items: center;

??height: 100vh;

??margin: 0;

}

.calculator {

??text-align: center;

}

input {

领英推荐

??width: 200px;

??padding: 10px;

??font-size: 18px;

}

button {

??width: 50px;

??height: 50px;

??font-size: 18px;

??margin: 5px;

}

JavaScript (script.js):

let displayValue = '';

function appendToDisplay(value) {

??displayValue += value;

??document.getElementById('display').value = displayValue;

}

function clearDisplay() {

??displayValue = '';

??document.getElementById('display').value = displayValue;

}

function calculate() {

??try {

????displayValue = eval(displayValue);

????document.getElementById('display').value = displayValue;

??} catch (error) {

????document.getElementById('display').value = 'Error';

??}

}

  • let displayValue = '';
  • This line initializes a variable displayValue and assigns an empty string to it. This variable is used to store the input and result displayed on the calculator screen.

function appendToDisplay(value) { ... }

  • This function is responsible for appending the specified value to the displayValue variable and updating the display on the calculator screen.
  • It concatenates the provided value to the existing displayValue.
  • Then, it finds the HTML element with the id 'display' and sets its value to the updated displayValue.

function clearDisplay() { ... }

  • This function is used to clear the calculator display.
  • It resets the displayValue variable to an empty string.
  • Then, it finds the HTML element with the id 'display' and sets its value to the empty string.

function calculate() { ... }

  • This function is responsible for evaluating the mathematical expression stored in displayValue and updating the calculator display with the result.
  • It uses a try-catch block to handle any potential errors that may occur during the evaluation.
  • Inside the try block, it uses the eval() function to evaluate the expression in displayValue.
  • If the evaluation is successful, the result is assigned back to displayValue, and the display is updated with the result.
  • If an error occurs during evaluation (e.g., due to an invalid expression), the catch block sets the display to show 'Error'.

In summary, these functions together form the core functionality of a simple calculator, allowing users to input values, perform calculations, and handle errors gracefully. The displayValue variable acts as a buffer for the input and results, and the functions manipulate it based on user interactions.

Learn to Code Tips and Lessons Learn to Code Tips and Lessons

Learn to Code Tips and Lessons

9,504 位关注者

订阅

要查看或添加评论，请登录

Laurence Svekis ?的更多文章

社区洞察

其他会员也浏览了