traffic light in javascript assignment expert

Traffic signal light using Javascript

In this article, you will see the creation of a Traffic signal light using Javascript. Traffic lights, traffic signals, stoplights are signaling devices positioned at road intersections, pedestrian crossings, and other locations to control the flows of traffic.

To develop this application, we will use simple HTML, CSS, and Javascript. Basically, we are going to use setTimeout() and setInterval() methods of Javascript.

Table of Contents

How to make traffic light using Javascript?

It is very simple to create a traffic light application using javascript. Follow the below steps:

• Write HTML Code
• Write CSS Code
• Write Javascript Code

1. HTML Code

Explanation:

• We have defined three <div> for the green , yellow , and red color lights.
• Putting all three lights into a container <div> defined with id="traffic-signal" .
• Other two more <div> are defined with id="line1" and id="line2" for the stand of traffic lights.
• Calling timer on body load to start traffic light.

2. CSS Code

Here we have defined the CSS for the above-defined HTML elements.

3. Javascript Code

• We have defined a Timer(using setInterval() method) that will be called in every 12 seconds.
• 12 seconds are divided for three lights ie. Green(5sec), Yellow(2sec), and Red(5sec).
• We have defined a function startTrafficSignal() to show the specific light at the specified time.
• We have used setTimeout() method inside startTrafficSignal() to show the specific light after specified milliseconds.
• Here the logic for switching lights on and off is setting the css property opacity 1 and 0.3(1=on, .3=off).

Complete Code of Traffic light

Following is the complete code of Traffic light putting all HTML, CSS, and Javascript in a single file.

Preview and Live Demo

Here you have seen how to create a Traffic signal light application using Javascript. We used setTimeout() and setInterval() method to develop it.

setTimeout() method basically we used for specific time delay and setInterval() method used to make a timer.

The CSS property called opacity has been used here to switch all three colors on and off.

Related Articles:

• How to create a Stopwatch in JavaScript?
• Accurate and Easy Stopwatch in JavaScript
• How to Build a Bouncing Ball using JavaScript?

Leave a Comment Cancel Reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

.

TECH CHAMPION

Simple traffic light implementation using javascript.

In this article, I will illustrate a simple usage of JavaScript to display a Traffic Light Signal on the web page. This code demo can be used for implementing simple school and college projects. Also for novice JS Programmers, these sample codes will be useful.

The code example uses HTML/CSS and also basic bootstrap elements.

Traffic Signal Implementation using JavaScript

Requirements :.

The Traffic Signal should resemble the ones we see on our city roads and highways.

The Green signal should emit for 5 seconds, the Orange for 3 seconds, and the Red signal for 8 seconds.

When ON, RED should also display the text – STOP, Orange should display LOOK and Green should display GO.

When OFF, the texts should be slightly visible (just as we see painted texts labelled on the Signals).

Refer to the HTML clip above or the video below for more details.

Try to restrict using HTML,CSS/bootstrap and JavaScript only.

The below video will illustrate the requirement(In case the above HTML does not play due to browser issues).

I will only highlight the mechanics of the javascript part as the HTML design part is rather straightforward and self-explanatory. The main steps are summarized below.

• The idea is to create HTML figures that would resemble the traffic signal. It should have three circles to represent the three different coloured lights.
• Let there be three different css classes to style these circles differently based on colour codes. These coloured classes will represent the ON state of the lights as well. Let there be a fourth class (Blank class) to represent the OFF state (no light).
• In order to switch ON a light, one would need to connect the element with the appropriate coloured class.
• To switch OFF, replace the connection of the light from the coloured class to the BLANK class.
• Create rectangles of appropriate dimensions to represent the outer container box, stand, and ground plate.
• To keep the code approach simple for beginners, create three JS(javascript) functions – one for each light.
• Each of these functions will associate the circle HTML elements with the coloured class and the corresponding text. It would also switch OFF the other two lights (replace their classes with BLANK class).
• Use setTimeout to invoke these functions at different intervals so that they look to happen in sequence.
• Wrap all three functions using the setInterval function so that the entire operation happens continuously so as to mimic a live traffic light operation.

Below is the HTML code for TrafficLight.html. There is not much to explain on the HTML part. The contextual code uses css class to generate coloured rectangles and circles.

The css file (C:\Users\IDEAPAD\Desktop\temp\TrafficSignal.css) contents is as below. One can use any layout design at his or her convenience. The below code is for ready reference to use.

The below snippet contains the JS part. The css styling code has 4 classes of circles. All of these 4 circle classes are the same but with different layout colours (red, green, orange and black for empty blank or OFF state).

Each of the coloured classes represents the ON state while the BLANK class represents the OFF state. The mechanics to switch between ON and OFF states is to simply use JS (DOM) code to replace the class of the circles from the coloured (ON) state to the BLANK(OFF) state.

The Javascript simply replaces the light circles one by one with the OFF state class at intervals. This entire cycle is repeated infinitely using the setInterval function.

To introduce gaps between lights ON state, we can make use of the setTimeout function.

There are three user-defined functions, one for each color of light. Each function switches On the corresponding light (along with the labeling of the text) and switches OFF the other two.

NOTE: In the above code, the green light function will trigger first, then at 5th second (5000 ms), the orange light function will trigger, and at 8th second (8000ms) red light function will trigger. The entire cycle will be repeated every 13th second(13000 ms).

So, green will light for 5 seconds, orange for 3 seconds (8-5), red for again 5 seconds ( 13 – 8).

Rahul Anand

Contact me @ [email protected] | [email protected] | [email protected].

Hi there this is somewhat of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding skills so I wanted to get guidance from someone with experience. Any help would be enormously appreciated!

Submit a Comment Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Notify me of follow-up comments by email.

Notify me of new posts by email.

Submit Comment

RELATED POSTS

Coloured Squares using Simple Canvas element in Javascript

Coloured Squares <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Coloured Squares</title> </head> <body> <!-- Create a display canvas on the page --> <div align="center"> <canvas id="cnv1" width="500px"...

Javascript Code for colour-changing boxes

The HTML/Javascript code in this sample generates a set of 4 squares (canvases) and changes their color every second. Color Changing Boxes START STOP <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Color Changing...

Javascript code to change inner HTML and Style

A simple JavaScript code to illustrate the text content and colour change <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Sample1</title> </head> <body> <h1>JavaScript Sample Code</h1> <p id="para1"...

LATEST POSTS

Memory Management in PostgreSQL Database

Efficient memory management is a cornerstone of database performance. In this blog, I will delve deep into the intricacies of memory management in the PostgreSQL Database. By grasping the fundamentals of how PostgreSQL allocates and handles memory, you can...

Oracle Database Evolution: From Past to Present

Oracle Database Evolution represents the profound metamorphosis of database technology, encompassing its inception to the cutting-edge advancements we witness today. Delving into the Oracle Database Evolution entails an exploration of its early frameworks, pivotal...

Difference between Unix & Linux Operating System

The difference between Unix & Linux Operating System often sparks debates among technologists and IT professionals. Understanding this distinction requires a deep dive into their architectural frameworks, functionalities, and use-cases. Both Unix and Linux form...

Top 10 Algorithm Implementation in C Language

C , PROGRAMMING

Understanding the intricacies of algorithm implementation in C language forms the cornerstone of mastering programming. The core objective of this blog post is to provide you with a comprehensive understanding of the top 10 algorithm implementations in C language,...

Memory Management: Deep dive into pointers, dynamic memory allocation, and smart pointers

C , C++ , PROGRAMMING

In contemporary software development, efficient memory management holds paramount importance. This treatise elucidates critical components of memory management: pointers, dynamic memory allocation, and smart pointers. Our deep dive employs high-impact terminologies...

Object-Oriented Programming: Polymorphism, Inheritance, and Encapsulation

PROGRAMMING

Dive into the intricate world of Object-Oriented Programming (OOP) as we unravel the core principles of polymorphism, inheritance, and encapsulation. These pillars form the bedrock of OOP, fostering code reusability, modularity, and increased efficiency.

Multithreading in Python: Unlocking the Power of Concurrency

PYTHON PROGRAMMING

Understanding Multithreading Multithreading in Python allows a program to run multiple operations simultaneously, maximizing the efficiency and performance of your applications. By enabling concurrent execution, multithreading utilizes system resources more...

Efficient Smartphone Voice Calls: Tips and Tricks

ELECTRONICS

Communicating through voice calls remains an essential function of smartphones, despite the myriad features they offer. In the face of robocalls and automated voice systems, making efficient smartphone voice calls can simplify your life. Here’s how you can enhance...

The Future of Smartphone Software Updates

Smartphone software updates have long been a point of contention for users, often marking the delineation between continued usability and obsolescence. Traditionally, phones received updates for a mere three years. This, however, is changing; the new standard is seven...

The Chinese Internet: A Parallel Universe Disappearing Rapidly

Chinese people recognise their country’s internet diverges significantly from the rest of the world. Without access to Google, YouTube, Facebook, or Twitter, they rely on alternative platforms and employ euphemisms to communicate topics deemed sensitive. When they...

• Print Friendly

Building a Traffic Lights System with JavaScript

Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Im trying to show the traffic lights in a loop

I am trying to build this: Build a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely. Each light should be lit for the following durations:

Red light: 4000ms Yellow light: 500ms Green light: 3000ms

Please review and suggest if this is the right solution

let i=0; const classNames = ['red','yellow','green']; const timeouts = [4000,500,3000] const interval = setInterval(() => { const div = document.getElementById(`${classNames[i]}`) if(i>=0) { const prevDiv =(i===0)? document.getElementById(`${classNames[2]}`) : document.getElementById(`${classNames[i-1]}`) prevDiv.className='' } div.className=classNames[i]; if(i<2) { i++; }else { i=0; } },timeouts[i]) .red { background-color: red; } .yellow{ background-color: yellow; } .green { background-color: green; } <div id="red">Red</div> <div id="yellow">Yellow</div> <div id="green">Green</div>

Is your question on topic?

Your code does not work as expected. However the rules for asking at code review states that code "...works correctly (to the best of your knowledge)" and timing bugs are very difficult for humans to detect. I assume that you were unaware of the timing issue, and potencial hidden bugs.

There are several problems with your solution.

Execution flow and order

You use the variable i to select the interval for the call to setInterval callback. In the callback you change i , however the change to i is never used to start another interval, so the timer callback continues to use the interval at i = 0 resulting in each light being on for 4000ms

Nothing happens if you don't execute the code. IE changing i does not affect previous use of i .

Luck can cover bugs

Often code can have bugs that do not occur due to pure luck.

In this case you use...

...to get elements.

The luck is that the element id is the same as the element class name. If the class name or id was to change the bug would manafest and most likely throw an error.

You should have used querySelector (className[i]) which would locate the first element with the class name className[i]

setInterval is evil

The timing function setInterval starts an ongoing timed callback. The callback is called as close as possible after the interval time.

It can not be called while other code is running.

It is affected by the page visibility and the OS state.

If you forget to store the handle, or the variable holding the handle is lost you can not stop the timer. Thus setInterval is the only way to create a memory leak in JS. For this reason you should never ever use setInterval .

Use setTimeout

setTimeout is similar to setInterval however it only calls the callback once.

It can not cause a memory leak.

To repeat the callback one must call setTimeout again. This lets you recalculate the time till the next event in the case that the current event is late.

Style points.

Avoid repeating DOM queries. Store DOM elements in variable.

There is no need to make string from strings. Eg

Note I ignored the unlucky bug. :(

It is a bad habit declaring variables in the global scope. Use IIFE (Immediately Invoked Function Expression) to keep the global scope clean.

While learning JS it is best to run your code in strict mode . To do this add the directive "use strict" to the first line of code in your JS script.

Note once you have gained experience you will know why you always use strict mode.

The rewrite uses

• setTimeout to time events
• objects via factory function light to define each light
• the array lights to store all the lights
• elements are stored rather than queried from the DOM each time they are needed
• the function nextLight is used to turn off the current light, turn on the next light, and setup the timeout for the next light
• uses remainder operator % to cycle light index. EG lights.currentIdx = (lights.currentIdx + 1) % lights.length
• performance.now() to get a time in milliseconds (used to calculate when to call for the next light)

Note The timing is set from the first call, if the lights fall behind (due to page visibility) they will cycle at increased speed (interval of 0) to catch up.

Note Element ids are unique to the page

Note lights.time - performance.now() may be negative. This is ignored by setTimeout which has the shortest timeout of > 0ms

Note I changed the timing because 4000ms is way to long for me to wait on red

"use strict"; (()=>{ const light = (className, interval, element) => ({className, interval, element}); const lights = [ light("red", 2000, redEl), light("yellow", 500, yellowEl), light("green", 1000, greenEl), ]; lights.currentIdx = lights.length - 1; lights.time = performance.now(); // ms since page load nextLight(); function nextLight() { var light = lights[lights.currentIdx]; light.element.classList.remove(light.className); // Next light lights.currentIdx = (lights.currentIdx + 1) % lights.length; light = lights[lights.currentIdx]; light.element.classList.add(light.className); lights.time += light.interval; setTimeout(nextLight, lights.time - performance.now()); } })(); .red { background-color: red; } .yellow { background-color: yellow; } .green { background-color: green; } <div id="redEl" >Red</div> <div id="yellowEl">Yellow</div> <div id="greenEl" >Green</div>

Your Answer

Sign up or log in, post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged javascript or ask your own question .

• Featured on Meta
• Upcoming sign-up experiments related to tags

Hot Network Questions

• Would a series of gravitational waves from a supernova affect time on a 200 year old clock just as water waves affected clocks on ships in rough seas?
• Whether the given function is one-one or onto or bijective?
• Why was the 1540 a computer in its own right?
• I feel like doing a PhD is my only option but I am not excited about it. What can I do to fix my life?
• Scheme interpreter in C
• How can I make a data randomly like form of LaTeX
• Problems with \dot and \hbar in sfmath following an update
• Why is nonzero net charge density incompatible with the cosmological principle?
• 9-16-25 2D Matrix
• How often do snap elections end up in favor of the side that triggered them?
• How are real numbers defined in elementary recursive arithmetic?
• How can student grades from different countries (e.g., India and China) be compared when applying for academic positions?
• Lilypond scaling a score with many parts to avoid over-full pages
• How did the contracted perfect passive work?
• Psychology Today Culture Fair IQ test question
• What are the approaches of protecting against partially initialized objects?
• Where in "À la recherche du temps perdu" does the main character indicate that he would be named after the author?
• What is the meaning of 多岁 in 在中国，60多岁已经是退休的年纪了?
• Binding to an IP address on an interface that comes and goes
• Is it possible to avoid ending Time Stop by making attacks from inside an Antimagic Field?
• How to calculate velocity of air behind a propeller?
• Why is MSS important? Why can't we just rely on the MTU?
• Unpaired socks in my lap
• What's this plant with saw-toothed leaves, scaly stems and white pom-pom flowers?

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Traffic Light Simulator : An interactive React application that simulates a traffic light. Users can click on individual lights to activate a glow effect, while the other lights dim. The project showcases the use of React Hooks and tailored CSS styling for intuitive user interaction.

boxmancoder/React-Traffic-Light

Folders and files.

Repository files navigation

Hello world with react boilerplate.

Start coding a react application

If you are working locally instead of using codespaces or gitpod, please follow local installation steps and come back to this part of the readme.

How to start coding?

• Install the packages with $ npm install .
• Run the webpack server with $ npm run start

You can update the styles/index.css or js/index.js depending on your needs. Add more files into your, ./src/js/components or styles folder as you need them.

Local Installation (skip if you are working on codespaces or gitpod)

Download the boilerplate using git

Publish your website!

This boilerplate is 100% compatible with the free github pages and vercel hosting.

It takes just 2 minutes to deploy, click here to start the process .

Other features

• Automatic Code Formatting: Use of Prettier for automatic code indentation and formatting.
• Error reporting: Use of eslint for better error reporting.
• Hot Deploy: Use of Webpack Development Server for hot deploy and live reload.
• One-command publish of the code to github pages with npm run deploy:github .
• Babel 7 (really fast).

Contributors

This template was built as part of the 4Geeks Academy Coding Bootcamp by Alejandro Sanchez and many other contributors. Find out more about our Full Stack Developer Course , and Data Science Bootcamp .

You can find other templates and resources like this at the school github page .

• JavaScript 70.1%

• How it works
• Homework answers

Answer to Question #166651 in HTML/JavaScript Web Application for Chandra sena reddy

Time Converter

In this assignment, let's build a Time Converter by applying the concepts we learned till now.

Refer to the below image.

Instructions:

• The HTML input element for entering the number of hours should have the id hoursInput
• The HTML input element for entering the number of minutes should have the id minutesInput
• Add HTML label elements for HTML input elements with ids hoursInput and minutesInput
• The HTML button element should have the id convertBtn
• The HTML p element to display the converted time in seconds should have the id timeInSeconds
• The HTML p element to display the error message should have the id errorMsg

By following the above instructions, achieve the given functionality.

• When values are entered in HTML input elements with ids hoursInput and minutesInput, the HTML button with id convertBtn is clicked
• The converted time in seconds should be displayed in the HTML p element with id timeInSeconds
• The HTML p element with id errorMsg should be empty
• The HTML p element with id errorMsg should display an error message in the following cases
• When the HTML input element with id hoursInput is empty and convertBtn is clicked
• When the HTML input element with id minutesInput is empty and convertBtn is clicked
• When both the HTML input elements hoursInput and minutesInput are empty and convertBtn is clicked
• timeInSeconds = ((hours) *60 + minutes) * 60
• The values given for the HTML input elements with ids hoursInput and minutesInput should be positive integers.

Use this Background image:

• https://assets.ccbp.in/frontend/dynamic-webapps/time-converter-bg.png

CSS Colors used:

Text colors Hex code values used:

CSS Font families used:

Need a fast expert's response?

and get a quick answer at the best price

for any assignment or question with DETAILED EXPLANATIONS !

Leave a comment

Ask your question, related questions.

• 1. Bookmark MakerIn this assignment, let's build a Bookmark maker by applying the concepts we lear
• 2. Foundations PageIn this assignment, let's build a Foundations page by applying the concepts we
• 3. Favorite Stores PageIn this assignment, let's build a Favorite Stores Page by applying the conc
• 4. In terms of content.1. what guidelines will you put out to guide the users on what and how they can
• 5. Create a simple mashup page that displays both the BBC news (https://www.bbc.com/news) and BBC Pidgi
• 6. Difference b/w inline and block element
• 7. I need some help creating a modularized JavaScript roll-over function for gallery images that functi
• Programming
• Engineering

Who Can Help Me with My Assignment

There are three certainties in this world: Death, Taxes and Homework Assignments. No matter where you study, and no matter…

How to Finish Assignments When You Can’t

Crunch time is coming, deadlines need to be met, essays need to be submitted, and tests should be studied for.…

How to Effectively Study for a Math Test

Numbers and figures are an essential part of our world, necessary for almost everything we do every day. As important…