JSFiddle - React, Tailwind, and code Playground

[ASSIGNMENT] Close Frontend Application Quiz

by jacobwsmith

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

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

.List__item {
  line-height: 60px;
  text-align: center;
  color: white;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
}

/* 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. Currently selected items should be visually highlighted.
// 4. Currently selected items' names should be shown at the top of the page.
// 5. Make sure to avoid unnecessary re-renders.

const List = ({ items }) => {
  // Declare a new state variable, which we'll call "selected"
  const [selected, setSelected] = useState({ "tiny navy apple": true });

  const toggle = name => {
    if (selected[name]) {
      // Remove
      setSelected(
        Object.keys(selected).reduce((obj, key) => {
          if (key !== name) {
            return { ...obj, [key]: selected[key] };
          }
          return obj;
        }, {})
      );
    } else {
      // Add
      setSelected(Object.assign({}, selected, { [name]: true }));
    }
  };

  const selectedStyle = {
    border: "solid yellow 3px",
    "box-shadow": "10px 10px 5px grey"
  };

  const pillStyle = {
    border: "solid 1px #cccccc",
    padding: "3px",
    "background-color": "#f7f7f7",
    "border-radius": "7px",
    margin: "3px",
    "line-height": "2em",
    "font-size": ".9em"
  };

  return (
    <Fragment>
      <div>
        <span>Selected: </span>
        {Object.keys(selected).map(key => (
          <span style={pillStyle}>{key} </span>
        ))}
      </div>
      <ul className="List">
        {items.map(item => (
          <li
            key={item.name}
            style={selected[item.name] ? selectedStyle : {}}
            className={`List__item List__item--${item.color}`}
            onClick={() => toggle(item.name)}
          >
            {item.name}
          </li>
        ))}
      </ul>
    </Fragment>
  );
};

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

const sizes = ['tiny', 'small',...