JSFiddle - React, Tailwind, and code Playground

[ASSIGNMENT] Close Frontend Application Quiz

by Joseph Rex

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-output{
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f0f0f0;
}

.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);
  border: solid medium transparent;
  transition: border-color .5s cubic-bezier(.);
}

.List__item--selected{
  border-color: rosybrown;
}

.List__item > button {
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  color: inherit;
  text-shadow: inherit;
}

/* 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 } = 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 ListItem = React.memo(({ item, isSelected, onToggle }) => {
  const handleClick = () => onToggle(item.name);
  
  return (
    <li 
      className={`List__item List__item--${item.color} ${isSelected ? 'List__item--selected' : ''}`}
    >
      <button 
        type="button" 
        onClick={handleClick}
        aria-pressed={isSelected}
      >
        {item.name}
      </button>
    </li>
  );
});
const List = ({ items }) => {
  // Store selected item names mapping. Object/Dictionary provides O(1) lookup.
  const [selectedItems, setSelectedItems] = React.useState({});
  const handleToggle = React.useCallback((name) => {
    setSelectedItems(prev => {
      if (prev[name]) {
        const { [name]: _, ...rest } = prev;
        return rest;
      }
      return { ...prev, [name]: true };
    });
  }, []);
  
  const selectedNames = React.useMemo(() => Object.keys(selectedItems), [selectedItems]);
  return (
    <Fragment>
      <div className="List-output">
        <h3>Selected Items ({selectedNames.length}):</h3>
        <p>
          {selectedNames.length > 0 ? selectedNames.join(', ') : 'None'}
        </p>
      </div>
      
      <ul className="List">
        {items.map(item => (
          <ListItem 
            key={item.name} 
            item={item}
            isSelected={Boolean(selectedItems[item.name])} 
            onToggle={handleToggle} 
          />
        ))}
      </ul>
   ...