diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..258e7fc --- /dev/null +++ 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 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 new file mode 100644 index 0000000..54a06eb --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + + + + Temperature Scale Convertor + + +
+ +
+

Temperature Scale Converter

+
+ +
+ + + + + + + + + + + + + + + + +
+ +
+ + + + + \ No newline at end of file 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 new file mode 100644 index 0000000..3ea9734 --- /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 - 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 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