Frontendopolis zadanie 25

In this example below you will see how to do a Frontendopolis zadanie 25 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by pawelziezio, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright pawelziezio ©
  • HTML
  • CSS
  • JavaScript
    <section>
  <h1>Frontendopolis zadanie 25.</h1>
  <h2>Po kliknięciu w dowolny element listy zmień jego kolor na zielony, kolejny na niebieski a poprzedni na pomarańczowy. Jeśli kliknięty element był parzysty dodaj mu jasnoszare tło, a nieparzystemu ciemnoszare. Po kliknięciu w inny element, poprzednie niech wrócą do stanu poprzedniego.</h2>
  <hr>
    <ol>
      <li data-id="0">Poniedziałek</li>
      <li data-id="1">Wtorek</li>
      <li data-id="2">Środa</li>
      <li data-id="3">Czwartek</li>
      <li data-id="4">Piątek</li>
      <li data-id="5">Sobota</li>
      <li data-id="6">Niedziela</li>
    </ol>
</section>  
  


/*Downloaded from https://www.codeseek.co/pawelziezio/frontendopolis-zadanie-25-dZayWw */
    @import url('https://fonts.googleapis.com/css?family=Lato:300&subset=latin-ext');

* {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  transition: all 0.3s ease-in-out; 
}

html{
  background-color: #CFD8DC;
}

section{
  width: 50%;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 10px 30px; 
}

li{
  padding: 3px;
  cursor: pointer;
  width: 120px;
  border-radius: 3px;
  font-weight: bold;
}




/*Downloaded from https://www.codeseek.co/pawelziezio/frontendopolis-zadanie-25-dZayWw */
    const olist = document.querySelector('ol');
const items = document.querySelectorAll('li');
let clicked = 'false'; 

olist.addEventListener('click', function(e){
  if(clicked === 'false'){
    let id = Number(event.target.dataset.id);
    if (id !== 0){
      items[id-1].style.color = 'orange';
    };
      items[id].style.color = 'green';
    if (id !== 6){
      items[id+1].style.color = 'blue';
    }
    if(id % 2 == 0){
      items[id].style.backgroundColor = 'grey'
    }else{
      items[id].style.backgroundColor = 'darkgrey' 
    }
    clicked = 'true'
  }else{
    for(let i = 0; i < items.length; i++){
      items[i].style.color = 'black';
      items[i].style.backgroundColor = '#bac2c6';
    }
    clicked = 'false'
  }    
})



Comments