Initializing...
Liveweave
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
build
Tools
expand_more
restart_alt
Load base template
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<doctype html> <head> <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'> <style> .calcwrapper { margin: 20px 10% 20px 10%; width: 80%; height: 600px; border-color: ghostwhite; border-style: solid; border-width: 10px; } .interface { margin: 2%; width: 96%; height: 110px; background-color: grey; overflow: hidden; box-shadow: 3px 3px 5px grey; } .interfacedisplay { vertical-align: middle; margin: 0px; padding: 20px; font-family: 'Poiret One', cursive; font-size: 70px; color: white; } .number_keyboard { margin: 2%; width: 96%; height: 300px; display: inline-block; text-align: center; } .number_key { margin: 7px; width: 140px; height: 140px; background-color: grey; font-family: 'Poiret One', cursive; font-size: 50px; color: white; float: left; line-height: 140px; box-shadow: 3px 3px 5px grey; } .messenger { margin: 0% 2% 0% 2%; height: 50px; padding: 10px; width: 94%; background-color: grey; font-family: 'Poiret One', cursive; font-size: 40px; color: white; box-shadow: 3px 3px 5px grey; } </style> </head> <body> <div class="calcwrapper"> <div class="interface"> <p class="interfacedisplay" id="interdisplay" align="right">C A L C U L A T O R </p> </div> <div class="number_keyboard"> <div class="number_key one" onclick="addone()"> 1 </div> <div class="number_key two" onclick="addtwo()"> 2 </div> <div class="number_key three" onclick="addthree()"> 3 </div> <div class="number_key four" onclick="addfour()"> 4 </div> <div class="number_key five" onclick="addfive()"> 5 </div> <div class="number_key six" onclick="addsix()"> 6 </div> <div class="number_key seven" onclick="addseven()"> 7 </div> <div class="number_key eight" onclick="addeight()"> 8 </div> <div class="number_key nine" onclick="addnine()"> 9 </div> <div class="number_key zero" onclick="addzero()"> 0 </div> <div class="number_key plus" onclick="adding()"> + </div> <div class="number_key minus" onclick="subtracting()"> - </div> <div class="number_key equal" onclick="perform_calculation()"> = </div> <div class="number_key clear" onclick="clearance()"> CLR </div> </div> <div class="messenger" id="message"> <strong></strong> </div> </div> <script> var current_number = ""; var first_number = ""; var second_number = ""; var operator = ""; function addone() { if (current_number.length < 3){ current_number += "1"; document.getElementById("interdisplay").innerHTML = current_number; } else { document.getElementById("message").innerHTML = "This calculator only has to work with up to 3 digits"; }; }; function addtwo() { if (current_number.length < 3){ current_number += "2"; document.getElementById("interdisplay").innerHTML = current_number; } else { document.getElementById("message").innerHTML = "This calculator only has to work with up to 3 digits"; }; }; function addthree() { if (current_number.length < 3){ current_number += "3"; document.getElementById("interdisplay").innerHTML = current_number; } else { document.getElementById("message").innerHTML = "This calculator only has to work with up to 3 digits"; }; }; function addfour() { if (current_number.length < 3){ current_number += "4"; document.getElementById("interdisplay").innerHTML = current_number; } else { document.getElementById("message").innerHTML = "This calculator only has to work with up to 3 digits"; }; }; function addfive() { if (current_number.length < 3){ current_number += "5"; document.getElementById("interdisplay").innerHTML = current_number; } else { document.getElementById("message").innerHTML = "This calculator only has to work with up to 3 digits"; }; }; function addsix() { if (current_number.length < 3){ current_number += "6"; document.getElementById("interdisplay").innerHTML = current_number; } else { document.getElementById("message").innerHTML = "This calculator only has to work with up to 3 digits"; }; }; function addseven() { if (current_number.length < 3){ current_number += "7"; document.getElementById("interdisplay").innerHTML = current_number; } else { document.getElementById("message").innerHTML = "This calculator only has to work with up to 3 digits"; }; }; function addeight() { if (current_number.length < 3){ current_number += "8"; document.getElementById("interdisplay").innerHTML = current_number; } else { document.getElementById("message").innerHTML = "This calculator only has to work with up to 3 digits"; }; }; function addnine() { if (current_number.length < 3){ current_number += "9"; document.getElementById("interdisplay").innerHTML = current_number; } else { document.getElementById("message").innerHTML = "This calculator only has to work with up to 3 digits"; }; }; function addzero() { if (current_number.length < 3){ current_number += "0"; document.getElementById("interdisplay").innerHTML = current_number; } else { document.getElementById("message").innerHTML = "This calculator only has to work with up to 3 digits"; }; }; function adding() { operator = "+"; if (first_number.length < 1){ first_number = current_number; current_number = ""; document.getElementById("message").innerHTML = first_number + "+"; } if (second_number.length < 1){ second_number = current_number; } else { document.getElementById("message").innerHTML = "No need to keep on dealing with more numbers!"; } }; function subtracting() { operator = "-"; if (first_number.length < 1){ first_number = current_number; current_number = ""; document.getElementById("message").innerHTML = first_number + "-"; }; if (second_number.length < 1){ second_number = current_number; } else { document.getElementById("message").innerHTML = "No need to keep on dealing with more numbers!"; } }; function perform_calculation() { second_number = current_number; if (first_number.length >= 1 && second_number.length >= 1){ if (operator == "+"){ result = parseInt(first_number, 10) + parseInt(second_number, 10); document.getElementById("interdisplay").innerHTML = result; current_number = ""; document.getElementById("message").innerHTML = first_number + "+" + second_number + "="; } else { result = parseInt(first_number, 10) - parseInt(second_number, 10); document.getElementById("interdisplay").innerHTML = result; current_number = ""; document.getElementById("message").innerHTML = first_number + "-" + second_number + "="; } } else { if (first_number.length < 1) { document.getElementById("message").innerHTML = "You have yet to click on any numbers!"; } else if (operator = ""){ document.getElementById("message").innerHTML = "You have yet to select an operator!"; } else { document.getElementById("message").innerHTML = "You have yet to create a second number!"; }; }; }; function clearance () { current_number = ""; first_number = ""; second_number = ""; operator = ""; document.getElementById("message").innerHTML = "You have cleared all."; document.getElementById("interdisplay").innerHTML = "C A L C U L A T O R"; }; </script> </body> </html>
// Write JavaScript here