Skip to content

work in progress #68

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kallicain wants to merge 2 commits into
base: master
Choose a base branch
from
Open

work in progress #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4f0a8c9
work in progress
kallicain Feb 14, 2023
868bcf2
finished calc
kallicain Feb 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@

Inside this repo you'll find HTML, CSS, and JS files that come together to build a calculator. It's a simple & ugly calculator but it works as is to add and subtract two numbers. You have some tasks to do to get it into a prettier and more functional calculator.

1. Fork and clone it to your local machine in whatever folder you've been working in so far, i.e. `devFolder`
1. Open up the `index.html` file and uncomment line 7 so your JavaScript is connected to your HTML.
1. Now read the comments on line 13, 18, and 26. Then look over the code to see if you understand what is being built.
1. Use live-server or something similar to serve it and see what's happening in the browser.
1. Play. Type in two numbers then choose "add" or "subtract" and hit "equal" to see the results.
1. Go back to the `index.html` file and look at line 14 and 16. Do you see the `onkeyup` Event Listeners? Follow the function they call into the `main.js` file and see if you can figure out what and how they're doing what they're doing.
1. Check out line 15 in the `main.js` file that tells you about the `parseInt()` function. This just makes sure our numbers are numbers and not text.
<!-- 1. Fork and clone it to your local machine in whatever folder you've been working in so far, i.e. `devFolder` -->
<!-- 1. Open up the `index.html` file and uncomment line 7 so your JavaScript is connected to your HTML. -->
<!-- 1. Now read the comments on line 13, 18, and 26. Then look over the code to see if you understand what is being built. -->
<!-- 1. Use live-server or something similar to serve it and see what's happening in the browser. -->
<!-- 1. Play. Type in two numbers then choose "add" or "subtract" and hit "equal" to see the results. -->
<!-- 1. Go back to the `index.html` file and look at line 14 and 16. Do you see the `onkeyup` Event Listeners? Follow the function they call into the `main.js` file and see if you can figure out what and how they're doing what they're doing. -->
<!-- 1. Check out line 15 in the `main.js` file that tells you about the `parseInt()` function. This just makes sure our numbers are numbers and not text. -->
1. Do you see where and how the numbers you typed in the input fields are being saved?
1. If so, go back to the `index.html` file and find the `onclick` event listeners on the operation buttons. What functions are they calling in the `main.js` file?
1. How is this function working? Break it down. Ask a friend. Ask a tutor. Ask your instructor. Make sure you understand what is happening in this function before moving on.
1. After that, make sure each of your `button`s have the same `onclick` attribute as the `add` and `subtract` buttons. Just copy/paste into each. This will allow your operations to be used!
<!-- 1. After that, make sure each of your `button`s have the same `onclick` attribute as the `add` and `subtract` buttons. Just copy/paste into each. This will allow your operations to be used! -->
1. Go back to the web page view of the Calculator and see how it's working. Try adding, subtracting, multiplying, dividing, and modulusing to see what's missing so you can fix it.

> *HINT: the comments throughout the code are left for you to read and learn from.*
Expand Down
10 changes: 5 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<!-- <script src="main.js"></script> -->
<script src="main.js"></script>
<title>Document</title>
</head>
<body>
Expand All @@ -18,14 +18,14 @@
<!-- the "onclick" event listener passes its element's "id" to the "changeOperation" function in the main.js file -->
<button type="button" name="add" id="addition" onclick="changeOperation(this.id)">Add</button>
<button type="button" name="subtract" id="subtraction" onclick="changeOperation(this.id)">Subtract</button>
<button type="button" name="multiply" id="multiplication">Multiply</button>
<button type="button" name="divide" id="division">Divide</button>
<button type="button" name="modulus" id="modulus">Modulus</button>
<button type="button" name="multiply" id="multiplication" onclick="changeOperation(this.id)">Multiply</button>
<button type="button" name="divide" id="division" onclick="changeOperation(this.id)">Divide</button>
<button type="button" name="modulus" id="modulus" onclick="changeOperation(this.id)">Modulus</button>
</div>
<br>
<!-- this "onclick" calls the "equal" function in the main.js file -->
<button type="button" onclick="equals()">Equals</button>
<button type="reset">Clear</button>
<button type="button" onclick="clearresult()">Clear</button>
</form>
<div id="result"></div>
</body>
Expand Down
32 changes: 26 additions & 6 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ let firstNum = null
let secondNum = null
let operation = null


// this function takes in the number you type in the input field and saves it to the "firstNum" variable
const saveFirstNumber = (num) => {
firstNum = parseInt(num)
Expand Down Expand Up @@ -32,14 +33,21 @@ const subtract = (numA, numB) => {
const multiply = (numA, numB) => {
// * to get a product then return it
// Open up the inspector tool in Chrome and select the Console tab to see what this functions is "logging out" to the console.
console.log(numA, numB)
const multiply = (numA * numB)
return multiply
}

const divide = null
const divide = (numA, numB) => {
// / to get a quotient,
const divide = (numA / numB)
return divide
}

const modulus = null
const modulus = (numA, numB) => {
// and % to get a remainder.
const modulus = (numA % numB)
return modulus
}

// This function changes the "operation" variable to be equal to the "id" of the button we choose on the web page.
const changeOperation = (chosenOperation) => {
Expand All @@ -59,18 +67,30 @@ const putResultInElement = (operationResults) => {

// The function uses the value of "operation" variable to determine which operation function it should use on the number: add, subtract, multiply, divide, or modulus
const equals = () => {
if (!firstNum) {
firstNum = parseInt(document.getElementById('first-Number').value)
}
if (!secondNum) {
secondNum = parseInt(document.getElementById('second-Number').value)
}
console.log(firstNum, secondNum);
switch (operation) {
case "addition": putResultInElement(add(firstNum, secondNum))
break;
case "subtraction": putResultInElement(subtract(firstNum, secondNum))
break;
case "multiplication": multiply(firstNum, secondNum)
case "multiplication": putResultInElement(multiply(firstNum, secondNum))
break;
case "division": console.log(divide(firstNum, secondNum))
case "division": putResultInElement(divide(firstNum, secondNum))
break;
case "modulus": console.log(modulus(firstNum, secondNum))
case "modulus": putResultInElement(modulus(firstNum, secondNum))
break;
default: "Choose an operation"
}
}

const clearresult = () => {
document.getElementById('result').innerHTML = null
document.getElementById('first-Number').value = null
document.getElementById('second-Number').value = null
}