JSFiddle - React, Tailwind, and code Playground

[ASSIGNMENT] Close Frontend Application Quiz

by Marventus

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

/* Global */

body {
  box-sizing: border-box;
  font: 10px/1 Verdana, Arial, sans-serif;
  padding: 1rem;
}

/* Titles */

.Title--secondary {
  font-size: 1.8rem;
}

/* List */

.List {
  margin: 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 6rem;
  grid-gap: 1.6rem;
}

.List__item {
  line-height: 6rem;
  font-size: 0.8rem;
  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: 2px dashed transparent;
  background-clip: padding-box;
  transition: all 0.2s ease-in;
  user-select: none;
}

.List__item--selected {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.75);
}

/* Selected List  */

.SelectedList,
.SelectedList__Message {
  min-height: 2rem;
  margin: 1.6rem;
}

.SelectedList__item,
.SelectedList__Message {
  font-size: 1rem;
}

.SelectedList__item {
    display: inline-block;
}

.SelectedList__Message em {
  display: block;
  font-style: italic;
}

.SelectedList__item {
  margin-left: 0.25rem;
}

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

const List = ({ items }) => {

  let [selectedItems, setSelected] = useState([]);

  const toggleSelect = (item) => {
    if(!item){
    	console.warn('toggleSelect: Please pass a valid item for toggling.');
      return;
    }
    item.selected = !!!item.selected;
    setSelected(items.filter(item => item.selected));
  };
  
  return (
    <Fragment>
      <div>
        <h2 className="Title--secondary">Selected Fruits:</h2>
        {
        	!selectedItems.length ?
        	(
          	<p className="SelectedList__Message">
              <em>You don't have any selected fruits.</em>
              <em>Click on any available fruit below to select or deselect it.</em>
            </p>
          ) : 
          <ul className="SelectedList">
            {selectedItems.map((item, i) => (
              <li key={item.name} className="SelectedList__item">
                {item.name + (i < selectedItems.length - 1 ? ',' : '.')}
              </li>
            ))}
          </ul>
        }
      </div>
      <div>
        <h2 className="Title--secondary">Available Fruits:</h2>
        <ul className="List">
          {items.map(item => (
            <li
              key={item.name}
              className={`List__item List__item--${item.color}${item.selected ? ' List__item--selected' : ''}`}
              style={(item.selected) ? {borderColor: item.color} : {}}
              onClick={(e)=>toggleSelect(item)}>
              {item.name}
            </li>
          ))}
      ...