Calcul

Developer
Fred Hawk
Size
3,248 Kb
Views
12,144
  1. Calcul Previews
  2. Calcul HTML Codes
  3. Calcul CSS Codes
  4. Calcul JS Codes

How do I make an calcul?

What is a calcul? How do you make a calcul? This script and codes were developed by Fred Hawk on 14 November 2022, Monday.

Calcul Previews
IQ Test

Calcul - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calcul</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <section class="calculator"> <section class="header"> <h1 class="title">Code calculator</h1> </section> <form name="calc"> <div class="display-wrapper"> <input type="text" name="previous" class="display"> <input type="text" name="display" class="display"> </div> <div class="row"> <input type="button" name="seven" id="" value="7" onclick="calc.display.value+='7'" /> <input type="button" name="eight" id="" value="8" onclick="calc.display.value+='8'" /> <input type="button" name="nine" id="" value="9" onclick="calc.display.value+='9'" /> <input type="button" name="divide" id="" value="&divide" onclick="calc.display.value+='/'" /> </div> <div class="row"> <input type="button" name="four" id="" value="4" onclick="calc.display.value+='4'" /> <input type="button" name="five" id="" value="5" onclick="calc.display.value+='5'" /> <input type="button" name="six" id="" value="6" onclick="calc.display.value+='6'" /> <input type="button" name="times" id="" value="&times" onclick="calc.display.value+='*'" /> </div> <div class="row"> <input type="button" name="one" id="" value="1" onclick="calc.display.value+='1'" /> <input type="button" name="two" id="" value="2" onclick="calc.display.value+='2'" /> <input type="button" name="three" id="" value="3" onclick="calc.display.value+='3'" /> <input type="button" name="minus" id="" value="-" onclick="calc.display.value+='-'" /> </div> <div class="row"> <input type="button" name="clear" id="" value="C" onclick="clearCalc()" /> <input type="button" name="zero" id="" value="0" onclick="calc.display.value+='0'" /> <input type="button" name="deci" id="" value="." onclick="calc.display.value+='.'" /> <input type="button" name="plus" id="" value="+" onclick="calc.display.value+='+'" /> </div> <div class="row"> <input type="button" name="equals" id="equals" value="=" onclick="makeResult()" /> </div> </form> </section>
</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>

Calcul - Script Codes CSS Codes

body { font-size: 16px;
}
h1 { font-size: 1.5em; margin: 0.2em; padding: 0.2em;
}
input[type=button] { width: 2.5em; height: 2.3em; border-radius: 5px; background: #AEAEAE;
}
.container { margin-top: 3em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.calculator { background: #18a1f5; padding: 1em; width: 200px; border-radius: 10px; box-shadow: 4px 4px 4px #888;
}
.display-wrapper { background: #eeeeee; border-radius: 5px;
}
.display { border: none; border: 0; margin-left: 5px; background: #eeeeee; width: 83%; height: 30px; border-radius: 5px; color: black; font-size: 1.3em; padding: 0 10px; text-align: right;
}
.row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0.3em;
}
#equals { width: 100%;
}

Calcul - Script Codes JS Codes

// TO DO
// #1 check so there is only 1 decimal point.
// #2 don't allow leading zeros except when a decimal point is after
// #3 if display is empty, equals should use clear() Done!
// #4 when pressing equals it should store the result in a second display above and in a variable. Done!
// #5 prevent equals from adding number to upper display without a math operator as the first character if there is allready a number in the upper display
// #6 prevent so when you press an operator button 2 or more times in a row it add them all to the equation, but instead replaces the one that is allready there.
var result = "";
var prevres = "";
function makeResult() { if (calc.previous.value == "" && calc.display.value == "") { clearCalc(); } else { if (calc.previous.value == "") { result = eval(calc.display.value); calc.previous.value = result; calc.display.value = ""; prevres = result; result = ""; } else { prevres += calc.display.value; prevres = eval(prevres); calc.previous.value = prevres; calc.display.value = ""; } }
}
function clearCalc() { calc.display.value = ""; calc.previous.value = ""; prevres = ""; result = "";
}
Calcul - Script Codes
Calcul - Script Codes
Home Page Home
Developer Fred Hawk
Username osycon
Uploaded November 14, 2022
Rating 3
Size 3,248 Kb
Views 12,144
Do you need developer help for Calcul?

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!

Fred Hawk (osycon) Script Codes
Name
Weekly UI - ToDo mobile design
CSS Flexbox 3 col example
Weekly UI - Paypal Navigation
Weekly UI - Stripe - Pricing section
Lilli
Weekly UI - Dropbox Hero Component
Pomodoro Clock
Weekly UI - Invisionapp Sign up
Weather App
A Pen by Fred Hawk
Create amazing love letters 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!