Sum of Two number using html ,javascript ,css Dom Exercise

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>
    <title>Responsive Design</title>
    <link rel="stylesheet" href="style.css">
    <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>
    <script src="script.js"></script>

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;
    background-color: rgb(45, 160, 243);

    text-align: center;

  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);
    font-size: large;
    display: flex;
    justify-content: space-between;
    /* gap: 1em; */
    left: 50%;
    position: absolute;
    margin-top: 50px;
    width: 100px;
    transform: translateX(-50%);
    font-size: 20px;
    border-radius: .5em;
    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}`

Post a Comment