contactbapugraphics@gmail.com

+91 9891501300

Share
Latest Post
Enjoyed This Article?
Join our community of 3 million people and get updated every week We have a lot more just for you! Lets join us now
JavaScript Practice Question
JavaScript Practice Question
JavaScript

Basic Calculator with Plus, Minus, Multiple, Division.

HTML code

<!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">
    <script src="script.js"></script>
    <title>The student passes or fails if marks above 40% student pass otherwise he or she fails.</title>

</head>

<body>

    <div class="container">
        <form action="">
        
        <h3>Insert First number: <input class="one" id="firstNumber" type="number" /></h3>
        <h3>Insert Second number: <input class="two" id="secondNumber" type="number" /></h3>
        <h3>The Result is : <div id="result"></div> </h3>
        <input type="button" class="add btn" onclick="AddBy()" value="Add">
        <input type="button" class="minus btn" onclick="MinusBy()" value="Minus">
        <input type="button" class="multiply btn" onclick="multiplyBy()" value="Multiply">
        <input type="button" class="divide btn" onclick="divideBy()" value="Divide">
    </form>
</div>

</body>

CSS

.container {
    width: 450px;
    height:170px;
    border: 2px solid black;
}



h3 {
    margin-left: 30px;
}

.one {
    position: absolute;
    left: 250px;
    top: 32px;
}

.two {
    position: absolute;
    left: 250px;
    top: 74px;
}

#result{
    display: inline;
}
.btn{
    margin-left: 50px;
}


#answer1 {
    display: inline;
}

#answer2 {
    display: inline;
}

JavaScript code

 
function AddBy() 
{ 
        num1 =  document.getElementById("firstNumber").value;
        num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = parseInt(num1) + parseInt(num2);
}
function MinusBy() 
{ 
        num1 = document.getElementById("firstNumber").value;
        num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 - num2;
}


function multiplyBy()
{
        num1 = document.getElementById("firstNumber").value;
        num2 = document.getElementById("secondNumber").value;
        document.getElementById("result").innerHTML = num1 * num2;
}

function divideBy() 
{ 
        num1 = document.getElementById("firstNumber").value;
        num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 / num2;
}

Calculate the Parameter and Area of the Rectangle.

HTML code

<!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">
    <script src="script.js"></script>
    <title>Area and parameter of Rectangle using javascript</title>

</head>

<body>
    <div class="container">
        <form action="">
            <h3>Width of Rectangle : <input class="one" id="width" type="text" /></h3>
            <h3>Height of Rectangle : <input class="two" id="height" type="text" /></h3>
            <h3>Area of Rectangle : <div id="widthis"></div>
            </h3>
            <h3>Parameter of Rectangle : <div id="heightis"></div>
            </h3>
            <input type="button" onclick="result()" value="Result">

        </form>
    </div>
</body>

</html>

CSS code

.container {
    width: 450px;
    height: 210px;
    border: 2px solid black;
}

input {
    margin-left: 200px;
}

h3 {
    margin-left: 30px;
}

.one {
    position: absolute;
    left: 44px;
    top: 32px;
}

.two {
    position: absolute;
    left: 44px;
    top: 74px;
}

.three {
    position: absolute;
    left: 44px;
    top: 114px;
}

.four {
    position: absolute;
    left: 44px;
    top: 151px;
}

#heightis {
  display: inline;
}

#widthis {
  display: inline;
}

JavaScript code

function result(){
var width = document.getElementById("width").value;
var height = document.getElementById("height").value;
var area = width*height;
var parameter = 2*(width+height);
document.getElementById("widthis").innerHTML = area ;
document.getElementById("heightis").innerHTML = parameter ;
};

Do yourself

Calculate Marks and Percentages.

Calculate Net Salary.

Calculate Parameter and Area of Circle

Categories

Top Courses

Learn More About Multimedia & Increase You Knowledge .

Softwares

Softwares

Most In Demand Multimedia Softwares To Learn From Bapu Graphics .

Coding

Coding

Most Popular Languages to Learn Development Skills From Bapu Graphics .

Published: October 3, 2022
Writen by