Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
finished
  • Loading branch information
Steve Cartagena authored and Steve Cartagena committed Feb 27, 2017
1 parent 480b43a commit fac4db6
Show file tree
Hide file tree
Showing 3 changed files with 235 additions and 40 deletions.
14 changes: 10 additions & 4 deletions css/main.css
View file
Expand Up @@ -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;
}



Expand Down
107 changes: 71 additions & 36 deletions index.html
View file
@@ -1,40 +1,75 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
<![endif]-->

<!-- Add your site or application content here -->
<h2>
Getting so good at Javascript!
</h2>
<p id="intro">
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.
</p>

<form>
Age 1:<br>
<input type="text" name="age1"><br>
Age 2:<br>
<input type="text" name="age2"><br>
Age 3:<br>
<input type="text" name="age3"><br>
<button type="button" onclick='threeNumAvg(age1.value, age2.value, age3.value)'>Calculate the Average</button>
</form>

<form id="form2">
Convert to Lowercase:<br>
<input type="text" name="lower"><br>
<button type="button" onclick='convertLowercase(lower.value)'>Submit</button>
</form>

<button type="button" onclick='hideElement(intro)'>Hide Intro</button>

<form id="form3">
Enter your letter grade: <br>
<input type="text" name="grade"><br>
<button type="button" onclick='checkGrade(grade.value)'>Submit</button>
</form>

<form id="form4">
Enter a color or hex value: <br>
<input type="text" name="color"><br>
<button type="button" onclick='changeBackgroundColor(color.value)'>Submit</button>
</form>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
154 changes: 154 additions & 0 deletions js/main.js
View file
@@ -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.
*
**/

0 comments on commit fac4db6

Please sign in to comment.