JSFiddle - React, Tailwind, and code Playground

[ASSIGNMENT] Close Frontend Application Quiz

by Alexandre Azevedo

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

.Selection {
  margin: 16px;  
}

.Selection__item {
  display: inline-block;
  background: #ccc;
  border-radius: 2px;
  padding: 2px 6px; 
  margin: 0 4px 4px 0;
  line-height: 20px;
}

.Selection__dismiss {
  text-decoration: none;
  color: blue;
}

.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);
  border: 1px solid transparent;
  cursor: pointer;
}

.List__item--selected {
  border-color: rgba(255, 255, 255, 0.7);
  font-weight: bold;
  text-shadow: 1px 1px rgba(0, 0, 0, 1);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
  transition: .3s all;
}

/* 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 { PureComponent, Fragment } = 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 (performance).
// 4. Currently selected items should be visually highlighted.
// 5. Currently selected items' names should be shown at the top of the page.

const Item = React.memo(({ item, isSelected, onSelect }) => {
  const classList = `List__item List__item--${item.color}`;

  if (isSelected) {
    classList += ' List__item--selected';
  }

  return (
    <li className={classList} onClick={() => onSelect(item.name)}>
      {item.name}
    </li>
  );
});

class List extends PureComponent {
	state = {
	  selected: []
  }

	toggleSelected = name => {
  	const fn = state => {
    	const selected = state.selected.includes(name)
      	? state.selected.filter(item => item !== name)
        : state.selected.concat(name)
        
      return { selected };
    };
    
		this.setState(fn);
  }
  
	render() {
  	const { items } = this.props;
		const { selected } = this.state;

    return (
      <Fragment>
        <p className="Selection">
          {selected.map(item => (
            <span className="Selection__item" key={item}>{item} <a className="Selection__dismiss" href="#" onClick={() => this.toggleSelected(item)}>×</a></span>
          ))}
        </p>
        <ul className="List">
          {items.map(item => (
            <Item key={item.name} item={item} isSelected={selected.includes(item.name)} onSelect={this.toggleSelected} />
          ))}
        </ul>
      </Fragment>
    );
  }
};

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

const sizes = ['tiny', 'small', 'medium', 'large', 'huge'];
const colors = ['navy', 'blue', 'aqua', 'teal', 'olive', 'green', 'lime', 'yellow', 'orange', 'red', 'maroon', 'fuchsia',...