https://github.com/emilydaykin/jigsaw

🧩 A small drag-and-drop jigsaw app in plain HTML, CSS and JavaScript. Players can also show/hide hints, and the completed jigsaw will display the full image
https://github.com/emilydaykin/jigsaw

css3 html5 javascript

Last synced: 7 days ago
JSON representation

🧩 A small drag-and-drop jigsaw app in plain HTML, CSS and JavaScript. Players can also show/hide hints, and the completed jigsaw will display the full image

• Host: GitHub
• URL: https://github.com/emilydaykin/jigsaw
• Owner: emilydaykin
• Created: 2022-05-06T15:26:48.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-06T16:23:16.000Z (over 2 years ago)
• Last Synced: 2024-09-09T17:20:24.023Z (2 months ago)
• Topics: css3, html5, javascript
• Language: JavaScript
• Homepage:
• Size: 5.63 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Jigsaw Drag 'n Drop

My first web development project, from May 2021, experimenting with drag and drop event listeners, as well as HTML, CSS and Javascript!



  

  





  

  



#### Event listeners used

```

for (const box of boxes) {

  box.addEventListener('dragstart', dragStart);

  box.addEventListener('dragenter', dragEnter);

  box.addEventListener('dragover', dragOver);

  box.addEventListener('dragleave', dragLeave);

  box.addEventListener('drop', dragDrop);

  box.addEventListener('click', jigImgClick);

}

```

## Installation

1. Clone this repo

2. Run `live-server` in the command line

## Features

* After dropping an image from the pile to a jigsaw box, it’ll be removed from the pile.

* If clicking on the (filled) jigsaw box (or dragging and dropping another image over it), that ‘jigsaw piece’ image will be returned to the pile.

* If hovering over an empty jigsaw box with an image: the box will have a grey background and dotted border.

* User can (toggle to) show and hide hints (grey numbers in top left corner of image, which disappears when that image is dropped into jigsaw).

* Once the jigsaw is filled, the jigsaw pieces' borders disappear and the entire complete image is shown.

* The user can click restart to return all jigsaw pieces to the pile and start again.

## Future Improvements & Bugs

### Future Improvements:

* Implement logic to check that the jigsaw has been completed successfully (image in the right order). Currently, whether or not the jigsaw is correct, the borders will disappear and the completed (jumbled) image shows.

### Bugs:

* Each empty jigsaw box can be dragged to another one...

* If the hints are shown, and a jigsaw piece is returned to the pile, that returned image will *not* show the hint.