Recently, I delved into the world of jQuery and decided to test my skills by creating a jQuery calculator. Everything worked perfectly except for the backspace button.
This is what I tried:
if (value === backspace) {
$(input).val($(input).val().substring(0, $(input).val().length - 1));
}
Unfortunately, it didn't work as expected.
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
<div class="container">
<input type="text" name="">
<div class="btns">
<input type="submit" name="btn1" value="1">
<input type="submit" name="btn2" value="2">
<input type="submit" name="btn3" value="3">
<input type="submit" name="btn4" value="4">
<input type="submit" name="btn5" value="5">
<input type="submit" name="btn6" value="6">
<input type="submit" name="btn7" value="7">
<input type="submit" name="btn8" value="8">
<input type="submit" name="btn9" value="9">
<input type="submit" name="btn0" value="0">
<input type="submit" name="plus" value="+">
<input type="submit" name="minus" value="-">
<input type="submit" name="mulpy" value="*">
<input type="submit" name="div" value="/">
<input type="submit" name="mod" value="%">
<input type="submit" name="div" value="=">
<input type="submit" name="reset" value="reset">
<input type="submit" name="back" value="←">
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript" src="calculator.js"></script>
</body>
</html>
Here is the corresponding CSS:
body {
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
background: #45D196;
background: -moz-linear-gradient(left, #45D196 0%, #1C6EA4 44%, #A6C55F 100%);
background: -webkit-linear-gradient(left, #45D196 0%, #1C6EA4 44%, #A6C55F 100%);
background: linear-gradient(to right, #45D196 0%, #1C6EA4 44%, #A6C55F 100%);
}
.container {
width: 300px;
margin-top: 100px;
border-radius: 5px;
-webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.25);
box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.25);
}
.btns,
.container {
display: flex;
flex-wrap: wrap;
}
input[type = "submit"] {
cursor: pointer;
width: 100px;
height: 50px;
}
input[type = "text"] {
width: 100%;
height: 50px;
font-size: 30px;
outline: none;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border: 1px solid #45D196;
}
Lastly, here is the JavaScript snippet:
$( document ).ready(function() {
let input= $('input[type="text"]');
$(".btns").click(function(e) {
let $current_val = $(input).val();
let value = $(e.target).val();
$(input).val($current_val + value);
let backspace = $("input:last-child").val();
if (value === "reset") {
$(input).val("");
}
if (value === "=") {
let answer = eval($current_val);
$(input).val("");
$(input).val(answer);
}
if (value === backspace) {
$(input).val($(input).val().substring(0, $(input).val().length - 1));
}
});
});
Thank you in advance!