How to create a calculator using HTML

HTML, Css और JavaScript की मदद से एक कैलकुलेटर कैसे बना सकते हैं?

How to create a calculator using HTML, Css and JavaScript ?

सबसे पहले HTML का उपयोग करके Calculator का Structure बनाते हैं। HTML एक वेब पेज बनाने के लिए स्टैण्डर्ड मार्कअप भाषा है। इससे एक वेब पेज की स्ट्रक्चर को तैयार करते हैं।

HTML Source code:

<!-- Created by Maxon-->



<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div id="calculator">
            <input id="display" value ="0.0" type="text" disabled/>
            <button onclick="allclear()">C</button>
            <button onclick="back()"><</button>
            <button onclick="add('%')">%</button>
            <button onclick="add('/')">÷</button>
            <button onclick="add('1')">1</button>
            <button onclick="add('2')">2</button>
            <button onclick="add('3')">3</button>
            <button onclick="add('*')">×</button>
            <button onclick="add('4')">4</button>
            <button onclick="add('5')">5</button>
            <button onclick="add('6')">6</button>
            <button onclick="add('-')">-</button>
            <button onclick="add('7')">7</button>
            <button onclick="add('8')">8</button>
            <button onclick="add('9')">9</button>
            <button onclick="add('+')">+</button>
            <button id="theme" onclick="theme()"> ‎ ‎</button>
            <button onclick="add('0')">0</button>
            <button onclick="add('.')">.</button>
            <button onclick="calc()">=</button>
       </div>
    </body>
</html>

HTML में ये कोडिंग बाद हमारे Calculator का स्ट्रक्चर बनकर तैयार हो चुका है।

अब इस Calculator के स्ट्रक्चर को Color व Design देने के लिए। Css language का उपयोग करेंगे। CSS का फुल फॉर्म “Cascading Style Sheet” है। इस भाषा का उपयोग किसी वेब pages के लेआउट को स्टाइल करने के लिए किया जाता है। CSS का उपयोग वेबसाइट को सुंदर और आकर्षक बनाने में किया जाता है। अगर आप Css भाषा को सिखना चाहते हैं तो आप हमारी ये पोस्ट Css COMPLETE COURSE IN HINDI पढ़ सकते हैं।

अब इस भाषा का उपयोग करके कैलकुलेटर के लेआउट को डिजाइन करेंगे।

Css Source code :

/* Created by Maxon */



body {
    margin:0;
}

:root{
    --bg:#ececec;
    --scolora:#d0d0d0;
    --scolorb:#f6f6f6;
    --tcolora:#aaa;
    --tcolorb:#777;
}

#calculator{
    position:absolute;
    height:100vh;
    width:100vw;
    background:var(--bg);
    overflow:hidden;
}
#display{
    position:absolute;
    height:20%;
    width:100%;
    background:var(--bg);
    border-radius:0 0 5vw 5vw;
    overflow:scroll;
    line-height:30vh;
    font-size:10vw;
    color:var(--tcolorb);
    text-align:right;
    font-weight:bold;
    border:0;
    box-shadow:0 .7vw 1vw var(--scolora);
}
#theme{
    background-image:url("https://i.dlpng.com/static/png/6841170_preview.png");
    background-size:70%;
    background-position:50%;
    background-repeat:no-repeat;
}
button{
    height:12vh;
    width:20vw;
    position:relative;
    top:25vh;
    border-radius:1vw;
    border:0;
    outline:none;
    background-color:var(--bg);
box-shadow:.4vw .4vw .6vw var(--scolora), -.4vw -.4vw .6vw var(--scolorb);
    font-size:7vw;
    font-weight:bold;
    color:var(--tcolora);
    margin:1.3vh 2vw;
}
button:hover{
    box-shadow:inset .5vw .5vw .8vw var(--scolora),inset -.5vw -.5vw .8vw var(--scolorb);
}
#theme{
    background-image:url("https://i.dlpng.com/static/png/6841170_preview.png");
    background-size:80%;
    background-position:50%;
    background-repeat:no-repeat;
}

Css भाषा की से कैलकुलेटर के लेआउट डिजाइन करने के बाद कैलकुलेटर कुछ इस तरह का दिखेगा।

लेकिन यह अभी भी कोई function नहीं कर सकता । इससे कोई गढ़ना कराने के लिऐ हमें JavaScript का उपयोग करना होगा। तब यह कोई भी Calculations करने में सक्षम हो जाएगा। तो अब इसके लिए JavaScript का उपयोग करेंगे।

अगर आप Css भाषा को सिखना चाहते हैं तो आप हमारी ये पोस्ट JAVASCRIPT COMPLETE COURSE IN HINDI पढ़ सकते हैं।

JavaScript Source code:

// Created by MAXON

alert("Maxon Poll Calculater")

function add(x){ 
 if(display.value == '0.0'){
     display.value = "";
     
 }
 display.value += x;
 navigator.vibrate(20);
}
function calc(){
    try{
        display.value = eval(display.value);
        navigator.vibrate(20);
    }
    catch{
        display.style.color = "#f00";
        
        navigator.vibrate([105,50,105,50,105]);
        setTimeout(function(){
            display.value = '0.0';
            display.style.color = "var(--tcolorb)";
        },500);
        
        
    }
    
}
var a = 1;
function back(){
    navigator.vibrate(20);
    display.value = display.value.substring(0,display.value.length-1);
}

function allclear(){
    display.value = '0.0';
    navigator.vibrate(20);
}
function theme(){
    navigator.vibrate(300);
    switch(a){
        case 0:
            document.body.style.setProperty("--bg", "#ececec");
            document.body.style.setProperty("--tcolora", "#aaa");
            document.body.style.setProperty("--tcolorb", "#777");
            document.body.style.setProperty("--scolora", "#d0d0d0");
            document.body.style.setProperty("--scolorb", "#f6f6f6");
            a = 1;
            break;
        case 1:
            document.body.style.setProperty("--bg", "#1B1B1B");
            document.body.style.setProperty("--tcolora", "#444");
            document.body.style.setProperty("--tcolorb", "#666");
            document.body.style.setProperty("--scolora", "#121212");
            document.body.style.setProperty("--scolorb", "#242424");
            a = 2;
            break;
        case 2:
            document.body.style.setProperty("--bg", "#008080");
            document.body.style.setProperty("--tcolora", "#aaa");
            document.body.style.setProperty("--tcolorb", "#ccc");
            document.body.style.setProperty("--scolora", "#004c4c");
            document.body.style.setProperty("--scolorb", "#66b2b2");
            a = 3;
            break;
        case 3:
            document.body.style.setProperty("--bg", "#189ad3");
            document.body.style.setProperty("--tcolora", "#ccc");
            document.body.style.setProperty("--tcolorb", "#eee");
            document.body.style.setProperty("--scolora", "#005073");
            document.body.style.setProperty("--scolorb", "#71c7ec");
            a = 4;
            break;
        case 4:
            document.body.style.setProperty("--bg", "#555");
            document.body.style.setProperty("--tcolora", "#aaa");
            document.body.style.setProperty("--tcolorb", "#eee");
            document.body.style.setProperty("--scolora", "#222");
            document.body.style.setProperty("--scolorb", "#777");
            a = 5;
            break;
        case 5:
            document.body.style.setProperty("--bg", "#ccac00");
            document.body.style.setProperty("--tcolora", "#ddd");
            document.body.style.setProperty("--tcolorb", "#fff");
            document.body.style.setProperty("--scolora", "#b29600");
            document.body.style.setProperty("--scolorb", "#e5c100");
            a = 0;
            break;
    }
}

JavaScript में coding करने के बाद अब हमारा कैलकुलेटर तैयार हो चुका है। अब हम इससे किसी भी प्रकार की गढ़ना कर सकते हैं।

Creat a calculator using HTML, Css, Javascript अगर आपको यह पोस्ट 📑 पसंद आई हो तो अपने मित्रों के साथ जरूर शेयर करें। धन्यवाद !

How to create a calculator using HTML, Css and JavaScript

How to create a calculator using HTML

1 Comments