Code Monkey home page Code Monkey logo

calculator-app-101's Introduction

Calculator App for 101

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
  2. Open up the index.html file and uncomment line 7 so your JavaScript is connected to your HTML.
  3. Now read the comments on line 13, 18, and 26. Then look over the code to see if you understand what is being built.
  4. Use live-server or something similar to serve it and see what's happening in the browser.
  5. Play. Type in two numbers then choose "add" or "subtract" and hit "equal" to see the results.
  6. 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.
  7. 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.
  8. Do you see where and how the numbers you typed in the input fields are being saved?
  9. 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?
  10. 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.
  11. After that, make sure each of your buttons have the same onclick attribute as the add and subtract buttons. Just copy/paste into each. This will allow your operations to be used!
  12. 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.

What's Missing?

  1. Part 1: the multiply, divide, and modulus functions need to be built. Can you figure out how to build them and console.log their results?
  2. Part 2: in the equals function at the bottom of the main.js file you'll see the first two cases call the putResultInElement function with their corresponding operation functions passed into it. But the next three don't. Can you fix that so that your results show up on the page and NOT the console?

Push Yourself Further

  1. This calculator is ugly. Once you've got the functionality working, can you make it look better with CSS Grid?

To Turn This Assignment In

  1. Since you forked this repo you'll need to git status, add, commit, push the same way you've done before but now you'll create a Pull Request (PR).

NOTE: A PR is a request to merge your code changes into the original code base. This is what you'd normally do in your day job so that others can see the work you did for the day.

  1. Once you've made the PR you'll copy/paste the URL of the PR for your instructor to grade.

<iframe src="https://player.vimeo.com/video/395247060" width="640" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

calculator-app-101's People

Contributors

slyssy avatar hipperger avatar robpwatkins avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.