3. How to make calculater in javascript
This tutorial is going to very much intersting for you
Todat in this tutorial I an going to teach you how to make a calculater in javascript. Javascript is a very powerfull programming language.
We can create many amazing projects by this language. It is very simple. I will be used simple methods to complete to complete this project.
It is very easy to make a calculater in javascript.
About the project
Before I start the tutorial I want to tell you about the function and features about this project. You will be fount 0-9 and (+)(-)(*)(/)(=)
charactor on the webpage. You can add,substract,multiply and division of numbers by this webapp. First you have to submit your numbers by clicking the numbers
when you will be clicking on the (=) you will be get the result.
to complete this project follow these steps
1. make a file named by index.html
In this file we will write some html5 basics code. We will be create buttons , screen, and the layout of the webpage.
You can copy the html5 code below under the line and pest it in your index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Recording</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="calculator">
<form>
<input type="text" name="" id="" class="screen">
</form>
<div class="buttons">
<!-- yellow -->
<button type="button" class="btn btn-yellow" data-num="*">*</button>
<button type="button" class="btn btn-yellow" data-num="/">/</button>
<button type="button" class="btn btn-yellow" data-num="-">-</button>
<button type="button" class="btn btn-yellow" data-num="+">+</button>
<!-- grey buttons -->
<button type="button" class="btn btn-grey" data-num=".">.</button>
<button type="button" class="btn btn-grey" data-num="9">9</button>
<button type="button" class="btn btn-grey" data-num="8">8</button>
<button type="button" class="btn btn-grey" data-num="7">7</button>
<button type="button" class="btn btn-grey" data-num="6">6</button>
<button type="button" class="btn btn-grey" data-num="5">5</button>
<button type="button" class="btn btn-grey" data-num="4">4</button>
<button type="button" class="btn btn-grey" data-num="3">3</button>
<button type="button" class="btn btn-grey" data-num="2">2</button>
<button type="button" class="btn btn-grey" data-num="1">1</button>
<button type="button" class="btn btn-grey" data-num="0">0</button>
<button type="button" class="btn-equal btn-grey">=</button>
<button type="button" class="btn-clear btn-grey">C</button>
</div>
</section>
<script src="main.js"></script>
</body>
</html>
This is our html code for project.
2. Create a new file named by style.css
don't forget to link this file to index.html file
In This file we will be style our html code. It is a stylesheet file
you can copy all the code below under the line and pest in your style.css file
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.calculator{
flex: 0 0 95%;
}
.screen{
width: 100%;
font-size: 7rem;
padding: 0.5rem;
background: rgb(41,41,56);
color: white;
border:none;
}
.buttons{
display: flex;
flex-wrap: wrap;
transition: all 0.5s linear;
}
button{
flex:0 0 25%;
border: 1px solid black;
padding: 0.25rem 0;
transition: all 2s ease;
}
button:hover{
background: blue;
}
.btn-yellow{
background: rgb(245,146,62);
color: white;
}
.btn-grey{
background: rgb(224,224,224);
}
.btn,.btn-equal,.btn-clear{
font-size: 4rem;
}
.btn-equal{
background: green;
}
.btn-clear{
background: red;
}
after pest this code our calcullater will be show very beautifully
3. make a new file named by main.js
This file is important to run calculater. In this file we will be write javascript code.
don't forget to link this file to index.html file
copy the text code under below under the line
//Wrap code in an IIFE
(function(){
var screen = document.getElementsByClassName('.screen');
var buttons = document.getElementsByClassName('.btn');
var clear = document.querySelector('.btn-clear');
var equal = document.querySelector('.btn-equal');
console.log(equal);
console.log(clear);
//retrieve data from numbers that are clicked
buttons.forEach(function(button){
button.addEventListener('click', function(e){
let value = e.target.dataset.num;
screen.value += value;
})
});
equal.addEventListener('click', function(e){
if(screen.value === ''){
screen.value = 'Please Enter a Value';
} else {
let answer = eval(screen.value);
screen.value = answer;
}
})
clear.addEventListener('click', function(e){
screen.value = '';
})
})(); //end IIFE
after pesting the code the calculater project will be run properly.
If you found some mistake you can comment you problem in comment section.
don't forget to share this artical in your friends
No comments:
Post a Comment
thanks for your comments