wdi-sg · metildachee · Jun 9, 2020 · Jun 9, 2020 · Jun 9, 2020 · Jun 9, 2020
diff --git a/index.html b/index.html
@@ -3,22 +3,37 @@
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <p>temperature converter</p>
-    <input class="starter" id="input" placeholder="input"/>
-    <h2>output:</h2>
-    <p class="starter" id="output"></p>
-    <script>
-      document.querySelector('#input').addEventListener('change', function(event){
-        var currentInput = event.target.value;
-        var output = inputHappened(currentInput);
-        display( output );
-      });
+    <!-- Heading block -->
+    <h1 id="header-h1">Welcome to temperature converter!</h1>
+    <div id="row1">
+      <label for="name">Please enter your name </label>
+      <input type="text" id="full-name" placeholder="Full name"/>
+      <button id="name-button">Submit</button>
+    </div>
+
+    <!-- Input block -->
+    <div id="row2">
+      <h2 id=row2-header>Please enter temperature: </h2>
+      <form>
+        <input class="starter" id="input" placeholder="Some temperature.."/>
+
+        <input type="radio" id="degrees" name="temperature" value="degrees">
+        <label for="degrees">Degrees</label>
+
+        <input type="radio" id="fahrenheit" name="temperature" value="fahrenheit">
+        <label for="fahrenheit">Fahrenheit</label>
+
+        <input type="radio" id="kelvin" name="temperature" value="Kelvin">
+        <label for="kelvin">Kelvin</label>
+      </form>
+      <button id="button">Convert!</button>
+    </div>
+
+    <div id="row3">
+      <h2 id="output-header">Output:</h2>
+      <p class="starter" id="output"></p>
+    </div>
 
-      var display = function( data ){
-        var output = document.querySelector('#output');
-        output.innerText = data;
-      }
-    </script>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,7 +1,123 @@
-console.log("hello script js");
+// button.onclick function(x) is all the way at the bottom
 
-var inputHappened = function(currentInput){
-  console.log( currentInput );
-  var output = "WOW TEMPERATURE";
-  return output;
-};
+// Purpose: overwrites output with 'text' parameter
+function overwrite(text) {
+  const output = document.getElementById('output');
+  output.innerHTML = text;
+}
+
+// Purpose: appends text with 'text' in parameter
+function append(text) {
+  const output = document.getElementById('output');
+  output.innerHTML = output.innerHTML + " " + text;
+}
+
+// Purpose: returns temperature input
+function getInputValue() {
+  return document.getElementById('input').value;
+}
+
+// Purpose: takes in Fahrenheit, calculates and displays degrees and Kelvin
+function fahrenheitCalculator() {
+  var fahrenheit = getInputValue();
+  const degree = (parseInt(fahrenheit) - 32) * 5/9;
+  const kelvin = (parseInt(fahrenheit) - 32) * 5/9 + 273.15;
+  overwrite(degree + " degrees, " + kelvin + " kelvin");
+  return degree;
+}
+
+// Purpose: takes in degrees, calculates and displays Fahrenheit and Kelvin
+function degreesCalculator() {
+  var degrees = getInputValue();
+  const fahrenheit = parseInt(degrees) * 9/5 + 32;
+  const kelvin = parseInt(degrees) + 273;
+  overwrite(fahrenheit + " fahrenheit, " + kelvin + " kelvin");
+  return degrees;
+}
+
+// Purpose: takes in Kelvin, calculates and displays degrees and Kelvin
+function kelvinCalculator() {
+  var kelvin = getInputValue();
+  const degrees = parseInt(kelvin) - 273;
+  const fahrenheit = 9/5 * (parseInt(kelvin) - 273) + 32;
+  overwrite(fahrenheit + " fahrenheit, " + degrees + " degrees");
+  return degrees;
+}
+
+// Purpose: appends weather into output, based on degree
+function appendWeather(degree) {
+  if (degree <= 0) {
+    append("Ooh, it's really cold!");
+    append("Don't go outside if you want to live.");
+  }
+  else if (degree <= 5) {
+    append("Heavy jacket and toe warmers please!");
+  }
+  else if (degree <= 10) {
+    append("Heavy jacket please! (no toe warmers)");
+  }
+  else if (degree <= 20) {
+    append("Sweater and jacket please!");
+  }
+  else if (degree <= 25) {
+    append("Just sweater will do!");
+  }
+  else if (degree < 40) {
+    append("Shorts and shirts only please..");
+  }
+  else if (degree < 50) {
+    append("Ooh, it's hot outside!");
+    append("Swimsuit will do!");
+  }
+  else if (degree > 100 || degree > 50)  {
+    append("You're literally boiling! Please wear NOTHING!");
+  }
+  // For any invalid characters, however, 12ABC is still accepted
+  else {
+    overwrite("Please enter a valid number!");
+  }
+}
+
+// Purpose: action after 'convert' button is clicked, based on radio button checked
+function conversionSystem() {
+  if (isNaN(getInputValue()) || getInputValue == "") {
+    overwrite("Please enter a valid number!");
+    return;
+  }
+
+  let degree = 0;
+  if (document.getElementById('degrees').checked) { // degree r.button is checked
+    degree = degreesCalculator();
+  }
+  else if (document.getElementById('fahrenheit').checked) { // Fahrenheit r.button is checked
+    degree = fahrenheitCalculator();
+  }
+  else if (document.getElementById('kelvin').checked) { // kelvin r.button is checked
+    degree = kelvinCalculator();
+  }
+  appendWeather(degree);
+}
+
+// Purpose: updates header with the name based on input (just for fun)
+function updateHeader() {
+  const nameHeaderExist = document.getElementById("header-name"); // get current header
+  const fullName = document.getElementById('full-name'); // get name input
+
+  if (nameHeaderExist) { // If the nameHeader exists -> "Hey XX" already exist
+    nameHeaderExist.innerHTML = "Hey " + fullName.value + "!"; // Update with new value of name input
+  }
+  else { // Name header does not exist.. Proceed to create
+    const header = document.getElementById('header-h1'); // Get parent node
+    const nameHeader = document.createElement('h2'); // Create h2 element
+    nameHeader.innerHTML = "Hey " + fullName.value + "!"; // Put "Hey " + input .. into h2 element
+    nameHeader.id = "header-name"; // Give an id to the new h2 element
+    document.body.insertBefore(nameHeader, header); // Insert with reference to parent node
+  }
+  fullname.value = null; // Clear name input
+}
+
+const button = document.getElementById('button');
+button.onclick = conversionSystem;
+
+const nameButton  = document.getElementById('name-button');
+nameButton.onclick = updateHeader;
diff --git a/style.css b/style.css
@@ -1,11 +1,64 @@
-.starter{
-  font-size:30px;
-  padding:10px;
-  display:block;
-  margin:40px;
-  border:3px solid blue;
+@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');
+
+body {
+  font-family: 'Gloria Hallelujah', cursive;
+  background-color: pink;
+}
+
+button, input {
+  font-family: 'Gloria Hallelujah', cursive;
+  border-radius: 10px;
+}
+
+button {
+  background-color: orange;
+}
+
+h1, h2, #row2, #row1, #full-name, .starter {
+  text-align: center;
+}
+
+h1, #row1 {
+    padding-top: 0px;
+    margin-top: 0px;
+}
+
+#row2 {
+    margin-bottom: 0px;
+    padding-bottom: 0px;
 }
 
-#output{
-  background-color:pink;
+#row3 {
+    margin-top: 0px;
+    padding-top: 0px;
+}
+
+#input {
+  margin-top: 0px;
+}
+
+#full-name {
+  border: 3px solid hotpink;
+}
+
+#output-header, #row2-header {
+    margin-bottom: 0px;
+    padding-bottom: 0px;
+}
+
+#output {
+  margin-left: 20px;
+  margin-right: 20px;
+  padding: 25px;
+  font-size: 20px;
+  margin-top: 0px;
+}
+
+.starter{
+  font-size:30px;
+  padding: 10px;
+  display: block;
+  margin: 0 auto;
+  border:3px solid hotpink;
+  border-radius: 10px;
 }