skip to Main Content

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?

3

Answers


  1. 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. 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. 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