Calculator Project

amitblog 28 Oct 2024 | 11:25 am Lab Work

अमित सर के इस ब्‍लॉग में नीचे जो codes बताया गया है, उस HTML Codes को आप Notepad ++ software में टाईप करें और उसे कोई एक नाम देकर सुरक्षित करें। जैसेे- calc.html और उसके बाद उस फाईल को रन कराने के लिए आप उस पर डब्‍ल click करे जिससे आपको एक सिम्‍पल सा कैल्‍कूलेेटर बन कर तैयार हो जाएगा। 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
    }
    .calculator {
        width: 300px;
        margin: 50px auto;
        background-color: #fff;
        border-radius: 5px;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .calculator input[type="text"] {
        width: 100%;
        margin-bottom: 10px;
        padding: 10px;
        font-size: 18px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
    .calculator input[type="button"] {
        width: 48%;
        padding: 10px;
        font-size: 18px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
    }
    .calculator input[type="button"]:hover {
        background-color: #f0f0f0;
    }
</style>
</head>
<body>

<div class="calculator">
    <input type="text" id="display" readonly>
    <input type="button" value="1" onclick="addToDisplay('1')">
    <input type="button" value="2" onclick="addToDisplay('2')">
    <input type="button" value="3" onclick="addToDisplay('3')">
    <input type="button" value="+" onclick="addToDisplay('+')">
    <input type="button" value="4" onclick="addToDisplay('4')">
    <input type="button" value="5" onclick="addToDisplay('5')">
    <input type="button" value="6" onclick="addToDisplay('6')">
    <input type="button" value="-" onclick="addToDisplay('-')">
    <input type="button" value="7" onclick="addToDisplay('7')">
    <input type="button" value="8" onclick="addToDisplay('8')">
    <input type="button" value="9" onclick="addToDisplay('9')">
    <input type="button" value="*" onclick="addToDisplay('*')">
    <input type="button" value="C" onclick="clearDisplay()">
    <input type="button" value="0" onclick="addToDisplay('0')">
    <input type="button" value="=" onclick="calculate()">
    <input type="button" value="/" onclick="addToDisplay('/')">
</div>

<script>
    function addToDisplay(value) {
        document.getElementById('display').value += value;
    }

    function clearDisplay() {
        document.getElementById('display').value = '';
    }

    function calculate() {
        var expression = document.getElementById('display').value;
        var result = eval(expression);
        document.getElementById('display').value = result;
    }
</script>

</body>
</html>

Share

Related Posts

Post Office PPF Calculator: हर महीने करें 1100 रुपये जमा, फिर 15 साल बाद कमाने की जरूरत नहीं

How to make a Calculator using HTML CSS JavaScript

Windows में calculator क्‍या है?