Utilizing a combination of CSS and JavaScript, the traffic light can be altered to change based on

**I stumbled upon this online code snippet where a timer is controlled in CSS. I'm trying to figure out how to control it with JavaScript, but all my attempts have failed so far. Is there anyone who can help me solve this issue? What I'm attempting to do is trigger a JavaScript function with a button click, which will then run the lights based on a predefined timer sequence (i.e., red for 5 seconds, orange for 3 seconds, and green for 10 seconds). I've tried using setTimeout and setInterval but haven't been successful. The desired functionality is that when the button is clicked, the set of lights should run according to the specified timing.

html {
  background: linear-gradient(#08f, #fff);
  padding: 40px;
  width: 170px;
  height: 100%;
  margin: 0 auto;
}

.protector {
  background: transparent;
  width: 180px;
  height: 0;
  position: absolute;
  top: 20px;
  left: -35px;
  border-right: solid 30px transparent;
  border-left: solid 30px transparent;
  border-top: solid 90px #111;
  border-radius: 10px;
  z-index: -1;
}

.protector:nth-child(2) {
  top: 140px;
}

.protector:nth-child(3) {
  top: 260px;
}

.trafficlight {
  background: #222;
  background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
  width: 170px;
  height: 400px;
  border-radius: 10px;
  position: relative;
  border: solid 5px #333;
}

.trafficlight:before {
  background: #222;
  background-image: radial-gradient(#444, #000);
  content: "";
  width: 170px;
  height: 150px;
  margin: 0 auto;
  position: absolute;
  top: -30px;
  margin-left: 0px;
  border-radius: 50%;
  z-index: -1;
}

.trafficlight:after {
  background: #222;
  background-image: linear-gradient(-0deg, #444, #ccc 30%, #000);
  content: "";
  width: 75px;
  height: 800px;
  margin-left: 50px;
  position: absolute;
  top: 150px;
  z-index: -1;
}

.red {
  background: red;
  background-image: radial-gradient(brown, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 35px;
  animation: 15s red infinite;
  box-shadow: 0 0 20px #111 inset, 0 0 10px red;
}

.yellow {
  background: yellow;
  background-image: radial-gradient(orange, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 145px;
  left: 35px;
  animation: 13s yellow infinite;
  box-shadow: 0 0 20px #111 inset, 0 0 10px yellow;
}

.green {
  background: green;
  background-image: radial-gradient(lime, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 270px;
  left: 35px;
  box-shadow: 0 0 20px #111 inset, 0 0 10px lime;
  animation: 13s green infinite;
}

@keyframes red {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: .1;
  }
  80% {
    opacity: .1;
  }
  100% {
    opacity: .1;
  }
}

@keyframes yellow {
  0% {
    opacity: .1;
  }
  20% {
    opacity: .1;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: .1;
  }
  60% {
    opacity: .1;
  }
  80% {
    opacity: .1;
  }
  100% {
    opacity: .1;
  }
}

@keyframes green {
  0% {
    opacity: .1;
  }
  20% {
    opacity: .1;
  }
  40% {
    opacity: .1;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  85% {
    opacity: .1;
  }
  90% {
    opacity: 1;
  }
  95% {
    opacity: .1;
  }
  100% {
    opacity: 1;
  }
}
<div class="trafficlight">
  <div class="protector"></div>
  <div class="protector"></div>
  <div class="protector"></div>
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
</div>

**

javascripthtmlcss

Answer №1

$(".trafficlight").click(function(){
                         $(this).toggleClass("start")
                         })
html {
  background: linear-gradient(#08f, #fff);
  padding: 40px;
  width: 170px;
  height: 100%;
  margin: 0 auto;
}

.protector {
  background: transparent;
  width: 180px;
  height: 0;
  position: absolute;
  top: 20px;
  left: -35px;
  border-right: solid 30px transparent;
  border-left: solid 30px transparent;
  border-top: solid 90px #111;
  border-radius: 10px;
  z-index: -1;
}

.protector:nth-child(2) {
  top: 140px;
}

.protector:nth-child(3) {
  top: 260px;
}

.trafficlight {
  background: #222;
  background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
  width: 170px;
  height: 400px;
  border-radius: 10px;
  position: relative;
  border: solid 5px #333;
}

.trafficlight:before {
  background: #222;
  background-image: radial-gradient(#444, #000);
  content: "";
  width: 170px;
  height: 150px;
  margin: 0 auto;
  position: absolute;
  top: -30px;
  margin-left: 0px;
  border-radius: 50%;
  z-index: -1;
}

.trafficlight:after {
  background: #222;
  background-image: linear-gradient(-0deg, #444, #ccc 30%, #000);
  content: "";
  width: 75px;
  height: 800px;
  margin-left: 50px;
  position: absolute;
  top: 150px;
  z-index: -1;
}

.red {
  background: red;
  background-image: radial-gradient(brown, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity:0;
  position: absolute;
  top: 20px;
  left: 35px;

  box-shadow: 0 0 20px #111 inset, 0 0 10px red;
}
.start .red{
    animation: 15s red infinite;
}
.start .yellow {
    animation: 13s yellow infinite;
}
.start .green{
    animation: 13s green infinite;
}

.yellow {
  background: yellow;
  background-image: radial-gradient(orange, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  opacity:0;
  top: 145px;
  left: 35px;

  box-shadow: 0 0 20px #111 inset, 0 0 10px yellow;
}

.green {
  background: green;
  background-image: radial-gradient(lime, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 270px;
  opacity:0;
  left: 35px;
  box-shadow: 0 0 20px #111 inset, 0 0 10px lime;
}

@keyframes red {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: .1;
  }
  80% {
    opacity: .1;
  }
  100% {
    opacity: .1;
  }
}

@keyframes yellow {
  0% {
    opacity: .1;
  }
  20% {
    opacity: .1;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: .1;
  }
  60% {
    opacity: .1;
  }
  80% {
    opacity: .1;
  }
  100% {
    opacity: .1;
  }
}

@keyframes green {
  0% {
    opacity: .1;
  }
  20% {
    opacity: .1;
  }
  40% {
    opacity: .1;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  85% {
    opacity: .1;
  }
  90% {
    opacity: 1;
  }
  95% {
    opacity: .1;
  }
  100% {
    opacity: 1;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="trafficlight">
  <div class="protector"></div>
  <div class="protector"></div>
  <div class="protector"></div>
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
</div>

By incorporating jQuery, I successfully enabled an interactive click function on the traffic light!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Typescript to Import One Namespace into Another Namespace

Is it possible to export a namespace from one typescript .d.ts file and then import that namespace into another .d.ts file where it is utilized inside of a namespace? For instance: namespace_export.d.ts export namespace Foo { interface foo { ...

javascripttypescriptnamespaces

Can you recommend a basic, invertible, non-secure string cipher function that performs exceptionally well in terms of data dispersal?

I am in need of creating two functions to obscure and reveal a string, following the structure below: string encrypt(string originalText, string key) string decrypt(string scrambledText, string key) I require these functions to be concise and easy t ...

javascriptc#encryption

What steps should I take to ensure that my website can recall the most recent interaction conducted by the user?

Our website features a search form that allows users to look for items on the page. In addition, there is a separate form with checkboxes that enables users to narrow down their searches in hopes of reducing the number of results returned. For example, i ...

javascriptjquery

Unable to find the locally stored directory in the device's file system using Nativescript file-system

While working on creating an audio file, everything seems to be running smoothly as the recording indicator shows no errors. However, once the app generates the directory, I am unable to locate it in the local storage. The code I am using is: var audioFo ...

javascripttypescriptnativescript

Encountering timeout issues with Next.JS fetch and Axios requests on Vercel production environment

I've been encountering an issue where I am unable to fetch a specific JSON data as it times out and fails to receive a response on Vercel deploy. The JSON data I'm trying to fetch is only 18KB in size and the fetch request works perfectly fine in ...

javascriptnext.jsaxiosfetch-apivercel

A step-by-step guide to incorporating expandable and collapsible images within a div element using X

I have successfully created dynamic divs with some data that expand and collapse perfectly. Now I am looking to add expand and collapse images on these divs. I am relatively new to designing in xslt. <xsl:template match="category[key!='org.model.C ...

javascriptjqueryhtmlcssxslt

Unlimited scrolling feature in Ionic using JSON endpoint

Trying to create an Ionic list using data from a JSON URL. JSON Code: [{"id":"1","firstName":"John", "lastName":"Doe"}, {"id":"2","firstName":"Anna", "lastName":"Smith"}, {"id":"3","firstName":"Peter", "lastName":"Jones"},{......................}] app.j ...

javascripthtmlangularjsionic-framework

Combining data from multiple API calls in a for loop with AngularJS

I'm working with an API that contains pages from 1 to 10 and my goal is to cycle through these page numbers to make the necessary API calls. app.factory('companies', ['$http', function($http) { var i; for (i = 1; i < 11 ...

javascriptangularjsjsonapi

Emphasize table cells dynamically

Query How can I dynamically highlight a selected td? Codepen Example View Pen here Code Snippet The map consists of a randomly generated 2D array, like this: map = [[1,1,1,1,0], [1,0,0,0,0], [1,0,1,1,1], [1,0,0,0,1], [1,1, ...

javascriptjqueryhtml-table

Following a Node/Npm Update, Sails.js encounters difficulty locating the 'ini' module

While developing an application in Sails.js, I encountered an authentication issue while trying to create user accounts. Despite my efforts to debug the problem, updating Node and NPM only resulted in a different error. module.js:338 throw err; ...

javascriptnode.jsmacosmodulesails.js

Error: Property 'html' is undefined - AJAX response must be displayed only in a specific div

I encountered an issue: Uncaught TypeError: Cannot read property 'html' of undefined I am working on implementing a voting system for each video on my webpage from a database. I have successfully integrated it using AJAX, but the problem is ...

javascriptphpjqueryhtmlajax

What is the best way to show hidden content within a masked div, similar to a tooltip?

In an icon-based menu, a grid consists of several <div> elements. Each element is empty with general CSS styling and inline CSS to set the mask effect. The purpose of using images as masks is to allow the icons to be colored in different ways by cha ...

cssmask

Is there a way to incorporate timeouts when waiting for a response in Axios using Typescript?

Can someone assist me in adjusting my approach to waiting for an axios response? I'm currently sending a request to a WebService and need to wait for the response before capturing the return and calling another method. I attempted to utilize async/aw ...

javascriptnode.jstypescriptasynchronousaxios

What is the best way to include a title and a close button at the top of a menu, before the first item, when a button menu is clicked in material-ui?

One of the challenges I'm facing is adding a title to an icon button menu that contains a checkbox list of menu items. When the user clicks on the icon and opens the dropdown, I want the title to appear at the top of the dropdown along with a close bu ...

javascriptreactjsmaterial-ui

Highlighting a Table Column with a Radio Button

I am struggling with controlling the highlight of a table using only radio buttons. When I try to change the selector to input:radio, it doesn't work as expected. It seems to only work with the selector provided in my code snippet. $("th").on("clic ...

javascripthtmlcss

Importing models in SceneJS does not function properly with Internet Explorer

I've been exploring different webGL frameworks lately. While I like SceneJS, I've noticed some compatibility issues with Internet Explorer. For instance, in IE 11, importing OBJ files seems to cause the online examples to freeze up: Check out th ...

javascriptimportscenejs

Having trouble with the Jquery animate() function?

I recently developed a jQuery animation where clicking on specific buttons triggers a hidden div to slide from left: -650px; to left: 0px;. You can see an example by clicking here. However, I've noticed that when another button is clicked to reveal a ...

javascriptjquerycss

Incorporate HTML into FormControlLabel with Material UI

In the project I am working on, there is a need to customize a checkbox using FormControlLabel. The requirement is to display the name and code of an item one above another with a reduced font size. Attempts were made to add HTML markup to the label or use ...

javascriptmaterial-ui

The JavaScript program is occasionally receiving unconventional input

I'm really struggling with this one. As part of a programming exercise, I am developing a JavaScript calculator. You can access the functioning calculator here on Codepen. At the bottom left corner of the calculator interface, you will notice a "+-" ...

javascript

Issue: React cannot render Objects as children (received: [object Promise]). If you intended to display multiple children, please use an array instead. (Next)

My dilemma is this: I am trying to display my GitHub repositories on a React component, but I keep encountering the following error: Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, u ...

javascriptreactjstypescriptnext.js