JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<link rel="stylesheet" href="http://tapmodo.github.io/jsintro/css/styles.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:300,800,600,600italic,300italic"></script>
<!doctype html>

  <title>Javascript Intro - Activity 4</title>

<body>

  <form onsubmit="return false;">

	<h1>A simple calculator</h1>
  
  <div class="form-group">
    <label>Hours per day</label>
    <input type="text" id="hours" />
  </div>

  <div class="form-group">
    <label>Days per week</label>
    <input type="text" id="days" />
  </div>

  <div class="form-group">
    <label>Years of practice</label>
    <input type="text" id="years" />
  </div>

  <div class="form-group">
    <button onclick="buttonClick();">Calculate</button>
  </div>
      
      <div id = "the-bottom">
      </div>

  </form>

</body>
</html>

JavaScript

//Activity 4.4 - A simple "calculator" 

/*
- we need to create an ID for the button in the HTML so we can target it with JS.
- we then need to attach that ID to a variable in the JS
- we also have to create IDs for all the input elements so we can (yep) target them with JS.
- we then need to create a function for capturing the event when a user clicks that button (think "onclick")
- 

*/

//attaching the button ID to a var
//var goCalculate = document.getElementById("calculate");

/*
var hours = document.getElementById("hours");
var days = document.getElementById("days");
var years = document.getElementById("years");
*/

//creating a function to capture the button click
function buttonClick() {
    var hours = parseInt(document.getElementById("hours").value);                    
    var days = parseInt(document.getElementById("days").value);
    var years = parseInt(document.getElementById("years").value);
    var weeks = 52; //this is the # of weeks in a year
    
    var theAnswer = hours * days * weeks * years;
    
    var display = document.getElementById("the-bottom");
    display.innerHTML = theAnswer;
    
    hours.value = "";
}

buttonClick();

//the below function makes your life easier/faster but making it so you don't have to type out 'document.getElementById()' all the damn time
function getValue(id) {
    return document.getElementById(id).value;
}

/*
Now instead of 
    var hours = parseInt(document.getElementById("hours").value);                    
    var days = parseInt(document.getElementById("days").value);
    var years = parseInt(document.getElementById("years").value);

You can type:
    var hours = parseInt(getValue("hours");
    var days = parseInt(getValue("days");
    var years = parseInt(getValue("years");