Sassy Shapes

A GitHub Classroom Assignment

This assignment must be accepted on GitHub Classroom.

Objective

For this exercise, you will create the necessary CSS and JavaScript to display five different shapes each in five different colors. Each shape / color combination will be represented by a class with the name shape-color. (ex. .square-red)

Sass will be used to generate all the necessary CSS. JavaScript will be used to generate the necessary HTML.

Requirements

The following requirements must be met in order to complete the assignment successfully:

1. Clone this repository from GitHub and use the provided files to complete the assignment. The repository contains the following files: index.html, scss/style.scss, and js/script.js.
2. Complete the parts below.

Part 1

1. Use JavaScript and the provided arrays, to create and insert the HTML for all the shapes into the <main> element. The HTML should look like this:

<main id="shapes" class="shapes">
  <div class="square-red"></div> 
  <div class="square-blue"></div> 
  <div class="square-green"></div> 
  <div class="square-purple"></div> 
  <div class="square-orange"></div> 
  <div class="circle-red"></div> 
  <div class="circle-blue"></div> 
  ...
  <div class="octagon-green"></div> 
  <div class="octagon-purple"></div> 
  <div class="octagon-orange"></div>
</main>

Part 2

1. Create a single mixin that will be used to create the CSS for a specific shape and color.
   1. The mixin should take two parameters a shape and a color.
   2. The mixin should check for the value of shape and then extend the corresponding placeholder provided in the starter files. All the properties with the default color (NOTE: the placeholders use red as the default color) should be overwritten with the desired color.
2. Create all of the shape color class selectors using the provided lists (i.e. .square-red, .square-blue…). Inside each shape color selector use the mixin created in step 1 to output the correct CSS.

Example

The screenshot below shows what the complete version should look like.

Rubric

Task	Points
Successfully creates the HTML using JavaScript	2
Successfully creates the shapes mixin	5
Successfully generates the shape / color classes	3
Total	10

Submission

When the assignment is completed, follow the steps below to submit for grading:

1. Create a commit with the message "Completes the Sassy Shapes assignment"
2. Push all commits to GitHub.
3. Submit the URL to your GitHub repository to the Sassy Shapes assignment on BrightSpace.