JSFiddle - React, Tailwind, and code Playground

[ASSIGNMENT] Close Frontend Application Quiz

by nate

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

.SelectedItems {
  margin: 16px;
  display: flex;
  align-items: flex-start;
}

.SelectedItems__title {
  font-weight: bold;
  margin-right: 0.2em;
}

.SelectedItems__list {
  flex-grow: 1;
  list-style-type: none;
}

.SelectedItems__item {
  display: inline;
}

.SelectedItems__item:hover {
  cursor: pointer;
  text-decoration: line-through;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
}

.List__clear {
  flex-shrink: 0;
  margin-left: 10px;
}

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

.List__item::after {
  --outline-offset-initial: 5px;
  --outline-offset: -5px;
  border: 3px solid red;
  content: '';
  position: absolute;
  top: var(--outline-offset-initial);
  right: var(--outline-offset-initial);
  bottom: var(--outline-offset-initial);
  left: var(--outline-offset-initial);
  transition: all 0.2s;
  pointer-events: none;
  opacity: 0;
  
}

.List__item--selected::after {
  top: var(--outline-offset);
  right: var(--outline-offset);
  bottom: var(--outline-offset);
  left: var(--outline-offset);
  padding: 5px;
  opacity: 1;
}

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

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.

// Nate's notes!
// 1. ✅ You can click on items to toggle their selection.
// 2. ✅ Multiple items can be selected at once.
// 3. ✅ All items in maps have key attributes
// 4. ✅ Styles added to add a red outline with a little transition animation to selected items.
// 5. ✅ Menu at the top added that displays the names of selected items, along with a button
//       to clear all selected items, if desired. Individual names can also be clicked to remove
//       them as selections.

const List = ({ items }) => {
	const [selected, setSelected] = useState([]);
  
  const addSelection = itemName => {
  	setSelected([...selected, itemName]);
  }
  
  const removeSelection = itemName => {
  	setSelected(selected.filter(name => name !== itemName));
  }
   
  const isSelected = itemName => {
  	return selected.includes(itemName);
  }
  
  const toggleSelection = (itemName) => {
    if (isSelected(itemName)) {
    	removeSelection(itemName);
    } else {
    	addSelection(itemName);
    }
  }
  
  const clearSelected = () => {
  	setSelected([]);
  }
  
	return (
    <Fragment>
      <header className="SelectedItems">
        {selected.length
        	? (
          	<Fragment>
            <h1 className="SelectedItems__title">Selected:</h1>
              <ul className="SelectedItems__list">
              {selected.map((itemName, i) => (
              	<Fragment key={itemName}>
                  <li className="SelectedItems__item" onClick={() =>...