2

New to Javascript Need to make a calculator by applying HTML CSS and Javascript. With all the buttons placed need to make a calculator app like this by calling the onclick function on each of the button wtih arguments passed into it. Please help to get started with it. Calculator Current Design: Calculator Design

Here is the HTML and CSS Code: 

body {
  font-family: 'Open Sans', sans-serif;
  background-color: black;
}
#container {
  width: 1000px;
  height: 550px;
  background-image: linear-gradient(#0000004d, rgba(0, 0, 0, 0.3)),
    url(bgcalc.png);
  margin: 20px auto;
}
#calculator {
  width: 320px;
  height: 520px;
  background-color: #eaedef;
  margin: 0 auto;
  top: 20px;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#result {
  height: 120px;
  margin-bottom: 20px;
}
#history {
  text-align: right;
  height: 20px;
  margin: 0 20px;
  padding-top: 20px;
  font-size: 15px;
  color: #919191;
}
#output {
  text-align: right;
  height: 60px;
  margin: 10px 20px;
  font-size: 30px;
  background-color: #afbec4;
}
#keyboard {
  height: 400px;
}
.operator,
.number,
.empty {
  width: 67px;
  height: 50px;
  margin: 6px;
  float: left;

  border-width: 0;
  font-weight: bold;
  font-size: 15px;
}
#clear {
  background-color: #cb4e4d;
  border-radius: 45%;
}
.number,
.empty {
  background-color: #5f7d8c;
  border-radius: 10px;
  color: white;
}
.number,
.operator {
  cursor: pointer;
  background-color: #5f7d8c;
  border-radius: 10px;
  color: white;
}
.operator:active,
.number:active {
  font-size: 13px;
}
.operator:focus,
.number:focus,
.empty:focus {
  outline: 0;
}
button:nth-child(4) {
  font-size: 9px;
  background-color: #cb4e4d;
  border-radius: 10px;
}
button:nth-child(8) {
  font-size: 20px;
  background-color: #ffa500;
  border-radius: 10px;
}
button:nth-child(12) {
  font-size: 20px;
  background-color: #f08080;
  border-radius: 10px;
}
button:nth-child(16) {
  font-size: 20px;
  background-color: #7d93e0;
  border-radius: 10px;
}
button:nth-child(20) {
  font-size: 20px;
  background-color: #9477af;
  border-radius: 10px;
}
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
        <title>A simple calculator</title>
    </head>
    <body>
        <div id="container">
            <div id="calculator">
                <div id="result">
                    <div id="history">
                        <p id="history-value"></p>
                    </div>
                    <div id="output">
                        <p id="output-value"></p>
                    </div>
                </div>
                <div id="keyboard">
                    <button class="operator" id="clear">C</button>
                    <button class="operator" id="backspace">+-</button>
                    <button class="operator" id="%">%</button>
                    <button class="operator" id="/">Console <br>Log</button>
                    <button class="number" id="7">7</button>
                    <button class="number" id="8">8</button>
                    <button class="number" id="9">9</button>
                    <button class="operator" id="*">&divide</button>
                    <button class="number" id="4">4</button>
                    <button class="number" id="5">5</button>
                    <button class="number" id="6">6</button>
                    <button class="operator" id="-">&times;</button>
                    <button class="number" id="1">1</button>
                    <button class="number" id="2">2</button>
                    <button class="number" id="3">3</button>
                    <button class="operator" id="+">-</button>
                    <button class="empty" id="empty">0</button>
                    <button class="number" id="0">.</button>
                    <button class="empty" id="empty">=</button>
                    <button class="operator" id="=">+</button>
                </div>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>

Improve this question
6
  • can I see your script.js file? Commented Mar 2, 2022 at 5:40
  • Its empty at the moment Commented Mar 2, 2022 at 5:41
  • OK, no problem, so you want to know how to call a function and pass arguments to it ? Commented Mar 2, 2022 at 5:42
  • Yes need to get started with some of these calculator buttons Commented Mar 2, 2022 at 5:45
  • You need to come up with an algorithm on how you think a calculator works inside. Then use that algorithm as a guide to develop the javascript. Commented Mar 2, 2022 at 5:46

1 Answer 1

Reset to default
2

here's what you could go for as a start:

assign an onclick attribute to all of the buttons, and as a parameter pass their value, and add a main input which all the values would be added into:

<input type="text" id="mainInput" readonly>
<button class="operator" id="clear">C</button>
                <button class="operator" id="backspace" onclick="addChar("-")">+-</button>
                <button class="operator" id="%" onclick="addChar("%")">%</button>
                <button class="operator" id="/">Console <br>Log</button>
                <button class="number" id="7" onclick="addChar("%")">7</button>
                <button class="number" id="8" onclick="addChar("%")">8</button>
                <button class="number" id="9" onclick="addChar("%")">9</button>
                <button class="operator" id="*" onclick="addChar("%")">&divide</button>
                <button class="number" id="4" onclick="addChar("%")">4</button>
                <button class="number" id="5" onclick="addChar("%")">5</button>
                <button class="number" id="6" onclick="addChar("%")">6</button>
                <button class="operator" id="-" onclick="addChar("%")">&times;</button>
                <button class="number" id="1" onclick="addChar("1")">1</button>
                <button class="number" id="2" onclick="addChar("2")">2</button>
                <button class="number" id="3" onclick="addChar("3")">3</button>
                <button class="operator" id="+" onclick="addChar("-")">-</button>
                <button class="empty" id="empty" onclick="addChar("%")">0</button>
                <button class="number" id="0" onclick="addChar(".")">.</button>
                <button class="empty" id="empty" onclick="addChar("=")">=</button>
                <button class="operator" id="=" onclick="addChar("+")">+</button>

Then in JS, create the onclick function:

    function addChar(val) {
        document.getElementById("mainInput").value += val
}

All I'm doing here is getting the mainInput's value and adding the the value of the button clicked into it.

This should set you with something to start with, good luck!

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.