main.js

/**
*
* 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.
*
**/