Unsplashed background img 1
CodeForest - jQuery Calculator

jQuery - Easy Calculator

Main Objective

The objective will be to demonstrate basic knowledge of HTML, CSS, and jQuery to create your own MadLib game!.

Prerequisites

You will need to know some basic HTML, CSS, and jQuery methods for this course.

Sub Objective

We will be going over the following tags in this tutorial:
  • HTML source code for the Calculator
  • CSS source code for the Calculator
  • Adding your own styles!

Part 1 - HTML

Here we need to place the HTML code to tell it where to generate the story and what elements to use to do so.

Example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div id="container">
<form name="calculator">
	<input class="textfield" type="textfield" name="ans" value=" ">
    <input class="key3" type="button" value="del" onClick="document.calculator.ans.value = document.calculator.ans.value.substring(0, document.calculator.ans.value.length - 1)">
    <br>
    <!--first row-->
    <input class="key" type="button" value="7" onClick="document.calculator.ans.value+='7'">
    <input class="key" type="button" value="8" onClick="document.calculator.ans.value+='8'">
    <input class="key" type="button" value="9" onClick="document.calculator.ans.value+='9'">
    <input class="key2" type="button" value="+" onClick="document.calculator.ans.value+='+'">
    <br>
    <!--second row-->
    <input class="key" type="button" value="4" onClick="document.calculator.ans.value+='4'">
    <input class="key" type="button" value="5" onClick="document.calculator.ans.value+='5'">
    <input class="key" type="button" value="6" onClick="document.calculator.ans.value+='6'">
    <input class="key2" type="button" value="-" onClick="document.calculator.ans.value+='-'">
    <br>
    <!--third row-->
    <input class="key" type="button" value="1" onClick="document.calculator.ans.value+='1'">
    <input class="key" type="button" value="2" onClick="document.calculator.ans.value+='2'">
    <input class="key" type="button" value="3" onClick="document.calculator.ans.value+='3'">
    <input class="key2" type="button" value="*" onClick="document.calculator.ans.value+='*'">
    <br>
    <!--fourth row-->
    <input class="key2 key4" type="reset" value="C">
    <input class="key" type="button" value="0" onClick="document.calculator.ans.value+='0'">
    <input class="key2" type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
    <input class="key2 key5" type="button" value="/" onClick="document.calculator.ans.value+='/'">
</form>
</div>

<button id="submit">Create Story</button>

<div id="story"></div>

Part 2 - CSS

The CSS section is fairly simple to manipulate to your liking.

Example:

  	body{ margin: 0;
	  padding: 0; }

#container{ width: 450px;
			height: 560px;
			background-color: honeydew;
			border: 1px solid black;
			border-radius: 25px;
			margin: 0 auto; }

.textfield{ width: 380px;
			height: 100px;
			text-align: center;
			border-radius: 25px 0px 0px 0px;
			padding: 10px;
			font-size: 45px; }

input{ border: 1px solid #333333;
	   outline: none;
	   transition: color .6s, background-color .6s, border-radius .6s, border .6s, font-size .6s; }
.key:hover{ border-radius: 25px;
			 font-size: 32px; }



.key{ width: 100px;
	  margin: 1%;
	  background-color: #333333;
	  color: green;
	  height: 100px;
	  font-size: 30px; }

.key2{ width: 100px;
	  margin: 1%;
	  background-color: white;
	  color: red;
	  height: 100px;
	  font-size: 30px; }
.key2:hover{ border: 15px outset red;
			 border-radius: 25px;
			 font-size: 32px; }

.key3{ width: 48px;
	  height: 122px;
	  float: right;
	  background-color: white;
	  border-radius: 0px 25px 0px 0px;
	  color: #333333;
	  font-size: 15px; }
.key3:hover{ background-color: red;
			 color: white; }

.key4{ border-radius: 0px 0px 0px 25px; }

.key5{ border-radius: 0px 0px 25px 0px; }
  

Now test your new undertanding here with the codepen!

Here you can try plugging in your own styles to practice before you place it into your own site
You can click back and forth between the HTML, CSS, and jQuery tabs to see all the working components or click in the top right corner to enlarge the pen for a better look.

See the Pen Calculator by Alex Coy (@CoyFish) on CodePen.