Return-Ready-2021-JavaScript-Evening · nsatinover · Jan 5, 2021 · Jan 5, 2021 · Jan 6, 2021 · Jan 7, 2021
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <h1 class="bold">Temperature Scale Converter</h1>
+
+        <div class="radioDiv">
+            <input type="radio" id="CelciusRadio" name="temp" value="Celcius" checked>
+            <label for="CelciusRadio">Celcius</label>
+            <input type="radio" id="FahrenheitRadio" name="temp" value="Faranheight" >
+            <label for="FahrenheitRadio">Faranheight</label>
+        </div>
+
+        <br />
+
+        <div class="aligner">
+            <label id="labelValue">Value</label>
+        </div>
+
+        <div class="flexRow">
+            <label id="labelInput">Fahrenheit:</label>
+            <input id="fInput" type="number">
+            <button id="btnCalc">Calculate</button>
+        </div>
+
+        <br />
+
+        <label id="labelTemp" class="aligner bold">Celcius</label>
+        <label id="labelOutput" class="aligner">&nbsp</label>
+
+    </div>
+
+    <script src="http://code.jquery.com/jquery-3.5.1.min.js"
+        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
+    <script src="js/plugins.js"></script>
+
+</body>
+
+</html>
diff --git a/js/plugins.js b/js/plugins.js
@@ -0,0 +1,63 @@
+/// <reference path="../typings/globals/jquery/index.d.ts" />
+
+
+// Event listener for Calculate button to convert to Celcius and place into #labelOutput
+$("#btnCalc").on('click', () => {
+
+    const $temp = $('#labelTemp').text();
+    let outputNumber = 0;
+
+    // Is conversion F or C
+    if ($temp.toLowerCase() == 'celcius') {
+        const $faran = $('#fInput').val();
+        outputNumber = ($faran - 32) * (5 / 9);
+    }
+    else {
+        const $celcius = $('#fInput').val();
+        outputNumber = ($celcius * (5 / 9)) + 32;
+    }
+
+    const formattedNumber = formatNumber(outputNumber);
+
+    const $labelOutput = $('#labelOutput');
+    $labelOutput.text(formattedNumber);
+
+});
+
+// Format output as 2-4 decimal places
+function formatNumber(num) {
+    const formatter = new Intl.NumberFormat('en-US', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 4,
+    });
+
+    return formatter.format(num);
+}
+
+// Event listener for Celcius Radio click to change input/ output labels between F/C
+$("#CelciusRadio").on('click', () => {
+    setLabels('Fahrenheit:', 'Celcius');
+    clearLabels();
+});
+
+// Event listener for Faranheight Radio click to change input/ output labels between F/C
+$("#FahrenheitRadio").on('click', () => {
+    setLabels('Celcius:', 'Fahrenheit');
+    clearLabels();
+});
+
+function setLabels(inputText, tempText){
+    const $labelTemp = $('#labelTemp');
+    $labelTemp.text(tempText);
+    const $labelInput = $('#labelInput');
+    $labelInput.text(inputText);
+}
+
+// Clear input/ output when user toggles between temp type
+function clearLabels() {
+    const $labelOutput = $('#labelOutput');
+    $labelOutput.html('&nbsp');
+    const $fInput = $('#fInput');
+    $fInput.val('');
+}
+
diff --git a/pseudo.txt b/pseudo.txt
@@ -0,0 +1,16 @@
+1.  HTML: Header (h1) with text 'Temperature Scale Convertor' 
+    CSS: Justify-Center, Font Bold
+2.  HTML: Label with text 'Value' 
+    CSS: Block-Level, Justify-Center
+3.  HTML: Label with text 'Fahrenheit' 
+    CSS: Justify-Left
+4.  HTML: Input with property/ value type="number" 
+    CSS: border: solid black 1px, Justify-Center
+5.  HTML: Button with text 'Calculate' 
+    CSS: background-color: lightblue border: solid blue 1px, Justify-Right 
+    JS: Calculate and display celcius value
+6.  HTML: Break for an empty row
+7.  HTML: Label with text 'Celcius' 
+    CSS: Justify-Center, Font Bold, Block Level
+8.  HTML: Input 
+    CSS: Justify Center
diff --git a/style.css b/style.css
@@ -0,0 +1,48 @@
+.container {
+    border: solid black 1px;
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    padding: 15px;
+    margin: auto;
+}
+
+.radioDiv {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+}
+
+.radioDiv label {
+  padding: 0 10px;
+}
+
+.aligner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+.flexRow {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+  }
+
+.bold {
+    font-weight: bold;
+  }
+
+button {
+    border: solid blue 1px;
+    background-color: lightblue;
+}
+
+#fInput {
+    width: 100px;
+}
+
+#labelInput {
+  width: 76.42px;
+}