Skip to content

Instantly share code, notes, and snippets.

@HuangStanley050

HuangStanley050/calculator-project-v1-2.markdown

Created December 2, 2017 11:39
Show Gist options
  • Save HuangStanley050/2390002ce5de0671183a5e139d246c60 to your computer and use it in GitHub Desktop.
Save HuangStanley050/2390002ce5de0671183a5e139d246c60 to your computer and use it in GitHub Desktop.
Download ZIP
Calculator Project V1.2
Raw
index.html
<body>
<br>
<div class="container center-block">
<!--
<form class="form-inline">
<input type="text">
</form>
-->
<div id="display" class="input_box_display">
</div>
<div>
<button id="clear_button" type="button" class="clear btn btn-default">AC</button>
<button id="clear_last_button"type="button" class="clear btn btn-default">CE</button>
<button id="button_division" type="button" class="op btn btn-default">/</button>
<button id="button_multiply" type="button" class="op btn btn-default">x</button>
</div>
<div>
<button id="id_7" type="button" class="btn btn-default">7</button>
<button id="id_8" type="button" class="btn btn-default">8</button>
<button id="id_9" type="button" class="btn btn-default">9</button>
<button id="button_minus" type="button" class="op btn btn-default">-</button>
</div>
<div>
<button id="id_4" type="button" class="btn btn-default">4</button>
<button id="id_5" type="button" class="btn btn-default">5</button>
<button id="id_6" type="button" class="btn btn-default">6</button>
<button id="button_plus" type="button" class="op btn btn-default">+</button>
</div>
<div>
<button id="id_1" type="button" class="btn btn-default">1</button>
<button id="id_2" type="button" class="btn btn-default">2</button>
<button id="id_3" type="button" class="btn btn-default">3</button>
<div>
<div>
<button id="id_0" type="button" class="btn btn-default">0</button>
<button id="id_dec" type="button" class="btn btn-default">.</button>
<button id="calculate_button"type="button" class="btn btn-default">=</button>
<div>
</div>
</body>
Raw
script.js
$(document).ready(function() {
//button pressing actions
var equal_click=0;
$("#id_7").click(function() {
if ( equal_click == 1) {
$("#display").empty();
$("#display").append("7");
equal_click = 0;
}
else {
$("#display").append("7");
equal_click=0;
}
});
$("#id_8").click(function() {
if ( equal_click == 1){
$("#display").empty();
$("#display").append("8");
equal_click =0;
}
else {
$("#display").append("8");
equal_click=0;
}
});
$("#id_9").click(function() {
if ( equal_click == 1){
$("#display").empty();
$("#display").append("9");
equal_click =0;
}
else {
$("#display").append("9");
equal_click=0;
}
});
$("#id_4").click(function() {
if ( equal_click == 1){
$("#display").empty();
$("#display").append("4");
equal_click =0;
}
else {
$("#display").append("4");
equal_click=0;
}
});
$("#id_5").click(function() {
if ( equal_click == 1){
$("#display").empty();
$("#display").append("5");
equal_click =0;
}
else {
$("#display").append("5");
equal_click=0;
}
});
$("#id_6").click(function() {
if ( equal_click == 1){
$("#display").empty();
$("#display").append("6");
equal_click =0;
}
else {
$("#display").append("6");
equal_click=0;
}
});
$("#id_1").click(function() {
if ( equal_click == 1){
$("#display").empty();
$("#display").append("1");
equal_click =0;
}
else {
$("#display").append("1");
equal_click=0;
}
});
$("#id_2").click(function() {
if ( equal_click == 1){
$("#display").empty();
$("#display").append("2");
equal_click =0;
}
else {
$("#display").append("2");
equal_click=0;
}
});
$("#id_3").click(function() {
if ( equal_click == 1){
$("#display").empty();
$("#display").append("3");
equal_click =0;
}
else {
$("#display").append("3");
equal_click=0;
}
});
$("#id_0").click(function() {
if ( equal_click == 1){
$("#display").empty();
$("#display").append("0");
equal_click =0;
}
else {
$("#display").append("0");
equal_click=0;
}
});
$("#id_dec").click(function() {
$("#display").append(".");
});
//Operation buttons
$("#button_plus").click(function() {
$("#display").append("+");
});
$("#button_division").click(function() {
$("#display").append("/");
});
$("#button_minus").click(function() {
$("#display").append("-");
});
$("#button_multiply").click(function() {
$("#display").append("*");
});
$("#clear_button").click(function() {
$("#display").empty();
});
$("#calculate_button").click(function() {
num_list = $("#display").text();
//var numbers = num_list.split(" ");
var result = eval(num_list);
$("#display").html(result);
equal_click = 1;
//console.log(result);
//console.log(numbers);
//console.log(num_list[num_list.length-1]);
});
//end of operation button pressing actions
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
style.css
.btn {
font-size: 25px;
width: 70px;
background-color: gray;
}
.btn.op {
background-color: red;
}
.btn.clear {
background-color: purple;
color: white;
}
.btn:active {
transform: translateY(5px);
}
.input_box_display {
width: 290px;
height: 50px;
text-align: right;
font-size: 30px;
border-style: solid;
border-width: 5px;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment