Build this JS calculator

codinglabsolution

Build this JS calculator

"Welcome to our JavaScript Calculator: Where Numbers Meet Innovation. Explore the Fusion of Functionality and Intuitiveness in Mathematical Computing. Effortlessly Perform Complex Calculations with Speed and Accuracy. Dive into a World of Dynamic Computation, Where Every Calculation is Just a Click Away."

Build this JS calculator .[Source Code]

To create this website, you'll need two files: an HTML file and a CSS file. Start by crafting an HTML file named index.html. Remember to ensure that the file has a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Build this JS calculator</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="calculator"> <input id="display" readonly> <div id="keys"> <button onclick="appendToDisplay('+')" class="operator-btn">+</button> <button onclick="appendToDisplay('7')">7</button> <button onclick="appendToDisplay('8')">8</button> <button onclick="appendToDisplay('9')">9</button> <button onclick="appendToDisplay('-')"class="operator-btn">-</button> <button onclick="appendToDisplay('4')">4</button> <button onclick="appendToDisplay('5')">5</button> <button onclick="appendToDisplay('6')">6</button> <button onclick="appendToDisplay('*')"class="operator-btn">*</button> <button onclick="appendToDisplay('1')">1</button> <button onclick="appendToDisplay('2')">2</button> <button onclick="appendToDisplay('3')">3</button> <button onclick="appendToDisplay('/')"class="operator-btn">/</button> <button onclick="appendToDisplay('0')">0</button> <button onclick="appendToDisplay('.')">.</button> <button onclick="calculate()">=</button> <button onclick="clearDisplay()"class="operator-btn">C</button> </div> </div> <script> // برنامج الآلة الحاسبة const display = document.getElementById("display"); function appendToDisplay(input) { display.value += input; } function clearDisplay() { display.value = ""; } function calculate() { try { display.value = eval(display.value); } catch(error) { display.value = "Error"; } } </script> </body> </html>
CSS adds style to an HTML page, making it visually appealing. To enhance the attractiveness of your page, generate a CSS file named style.css. Ensure that the file has a .css extension.


body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: hsl(0, 0%, 95%);
}

#calculator {
    font-family: Arial, sans-serif;
    background-color: hsl(0, 0%, 15%);
    border-radius: 15px;
    max-width: 500px;
    overflow: hidden;
}

#display {
    width: 100%;
    padding: 20px;
    font-size: 5rem;
    text-align: left;
    border: none;
    background-color: hsl(0, 0%, 20%);
}
#keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 25px;
}

button {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    border: none;
    background-color: hsl(0, 0%, 30%);
    color: white;
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
}
button:hover {
    background-color: hsl(0, 0%, 40%);
}

button:active {
    background-color: hsl(0, 0%, 50%);
}

.operator-btn {
    background-color: hsl(35, 100%, 55%);
}

.operator-btn:hover {
    background-color: hsl(35, 100%, 65%);
}

.operator-btn:active {
    background-color: hsl(35, 100%, 75%);
}

We trust that you'll appreciate this captivating Build this JS calculator .

Build this JS calculator , please feel free to reach out to us. You can either contact us directly or leave a comment, and we will do our best to assist you promptly.

codinglabsolution says...
code copied

إرسال تعليق

ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
أُووبس!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.