The first puzzle was created by an expert in map design in 1760 named John Spilsbury. What he did at the time was to place one of his maps on a wooden board, cutting it out around the borders of the countries. This creation shortly after was used by the UK as an educational hobby.
Today it is possible to find puzzles of 100, 500, 1000 and more than 10,000 pieces on the market. Fun fact, the largest puzzle in the world has 42,000 pieces.
With this introduction done, this challenge consists of creating a web puzzle using drag events to move its pieces.
Nothing more satisfying than knowing how long it took you to solve a puzzle. Can you add a pop-up that indicates users how long it took them to solve the puzzle?
- DOM manipulation
- Custom properties
- Arrays and Objects
- Loops
- Conditionals
- Events setup
- Drag events
- Date API
- Canvas API (Tip: you can use canvas to crop the puzzle pieces from an image) 😉