Mini.Project-moodBoard

Module 04 Mini-Project: Mood Board

In this activity, you will work with a group to build a dynamic mood board.

The completed application should meet the following criteria:

As a user, I want to add an image of my choice using a URL.

https://static.bc-edx.com/coding/full-stack/04-Web-APIs/assets/100-m4-mini.png

As a user, I want to drop that image into the mood board.
As a user, I want to add some text to the mood board.
As a user, I want drag that text into the mood board.
As a user, I want to see the image or text being dragged as I move it into the mood board.
As a user, I want my mood board to be saved in local storage.

Navigate to Develop/assets/js/script.js and complete the TODO sections.
When a user pastes an image URL into the input field and clicks the "Add Image" button, the image should be draggable.
When a user clicks a draggable element on to the mood board, the element should be appended to the mood board in the position of the mouse.
When a user enters text into the input field and clicks the "Add Text" button, the text should be draggable.
When a user clicks the draggable element on to the mood board, the element should be appended to the mood board in the position of the mouse.
When a user refreshes or returns to the browser page, the mood board should persist.
When a user clicks the "Clear All" button, the mood board should be cleared and the local storage should be cleared.

Refer to the documentation:

If you have completed this activity, work through the following challenge with your group to further your knowledge:

Use Google or another search engine to research this.