From 2789ece20791fa3d7eb4e886a7a7134338f45f3f Mon Sep 17 00:00:00 2001 From: irinashpak Date: Thu, 9 Jun 2016 20:32:14 -0400 Subject: [PATCH] homework done did homework --- css/style.css | 14 ++++++++++++++ index.html | 3 +++ js/index.js | 33 +++++++++++++++++++++++++++++++++ 3 files changed, 50 insertions(+) create mode 100644 js/index.js diff --git a/css/style.css b/css/style.css index 2d8d793..517b878 100644 --- a/css/style.css +++ b/css/style.css @@ -39,3 +39,17 @@ h1 { margin: 25px auto; transition: background 500ms; } + +.red { + background: red; + color: red; +} + +.yellow { + background: yellow; + color: yellow; +} + +.green { + background-color: green; +} diff --git a/index.html b/index.html index 0180c07..1034f69 100644 --- a/index.html +++ b/index.html @@ -23,5 +23,8 @@

Go

+ + + diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..3be8bbd --- /dev/null +++ b/js/index.js @@ -0,0 +1,33 @@ +$(document).ready(function(){ + + // goo to know, no quotes after click =) + $('#stopButton').click(illuminateRed); + $('#slowButton').click(illuminateYellow); + $('#goButton').click(illuminateGreen); + + // got it. yes, we need # because it's an ID. + + function illuminateRed() { + clearLights (); + $('#stopLight').addClass('red'); + } + + function illuminateYellow() { + clearLights(); + $('#slowLight').addClass('yellow'); + } + + function illuminateGreen() { + clearLights(); + $('#goLight').addClass('green') + + } + + function clearLights () { + $('#stopLight').removeClass('red'); + $('#slowLight').removeClass('yellow'); + $('#goLight').removeClass('green'); + } + + +}); \ No newline at end of file