Shape of the Day:

• Drag and Drop Elements
• JavaScript Frameworks

Website of the Day:

https://www.puzzlescript.net/ – A cool website with a bunch of JavaScript made puzzles!

Dragging and Dropping Elements with JavaScript

• First, go to any website and try to click and drag things like text and images. What happens?
• Read through this tutorial  to understand the code
  New & important JavaScript:
  draggable attribute– needs to be true so element can be dragged
  dataTransfer.setData() method– specifies data & its format
  dataTransfer.getData() method– retrieves drag data for specified type
  event.preventDefault() method– stops default action of an element
• Please download this code , copy it into a new Visual Studio file and answer the questions below somewhere on the page. Save it as dragdrop.html.

1. 1. How can we move the second cupcake into the second box? Why is the first cupcake moving?
   2. Can you drag the second cupcake into the first box and the first cupcake into the second box?
   3. Can we move the cupcakes anywhere we want on the page? What happens? Why?

JavaScript Frameworks (can be answered on the same page)

1. What are JavaScript frameworks?
2. Please find some examples of JavaScript frameworks and link them here
3. Why do people use them?
4. What are some of the most popular JavaScript frameworks?
5. What you can build with them?
6. What is the difference between a JavaScript framework and a JavaScript library?
7. How do you pick a framework?