From 8843f306b46d1c3272c3cf0559eff08b4b8f3acd Mon Sep 17 00:00:00 2001 From: Stephanie Czetli Date: Sat, 9 Jan 2021 21:15:19 -0500 Subject: [PATCH 1/4] first commit - Deg F to Deg C --- css/styles.css | 56 ++++++++++++++++++++++++++++++++++++++++++++ index.html | 54 ++++++++++++++++++++++++++++++++++++++++++ javascript/script.js | 16 +++++++++++++ pseudo.txt | 30 ++++++++++++++++++++++++ 4 files changed, 156 insertions(+) create mode 100644 css/styles.css create mode 100644 index.html create mode 100644 javascript/script.js create mode 100644 pseudo.txt diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..0e62d7a --- /dev/null +++ b/css/styles.css @@ -0,0 +1,56 @@ +* { +box-sizing: border-box; +} + +.bodyContainer { + border: solid black 2px; + /* display: flex; */ + 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; + justify-content: space-evenly; + align-items: center; +} + +.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 new file mode 100644 index 0000000..2adfd4a --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + Temperature Scale Convertor + + +
+ +
+

Temperature Scale Convertor

+
+ +
+ + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + \ No newline at end of file diff --git a/javascript/script.js b/javascript/script.js new file mode 100644 index 0000000..52a6695 --- /dev/null +++ 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 * 9 / 5) + 32 + // 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 new file mode 100644 index 0000000..059546a --- /dev/null +++ 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) \ No newline at end of file From 855ec77a23140499bf0ea0d9d6f4206ea65965b0 Mon Sep 17 00:00:00 2001 From: Stephanie Czetli Date: Mon, 11 Jan 2021 14:26:50 -0500 Subject: [PATCH 2/4] corrects formula --- css/styles.css | 7 ++++-- css/styles_BR.css | 59 ++++++++++++++++++++++++++++++++++++++++++++ index.html | 11 --------- index_BR.html | 49 ++++++++++++++++++++++++++++++++++++ javascript/script.js | 2 +- 5 files changed, 114 insertions(+), 14 deletions(-) create mode 100644 css/styles_BR.css create mode 100644 index_BR.html diff --git a/css/styles.css b/css/styles.css index 0e62d7a..45b8026 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,10 +1,11 @@ * { box-sizing: border-box; +padding: 0; +/* margin: 0; */ } .bodyContainer { border: solid black 2px; - /* display: flex; */ width: fit-content; padding: 15px; margin: auto; @@ -15,12 +16,14 @@ box-sizing: border-box; /* Style heading and celsius label */ .bold { font-weight: bold; + } .flexRow { display: flex; - justify-content: space-evenly; align-items: center; + justify-content: space-evenly; + } .flexCol { diff --git a/css/styles_BR.css b/css/styles_BR.css new file mode 100644 index 0000000..45b8026 --- /dev/null +++ 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 index 2adfd4a..16c7e63 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,3 @@ - - - - - - - - - - - diff --git a/index_BR.html b/index_BR.html new file mode 100644 index 0000000..7463e45 --- /dev/null +++ b/index_BR.html @@ -0,0 +1,49 @@ + + + + + + + Temperature Scale Convertor + + +
+ +

Temperature Scale Convertor

+ +
+ + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + +
+ +
+ + + + + \ No newline at end of file diff --git a/javascript/script.js b/javascript/script.js index 52a6695..3ea9734 100644 --- a/javascript/script.js +++ b/javascript/script.js @@ -6,7 +6,7 @@ function runMyFunction() { console.log(degreesFahrenheit); // Define variable to store result of formula & set it equal to the formula - let degreesCelsius = (degreesFahrenheit * 9 / 5) + 32 + let degreesCelsius = ( (degreesFahrenheit - 32) * 5/9 ) // Print the contents of the variable to the console console.log(degreesCelsius); From 1ee4daa9f5d78ea14b42c430447a9f3bde217a85 Mon Sep 17 00:00:00 2001 From: Stephanie Czetli Date: Wed, 13 Jan 2021 12:52:15 -0500 Subject: [PATCH 3/4] set width & height and added margin --- css/styles.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/css/styles.css b/css/styles.css index 45b8026..258e7fc 100644 --- a/css/styles.css +++ b/css/styles.css @@ -6,9 +6,11 @@ padding: 0; .bodyContainer { border: solid black 2px; - width: fit-content; + width: 475px; + height: 200px; padding: 15px; - margin: auto; + margin: 5rem auto; + mar font-family: Arial, Helvetica, sans-serif; text-align: center; } @@ -37,14 +39,13 @@ padding: 0; height: 2rem; border: solid black 2px; text-align: center; - margin: .4rem 5rem; + margin: .4rem 3rem; } button { padding: .25rem 1rem; } - /* Bonus Styles */ button { transition-duration: 0.4s; From 00ef46256333891679f43e5b8851f9a0be377afb Mon Sep 17 00:00:00 2001 From: Stephanie Czetli Date: Tue, 30 Mar 2021 12:43:56 -0400 Subject: [PATCH 4/4] corrected spelling --- index.html | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/index.html b/index.html index 16c7e63..54a06eb 100644 --- a/index.html +++ b/index.html @@ -10,11 +10,10 @@
-

Temperature Scale Convertor

+

Temperature Scale Converter

- @@ -27,12 +26,10 @@

Temperature Scale Convertor

- -