I'm a huge fan of code puzzles and programming challenge sites like Project Euler and Code Golf. Coding contests are plenty of fun, too. These are great tools for learning to program, showing off your skills, or just relaxing.
All the coding puzzle sites and contests are wonderful for vanilla programming, but web UI languages, frameworks and libraries have special challenges and puzzles that just aren't covered by most programming challenge sites.
So here we are. This post is for UI/UX learners and experts. Feel free to suggest your own #web-ui-challenge and #coding-puzzle. Or, just pick some to solve for fun.
Challenge:
Provide two input fields for the user, and a button labeled “Add”. When the button is clicked, add the two numbers provided by the user and provide the user with the resulting sum. Gracefully handle cases were the user attempts to enter non-numeric numbers, and also decimal numbers.
.
.
Challenge:
Create a web page that has no text in the body, but when viewed displays “Look! No Tags!”
Hint:
Modifying the DOM through JavaScript works well for this.
.
.
Challenge:
Ask the user for a pyramid width. Then, create a pyramid of circles with the base of the pyramid being the number of circles the user entered. Provide a way for the user to change the size of the pyramid.
.
.
Challenge:
After the web page loads, draw a green Christmas Tree with at least three round ornaments. The ornaments should be a different color or colors than the tree.
Hint:
The canvas element works well for drawing
.
.
Challenge:
Using free public APIs, generate a widget for a web page that provides your daily local weather forecast.
Extra Credit:
Make the location of the forecast selectable from a dropdown or a map.
Hint:
Fetch and a good framework/library such as ReactJS will make this much easier.
.
.
Challenge:
Draw a random maze. Randomly place a rat in the maze. Randomly place a cheese in the maze. Have the rat search the maze until it finds the cheese. Include a “Reset” button that generates a new maze with a rat and cheese in new random locations. Images may be used for the rat, cheese and walls of the maze.
Extra Credit:
Animate the rat walking using a sprite.
