Return-Ready-PT-Mon-Wed · StephanieCzetli · Jan 10, 2021 · Jan 11, 2021 · Jan 13, 2021 · Mar 30, 2021
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,60 @@
+* {
+box-sizing: border-box;
+padding: 0;
+/* margin: 0; */
+}
+
+.bodyContainer {
+    border: solid black 2px;
+    width: 475px;
+    height: 200px;
+    padding: 15px;
+    margin: 5rem auto;
+    mar
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+}
+
+/* Style heading and celsius label */
+.bold {
+    font-weight: bold;
+
+}
+
+.flexRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+
+}
+
+.flexCol {
+    display: flex;
+    flex-direction: column;
+
+}
+
+#inputValue {
+    width: 8rem;
+    height: 2rem;
+    border: solid black 2px;
+    text-align: center;
+    margin: .4rem 3rem;
+}
+
+button {
+    padding: .25rem 1rem;
+}
+
+/* Bonus Styles */
+button {
+    transition-duration: 0.4s;
+}
+
+button:hover {
+    background-color: orange;
+    border: solid gray 2px;
+    border-radius: 5px;
+    padding: .5rem;
+
+}
diff --git a/css/styles_BR.css b/css/styles_BR.css
@@ -0,0 +1,59 @@
+* {
+box-sizing: border-box;
+padding: 0;
+/* margin: 0; */
+}
+
+.bodyContainer {
+    border: solid black 2px;
+    width: fit-content;
+    padding: 15px;
+    margin: auto;
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+}
+
+/* Style heading and celsius label */
+.bold {
+    font-weight: bold;
+
+}
+
+.flexRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+
+}
+
+.flexCol {
+    display: flex;
+    flex-direction: column;
+
+}
+
+#inputValue {
+    width: 8rem;
+    height: 2rem;
+    border: solid black 2px;
+    text-align: center;
+    margin: .4rem 5rem;
+}
+
+button {
+    padding: .25rem 1rem;
+}
+
+
+/* Bonus Styles */
+button {
+    transition-duration: 0.4s;
+}
+
+button:hover {
+    background-color: orange;
+    border: solid gray 2px;
+    border-radius: 5px;
+    padding: .5rem;
+
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="/css/styles.css" rel="stylesheet">
+    <title>Temperature Scale Convertor</title>
+</head>
+<body>
+    <div class="bodyContainer">
+
+        <section class="bold">
+        <h1>Temperature Scale Converter</h1>
+        </section>
+
+        <section class="flexRow">
+            <span class="flexCol">
+                <label>Fahrenheit</label>
+            </span>
+
+            <!-- Creates input field for user -->
+            <span class="flexCol centerCol">
+                <label class="inputLabel">Value</label>
+                <input id="inputValue" type="number">
+
+                <label class="bold">Celsius</label>
+                <label id="outputValue" class="bold"></label>
+            </span>
+            <!-- Create button that when clicked gets the user input & runs function-->
+            <span class="flexCol">
+                <button type="button" onclick="runMyFunction();">Calculate</button>
+            </span>
+        </section>
+
+    </div>
+
+<script src="javascript/script.js"></script>
+
+</body>
+</html>
diff --git a/index_BR.html b/index_BR.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="/css/styles_BR.css" rel="stylesheet">
+    <title>Temperature Scale Convertor</title>
+</head>
+<body>
+    <div class="bodyContainer">
+
+    <h1 class="bold">Temperature Scale Convertor</h1>
+
+        <section class="flexRow">
+
+            <span class="flexCol">
+                <label>Fahrenheit</label>
+            </span>
+
+            <!-- Creates input field for user -->
+            <span class="flexCol centerCol">
+                <label class="inputLabel">Value</label>
+                <input id="inputValue" type="number">
+            </span>
+
+            <!-- Create button that when clicked gets the user input & runs function-->
+            <span class="flexCol">
+                <button type="button" onclick="runMyFunction();">Calculate</button>
+            </span>
+
+        </section>
+
+        <section class="flexRow2">
+
+            <label class="flexCol bold">Celsius</label>
+            <label id="outputValue" class="bold"></label>
+
+
+
+
+
+        </section>
+
+    </div>
+
+<script src="javascript/script.js"></script>
+
+</body>
+</html>
diff --git a/javascript/script.js b/javascript/script.js
@@ -0,0 +1,16 @@
+
+function runMyFunction() {
+    // Define variable to store user's input (degrees Fahrenheit)
+    let degreesFahrenheit = document.getElementById('inputValue').value;
+    // Print the contents of the variable to the console
+    console.log(degreesFahrenheit);
+
+    // Define variable to store result of formula & set it equal to the formula
+    let degreesCelsius = ( (degreesFahrenheit - 32) * 5/9 )
+    // Print the contents of the variable to the console
+    console.log(degreesCelsius);
+
+    // Display contents of variable on the screen
+    document.getElementById('outputValue').innerHTML = degreesCelsius;
+}
+
diff --git a/pseudo.txt b/pseudo.txt
@@ -0,0 +1,30 @@
+MY PSEUDO CODE:
+For JavaScript Logic:
+- Connect the JS file to the HTML file
+- Input/Read user input field
+    - validate user input (reject anything that is not a number)
+- User clicks button
+- Grab number from user input field
+- Plug user input (fahrenheit) into formula
+    formula: celsius = f(f*9/5)+32
+- Return a result (celsius)
+6. Display/Update result in celsius on screen
+7. Clear 
+
+
+Resources I Used:
+https://www.tutorialrepublic.com/faq/how-to-get-the-value-of-text-input-field-using-javascript.php
+https://www.javatpoint.com/document-getElementById()-method
+https://www.tutorialspoint.com/how-getelementbyid-works-in-javascript
+https://www.javascript-coder.com/javascript-form/getelementbyid-form/
+https://www.javascript-coder.com/javascript-form/javascript-calculator-script/
+
+TEAM PSEUDO CODE:
+Connect HTML and JS files
+User clicks button
+Grab the number from the text input
+Calculate the celsius value with the formula c = (f * 9/5) + 32
+Update celsius text
+
+
+*A property is a value that you can get or set (like changing the content of an HTML element)