Scribd Logo
Upload

Welcome to Scribd!

  • Semafaro Js

    Uploaded by

    akamega436
    7 views1 page
    This document contains code to create an interactive traffic light simulation. It includes HTML to display images of the different light colors and buttons to control the lights. The JavaScript code defines functions to change the image source when each button is clicked and to automatically cycle through the light colors. It uses event listeners to trigger the color change functions in response to button clicks or the interval timer.

    Original Description:

    Original Title

    Semafaro js

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains code to create an interactive traffic light simulation. It includes HTML to display images of the different light colors and buttons to control the lights. The JavaScript code defines functions to change the image source when each button is clicked and to automatically cycle through the light colors. It uses event listeners to trigger the color change functions in response to button clicks or the interval timer.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views1 page

    Semafaro Js

    Uploaded by

    akamega436
    This document contains code to create an interactive traffic light simulation. It includes HTML to display images of the different light colors and buttons to control the lights. The JavaScript code defines functions to change the image source when each button is clicked and to automatically cycle through the light colors. It uses event listeners to trigger the color change functions in response to button clicks or the interval timer.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    <!

    DOCTYPE html>
    <html lang="pt-br">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="index.js" defer></script>
    <link rel="stylesheet" href="style.css">
    <title>Semáfaro</title>
    </head>
    <body>
    <main>
    <div class="container">
    <img src="img/desligado.png" alt="desligado" id="img">
    </div>
    <div id="buttons">
    <button id="red">Vermelho</button>
    <button id="yellow">Amarelo</button>
    <button id="green">Verde</button>
    <button id="auto">Automático</button>
    </div>
    </main>
    </body>
    </html>

    const img = document.getElementById('img')


    const buttons = document.getElementById('buttons')
    let colorIndex = 0
    let intervalId = null

    const trafficLight = (ev) =>{


    stopAuto()
    turnOn[ev.target.id]()
    }

    const nextIndex = () => colorIndex = colorIndex < 2 ? ++colorIndex : 0

    const changeColor = () => {


    const colors = ['red', 'yellow', 'green']
    const color = colors[colorIndex]
    turnOn[color]()
    nextIndex()
    }

    const stopAuto = () => {


    clearInterval(intervalId)
    }

    const turnOn = {
    'red': () => img.src = 'img/vermelho.png',
    'yellow': () => img.src = 'img/amarelo.png',
    'green': () => img.src = 'img/verde.png',
    'auto': () => intervalId = setInterval(changeColor, 1000)
    }

    buttons.addEventListener('click', trafficLight)

    You might also like