From 38ccc2a477e8dc125d035f612275fe59f6fca4a7 Mon Sep 17 00:00:00 2001 From: Matthew Winzer Date: Sun, 6 Nov 2016 16:13:51 -0700 Subject: [PATCH 1/6] added button mouseover listeners and functions --- index.html | 1 + script.js | 26 ++++++++++++++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/index.html b/index.html index 3298ffb..d506feb 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,7 @@

Go

+ diff --git a/script.js b/script.js index 2858b7c..eafc58f 100644 --- a/script.js +++ b/script.js @@ -8,3 +8,29 @@ When I click on the 'go' button the bottom light should turn green. */ + +$(document).ready(function() { + $('#stopButton').mouseover(mouseIn); + $('#slowButton').mouseover(mouseIn); + $('#goButton').mouseover(mouseIn); + + $('#stopButton').mouseout(mouseOut); + $('#slowButton').mouseout(mouseOut); + $('#goButton').mouseout(mouseOut); + + $('.button').click(buttonClick); + + +}); + +function mouseIn(event) { + console.log('Entered button'); +} + +function mouseOut(event) { + console.log('Left button'); +} + +function buttonClick(event) { + console.log($('.button').text()); +} From 216bc954f4ca81be1d2092780a5b892c3ed10d00 Mon Sep 17 00:00:00 2001 From: Matthew Winzer Date: Sun, 6 Nov 2016 16:26:50 -0700 Subject: [PATCH 2/6] added buttonClick event handler and function --- script.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index eafc58f..8e90753 100644 --- a/script.js +++ b/script.js @@ -21,6 +21,7 @@ $(document).ready(function() { $('.button').click(buttonClick); + }); function mouseIn(event) { @@ -32,5 +33,5 @@ function mouseOut(event) { } function buttonClick(event) { - console.log($('.button').text()); + console.log($(this).text()); } From 775ead711fdbf1edf352442c1b44efbecc7abba4 Mon Sep 17 00:00:00 2001 From: Matthew Winzer Date: Sun, 6 Nov 2016 19:29:42 -0700 Subject: [PATCH 3/6] added light toggle functionality to buttons --- script.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/script.js b/script.js index 8e90753..33adb84 100644 --- a/script.js +++ b/script.js @@ -34,4 +34,48 @@ function mouseOut(event) { function buttonClick(event) { console.log($(this).text()); + + var $thisID = $(this).attr('id'); + var $stopColor = $('#stopLight').css('background-color'); + var $slowColor = $('#slowLight').css('background-color'); + var $goColor = $('#goLight').css('background-color'); + + if ($thisID === 'stopButton' && $stopColor === 'rgb(17, 17, 17)') { + makeRed(); + } else if ($thisID === 'stopButton' && $stopColor === 'rgb(255, 0, 0)') { + stopOff(); + } else if ($thisID === 'slowButton' && $slowColor === 'rgb(17, 17, 17)') { + makeYellow(); + } else if ($thisID === 'slowButton' && $slowColor === 'rgb(255, 255, 0)') { + slowOff(); + } else if ($thisID === 'goButton' && $goColor === 'rgb(17, 17, 17)') { + makeGreen(); + } else { + goOff(); + } +} + + +function stopOff() { + $('#stopLight').css('background-color', 'rgb(17, 17, 17)'); +} + +function slowOff() { + $('#slowLight').css('background-color', 'rgb(17, 17, 17)'); +} + +function goOff() { + $('#goLight').css('background-color', 'rgb(17, 17, 17)'); +} + +function makeRed() { + $('#stopLight').css('background-color', 'rgb(255, 0, 0)'); +} + +function makeYellow() { + $('#slowLight').css('background-color', 'rgb(255, 255, 0)') +} + +function makeGreen() { + $('#goLight').css('background-color', 'rgb(0, 128, 0)'); } From ffa4c145f1270e13d6acbb6f1b618dc5e1f2ba8e Mon Sep 17 00:00:00 2001 From: Matthew Winzer Date: Sun, 6 Nov 2016 19:41:39 -0700 Subject: [PATCH 4/6] completed challenge #3: button clicks turn appropriate light on and other lights off --- script.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index 33adb84..4b732e9 100644 --- a/script.js +++ b/script.js @@ -34,7 +34,7 @@ function mouseOut(event) { function buttonClick(event) { console.log($(this).text()); - + var $thisID = $(this).attr('id'); var $stopColor = $('#stopLight').css('background-color'); var $slowColor = $('#slowLight').css('background-color'); @@ -42,14 +42,20 @@ function buttonClick(event) { if ($thisID === 'stopButton' && $stopColor === 'rgb(17, 17, 17)') { makeRed(); + slowOff(); + goOff(); } else if ($thisID === 'stopButton' && $stopColor === 'rgb(255, 0, 0)') { stopOff(); } else if ($thisID === 'slowButton' && $slowColor === 'rgb(17, 17, 17)') { makeYellow(); + stopOff(); + goOff(); } else if ($thisID === 'slowButton' && $slowColor === 'rgb(255, 255, 0)') { slowOff(); } else if ($thisID === 'goButton' && $goColor === 'rgb(17, 17, 17)') { makeGreen(); + stopOff(); + slowOff(); } else { goOff(); } From 1a7403a5ca31ecf5bf8a123fb1b5b3ee3f7c4577 Mon Sep 17 00:00:00 2001 From: Matthew Winzer Date: Sun, 6 Nov 2016 20:16:57 -0700 Subject: [PATCH 5/6] completed bonus challenge --- script.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/script.js b/script.js index 4b732e9..777e6d4 100644 --- a/script.js +++ b/script.js @@ -19,9 +19,6 @@ $(document).ready(function() { $('#goButton').mouseout(mouseOut); $('.button').click(buttonClick); - - - }); function mouseIn(event) { @@ -40,7 +37,14 @@ function buttonClick(event) { var $slowColor = $('#slowLight').css('background-color'); var $goColor = $('#goLight').css('background-color'); - if ($thisID === 'stopButton' && $stopColor === 'rgb(17, 17, 17)') { + if ($thisID === 'stopButton' && $goColor === 'rgb(0, 128, 0)') { + goOff(); + makeYellow(); + setTimeout(function() { + makeRed(); + $('#slowLight').css('background-color', 'rgb(17, 17, 17)'); + }, 5000); + } else if ($thisID === 'stopButton' && $stopColor === 'rgb(17, 17, 17)') { makeRed(); slowOff(); goOff(); @@ -61,7 +65,6 @@ function buttonClick(event) { } } - function stopOff() { $('#stopLight').css('background-color', 'rgb(17, 17, 17)'); } From 6343cf4e1bdace681913446890d892220c7f98ae Mon Sep 17 00:00:00 2001 From: Matthew Winzer Date: Sun, 6 Nov 2016 20:22:41 -0700 Subject: [PATCH 6/6] simplified some code: exercise complete --- script.js | 28 +++++++--------------------- 1 file changed, 7 insertions(+), 21 deletions(-) diff --git a/script.js b/script.js index 777e6d4..202e74c 100644 --- a/script.js +++ b/script.js @@ -1,23 +1,9 @@ -/* - Write JS to make this stoplight work. - - When I click on the 'stop' button, - the top light should turn red. - When I click on the 'slow' button - the middle light should turn orange. - When I click on the 'go' button - the bottom light should turn green. -*/ - $(document).ready(function() { - $('#stopButton').mouseover(mouseIn); - $('#slowButton').mouseover(mouseIn); - $('#goButton').mouseover(mouseIn); - - $('#stopButton').mouseout(mouseOut); - $('#slowButton').mouseout(mouseOut); - $('#goButton').mouseout(mouseOut); - + //Mouse over event + $('.button').mouseover(mouseIn); + //Mouse out event + $('.button').mouseout(mouseOut); + //Button click event $('.button').click(buttonClick); }); @@ -42,7 +28,7 @@ function buttonClick(event) { makeYellow(); setTimeout(function() { makeRed(); - $('#slowLight').css('background-color', 'rgb(17, 17, 17)'); + slowOff(); }, 5000); } else if ($thisID === 'stopButton' && $stopColor === 'rgb(17, 17, 17)') { makeRed(); @@ -82,7 +68,7 @@ function makeRed() { } function makeYellow() { - $('#slowLight').css('background-color', 'rgb(255, 255, 0)') + $('#slowLight').css('background-color', 'rgb(255, 255, 0)'); } function makeGreen() {