How To Create A Simple Calculator (using Javascript ) - Programming

Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,150,839 members, 7,810,227 topics. Date: Saturday, 27 April 2024 at 12:58 AM

How To Create A Simple Calculator (using Javascript ) - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / How To Create A Simple Calculator (using Javascript ) (2533 Views)

How To Build A Simple Calculator Using Html, Css And JS / Creating A Simple Calculator Using HTML,CSS And Javascript / Building A Simple Calculator With Android Studio (2) (3) (4)

(1) (Reply) (Go Down)

How To Create A Simple Calculator (using Javascript ) by Ebrus1(m): 11:05am On Jul 28, 2017

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 b able to flow well with this tutorial.

And for those who are totally new to HTML5, CSS 3, JavaScript ). Visit this thrend below
https://www.nairaland.com/3949406/learn-how-create-website-scratch

[So, this tutorial will start immediately it has at least 50comments and 400 views]

All you have to do is sit back, visit the thread, read the posts, ask
questions (if any), contribute to or debunk posted tutorials. And you do
all of this without even leaving Nairaland! smiley How easier can it be?
Let’s set the ball rolling!!

Screenshot Of The Calculator Below

Cc; lalasticlala

1 Like

Re: How To Create A Simple Calculator (using Javascript ) by fredasue: 5:39am On Jul 29, 2017

I'll be the first person to comment. Let this ball get rolling.

Re: How To Create A Simple Calculator (using Javascript ) by stonemasonn: 8:08am On Jul 29, 2017

I'm also working on one too.

Nice one op, hope to learn something new.

Re: How To Create A Simple Calculator (using Javascript ) by Ebrus1(m): 9:00am On Jul 29, 2017

fredasue:
I'll be the first person to comment. Let this ball get rolling.

Yeah you are welcome, I'm still waiting for more comments before the tutorial kick off

Re: How To Create A Simple Calculator (using Javascript ) by Ebrus1(m): 9:01am On Jul 29, 2017

stonemasonn:
I'm also working on one too.

Nice one op, hope to learn something new.

Yea

Re: How To Create A Simple Calculator (using Javascript ) by SimpleBea(m): 12:05pm On Jul 29, 2017

Want to learn too

Re: How To Create A Simple Calculator (using Javascript ) by melodyogonna(m): 11:56am On Jul 30, 2017

following, i love this

Re: How To Create A Simple Calculator (using Javascript ) by turenshi(m): 2:46pm On Jul 30, 2017

Good one

Re: How To Create A Simple Calculator (using Javascript ) by Ebrus1(m): 10:04am On Aug 03, 2017

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).

Continue later...

Oya, turenshi, melodyogonna, SimpleBea, stonemasonn, fredasue. The tutorial has started help me mention others who will like learn how to create a calculator using JavaScript.

Re: How To Create A Simple Calculator (using Javascript ) by Ebrus1(m): 10:46am On Aug 03, 2017

 
<!DOCTYPE html>
    <html>
    <head>
    <title>My Calculator</title>
    <style type="text/css" all="media">
    /CSS CODE/
body{
              margin:auto
              }
    h2{
    text-shadow: 2px 2px 10px white; 
    float:left;
    z-index:2;
    color:peru;
    position:relative; 
    left:280px;
    top:110px; 
    }
    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:#ffffff;
    background-color:darkkhaki;
    }
    
  </style>
  
 <!--JAVASCRIPT CODE BELOEW //-->
    <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>Ebrusblog.com</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.

Re: How To Create A Simple Calculator (using Javascript ) by Ebrus1(m): 11:00am On Aug 03, 2017

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(""' 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).

Function v(val) is used for typing numbers as well as mathematical operators.

Function e() is used for evaluating, i.e., on clicking "=" button, value inside the Id="d" is solved.

Drop Your Questions below!!

1 Like

Re: How To Create A Simple Calculator (using Javascript ) by melodyogonna(m): 4:03pm On Aug 03, 2017

Ebrus1:
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).

Continue later...

Oya, turenshi, melodyogonna, SimpleBea, stonemasonn, fredasue. The tutorial has started help me mention others who will like learn how to create a calculator using JavaScript.

thanks for the call

1 Like

Re: How To Create A Simple Calculator (using Javascript ) by McTobe(m): 8:45pm On Aug 03, 2017

more more. do we have people here on Linux

Re: How To Create A Simple Calculator (using Javascript ) by CryptoCoinr(f): 9:01pm On Aug 03, 2017

Hmm, you say you're using CSS3 but you're using

float

and

position

for that layout rather than flexbox. And why are you using inline event listeners?

FYI, wrap your code in [ code ] actual code goes here... [/ code] to preserve the indentation.

Re: How To Create A Simple Calculator (using Javascript ) by SimpleBea(m): 10:11pm On Aug 03, 2017

following

Re: How To Create A Simple Calculator (using Javascript ) by Ebrus1(m): 11:56pm On Aug 09, 2017

CryptoCoinr:

FYI, wrap your code in [ code ] actual code goes here... [/ code] to preserve the indentation.

Done that bro

(1) (Reply)

How To Download UC Browser For Android Phone|www.wap.ucweb.com / What I Learnt From Building My First App / How Can I Track Fone Number Location In Nigeria

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 29
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.