JSFiddle - React, Tailwind, and code Playground

[ASSIGNMENT] Close Frontend Application Quiz

by shauryakalia

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;
}

.selected {
  opacity: 0.5;
}

.deselected {
  opacity: 1;
}

React

const { Fragment, useState, useCallback } = 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.


 function LI({ name, color, deleteIndex, index }) {
   const toggle = () => {
    if (event.target.classList.contains('selected')) {
      event.target.classList.add('deselected');
      event.target.classList.remove('selected');
      deleteIndex(index, undefined, event.target.textContent);
    } else {
      event.target.classList.add('selected');
      deleteIndex(index, 'push', event.target.textContent);
    } 
  }
  return (
          <li key={name} className={`List__item List__item--${color}`} onClick={toggle}>
            {name}
          </li>
  );
}

const MemoizedLI = React.memo(LI);
const List = ({ items }) => {

  const [selectedItems, setSelectedItems] = useState([]);
	const deleteIndex = useCallback((index, type, text) => {
  			setSelectedItems(items => {
        	let copy = [...items];
        	if(type == 'push') copy.push(text + '');
          else {
          	copy.splice(index,1);
          }
          return copy;
        })
  }, []);

  return (
    <Fragment>
      {selectedItems}
      <ul className="List">
        {items.map((item, index) => (
          <MemoizedLI index={index} key={item.name} color={item.color} name={item.name} deleteIndex={deleteIndex}/>
        ))}
      </ul>
    </Fragment>
  );
}

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

const sizes = ['tiny', 'small', 'medium', 'large', 'huge'];
const colors = ['navy', 'blue',...