diff --git a/css/style.css b/css/style.css index 2d8d793..dea8723 100644 --- a/css/style.css +++ b/css/style.css @@ -39,3 +39,4 @@ h1 { margin: 25px auto; transition: background 500ms; } + diff --git a/index.html b/index.html index 0180c07..de5a5ff 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,6 @@ jQuery Traffic Light - @@ -23,5 +22,7 @@

Go

+ + diff --git a/js/light.js b/js/light.js new file mode 100644 index 0000000..99f5005 --- /dev/null +++ b/js/light.js @@ -0,0 +1,33 @@ +$(document).ready(function(){ + + $("#stopButton").click(goRed); + $("#goButton").click(goGreen); + $("#slowButton").click(goYellow); + + //functions to change colors below + function goRed() { + clearLight(); + $("#stopLight").css("backgroundColor", "red"); + } + + function goGreen() { + clearLight(); + $("#goLight").css("backgroundColor", "green"); + } + + function goYellow() { + clearLight(); + $("#slowLight").css("backgroundColor", "yellow"); + } + + + function clearLight() { + $("#stopLight").css("backgroundColor", "black"); + $("#goLight").css("backgroundColor", "black"); + $("#slowLight").css("backgroundColor", "black"); + + } + + +}); +