JSFiddle - React, Tailwind, and code Playground

[ASSIGNMENT] Close Frontend Application Quiz

by Evan Sharp

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/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 {
  border: none;
  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);
  cursor: pointer;
}

.List__item--active {
  outline-width: 3px;
  outline-style: dashed;
  outline-color: blue;
  outline-offset: 1px;
}

.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* 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, useCallback, memo } = 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.

/*
	Notes: 
  role is checkbox since it is toggleable 
  aria live reads your current selection
  wasn't sure what "visually highlighted" was indented to look like, you get blue dashed. You're welcome :)
*/

const ListItem = memo(({ item, isSelected = false, onSelect }) => (
  <li
    className={`List__item List__item--${item.color} ${
      isSelected ? 'List__item--active' : ''
    }`}
    tabindex="0"
    role="checkbox"
    aria-checked={isSelected}
    onClick={() => {
      onSelect(item);
    }}
  >
    {item.name}
  </li>
));

const List = ({ items }) => {
  const [selected, setSelected] = useState([]);
  const onSelect = useCallback(
    (item) => {
      setSelected((selected) => {
        if (selected.includes(item.name)) {
          return selected.filter((itm) => itm !== item.name);
        }
        return [...selected, item.name];
      });
    },
    [setSelected]
  );
  return (
    <Fragment>
      <section aria-live="polite">
        <span className="sr-only">
          Current selection: {selected.length === 0 && 'none'}
        </span>{' '}
        {selected.length > 0 && selected.join(', ')}
      </section>
      <ul className="List">
        {items.map((item) => (
          <ListItem
            key={item.name}
            item={item}
            onSelect={onSelect}
            isSelected={selected.includes(item.name)}
          />
        ))}
      </ul>
    </Fragment>
  );
};


//...