JSFiddle - React, Tailwind, and code Playground

[ASSIGNMENT] Close Frontend Application Quiz

by Ansel Santosa

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

.Selected {
  padding: 16px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
}

.Selected__label {
  font-weight: bold;
  display: block;
  margin-bottom: 2px;
}

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

.List__item {
  line-height: 50px;
  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;
  /* transparent border here to avoid visual jump when border changes */
  border: 4px solid transparent;
}

.List__item--selected {
  border: 4px solid black;
}

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

// utility function to check if a name is selected
const isSelected = (selected, name) => Boolean(selected[name]);

// utility function to get the list of selected names
const getSelected = (selected) => {
	const keys = Object.keys(selected);
  return keys.filter((name) => isSelected(selected, name));
}

const List = ({ items }) => {

	const [selected, setSelected] = useState({});

	return (
  	<Fragment>
      <div className="Selected">
        <label
          className="Selected__label"
          for="selected"
        >Selected Items</label>
        <output name="selected" id="selected">{getSelected(selected).join(", ")}</output>
      </div>
      <ul className="List">
        {items.map(({name, color}) => (
          <Item
            key={name}
            name={name}
            color={color}
            selected={isSelected(selected, name)}
            onClick={() => setSelected((selected) => ({
              ...selected, 
              [name]: !isSelected(selected, name)
            }))}
          />
        ))}
      </ul>
    </Fragment>
	);
};

const Item = ({ name, color, selected, onClick}) => (
  <li
    className={`
    	List__item
      List__item--${color}
      ${selected ? "List__item--selected" : ""}
    `}
    onClick={() => onClick()}
  >
    {name}
  </li>
);

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

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