Creating a JavaScript function for a custom timed traffic light sequence

Question

Creating a JavaScript function for a custom timed traffic light sequence

Currently, I am facing a challenge with my high school project of creating a timed traffic light sequence using JavaScript for my upcoming exams. Unfortunately, I feel quite lost and unsure about how to proceed. My initial plan involves formatting the values in my array (red, yellow, green) into distinct lights through CSS styling.

I've been attempting to code the red light as a practice exercise, but so far here is what I have:

    <DOCTYPE html>
    <html>
    <body>
    <script type = "JavaScript">
    var myLights = ["red", "Yellow", "green"]
    </script>
    <script type = "CSS">
    red {
    border-radius: 50%;
    width: 200px; 
    height: 200px; 
    color: #ff0000;
    }
    </script>
    </body>
    </html>

Not surprisingly, this code hasn't produced any visible results when viewed in Google Chrome.

If anyone out there could offer me some guidance or advice on how to improve my project, I would be extremely grateful.

javascript css

Answer 1

Answer №1

I hope that nobody will complete this assignment for you as it is crucial for your learning journey to do it on your own. However, the individuals here might provide some general guidance when needed.

Here's a suggested approach to solving this problem:

Begin by creating three lights using static HTML and CSS. You can use classes like light (for all lights) and then red, amber, and green for each individual light.
To define them, consider using something like .red {} instead of red {} as you currently have.
You can establish common attributes for all lights using .light {} and then apply those to all the lights.
Each light will likely be represented by a <div> element which will require one or more classes. For example, your first light could be coded as
```
<div id="red_light" class="red light"></div>
```
.
It may be helpful to add a fifth class called on where red light represents off and red light on signifies on. Using properties like opacity can help control colors in this case. There are multiple approaches to achieve this effect.
Once you're satisfied with your HTML and CSS, incorporate some JavaScript. Think about how to transition between states and consider planning this out on paper before implementation. Then write functions to add and remove classes from each of your div elements.

A useful tip I still utilize is to continuously test small bits of code even when it's tempting to write larger chunks before testing. Observing immediate changes is mentally beneficial and provides reassurance to developers that they are progressing in the right direction.

Answer 2

I hope that nobody will complete this assignment for you as it is crucial for your learning journey to do it on your own. However, the individuals here might provide some general guidance when needed.

Here's a suggested approach to solving this problem:

Begin by creating three lights using static HTML and CSS. You can use classes like light (for all lights) and then red, amber, and green for each individual light.
To define them, consider using something like .red {} instead of red {} as you currently have.
You can establish common attributes for all lights using .light {} and then apply those to all the lights.
Each light will likely be represented by a <div> element which will require one or more classes. For example, your first light could be coded as
```
<div id="red_light" class="red light"></div>
```
.
It may be helpful to add a fifth class called on where red light represents off and red light on signifies on. Using properties like opacity can help control colors in this case. There are multiple approaches to achieve this effect.
Once you're satisfied with your HTML and CSS, incorporate some JavaScript. Think about how to transition between states and consider planning this out on paper before implementation. Then write functions to add and remove classes from each of your div elements.

A useful tip I still utilize is to continuously test small bits of code even when it's tempting to write larger chunks before testing. Observing immediate changes is mentally beneficial and provides reassurance to developers that they are progressing in the right direction.

Creating a JavaScript function for a custom timed traffic light sequence

Answer №1

Similar questions

Extra Pathway

Sending data with the request body using Express and Passport

Excessive JSON formatting is consuming an excessive amount of storage space

Find the correct file path for input using JavaScript or Angular 2

Styling an input text using CSS and Jquery without relying on a parent

Tips to Avoid Multiple Executions of Javascript Code due to Caching

The export "hasInjectionContext" is not provided by the source file "node_modules/vue-demi/lib/index.mjs", but it is being requested in the file "node_modules/pinia/dist/pinia.mjs"

Fetching a JSON object from an external URL using JavaScript

Is it true that Redux Saga's select function returns mutable state?

Utilizing inline javascript to dynamically update the selected option of a radio button

easy method for creating a hyperlink that triggers a "download" pop-up box

Angular Kendo dropdownlist and input textbox are not working together as anticipated

Tips for controlling numerous tabSlideOUt tabs on a single webpage

Tips for including a decimal point in an angular reactive form control when the initial value is 1 or higher

Ordering ng-repeat in AngularJS using a separate arrayDiscover how to easily order your

The issue of Three.js SkinnedMesh jittering arises when it is distant from the scene's root (0,0,0)

Is there a way to adjust the image opacity of a background using Material UI?

unexpected alteration of text sizing in mathjax within reveal.js presentations

Connecting a string array to the navigation bar

Manipulating an HTML <div> element to display its value as a suffix in another <div> within the HTML code