Pure CSS Watch

tecknerd — Wed, 15 Apr 2020 19:50:33 +0000

One of my first ventures into CSS art a few years back. Since I didn't use any kind of JavaScript it doesn't sync to the actual time. Not sure if there's a way to do that without any kind of JavaScript code.

Easter Tile Game with VueJS and Confetti Celebration

tecknerd — Wed, 15 Apr 2020 04:27:27 +0000

A little late, but I used Vue JS to make a tile game where the user must reorganize the tiles to complete the image. I remember seeing these in Easter baskets as a child. Complete the puzzle to get make the confetti drop.

I've come to see the game isn't mobile friendly, so my next step will be to make it so. Meanwhile, please enjoy it on a laptop or desktop. Thanks and apologies.

Update: The background images in the tiles respond to changes in screen size now. I did this by making the appropriate changes from

background: url('./happy-48398.png') no-repeat 0 0;

background: url('./happy-48398.png') no-repeat top left;
background-size: 300%;

for each tile. The tile container also works a little better by changing from a static pixel size to a relative size.

Update: Added a countdown timer.

Update: After adding the timer I never implemented any feedback to the user when time was up, other than the timer displaying 0:00. Now a layer appears over the tile area and gives a Game Over. Still need to polish some of the CSS and sizing. Think I might change the image also.

To-do List with VueJS

tecknerd — Sun, 12 Apr 2020 05:50:38 +0000

I made a to-do list as an exercise to learn VueJS. I really liked using Vue and how easy it made data binding. I would like to go back and change a few things, tidy up some code and maybe write a tutorial if people are interested in it.

DEV Community: tecknerd

Pure CSS Watch

Easter Tile Game with VueJS and Confetti Celebration

To-do List with VueJS