Live URL: https://gabi246.github.io/a1-ghd3/index.html
For this project the user is to interact with a circle and a rectangle. The goal is to drag and drop the shapes into a box at the bottom of the page. When the user drags the shape within the bounds of the box, user will be alerted of their success. Refresh the page to reset. The user has these capabilities when interacting with these shapes:
-
Mouseover the shapes: when mousing over a given shape, the shape will change color. Mouse out of the shape: when the mouse is no longer over the shape, the shape will return to it's original color. The following images show the color change in the mouse over of the circle.
-
Selection: The user has the option to select the shape by clicking on it. The first click will change the color to yellow. When clicked again, the shape will revert back to its' original color. Addiotionally, if the shape is selected when the object is placed in the box, it will return to it's original color.
-
Drag and Drop: The user can drag a shape by clicking and holding down on the mouse. The user can drop the item by letting go of the mouse.
Design Acheivements:
-
These mouse over and out capabilities will allow the user clearly idenitfy what shape there mouse is hovering over. This could be more helpful when more shapes are added to the game.
-
The yellow selection will also help users who might want to highlight the shape they are working on to see it more clearly. The user can de-select by simply clicking the same shape again.
-
An alert that is color coordinated with the shape, will help validate the user when they have completed the task.
https://observablehq.com/@d3/learn-d3?collection=@d3/learn-d3 https://octoperf.com/blog/2018/04/18/d3-js-drag-and-drop-tutorial/#the-d3-drag-library