This content originally appeared on DEV Community and was authored by Yaku
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 animationManagerfunction. 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.
See the Pen
Wordle Animations by Brian Lemba (@yakumwamba)
on CodePen.
If you want to follow me you can do so on git here
Thanks
This content originally appeared on DEV Community and was authored by Yaku
Yaku | Sciencx (2022-01-30T00:30:43+00:00) Create your own Wordle with animations 🧩🎲. Retrieved from https://www.scien.cx/2022/01/30/create-your-own-wordle-with-animations-%f0%9f%a7%a9%f0%9f%8e%b2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.