Write some code to prompt the user for the amount of a restaurant check, compute the tip (20%), and the sum, and alert the resulting two numbers. You can put them on two lines using "\n" in the alert. (The \n is replaced by the ASCII newline character.)
Your solution might look like:
var bill = parseFloat(prompt("what's the bill?")); var tip = bill * 0.2; var total = bill + tip; alert("tip is "+tip+" and \ntotal is "+total);
For extra credit, check that the total is less than $20, because that's all you have in your wallet.
var bill = parseFloat(prompt("what's the bill?")); var tip = bill * 0.2; var total = bill + tip; alert("tip is "+tip+" and \ntotal is "+total); if( total > 20 ) { alert("Oops! that's too much! Have to wash dishes."); }
!
if( ! sunny ) { alert("bring an umbrella"); }
&&
if( sunny && hot ) { alert("wear a hat"); }
||
if( rainy || snowy ) { alert("wear boots"); }
var taller = alice_height > bob_height; if(taller) { ... }
if
if(alice_height > bob_height) { ... }
Write some code that we'll use for the rest of this class. There's a connection between this code and the color picker you see at the lower left, except the color picker uses sliders instead of prompt. We'll learn how to do that later in the course.
parseInt
red
green
blue
var hexstring = "#" + red.toString(16) + green.toString(16) + blue.toString(16); document.body.style.backgroundColor = hexstring;
You should put the code in the body of a function, so that it'll be easy to test. Note that we'll learn about functions a bit later in the course, but for now, just think of it as a wrapper.
wrapper
function colorChecker() { // your code here }
You can test it in the JS console like this:
colorChecker();
You might come up with something like this:
function colorChecker() { var red = parseInt(prompt("Enter amount of red")); var green = parseInt(prompt("Enter amount of green")); var blue = parseInt(prompt("Enter amount of blue")); var hexstring = "#" + red.toString(16) + green.toString(16) + blue.toString(16); document.body.style.backgroundColor = hexstring; } colorChecker();
How could we test that this color is white?
if( red = 128 && green = 128 && blue = 128 )
if( red = 255 && green = 255 && blue = 255 )
if( red == 128 && green == 128 && blue == 128 )
if( red == 255 && green == 255 && blue == 255 )
Modify your code above to add an alert if the color is white, like:
if( ... ) { alert("color is white."); }
Your code might look like this:
function colorChecker() { var red = parseInt(prompt("Enter amount of red")); var green = parseInt(prompt("Enter amount of green")); var blue = parseInt(prompt("Enter amount of blue")); if( red == 255 && green == 255 && blue == 255 ) { alert("white"); } var hexstring = "#" + red.toString(16) + green.toString(16) + blue.toString(16); document.body.style.backgroundColor = hexstring; } colorChecker();
From white, (#FFFFFF) to black (#000000) there are 256 shades of gray in the RGB system, including gray itself (#808080) and silver (#C0C0C0).
#FFFFFF
#000000
#808080
#C0C0C0
What characterizes these is that no color primary is more dominant than the others: they are all equal.
Assuming we have the color primaries stored in three variables, red, green and blue, how could you test for gray?
if( red == green == blue ) ...
if( red = green && green = blue ) ...
if( red == green || green == blue ) ...
if( red == green && green == blue ) ...
Modify your code above to add an alert if the color is gray, like:
if( ... ) { alert("color is gray."); }
function colorChecker() { var red = parseInt(prompt("Enter amount of red")); var green = parseInt(prompt("Enter amount of green")); var blue = parseInt(prompt("Enter amount of blue")); if( red == 255 && green == 255 && blue == 255 ) { alert("white"); } if( red == green && green == blue ) { alert("shade of gray"); } var hexstring = "#" + red.toString(16) + green.toString(16) + blue.toString(16); document.body.style.backgroundColor = hexstring; } colorChecker();
You might think that a color will be, for example, reddish if the red primary is bigger than all the others. In fact, the eye can't really pick up subtle differences, so #FFFEFE will look a lot like white.
But, for the sake of argument, let's suppose that a color is reddish if the red primary is high (greater than 128) and the others are low (less than 128).
reddish
Which of the following determines a reddish color, given our definition above?
if( red > 128 && green < 128 && blue < 128 ) ...
if( red < 128 && green > 128 && blue > 128 ) ...
if( red > 128 || green < 128 || blue < 128 ) ...
if( red < 128 || green > 128 || blue > 128 ) ...
if( ... ) { alert("color is reddish."); }
function colorChecker() { var red = parseInt(prompt("Enter amount of red")); var green = parseInt(prompt("Enter amount of green")); var blue = parseInt(prompt("Enter amount of blue")); if( red == 255 && green == 255 && blue == 255 ) { alert("white"); } if( red == green && green == blue ) { alert("shade of gray"); } if( red > 128 && green < 128 && blue < 128 ) { alert("reddish"); } var hexstring = "#" + red.toString(16) + green.toString(16) + blue.toString(16); document.body.style.backgroundColor = hexstring; } colorChecker();
We all know that the primaries are red, green and blue, but now we have reddish, greenish, and bluish. We could define primaryish as one of those.
primaryish
Write some code to test for primaryish
function colorChecker() { var red = parseInt(prompt("Enter amount of red")); var green = parseInt(prompt("Enter amount of green")); var blue = parseInt(prompt("Enter amount of blue")); if( red == 255 && green == 255 && blue == 255 ) { alert("white"); } if( red == green && green == blue ) { alert("gray"); } var isReddish = (red > 128 && green < 128 && blue < 128 ); var isGreenish = (red < 128 && green > 128 && blue < 128 ); var isBluish = (red < 128 && green < 128 && blue > 128 ); if( isReddish ) { alert("reddish"); } if( isReddish || isGreenish || isBluish ) { alert("primaryish"); } var hexstring = "#" + red.toString(16) + green.toString(16) + blue.toString(16); document.body.style.backgroundColor = hexstring; } colorChecker();
We all know that "noon" means "12:00," but what does midday mean? Let's suppose that it means between 11am and 2pm (or, better, between 11 and 14). Let's say that's precisely from 11:00 - 13:59.
midday
Let's write some code to ask the user for two numbers, the hour (0-23) and the minute (0-59). You can assume they enter the proper kinds of values.
Then, check whether the time is midday, giving an alert if it is.
You can make a function to test your code:
function timeCheck() { // your code here }
function timeCheck() { var hour = parseInt(prompt("Enter hour (0-23)")); var min = parseInt(prompt("Enter minute (0-59)")); if( hour == 11 || hour == 12 || hour == 13 ) { alert("midday!"); } } timeCheck();
Which of the following is equivalent to the conditional above?
hour > 11 && hour < 13
hour >= 11 && hour <= 13
hour > 11 && hour <= 13
hour >= 11 && hour < 13
Suppose we decide that midday is actually from 11:45 to 13:15. How would you implement that? Careful, this is tricky!
function timeCheck() { var hour = parseInt(prompt("Enter hour (0-23)")); var min = parseInt(prompt("Enter minute (0-59)")); var timeA = (hour == 11 && min >= 45); var timeB = (hour == 12); var timeC = (hour == 13 && min <= 15); if( timeA || timeB || timeC ) { alert("midday!"); } } timeCheck();
Will be posted later, visit again after .
Quiz answers:
1. D all primaries equal 255 2. D red equals green and green equals blue (or other pairs) 3. A red big and others small 4. B or hour > 10 && hour < 14, etc.
Activity solutions.
Prompting for colors:
Determining primaryish:
Midday
Midday more complex