Skip to content
Advertisements

JavaScript Calculator(radio button)

HTML CODE

<div class="box">
        <h2>calculator</h2>
        <input type="text" id="number1" placeholder="number1"/><br>
        <input type="text" id="number2" placeholder="number2"/><br>
        <label><input type="radio" id="rad1" name="same" />Collection<br></label>
        <label><input type="radio" id="rad2" name="same" />Extraction<br></label>
        <label><input type="radio" id="rad3" name="same" />Multiplication<br></label>
        <label><input type="radio" id="rad4" name="same" />Division<br></label>
        <input type="button" id="but" value="calculate" />
        <div id="res"></div>
    </div>

CSS CODE:

body{
           margin:0;
           padding:0;
           background:#262626;
           text-transform:uppercase;
           font-family:'AR JULIAN';
           font-size:14px;
       }
       h2{
           font-size:28px;
           padding:0;
           margin:0;
           margin-bottom:20px;
           color:#930000
       }
       .box{
           position:absolute;
           top:50%;
           left:50%;
           transform:translate(-50%,-50%);
           padding:30px;
           background:#967200;
           border-radius:20px;
       }
       input{
           margin:5px;
       }
       input[type="text"]{
           background:transparent;
           border:0;
           border-bottom:2px solid #930000;
           padding:7px;
           outline:none;
           font-size:17px;
       }
        input[type="button"]{
            margin-left:90px;
            padding:5px;
        }
        #res{
            background:#000000;
            color:#fff;
            font-size:16px;
            padding:4px;
        }

JS CODE:

var calculate = document.getElementById("but");
        calculate.onclick = function () {
            var num1 = Number(document.getElementById("number1").value);
            var num2 = Number(document.getElementById("number2").value);
            if (document.getElementById("rad1").checked) {
                var result = num1 + num2
                document.getElementById("res").innerHTML = result;
            } else if (document.getElementById("rad2").checked) {
                var result = num1 - num2
                document.getElementById("res").innerHTML = result;
            } else if (document.getElementById("rad3").checked) {
                var result = num1 * num2
                document.getElementById("res").innerHTML = result;
            } else if (document.getElementById("rad4").checked) {
                var result = num1 / num2
                document.getElementById("res").innerHTML = result;
            }
        }
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: