Wordle 🧩🎲
Published: 2022-01-30 00:30:43




The word game has gone from dozens of players to hundreds of thousands in a few months. It was created by a software engineer in Brooklyn for his partner.

Today we going to replicate the UI and add some little animations :) 


```
<div id="container"></div>
<div id="restart">
  <div class="restart-letter">S</div>
  <div class="restart-letter">T</div>
  <div class="restart-letter">A</div>
  <div class="restart-letter">R</div>
  <div class="restart-letter">T</div>
</div>
```


The above HTML code contains a div with an id of "container" and another div with an id of "restart". Within the "restart" div are four more divs, each with a class of "restart-letter". 



```

body,
html {
  background-color: #333;
  margin: 0px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#container {
  font-size: 30px;
}

#restart {
  padding-top: 10px;
  display: none;
}

#restart:hover .restart-letter{
  border: 2px solid #565758;
}

.restart-letter {
  background: #121213;
  border: 0px solid #565758;
  color: #d7dadc;
  font-family: "Clear Sans", Sans-Serif;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  line-height: 1.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
}

.cell {
  display: inline-block;
}
```


The `background-color` and margin properties are applied to the body and html elements to create a solid black background and remove all margins. The height property is set to 100% to ensure that the background covers the entire page, and the overflow-* properties are used to hide any overflow content.

The display property is set to flex on the body element, which will cause all child elements to be displayed in a flexible grid. The `align-items` and `justify-content` properties are set to center to evenly distribute the items in the grid. The flex-direction property is set to column, which will cause the grid to be displayed in a vertical column.

The `#container` element has a font-size of 30px and is displayed inline-flex. This will cause its children to be displayed in a single row, and the justify-content and align-items properties will be applied to them.

The `.restart-letter` element is given a background and border color, font family, and width. It is also set to display: inline-flex which will cause it to be displayed in a single row with the other elements. The `justify-content` and `align-items` properties are also set to center.

```
import animationManager from "https://assets.codepen.io/278239/animationManager.js";
import animationData from "https://assets.codepen.io/278239/sparta.js";

const container = document.getElementById('container');
const restart = document.getElementById('restart');

animationManager.initialize(container, 6, 5);
animationManager.start(animationData.frames, animationData.animation);
animationManager.onComplete = function() {
  restart.style.display = 'block';
}
restart.addEventListener('click', function() {
  animationManager.restart();
  restart.style.display = 'none';
})
```

This code imports a few files - the first being _https://assets.codepen.io/278239/animationManager.js_, which contains the `animationManager `function. This function is then used to initialize, start, and complete animations. The second file imported is https://assets.codepen.io/278239/sparta.js, which contains the `animationData`. Finally, a few elements are defined - container and restart. The container is used to hold the animation, and the restart button is used to restart the animation.

<iframe height="300" style="width: 100%;" scrolling="no" title="Wordle Animations " src="https://codepen.io/yakumwamba/embed/mdqeXyP?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/yakumwamba/pen/mdqeXyP">
  Wordle Animations </a> by Brian Lemba (<a href="https://codepen.io/yakumwamba">@yakumwamba</a>)
  on <a href="https://codepen.io">CodePen</a>.


</iframe>

If you want to follow me you can do so on git [here](github.com/yakumwamba)

Thanks