Ask a New Question
Menu

Log in to CodeSandbox and open your calculator program.

Using the web form that you’ve already created as your guide, add in two more buttons to your index.html file—one for addition and one for subtraction.
In your index.js file, create a function for addition and a function for subtraction. Make sure to call the functions correctly.
Test your new program. Did you get an incorrect value for the addition?
You may remember from Python that we sometimes have to convert strings to numbers in order to add them correctly. When you get the values from the text fields, they are automatically treated as strings. That’s not a problem for subtracting, multiplying, or dividing, but it is for addition because both strings get joined together. So, 3 + 5 becomes 35 instead of 8. To get around this, we’ll need to type cast the two variables to be integers using the built-in function parseInt(). Use parseInt() in this way:

num1 = parseInt(num1);
Code a similar line for num2. Put both of them after you get their values from the text fields, and you should get a correct result!

Add at least four CSS rules to your web form to make it look better. You might add in a background color, change the font size or style, change the color of the answer, or format the buttons. Check out this website for some ideas and tips on styling buttons:

In order to change the style of the text fields, use the CSS selector input. To change the style of the buttons, use the CSS selector button. You could also give your calculator a fancy title—the sky’s the limit!

A calculator program is a handy tool to have! Let’s create a shortcut on your desktop so that you can easily access it whenever you need to. From your open program in CodeSandbox, highlight the entire URL in the browser and drag it onto your desktop. You will need to have the browser window at half size to be able to see the desktop at the same time. Your shortcut has now been created! Let’s rename it to Calculator Program by right clicking on the shortcut and selecting Rename.
When you're finished, click on the Share button, and click the Copy Sandbox Link button. Submit the link to the dropbox. If you cannot get the program to work properly, include a paragraph explaining what you did to try to fix it. Also, submit a screenshot of the desktop shortcut you created for your program.
Sample JavaScript Code:
function add(){
var num1=document.getElementById("number1").value;
var num2=document.getElementById("number2").value;
num1 = parseInt(num1);
num2 = parseInt(num2);
document.getElementById("answer").innerHTML = num1 + num2;
}
function subtract(){
var num1=document.getElementById("number1").value;
var num2=document.getElementById("number2").value;
document.getElementById("answer").innerHTML = num1 - num2;
}
Sample HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body>
<form>
First number: <input type="text" id="number1" /><br><br>
Second number: <input type="text" id="number2" /><br><br>
<button type="button" onClick="add()">Add</button>
<button type="button" onClick="subtract()">Subtract</button>
<button type="button" onClick="multiply()">Multiply</button>
<button type="button" onClick="divide()">Divide</button>
</form>
<p>The answer is: </p>
<div id="answer"></div>
</body>
</html>
Sample CSS code:
button{
background-color: green;
color: white;
border-color: brown;
padding: 10px 10px;
font-size: 16px;
}
body{
color:green;
font-weight: bold;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
background-color: beige;
}
input{
width: 10%;
padding: 10px 10px;
}
#answer{
font-size: 18px;
font-weight: bold;
color: red;
}

1 answer

It looks like you're building a simple calculator in CodeSandbox with HTML, JavaScript, and CSS. Here's a guide on how to implement the necessary additions and changes based on your description.

Final HTML Code:

Make sure your index.html file looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <form>
        First number: <input type="text" id="number1" /><br><br>
        Second number: <input type="text" id="number2" /><br><br>
        <button type="button" onClick="add()">Add</button>
        <button type="button" onClick="subtract()">Subtract</button>
        <button type="button" onClick="multiply()">Multiply</button>
        <button type="button" onClick="divide()">Divide</button>
    </form>
    <p>The answer is: </p>
    <div id="answer"></div>
</body>
</html>

Final JavaScript Code:

Your index.js file should contain these functions:

function add(){
    var num1 = document.getElementById("number1").value; 
    var num2 = document.getElementById("number2").value; 
    num1 = parseInt(num1);
    num2 = parseInt(num2); 
    document.getElementById("answer").innerHTML = num1 + num2;
}

function subtract(){
    var num1 = document.getElementById("number1").value; 
    var num2 = document.getElementById("number2").value;
    num1 = parseInt(num1);
    num2 = parseInt(num2);
    document.getElementById("answer").innerHTML = num1 - num2;
}

// Make sure you have these functions defined as well
function multiply(){
    var num1 = document.getElementById("number1").value; 
    var num2 = document.getElementById("number2").value; 
    num1 = parseInt(num1);
    num2 = parseInt(num2);
    document.getElementById("answer").innerHTML = num1 * num2;
}

function divide(){
    var num1 = document.getElementById("number1").value; 
    var num2 = document.getElementById("number2").value;
    num1 = parseInt(num1);
    num2 = parseInt(num2);
    if (num2 !== 0) {
        document.getElementById("answer").innerHTML = num1 / num2;
    } else {
        document.getElementById("answer").innerHTML = "Cannot divide by zero";
    }
}

Final CSS Code:

Your CSS file (style.css) should look something like this:

body {
    color: green;
    font-weight: bold; 
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif; 
    background-color: beige;
}

input {
    width: 10%; 
    padding: 10px 10px;
}

button {
    background-color: green; 
    color: white;
    border: 2px solid brown; 
    padding: 10px 10px; 
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: darkgreen;
}

#answer {
    font-size: 18px; 
    font-weight: bold; 
    color: red;
}

Testing and Shortcut Creation:

  • After you've added and updated your files, click the buttons with different inputs to test the functionality of addition and subtraction.
  • If the addition still produces incorrect output, double-check that you are using parseInt() correctly on both input numbers.
  • To create a shortcut, drag the URL of your CodeSandbox to your desktop and rename it.

Submitting Your Work:

  • Once everything is working, click on the Share button in CodeSandbox, and copy the sandbox link.
  • Provide a screenshot of the desktop shortcut you created as part of your submission.

If you encounter any problems during your process, explain the specific issues in your submission and what you've attempted to resolve them. Happy coding!