This is a JavaScript calculator that uses JQuery and bootstrap. How can I improve the CSS, HTML, JS and the general design?
/// <reference path="jquery-1.9.1.js" />
var firstnum = '';
var first = true;
var secondnum = '';
// Resets firstnum, secondnum and first
function reset() {
firstnum = '';
secondnum = '';
first = true;
}
// Sums up firstnum and secondnum
function sum() {
return parseInt(firstnum) + parseInt(secondnum);
}
// Moves the content of the buttons to the screen
$('.col-sm-3').click(function typing() {
if (first) {
firstnum += $(this).text();
$('.screen').text(firstnum);
} else {
secondnum += $(this).text();
$('.screen').text(secondnum);
}
})
// Resets the calculator
$('#ac').click(function ac() {
reset();
$('.screen').empty();
})
// Deletes the last character of the screen text
$('#del').click(function del() {
lasttext = $('.screen').text();
// This condition happens when the user clicks 'del' after clicking '='
if (lasttext === 'del') {
$('.screen').empty();
} else {
$('.screen').text(lasttext.replace(lasttext.substr(lasttext.length - 4, lasttext.length /* - 1*/ ), '')) // We used a substr here since "del" is written on the screen
}
if (first) {
firstnum = $('.screen').text();
} else {
secondnum = $('.screen').text();
}
})
// Switches typing to secondnum
$('#add').click(function add() {
if (first) {
firstnum = $('.screen').text(); // This is to ensure that the user can add again after pressing '='
}
// If the user is trying to add more than two numbers
else {
firstnum = sum().toString();
secondnum = '';
}
$('.screen').text('+')
first = false;
})
// Shows the final result or firstnumber if there wasn't an operation
$('#equal').click(function result() {
$('.screen').text(sum().toString());
if (isNaN($('.screen').text())) {
$('.screen').text(firstnum);
}
reset();
}).screen {
background: black;
color: #ffef9e;
font-size: 25px;
width: 100%;
height: 100px;
text-align: left;
word-wrap: break-word;
overflow: auto
}
.container {
border: 3px solid black;
padding: 0%;
margin-top: 1%;
box-shadow: 10px 10px 85px 12px black;
}
.col-sm-3,
.col-sm-1 {
padding: 3%;
text-align: center;
box-sizing: border-box;
border: 3px solid black;
margin-left: 3%;
margin-top: 0.5%;
margin-bottom: 0.5%;
background: #ffc79e63;
box-shadow: 10px 10px 67px -9px rgba(0, 0, 0, 0.75);
font-size: 25px;
user-select: none;
}
.col-sm-1 {
float: left;
}
.col-sm-3:hover,
.col-sm-1:hover {
box-shadow: none;
background: #ffc79e;
cursor: pointer;
}
.col-sm-3:active,
.col-sm-1:active {
background: #ffef9e;
}
@media only screen and (max-width: 780px) {
.col-sm-3 {
width: 25%;
float: left;
}
.col-sm-1 {
width: 10%;
float: left;
}
.col-sm-3:hover,
.col-sm-1:hover {
box-shadow: 10px 10px 67px -9px rgba(0, 0, 0, 0.75);
}
}
@media only screen and (max-width: 300px) {
.col-sm-3,
.col-sm-1 {
font-size: 18px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Calculator</title>
<script src="../scripts/jquery-1.9.1.js"></script>
<script src="../scripts/bootstrap.js"></script>
<link href="../Content/bootstrap.css" rel="stylesheet" />
<link href="../CSS/Calculator.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="screen">
</div>
<div class="col-sm-3">1</div>
<div class="col-sm-3">2</div>
<div class="col-sm-3">3</div>
<div class="col-sm-1" id="add">+</div>
<div class="col-sm-3">4</div>
<div class="col-sm-3">5</div>
<div class="col-sm-3">6</div>
<div class="col-sm-1" id="equal">=</div>
<div class="col-sm-3">7</div>
<div class="col-sm-3">8</div>
<div class="col-sm-3">9</div>
<div class="col-sm-3">0</div>
<div class="col-sm-3" id="del">del</div>
<div class="col-sm-3" id="ac">AC</div>
</div>
<script src="../scripts/Calculator.js"></script>
</body>
</html>
