Html Question posted in
Some basic documentation can be found here.

How to change a HTML element's colour then fade it back to the original colour

I am creating an interactive crossword app with HTML, Vanilla Javascript and CSS.

I want to add a function to check if the currently selected cell/word or entire grid is correct. To show if the user has inputted the correct or incorrect letter into a given element, I want to immediately set the colour of that element to green/red (correct/incorrect) then fade it back to the original colour.

Snippet for the HTML and CSS:

.example {
    background-color: whitesmoke;
}

<div id="example">Cell</div>

Pseudo-JavaScript example:

function fade(element) {
    if (element has correct value) {
        element.style.backgroundColour = "green";
    } // otherwise make it red
    // Then make it fade back to whitesmoke
}

Anyone have some ideas to achieve this colour fading?

Tags:

3

Answers


  1. 0

    You can achieve this, using the setTimeout function, after the if conditions in the fade function.

    document.getElementsByTagName("div")[0].addEventListener("click", function clicked() {
document.getElementsByTagName("div")[0].style.backgroundColor = "green"

setTimeout(() => {
      document.getElementsByTagName("div")[0].style.backgroundColor = "whitesmoke"
      document.getElementsByTagName("div")[0].style.transition = "background-color 1s linear"
    }, 2000)
})
    <div style="width:50px; height:50px; background-color: whitesmoke;"></div>
    Login or Signup to reply.
  2. 0

    This is something that might help you:

    const items = document.querySelectorAll(".item");

const fadeEffect = (item) => {
  item.classList.add("fade-class");

  const timer = setTimeout(() => {
    clearTimeout(timer);
    item.classList.remove("fade-class");
  }, 1000);
}

items.forEach(it => {
  it.addEventListener("click", () => fadeEffect(it));
});
    aside {
  display: flex;
  gap: 20px;
}

.item {
  height: 20px;
  width: 20px;
  border: 1px solid black;
  text-align: center;
  background: green;
  color: white;
}

.fade-class {
  animation: fadeAway 1s ease-out;
}

@keyframes fadeAway {
  from {
    background: orange;
  }
  to {
    background: green;
  }
}
    <aside>
  <div class="item">A</div>
  <div class="item">B</div>
</aside>

    You can also checkout the working Fiddle

    Login or Signup to reply.
  3. 0

    Simply use classList.toggle to add a class if a condition is met. You then can solve this whole thing with CSS-animation that has a 2-second timer and fades back to the initial value:

    function fade(element) {
  element.classList.toggle('correct', (element.textContent === 'Cell'));
}

fade(document.querySelector('#example'));
    .correct {
  animation: 2s linear correct;
}

@keyframes correct {
  0% {
    background-color: green;
  }
  100% {
    background-color: intial;
  }
}
    <div id="example">Cell</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search