JSFiddle - React, Tailwind, and code Playground

[ASSIGNMENT] Close Frontend Application Quiz

by Aaron Kahlhamer

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

CSS

.Cart {
    padding-top: 16px;
    padding-right: 16px;
    padding-left: 16px;
}

.List {
    margin: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: 60px;
    grid-gap: 16px;
}

.List__item {
    text-align: center;
}

.list__item__cta {
    line-height: 60px;
    color: white;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
    background: none;
    border: none;
    padding: 0;
    width: 100%;
}

.list__item__cta.is-active {
    outline: 10px solid red;
}

/* Taken from https://clrs.cc/ */

.List__item--navy {
    background-color: #001f3f;
}

.List__item--blue {
    background-color: #0074d9;
}

.List__item--aqua {
    background-color: #7fdbff;
}

.List__item--teal {
    background-color: #39cccc;
}

.List__item--olive {
    background-color: #3d9970;
}

.List__item--green {
    background-color: #2ecc40;
}

.List__item--lime {
    background-color: #01ff70;
}

.List__item--yellow {
    background-color: #ffdc00;
}

.List__item--orange {
    background-color: #ff851b;
}

.List__item--red {
    background-color: #ff4136;
}

.List__item--maroon {
    background-color: #85144b;
}

.List__item--fuchsia {
    background-color: #f012be;
}

.List__item--purple {
    background-color: #b10dc9;
}

.List__item--black {
    background-color: #111111;
}

.List__item--gray {
    background-color: #aaaaaa;
}

.List__item--silver {
    background-color: #dddddd;
}

React

const { Fragment, useState } = React;

// Implement a feature to allow item selection with the following requirements:
// 1. Clicking an item selects/unselects it.
// 2. Multiple items can be selected at a time.
// 3. Make sure to avoid unnecessary re-renders of each list item in the big list (performance).
// 4. Currently selected items should be visually highlighted.
// 5. Currently selected items' names should be shown at the top of the page.
//
// Feel free to change the component structure at will.

const List = ({ items }) => {
  const [cart, setCart] = useState([]);

  const updateCart = ({ item }) =>
    cart.includes(item.name)
   
      ? setCart([
      		/* If the item is already selected, remove it from the top list.*/
          ...cart.filter((selectedItem) => selectedItem !== item.name),
          (item.isActive = false),
        ])
      /* Else add it to the list */
      : setCart([...cart, item.name, (item.isActive = true)]);

  return (
    <Fragment>
      <ul className="Selected">
        {cart.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <ul className="List">
        {items.map((item) => (
          <li
            key={item.name}
            className={`List__item List__item--${item.color}`}
          >
            <button
              className={`list__item__cta ${item.isActive ? "is-active" : ""}`}
              onClick={() => updateCart({ item })}
            >
              {item.name}
            </button>
          </li>
        ))}
      </ul>
    </Fragment>
  );
};

// ---------------------------------------
// Do NOT change anything below this line.
// ---------------------------------------

const sizes = ['tiny', 'small', 'medium', 'large', 'huge'];
const colors = ['navy', 'blue', 'aqua', 'teal', 'olive', 'green', 'lime', 'yellow', 'orange', 'red', 'maroon', 'fuchsia', 'purple', 'silver', 'gray', 'black'];
const fruits = ['apple', 'banana', 'watermelon', 'orange', 'peach',...