2015-01-19

[jacobthemyth]

Responsive Calculator

Description

A calculator built with HTML, CSS, and JavaScript

Objectives

Learning Objectives

After completing this assignment, you should...

• Understand how to include JavaScript in your page.
• Understand how to use JavaScript variables.
• Understand the syntax and meaning of a function declaration.
• Be familiar with, though not necessarily understand completely, how to respond to user interaction using functions and event listeners.
• Be familiar with, though not necessarily understand completely, how to update the DOM using the built in functions on the document object.
• Understand how to do basic arithmetic in JavaScript.

  Performance Objectives

After completing this assignment, you be able to...

• Write a JavaScript file that is loaded in a web page
• Write a JavaScript function that is executed on a button click.
• Find and update elements in the DOM.

  Details

  Deliverables

• A repo containing at least:
  • main.js
  • index.html
• If you complete the Hard or Nightmare mode:
  • main.scss

    Requirements

• No JSHint warnings or errors
• No scss-lint warnings or errors

  Normal Mode

Write a calculator using HTML, CSS, and JavaScript that has the following functions:

• Add
• Subtract
• Multiply
• Divide
• Submit (= on most calculators)
• Clear

  Hard Mode

Add the following functions to your calculator:

• A button to flip between positive and negative
• A decimal point (Hint: you can add a decimal point to a String, then change the String into a Number)
• Scientific calculator functions
  • square
  • cube
  • arbitrary exponent
  • square root
  • cube root
  • arbitrary root
  • log
  • sin
  • cos
  • tan
  • sinh
  • cosh
  • tanh
• Scientific calculator values
  • pi
  • e

    Nightmare Mode

• Sciencific calculator memory functions
  • mc
  • m+
  • m-
  • mr
• Make the calculator responsive using Neat so that when the browser is mobile size, the scientific functions disappear.
• Make the buttons appear 3D and use CSS transitions to "press" the button.

[ATMartin]

https://github.com/ATMartin/TIY-HW-08-JSCalculator

[ATMartin]

Unsure on JSHint, but SCSS-Lint is clear. Other than that, this is Nightmare-Mode Approved (c)! Will update when I get the right JSHint package loaded. Thanks!

[ATMartin]

JSHint loaded & confirmed. Woohoo!