Calculator
Hello friends welcome to my blog
Friends, my name is Shubham Verma and today we will learn to make Calculator with the help of html, css, javascript.
Description:- Hello friends, my name is Shubham Verma, welcome to my YouTube channel, today we will make a Calculator with the help of HTML, CSS and JavaScript, watch the full video and subscribe the channel and like the video if you like it, thank you
Step.1:-
Create new folder in your dektop and open visual studio code editor and click file option and create new htmlfile Ctrl+Alt+windows+N key and create file name and press enter to select dektop new folder and And create all three files inside the folder Html Css and Javascript
Step.2:-
Press key shift+! and enter to find html structure then.
Step.3:-
Copy this code and watch my youtube videos.
Step.4:-
This javascript methods use in project.
The Javascript Array.from() method is used to create a new array instance from a given array. In the case of a string, every alphabet of the string is converted to an element of the new array instance and in the case of integer values, a new array instance simply takes the elements of the given array.
Example 1: In this example, we will see the basic use of the Array from() method.
Output: T,h,i,s, ,i,s, ,J,a,v,a,S,c,r,i,p,t, ,A,r,r,a,y,
,f,r,o,m,(,), ,M,e,t,h,o,d.
Example 2:console.log(Array.from([1, 2, 3],x => x + x));
Output: 2,4,6
HTMl file:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="calculator">
<input class="input" placeholder="0" type="input" id="input">
<div class="buttons_base">
<div class="operators">
<div class="button">+</div>
<div class="button">-</div>
<div class="button">*</div>
<div class="button">/</div>
</div>
<div class="leftpanel">
<div class="numbers">
<div class="button">7</div>
<div class="button">8</div>
<div class="button">9</div>
</div>
<div class="numbers">
<div class="button">4</div>
<div class="button">5</div>
<div class="button">6</div>
</div>
<div class="numbers">
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
</div>
<div class="numbers">
<div class="button">0</div>
<div class="button">.</div>
<div class="button">C</div>
</div>
</div>
<div class="button equal">=</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
Css file:-
body{
width:500px;
margin:4% auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
letter-spacing: 5px;
font-size: 1.8rem;
}
.input{
border-radius: 1px;
border: 1px solid #ddd;
text-align: right;
transition: all .2s ease-in-out;
height: 60px;
padding-right: 15px;
padding-top: 10px;
margin-right: 6px;
font-size: 2.2rem;
overflow-x: auto;
}
.operators div{
border-radius: 1px;
border: 1px solid #bbb;
text-align: center;
transition: border-color all .2s ease-in-out , background-color .2s, box-shadow .2s ;
display: inline-block;
width: 77px;
padding: 10px;
margin: 20px 4px 10px 0px;
cursor: pointer;
background-color: #bbb;
}
.numbers div{
border-radius: 1px;
border: 1px solid #ddd;
text-align: center;
transition: border-color all .2s ease-in-out , background-color .2s, box-shadow .2s ;
display: inline-block;
width: 80px;
padding: 10px;
margin: 10px 4px 10px 0px;
cursor: pointer;
background-color: #bbb;
}
div .equal{
border-radius: 1px;
border: 1px solid #4265b7;
text-align: center;
transition: all .2s ease-in-out ;
display: inline-block;
width: 15%;
padding: 127px 10px;
margin: 10px 4px 10px 0px;
cursor: pointer;
background-color: #5252cd;
color: #fff;
vertical-align: top;
}
.calculator{
padding: 20px;
border-radius: 1px;
-webkit-box-shadow: 0px 1px 4px 0px rgb(0,0,0,0.2);
box-shadow: inset 0px 1px 4px 0px rgb(0,0,0,0.2);
}
.input:hover{
border:1px solid #bbb;
-webkit-box-shadow: 0px 1px 4px 0px rgb(0,0,0,0.2);
box-shadow: inset 0px 1px 4px 0px rgb(0,0,0,0.2);
}
.operators div:hover{
background-color: #ddd;
border-color: #aaaa;
-webkit-box-shadow: 0px 1px 4px 0px rgb(0,0,0,0.2);
box-shadow: inset 0px 1px 4px 0px rgb(0,0,0,0.2);
}
.numbers div:hover{
background-color: #7699e9;
color: #fff;
border-color: #aaaa;
-webkit-box-shadow: 0px 1px 4px 0px rgb(0,0,0,0.2);
box-shadow: inset 0px 1px 4px 0px rgb(0,0,0,0.2);
}
div.equal:hover{
background-color:#7699e9 ;
border-color: #696fe4aa;
-webkit-box-shadow: 0px 1px 4px 0px rgb(0,0,0,0.2);
box-shadow: inset 0px 1px 4px 0px rgb(0,0,0,0.2);
}
.operators div:active{
font-weight: bold;
}
.numbers div:active{
font-weight: bold;
}
div .equal:active{
font-weight: bold;
}
.leftpanel{
display: inline-block;
}
javascript file:-
let string = "";
let buttons =document.querySelectorAll(".button")
Array.from(buttons).forEach((button)=>{
button.addEventListener("click", (e)=>{
if(e.target.innerHTML == "="){
string =eval(string);
document.querySelector("input").value = string;
}
else if(e.target.innerHTML == "C"){
string = ""
document.querySelector("input").value = string;
}
else{
console.log(e.target)
string = string + e.target.innerHTML
document.querySelector("input").value = string;
}
})
})