Shape Drop Game- Creating The UI

Open the project folder

The HTML Drag and Drop API

This project is going to make use of another Web API. And this one is the HTML Drag and Drop API. This is how ths project will look, containing two sections filled with shapes:

The idea is to drag the solid shapes from the bottom into the matching shape in the top section. If correct, the top shape will fill with the solid colour, giving the appearance it was dropped into the shape.

The starter files have the following:

• index.html: We have an index page set up with no content, just linking to a Google font, a custom stylesheet, and a custom script.
• styles.css: A stylesheet so we don’t have to focus on the styling. Aside from general layout and styling, we have different class names with shapes as we see here:

.square {
  width: 50px;
  height: 50px;
  background: rgb(247, 100, 100);
}
.square2 {
  width: 42px;
  height: 42px;
  background: rgb(110, 131, 235);
}

These have different widths, heights, border radiuses and background colours.

Creating the shapes

In the HTML, we can create these shapes by using an empty element such as a div and turn them into shapes by adding these classes:

<!-- index.html -->
<header>
  <h3>Score: <span id="score"></span></h3>
  <button>Play again</button>
  <p>Drag the colourful shapes into the matching holes!</p>
</header>
<div class="drop-section">
  <div class="drop square"></div>
  <div class="drop rectangle"></div>
  <div class="drop circle"></div>
  <div class="drop square2"></div>
  <div class="drop oval2"></div>
  <div class="drop rectangle2"></div>
  <div class="drop rectangle3"></div>
  <div class="drop pill"></div>
  <div class="drop oval"></div>
  <div class="drop pill2"></div>
</div>
<div class="drag-section">
  <!-- both sections use the same shape class to keep the shape consistent -->
  <!-- but the drop class above removes the background -->
  <div class="rectangle"></div>
  <div class="square"></div>
  <div class="pill"></div>
  <div class="square2"></div>
  <div class="oval"></div>
  <div class="oval2"></div>
  <div class="pill2"></div>
  <div class="circle"></div>
  <div class="rectangle2"></div>
  <div class="rectangle3"></div>
</div>

These will be used in the next lesson to listen for drag and drop events.