Learn Vue JS course Learn Javascript and Vue JS Learn VueJS course Learn VueJS Tutorial

A “Wordle” on Test Driven Development in Vue.js

Providing hints after each submission - Part 2 thumbnail image

Get access to the most comprehensive Vue.js video library in the world. Over 300 video lessons including the newest Vue 3 features.

Providing hints after each submission - Part 2

Another key point behind the real Wordle game is that after each successful submission, the game presents the player with feedback in the following form:

  • Correct letters in the right position (indicated in green)
  • Correct letters in the wrong position (indicated in yellow)
  • Non-existent letters (indicated in gray)

In this lesson, we will incorporate a similar functionality into our application.

Topics Covered:

  • The usage of Data Providers in Vitest
  • Collecting multiple instances of a given wrapper element and making assertions on specific ones
  • Manipulating CSS Variables based on the rule of specificity