JSFiddle - React, Tailwind, and code Playground

[ASSIGNMENT] Close Frontend Application Quiz

by Tyler Brown

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

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

h1 {
  font-size: 24px;
  font-weight: 900;
  margin: 16px;
}

p {
  margin: 16px;
}

.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-radius: 2px;
  opacity: 0.7;
}
.List__item.clickable {
  cursor: pointer;
  transition: all 200ms;
}
.List__item.clickable:hover {
  box-shadow: 2px 0px 10px 1px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}
.List__item.selected {
  font-weight: 900;
  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: #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 } = React;

// Instructions didn't mention whether other libs are allowed or not, so I'm rolling without any libs.
// More typically, I would...
//   • use a global store in combination with memoized selectors, AKA: redux & reselect
//   • have an array of IDs for the main list to map over so that changing entities don't change the actual list of IDs
//   • combine that with a map of {ID: object} so the individual items can simply observe their corresponding item in the store
//   • also use a store with immutable state (or just avoid mutations) and use React.PureComponent or React.memo() for all components.
// Since I can't change that the app is started with an array of objects, and I don't want to rewrite redux entirely,
// I'm just going to enable components to listen for specific events they care about, so they can update their state only then.
//
// BTW - this is very similar to a challenge I put together for Millie: https://github.com/milliegiving/challenge-video-games

class Store extends EventTarget {
  constructor() {
    super();
    this.selectedItemNames = new Set();
  }
  selectItem(itemName) {
    this.selectedItemNames.add(itemName);
    this.emitChange(itemName, true);
  }
  deselectItem(itemName) {
    this.selectedItemNames.delete(itemName);
    this.emitChange(itemName, false);
  }
  emitChange(itemName, isSelected) {
    this.dispatchEvent(new CustomEvent(`change:${itemName}`, {detail: {isSelected}}));
    this.dispatchEvent(new CustomEvent('selected-list-change', {detail: {selectedItemNames: this.selectedItemNames}}));
  }
  toggleItem(itemName) {
    const isSelected = this.selectedItemNames.has(itemName);
    if (isSelected) {
      this.deselectItem(itemName);
    } else {
      this.selectItem(itemName);
    }
  }
}
const store = new Store();

class Item extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isSelected: false,
    };
    this.onClick = this.onClick.bind(this);
   ...