Calculator

Developer
Justin Richardsson
Size
4,493 Kb
Views
24,288
  1. Calculator Previews
  2. Calculator HTML Codes
  3. Calculator CSS Codes
  4. Calculator JS Codes

How do I make an calculator?

What is a calculator? How do you make a calculator? This script and codes were developed by Justin Richardsson on 31 August 2022, Wednesday.

Calculator Previews
IQ Test

Calculator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calculator</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <span>Made with <i class="fa fa-fw fa-coffee"></i> and <i class="fa fa-fw fa-music"></i> by <a href="http://qlip.in">Justin Sane</a>.</span>
<div class="container" ontouchstart=""> <div class="screen">0</div> <div class="key function clear">AC</div> <div class="key function">±</div> <div class="key function">%</div> <div class="key operation">÷</div> <div class="key number">7</div> <div class="key number">8</div> <div class="key number">9</div> <div class="key operation">x</div> <div class="key number">4</div> <div class="key number">5</div> <div class="key number">6</div> <div class="key operation">-</div> <div class="key number">1</div> <div class="key number">2</div> <div class="key number">3</div> <div class="key operation">+</div> <div class="key number zero">0</div> <div class="key number">.</div> <div class="key operation total">=</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Calculator - Script Codes CSS Codes

html, body{ display:flex; flex-direction:row; height:100%; width:100%;
}
body { background:#444 url('http://atextures.com/wp-content/uploads/2014/08/Wooden-Background-7.jpg'); font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 100; align-items:center; justify-content:center;
}
.container{ position:relative; width:450px; display:flex; flex-flow:row wrap; justify-content:center; background:#202020; outline:1px solid #202020; margin-bottom:40px;
}
.container > div{ display:flex; flex-basis:25%;
}
div.screen{ height:120px; flex:2 100%; justify-content:flex-end; align-items:flex-end; font-size:100px; padding:20px 30px 10px; color:#fff; text-shadow: -1px -1px 0 #626262, 1px -1px 0 #626262, -1px 1px 0 #626262, 1px 1px 0 #626262;
}
div.screen.small{ font-size:60px;
}
.key { cursor:pointer; display:flex; background:#d2d4d6; justify-content:center; align-items:center; color:#000; line-height:40px; font-size:60px; width:131px; height:100px; outline:1px solid #202020; transition:ease .1s;
}
.number:active { background:#bbb
}
.operation { background:#F78F2B; color:#FFF; transition:ease .1s;
}
.function { background:#C5C7C9;
}
.function:active { background:#888;
}
.waiting { outline:3px solid #202020; outline-offset:-2px;
}
div.clear { font-size:45px
}
div.zero { flex-basis:50%;
}
.total:active { background:#FFA64F
}
span { display:block; position:absolute; bottom:20px; width:500px; text-align:center; color:#777; transition:ease .5s;
}
span:hover{ color:#888;
}
span:hover a{ color:#AAA;
}
span a{ transition:ease .5s; color:#888; text-decoration:none;
}
span a:hover{ color:#F78F2B; text-decoration:underline;
}

Calculator - Script Codes JS Codes

var key, shown, total, wait, killIt, done=1;
// Change displayed values
function updateScr(value){ value+=''; value.length > 8 ? ($('.screen').addClass('small'), value=value.substring(0,12)) : $('.screen').removeClass('small'); $('.screen').text(value);
}
// Toggle operation buttons' decoration
function waitToggle(toggled){ $('.key').removeClass('waiting'); $(toggled).addClass('waiting'); wait = 1
}
// AC + C Button functionality
function clearIt(){ // clears waiting decoration waitToggle(); // clears variables total=shown=wait=killIt=0; //console.clear(); // zeroes screen updateScr(shown); // resets clear key $('.clear').text('AC');
}
// Curry to get previous value into the operation
function totalIt(operation, total){ //console.log('totalIt says ', operation, total) // this will be called killIt on return of totalIt return function (toOperate){ //console.log('killIt says ', total, operation, toOperate); total = operation==='+'? total+toOperate: operation==='-'? total-toOperate: operation==='x'? total*toOperate: operation==='÷'? total/toOperate: null; //Add more operations here. updateScr(total); done=1; //console.log ('after killIt total is ', total); return total; }
}
// When a key is pressed
function keyPress(pressed) { // get values of screen and pressed key shown = $('.screen').text(), pressed? pressed : pressed = $(this).text(); // input variables console.log(pressed, shown, total, done); pressed == 'AC' || pressed == 'A' || pressed == 'a' ? clearIt() : pressed == 'C' || pressed == 'c' ? (shown==0 || !wait ? clearIt() : updateScr('0')) : pressed == '%' || pressed == 'P' || pressed == 'p' ? (waitToggle(this), updateScr(shown/100), killIt = totalIt('x', shown/100)) : pressed == '=' ? killIt(+shown) : pressed == '±' ? updateScr(-shown) : // operations (+ - * /) isNaN(pressed) && (pressed!='.')? (waitToggle(this), done ? killIt = totalIt(pressed, +shown): killIt ? killIt = totalIt(pressed, killIt(+shown)): killIt = totalIt(pressed, +shown)): //it's a number or dot (updateScr((shown == 0 || wait? (waitToggle(), wait='', ''):shown) + pressed), //TODO: add . if 0 $('.clear').html('C'), done=''); //console.log('total', total,' shown', shown,' pressed', pressed,' wait', wait,' done', done,' totalIt', totalIt,' KillIt', killIt);
}
$(document).ready(function() { var keys = ['+', '-', 'x', 'X', '*', '÷', '/', '=', '%', 'p', 'P', '±', 'c', 'C', 'a', 'A', '.', ',']; clearIt(); $('.key').on('click', function(){console.log(this.innerText)} /*keyPress(this.innerText)*/); /*$(document).keypress(function(event){ key= String.fromCharCode(event.charCode); console.log(key, !isNaN(+key), (keys.indexOf(key)!=-1)); ((!isNaN(+key)) || (keys.indexOf(key)!=-1)) ? keyPress(key) : null; })*/
});
Calculator - Script Codes
Calculator - Script Codes
Home Page Home
Developer Justin Richardsson
Username hallaathrad
Uploaded August 31, 2022
Rating 3
Size 4,493 Kb
Views 24,288
Do you need developer help for Calculator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Justin Richardsson (hallaathrad) Script Codes
Name
Zen quote generator
Portfolio
Canvas experiment 3
Canvas experiment 1
Tribute to Peter Singer
Canvas experiment 2
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!