FE App Quiz

[ASSIGNMENT] Close Frontend Application Quiz

by karlovac

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);
  cursor: pointer;
}

.List__item__selected {
  border: 8px dashed #666666;
  line-height: 44px;
}

.SelectedDisplay {
  margin: 16px;
  background-color: #eaeaea;
  display: flex;
  flex-wrap: wrap;
  min-height: 27.5px;
}

.SelectedDisplayItem {
  font-size: smaller;
  margin: 4px;
  padding: 2px;
  background-color: #666666;
  color: #ffffff;
}

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

const SelectedDisplayItem = (props) => {
	return (
  	<div className="SelectedDisplayItem">
      { props.children }
    </div>
  );
};

const SelectedDisplay = (props) => {
	return (
  	<div className="SelectedDisplay">
      {
        props.selected.map(item => (
          <SelectedDisplayItem key={'sdi'+item}>
            {item}
          </SelectedDisplayItem>
        ))
      }
  	</div>
  );
};

const ListItem = memo((props) => {
	const classNames = [`List__item List__item--${props.color}`];
  if (props.selected.indexOf(props.children) > -1) {
  	classNames.push('List__item__selected');
  }
	return (
    <li className={classNames.join(' ')} role="button" onClick={props.onClick}>
      { props.children }
    </li>
	)
});

const List = ({ items }) => {
	const [selected, setSelected] = useState([]);
  const handleClick = useCallback((evt) => {
  	evt.persist();
    setSelected((prevSelection) => {
      const updatedSelection = [...prevSelection];
      const clickedColorName = evt.target.textContent;
      const itemIndex = updatedSelection.indexOf(clickedColorName);
      if (itemIndex === -1) {
        updatedSelection.push(clickedColorName);
      } else {
        updatedSelection.splice(itemIndex, 1);
      }
    	return updatedSelection;
    });  
  }, []);
  return (
    <Fragment>
      <SelectedDisplay selected={selected}>
      </SelectedDisplay>

      <ul className="List">
        {
        items.map(item => (
          <ListItem...