Change background color and turn on all window lights at night (Javascript only)

Asked

Viewed 39 times

0

I am studying Javascript and decided to create a practical project, which consists of a building that I can turn on and off the lights by clicking on the windows, until then ok.

But I wanted to implement the function of clicking on a button and changing from day to night and all the lights turn on automatically.

The part of changing from day to night got by clicking on the screen itself, but when I click to turn on or turn off some light keeps changing from day to night too.

I tried some different functions and a half, but I got caught up in it. Could someone please give a help?

HTML

    document.querySelectorAll('.ligaDesliga').forEach(divs => {
      divs.addEventListener('click', event => {
        divs.classList.toggle('yellow');
      })
    })
    
    let ambiente = document.querySelector('.day');
    
    function alterarHorario(){
      ambiente.addEventListener('click', alterar =>{
        ambiente.classList.toggle('night')
      })
    }
    
    alterarHorario();
*{
        margin: 0;
        padding: 0; 
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .day{
        background-color: blue;
    }
    
    .night{
        background-color: black;
    }
    
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 110vh;
    }
    
    .container .predio{
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: center;
        align-items: center;
        height: 560px;
        width: 250px;
        border: 2px solid white;
        background-color: gray;
        padding: 20px;
    }
    
    #window1, #window2, #window3, #window4, #window5, #window6, #window7, #window8, #window9, #window10, #window11, #window12{
        width: 85px;
        height: 60px;
        background: black;
        cursor: pointer;
    }
    
    #window2, #window4, #window6, #window8, #window10, #window12{
        margin-left: 10px;
    }
    
    .door{
        width: 40px;
        height: 80px;
        background-color: brown;
        position: relative;
        bottom: -18px;
    }
    
    .yellow{
        background-color: yellow !important;
        box-shadow: 0 0 10px yellow,
                    0 0 15px yellow,
                    0 0 20px yellow; 
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Desafio prédio</title>
    </head>
    <body>
            <div class="day">
                <div class="container">
                    <div class="predio">
                        <div id="window1" class="ligaDesliga"></div>
                        <div id="window2" class="ligaDesliga"></div>
                        <div id="window3" class="ligaDesliga"></div>
                        <div id="window4" class="ligaDesliga"></div>
                        <div id="window5" class="ligaDesliga"></div>
                        <div id="window6" class="ligaDesliga"></div>
                        <div id="window7" class="ligaDesliga"></div>
                        <div id="window8" class="ligaDesliga"></div>
                        <div id="window9" class="ligaDesliga"></div>
                        <div id="window10" class="ligaDesliga"></div>
                        <div id="window11" class="ligaDesliga"></div>
                        <div id="window12" class="ligaDesliga"></div>
                        <div class="door"></div>
                    </div>
                </div>
            </div>
    
            <script src="main.js"></script>
    </body>
    </html>

javascript html5 css3 dom
  • 1

    you are associating an event within a Function, this should be done outside of it, as the other event with the class "ligaDesliga"

  • @Ricardopunctual applied in the same way as the other event, but when it is in night mode and I click on some light to turn on it is changing the background color also day and night.

1 answer

1


Use the ambiente.setAttribute('class', '...'); to change the background color. You can select all elements that have the class yellow, and check if there is any element with this class by making a .length. Then with a simple if, you decide whether we add the class day or night depending on whether any element still has the class yellow.

See the if within the function alterarHorario:

function alterarHorario() {
  ambiente.addEventListener('click', (alterar) => {
    const hasYellow = document.getElementsByClassName('yellow'); // retorna um array

    if (hasYellow.length) { // se houver alguem com a classe yellow
      ambiente.setAttribute('class', 'night'); // o tema de fundo será "night"
    } else {
      ambiente.setAttribute('class', 'day'); // se não houver ninguém com a classe 
                                             // "yellow", o tema será "day"
    }
  });
}

The working code:

document.querySelectorAll('.ligaDesliga').forEach((divs) => {
  divs.addEventListener('click', (event) => {
    divs.classList.toggle('yellow');
  });
});

let ambiente = document.querySelector('.day');

function alterarHorario() {
  ambiente.addEventListener('click', (alterar) => {
    const hasYellow = document.getElementsByClassName('yellow'); 

    if (hasYellow.length) {
      ambiente.setAttribute('class', 'night');
    } else {
      ambiente.setAttribute('class', 'day');
    }
  });
}

alterarHorario();
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.day {
  background-color: blue;
}

.night {
  background-color: black;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 110vh;
}

.container .predio {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: center;
  align-items: center;
  height: 560px;
  width: 250px;
  border: 2px solid white;
  background-color: gray;
  padding: 20px;
}

#window1,
#window2,
#window3,
#window4,
#window5,
#window6,
#window7,
#window8,
#window9,
#window10,
#window11,
#window12 {
  width: 85px;
  height: 60px;
  background: black;
  cursor: pointer;
}

#window2,
#window4,
#window6,
#window8,
#window10,
#window12 {
  margin-left: 10px;
}

.door {
  width: 40px;
  height: 80px;
  background-color: brown;
  position: relative;
  bottom: -18px;
}

.yellow {
  background-color: yellow !important;
  box-shadow: 0 0 10px yellow, 0 0 15px yellow, 0 0 20px yellow;
}
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Projeto</title>
  </head>
  <body>
    <div class="day">
      <div class="container">
        <div class="predio">
          <div id="window1" class="ligaDesliga"></div>
          <div id="window2" class="ligaDesliga"></div>
          <div id="window3" class="ligaDesliga"></div>
          <div id="window4" class="ligaDesliga"></div>
          <div id="window5" class="ligaDesliga"></div>
          <div id="window6" class="ligaDesliga"></div>
          <div id="window7" class="ligaDesliga"></div>
          <div id="window8" class="ligaDesliga"></div>
          <div id="window9" class="ligaDesliga"></div>
          <div id="window10" class="ligaDesliga"></div>
          <div id="window11" class="ligaDesliga"></div>
          <div id="window12" class="ligaDesliga"></div>
          <div class="door"></div>
        </div>
      </div>
    </div>
  </body>
</html>

Of course, the above code may look better, but I hope you understand the logic.

To turn on all "lights" when clicking on a window, just add the code:

document.querySelectorAll('.ligaDesliga').forEach((el) => {
  el.classList.toggle('yellow');
});

inside:

document.querySelectorAll('.ligaDesliga').forEach((divs) => {
  divs.addEventListener('click', (event) => {
    document.querySelectorAll('.ligaDesliga').forEach((el) => {
      el.classList.toggle('yellow');
    });
  });
});

That will add the class yellow for all windows when any of them is clicked.

Complete code:

document.querySelectorAll('.ligaDesliga').forEach((divs) => {
  divs.addEventListener('click', (event) => {
    document.querySelectorAll('.ligaDesliga').forEach((el) => {
      el.classList.toggle('yellow');
    });
  });
});

let ambiente = document.querySelector('.day');

function alterarHorario() {
  ambiente.addEventListener('click', (alterar) => {
    const hasYellow = document.getElementsByClassName('yellow'); 

    if (hasYellow.length) {
      ambiente.setAttribute('class', 'night');
    } else {
      ambiente.setAttribute('class', 'day');
    }
  });
}

alterarHorario();
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.day {
  background-color: blue;
}

.night {
  background-color: black;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 110vh;
}

.container .predio {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: center;
  align-items: center;
  height: 560px;
  width: 250px;
  border: 2px solid white;
  background-color: gray;
  padding: 20px;
}

#window1,
#window2,
#window3,
#window4,
#window5,
#window6,
#window7,
#window8,
#window9,
#window10,
#window11,
#window12 {
  width: 85px;
  height: 60px;
  background: black;
  cursor: pointer;
}

#window2,
#window4,
#window6,
#window8,
#window10,
#window12 {
  margin-left: 10px;
}

.door {
  width: 40px;
  height: 80px;
  background-color: brown;
  position: relative;
  bottom: -18px;
}

.yellow {
  background-color: yellow !important;
  box-shadow: 0 0 10px yellow, 0 0 15px yellow, 0 0 20px yellow;
}
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Projeto</title>
  </head>
  <body>
    <div class="day">
      <div class="container">
        <div class="predio">
          <div id="window1" class="ligaDesliga"></div>
          <div id="window2" class="ligaDesliga"></div>
          <div id="window3" class="ligaDesliga"></div>
          <div id="window4" class="ligaDesliga"></div>
          <div id="window5" class="ligaDesliga"></div>
          <div id="window6" class="ligaDesliga"></div>
          <div id="window7" class="ligaDesliga"></div>
          <div id="window8" class="ligaDesliga"></div>
          <div id="window9" class="ligaDesliga"></div>
          <div id="window10" class="ligaDesliga"></div>
          <div id="window11" class="ligaDesliga"></div>
          <div id="window12" class="ligaDesliga"></div>
          <div class="door"></div>
        </div>
      </div>
    </div>
  </body>
</html>

  • Cool opa, now I understand a little better the logic there, I’ll try to adapt until I look like I’m imagining, but you already gave me a good idea, I thank you

Browser other questions tagged javascript html5 css3 dom

You are not signed in. Login or sign up in order to post.