Calcutator By Html ,Css And JavaScript.
Hello, Guys Today i am going to Share you a Calculator Project That can we make by Html, Css And JavaScript Programming Language. This is a basic Project that you should try to make at the beginning of your front end development Journey.Here we are using Html , Css And Java Script For our Project Development.
Html with Java Scripts Code:-
<!DOCT<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="cal2.css">
<title> JavaScript Calculator </title>
</head>
<!-- Code is in the description please Check -->
<body>
<div class="container">
<h1 style="text-align: center;font-size: 28px;">Code Without Doubt</h1>
<div class="formstyle">
<form name="form1">
<!-- This input box shows the button pressed by the user in calculator. -->
<input class="display" id="calc" type="text" name="answer">
<div class="button">
<input class="on" type="button" value="On" onclick=
"form1.answer.value = '' ">
<input type="button" value="/" onclick="form1.answer.
value += '/' ">
<input type="button" value="*" onclick="form1.answer.
value += '*' ">
<input class="clear" type="button" value="Clear"
onclick="form1.answer.value = '' ">
<input type="button" value="7" onclick="form1.answer.
value += '7' ">
<input type="button" value="8" onclick="form1.answer.
value += '8' ">
<input type="button" value="9" onclick="form1.answer.
value += '9' ">
<input type="button" value="+" onclick="form1.answer.
value += '+' ">
<input type="button" value="4" onclick="form1.answer.
value += '4' ">
<input type="button" value="5" onclick="form1.answer.
value += '5' ">
<input type="button" value="6" onclick="form1.answer.
value += '6' ">
<input type="button" value="-" onclick="form1.answer.
value += '-' ">
<input type="button" value="1" onclick="form1.answer.
value += '1' ">
<input type="button" value="2" onclick="form1.answer.
value += '2' ">
<input type="button" value="3" onclick="form1.answer.
value += '3' ">
<input type="button" value="*" onclick="form1.answer.
value += '*' ">
<input type="button" value="." onclick="form1.answer.
value += '.' ">
<input type="button" value="0" onclick="form1.answer.
value += '0' ">
<input type="button" value="00" onclick="form1.answer.
value += '00' ">
<!-- When we click on the '=' button, the onclick ()
shows the sum results on the calculator screen. -->
<input type="button" value="=" onclick="form1.answer.
value = eval (form1.answer.value) ">
</div>
</form>
</div>
</div>
<script>
</script>
</body>
</html>
This is CSS Code :-
This Code You Should write in a cal2.css file in same folder where you make our Calculator Project.
*{
box-sizing: border-box;
font-size: 18px;
font-weight: 600;
color: beige;
}
h1{
background: linear-gradient(135deg,cyan,blue);
color: black;
}
body{
display: flex;
justify-content: center;
padding-top: 1%;
background:linear-gradient(135deg,red,blue,cyan,silver,green,black);
}
.container{
border: solid 1px black;
width: 358px;
height: 590px;
background-color: #000000c3;
border-radius: 15px;
}
.display{
border: solid 1px black;
width: 94%;
height: 80px;
margin: 5px 10px;
box-shadow: none;
background-color: black;
color: white;
border-radius: 15px;
font-size: 26px;
padding: 10px;
}
.button{
background-color: #000000;
border: solid 1px black;
display: flex;
flex-wrap: wrap;
margin-top: 0px;
margin: 10px;
height: 410px;
justify-content: space-between;
border-radius: 15px;
}
input,button{
width: 50px;
height: 50px;
border: solid 1px black;
border-radius: 100%;
justify-content: space-between;
margin: 14px;
box-shadow: 0px 0px 18px 1px;
background-color: black;
}
input:hover,button:hover{
box-shadow: 0px 0px 18px 1px red ;
}
.clear{
font-size: 16px;
}
.active{
box-shadow: 0px 0px 18px 1px green ;
}
Html:-
The Hypertext Markup Language is standard markup language. Which is designed to displayed in a web Brower. Html is not a programming Language it is a markup Language.
Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages.
CSS:-
The Full form of CSS is Cascading Style Sheets. It is a stylesheet language used describe the presentation of a document written in HTML or XML. CSS describe how the content Show on the Screen.
CSS Properties:-
- Border
- Color
- Background Color
- font-size
- :hover
Java Script:-
Java Script is a programming Language and core technology of the world wide web.
Websites use JavaScript on the client side for webpage behavior. All major web browser's have a dedicated JavaScript engine to execute the code n user's devices.
Comments
Post a Comment