Skip to content

Instantly share code, notes, and snippets.

@Ebrusky

Ebrusky/READme.txt

Created August 4, 2017 21:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Ebrusky/80fca153eafc3a6253b0215a82887106 to your computer and use it in GitHub Desktop.
Save Ebrusky/80fca153eafc3a6253b0215a82887106 to your computer and use it in GitHub Desktop.
Download ZIP
Hello everyone, in this tutorial we will be creating a Simple Calculator using the following web technologies below. * Hypertext markup language (Html5) * Cascading style sheet (Css3) and *JavaScript programming language Notice!! : The above listed is a prerequisite, you must at least have a basic knowledge of them, For you to be able to flow we…
Raw
READme.txt
Introduction
In this tutorial , we are going to create a basic calculator. We need to create a basic structure using Hypertext Mark Language(HTML) , style it using Cascading Style Sheet(CSS) and make it work using JavaScript! .
Let's Start
First we create an HTML Document: This will comprises both our CSS and JavaScript Code,
(That's is all in a single page).
Raw
mycalculator.html
<!DOCTYPE html>
<html>
<head>
<title>My Calculator</title>
<style type="text/css" all="media">
h2{
text-shadow: 2px 2px 10px white;
float:left;
z-index:2;
color:peru;
position:relative;
left:395px;
top:50px;
}
fieldset{
border:10px cadetblue solid;
border-top:80px cadetblue solid;
border-bottom:15px cadetblue solid;
position:relative;
left:100px;
top:50px;
float:left;
border-radius:10px;
width:310px;
height:410px;
background-color:darkgray;
}
/*the display screen code*/
input[type="text"]{
font-size:35px;
text-align:right;
border-left: 5px #222 solid;
border-top: 5px #6f6f6f solid;
background-color:#bccd95;
width:310px;
height:50px
}
/*main button code*/
input[type="button"]{
font-weight:bold;
color:white;
padding:3px;
background-color:teal;
border:black 2px solid;
border-top:2px #6f6f6f solid;
border-left:3px #6f6f6f solid;
font-size:1.3em;
border-radius:10px;
width:65px;
height:45px;
margin-left:5px;
margin-right:5px;
margin-bottom:3px;
margin-top:20px;
}
input[type="button"]:active{
border-bottom:#222 6px solid;
border-left:#222 1px solid;
border-right:#222 1px solid;
border-top:#222 2px solid;
}
input[type="button"].redbutton{
font-size:1.6em;
color:white;
background-color:red;
}
input[type="button"]#equalsbutton{
color:#222;
}
input[type="button"]#resetbutton{
background-color:darkgoldenrod;
color:white;
}
input[type="button"].fbutton{
color:#222;
background-color:darkkhaki;
}
</style>
<script type="text/javascript">
<!--
function c(val){
document.getElementById("d").value=val;
}
function math(val){
document.getElementById("d").value+=val;
}
function e(){
try{
c(eval(document.getElementById("d").value))
}
catch(e){
c('Error')
}
}
//-->
</script>
</head>
<body style="background-color:whitestone">
<form>
<h2><em>Godspower's Calculator</em></h2>
<fieldset>
<input type="text" readonly size="18" id="d" >
<input type="button" class="fbutton" onclick='c("not defined ")' value="mrc" />
<input type="button" class="fbutton" onclick='c("not defined ")' value="m+" />
<input type="button" class="fbutton" onclick='c("not defined ")' value="m-" />
<input type="button" onclick='math("/")' class="redbutton" value="/" />
<br />
<input type="button" onclick='math("7")' value="7" />
<input type="button" onclick='math("8")' value="8" />
<input type="button" onclick='math("9")' value="9" />
<input type="button" onclick='math("*")' class="redbutton" value="*" />
<br />
<input type="button" onclick='math("4")' value="4" />
<input type="button" onclick='math("5")' value="5" />
<input type="button" onclick='math("6")' value="6" />
<input type="button" onclick='math("-")'class="redbutton" value="-" />
<br />
<input type="button" onclick='math("1")' value="1" />
<input type="button" onclick='math("2")' value="2" />
<input type="button" onclick='math("3")' value="3" />
<input type="button" onclick='math("+")' class ="redbutton" value="+" />
<br />
<input type="button" onclick='math("0")' value="0" />
<input type="button" onclick='math(".")' value="." />
<input type="button" id="resetbutton" onclick='c ("")' value="C" />
<input type="button" id="equalsbutton" onclick='e()' value="=" />
</fieldset>
</form>
</body>
</html>
Copy and paste the above code into your Notepad++ and save with any name of your choice with a dot html extention e.g(mycalculator.html) then open with your favorite brower Crome or mozila browser.
The logic above is that I assign OnClick event for all the buttons having numbers and arithmetic operators and I created three functions. Function c(val) is used for clearing the data from the display. When we click on "C" button, then onclick='c(""wink' event runs and searches for c(val) function and displays the value according to the parameter passed inside it (here, we have not passed any parameter so the input screen appears blank or clear).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment