From fac4db6b77f7ff76591ac326c5a876a1454c0518 Mon Sep 17 00:00:00 2001 From: Steve Cartagena Date: Mon, 27 Feb 2017 14:47:01 -0500 Subject: [PATCH] finished --- css/main.css | 14 +++-- index.html | 107 +++++++++++++++++++++++------------ js/main.js | 154 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 235 insertions(+), 40 deletions(-) diff --git a/css/main.css b/css/main.css index ebd0ebd..a10ea45 100644 --- a/css/main.css +++ b/css/main.css @@ -95,12 +95,18 @@ textarea { Author's custom styles ========================================================================== */ +.hidden { + display: none; +} +input[type="text"] { + border: 1px solid black; + color: black; +} - - - - +button { + background-color: red; +} diff --git a/index.html b/index.html index b22fb35..228a29a 100644 --- a/index.html +++ b/index.html @@ -1,40 +1,75 @@ - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - -

Hello world! This is HTML5 Boilerplate.

- - - - - - - - - - + + + +

+ Getting so good at Javascript! +

+

+ This is an assignment/exercise which will review our skills in functions, if statements, switches, and accessing the DOM. Leave this text here at the top, but you may need to create more HTML below that will collect your input. You will need to research a few additional topics on your own. I'll help. +

+ +
+ Age 1:
+
+ Age 2:
+
+ Age 3:
+
+ +
+ +
+ Convert to Lowercase:
+
+ +
+ + + +
+ Enter your letter grade:
+
+ +
+ +
+ Enter a color or hex value:
+
+ +
+ + + + + + + + + + diff --git a/js/main.js b/js/main.js index e69de29..55f4154 100644 --- a/js/main.js +++ b/js/main.js @@ -0,0 +1,154 @@ +/** +* +* Exercises 1-5 require you to write functions. Do NOT call the functions yet (except to test). +* +**/ + +/** +* +* 1) Write a function that calculates the average of three numbers AND RETURNS IT +* +**/ +function threeNumAvg (num1, num2, num3) { + var sum = parseInt(num1) + parseInt(num2) + parseInt(num3); + result = sum / 3; + console.log(result); + var p = document.createElement("p"); + p.innerHTML = "The average is " + result; + document.querySelector("form").appendChild(p); + return result; +} + +// threeNumAvg("4","4","4"); + +/** +* +* 2) Write a function that converts a string to lower-case AND LOGS IT to the console +* +**/ +function convertLowercase(string) { + var str = String(string); + str = str.toLowerCase(); + console.log(str); + var p = document.createElement("p"); + p.innerHTML = "Lowercase: " + str; + document.querySelector("#form2").appendChild(p); +} + +// convertLowercase("HELLO WORLD"); + +/** +* +* 3) Write a function that will HIDE the HTML element of the ID passed to it +* +**/ +function hideElement(id) { + id.className += " hidden"; +} + +// hideElement(intro); + +/** +* +* 4) Write a function that uses SWITCHES to acccept a LETTER GRADE: A,B,C,D,F and RETURN a string that will +* be the message: +* +* - If it's an A: "An A? Great work! Pretty good grade, cheater." +* - If it's a B: "Not bad at all! You got a B." +* - If it's a C: "Yawn. P average, bruh." +* - If it's a D: "Below average! Not impressed!" +* - If it's an F: "Fail." +* - If it's anything else: "Invalid grade." +**/ + +function checkGrade(grade) { + switch(grade) { + case "A": + var string = "An A? Great work! Pretty good grade, cheater."; + console.log(string); + break; + + case "B": + var string = "Not bad at all! You got a B."; + console.log(string); + break; + + case "C": + var string = "Yawn. P average, bruh."; + console.log(string); + break; + + case "D": + var string = "Below average! Not impressed!"; + console.log(string); + break; + + case "F": + var string = "Fail."; + console.log(string); + break; + + default: + var string = "Invalid grade."; + console.log(string); + break; + } + var p = document.createElement("p"); + p.innerHTML = string; + document.querySelector("#form3").appendChild(p); +} + +// checkGrade("A"); +// checkGrade("B"); +// checkGrade("C"); +// checkGrade("D"); +// checkGrade("F"); +// checkGrade("J"); + +/** +* +* 5) Write a function that accepts a parameter, color, and changes the background color of the page to the +* color that is passed to it. USE AN IF STATEMENT to accomplish the following: if the background color is +* red, blue, or black, change the font color of the body to white. +* +**/ +function changeBackgroundColor(color) { + var body = document.querySelector("body"); + var c = color; + + if (c === "black" || "red") { + body.style.backgroundColor = c; + body.style.color = "white"; + } + if (c === "white") { + body.style.backgroundColor = c; + body.style.color = "black"; + } +} + +// changeBackgroundColor("black"); +// changeBackgroundColor("blue"); +// changeBackgroundColor("red"); + +/** +* +* 6) Now that you've created the functions above, let's do some HTML. +* a) First, create (and label!) three text inputs in a form: Age 1, Age 2, Age 3. Add a button to +* that form and make it say "calculate the average." Write some javascript that will call the function you +* wrote above, and display, in that form, some text that says "The average is + {average}" when the button is +* clicked. +* +* b) Make another form with a text input. Write a button that will take that text and send it to the +* function you wrote above to convert it to lower case. +* +* c) Create a button that, when clicked, will hide the "intro" pararaph, using the function you wrote above. +* +* +* d) Create ANOTHER form that will take a user's LETTER GRADE, and when a button is clicked, the letter grade * should be passed to the function you wrote above. Write some additional javascript that will spit out the +* response from your function in some text beneath this new form. +* +* e) Finally, make ANOTHER form that allows me to type a hex value or word value for a color, and when I +* click a button, it should call that function you wrote above and change the background or text color +* appropriately. +* +**/ \ No newline at end of file