Sum of Two number using html ,css , javascript Dom
In this blog we will learn about dom exercise in which we will take input two number and sum them. It is beginner friendly exercise
Output of the Program:
Tutorials Link
Note : make sure HTML and javascript files are in the same folder
Html Code
<!DOCTYPE html>
<html>
<head>
<title>Responsive Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Mourya Works (Sum of Two Number)</h1>
<div class="wrapper">
<label for="">A</label>
<input type="number" id="a" required placeholder="Enter Number">
<label for="">B</label>
<input type="number" id="b" required placeholder="Enter Number">
<button class="b" onclick="sum()">result</button></div>
<div id="result"></div>
</div>
<div>
</div>
<script src="script.js"></script>
</body>
</html>
Css Code:
Save CSS file as style.css to make sure it run perfectly
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
background-color: rgb(45, 160, 243);
}
h1{
text-align: center;
}
.container{
background-color: #ffffff;
width: 120vmin;
height: 40vmin;
max-width: 37.5em;
padding: 3em 2.5em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.62em;
box-shadow: 0 1.2em 2.5em rgba(0, 21, 44, 0.18);
}
input{
font-size: large;
}
.wrapper{
display: flex;
justify-content: space-between;
/* gap: 1em; */
}
.b{
left: 50%;
position: absolute;
margin-top: 50px;
width: 100px;
transform: translateX(-50%);
font-size: 20px;
border-radius: .5em;
}
#result{
position: absolute;
margin-top: 80px;
left: 50%;
transform: translateX(-50%);
}
Javascript Code:
Save javascript filename as script1.js else it will not work
function sum(){
let a = Number(document.getElementById("a").value);
let b = Number(document.getElementById("b").value);
let r = Number(a+b);
document.getElementById("result").textContent= `sum is ${r}`
}
.png)
0 Comments
if you are not getting it then ask i am glad to help