Samira week1 js

Week1/prep-exercises/1-traffic-light/traffic-light-1.js

@@ -3,29 +3,24 @@
  * The `state` property says what the traffic light's state (i.e. colour) is at
  * that moment.
  */
+
 const trafficLight = {
-  state: "green",
+  state : "green",
 };
-
-let rotations = 0;
-while (rotations < 2) {
+let rotation = 0;
+while (rotation < 2) {
   const currentState = trafficLight.state;
-  console.log("The traffic light is on", currentState);
+  console.log('The traffic light is on' , currentState);
 
-  // TODO
-  // if the color is green, turn it orange
-  // if the color is orange, turn it red
-  // if the color is red, add 1 to rotations and turn it green
-}
+if ( currentState === "green") {
+  trafficLight.state ="orange";
 
-/**
- * The output should be:
-
-The traffic light is on green
-The traffic light is on orange
-The traffic light is on red
-The traffic light is on green
-The traffic light is on orange
-The traffic light is on red
+}
+else if (currentState === "orange") {
+  trafficLight.state = "red";
 
-*/
+}
+else if (currentState === "red" ) { 
+  trafficLight.state = "green";
+  rotation++;
+}}

Week1/prep-exercises/1-traffic-light/traffic-light-2.js

@@ -1,33 +1,37 @@
 "use strict";
-/**
- * The `possibleStates` property define the states (in this case: colours)
- * in which the traffic light can be.
- * The `stateIndex` property indicates which of the possible states is current.
- */
-const trafficLight = {
-  possibleStates: ["green", "orange", "red"],
-  stateIndex: 0,
-};
 
+const trafficlight = { 
+    possibleStates : [ "green", "orange", "red"],
+    stateIndex :0,
+};
 let cycle = 0;
-while (cycle < 2) {
-  const currentState = trafficLight.possibleStates[trafficLight.stateIndex];
-  console.log("The traffic light is on", currentState);
+function updateTrafficLight() {
+    const currentState = trafficlight.possibleStates[trafficlight.stateIndex];
+    const trafficLightElement = document.getElementById("traffic-light");
+    trafficLightElement.textContent = `The traffic light is on ${currentState}`;
+    trafficLightElement.className = "";
+    trafficLightElement.classList.add(currentState);
 
-  // TODO
-  // if the color is green, turn it orange
-  // if the color is orange, turn it red
-  // if the color is red, add 1 to cycles and turn it green
-}
+    if (currentState === "green") {
+        trafficlight.stateIndex = 1;
 
-/**
- * The output should be:
+    }
+  else if(currentState === "orange") {
+    trafficlight.stateIndex = 2;
 
-The traffic light is on green
-The traffic light is on orange
-The traffic light is on red
-The traffic light is on green
-The traffic light is on orange
-The traffic light is on red
+  }
+  else if(currentState === "red") {
+    trafficlight.stateIndex = 0;
+    cycle++;
+  }
+
+  if (cycle < 3) {
+    setTimeout(updateTrafficLight, 1000);
+
+  }
+  else {
+    trafficLightElement.textContent = "Traffic light simulation compeleted." ;
+  }
+}
 
-*/
+updateTrafficLight();