JSFiddle - React, Tailwind, and code Playground

[ASSIGNMENT] Close Frontend Application Quiz

by philfreo

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>
<!--
Implement a feature to allow item selection with the following requirements:
1. Clicking an item selects it.
2. 0 or more items can be selected.
3. Selected items should be visually highlighted.
4. Selected items' names should be shown at the top of the page.
5. There could be thousands of items in the list.
-->

CSS

.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);
}

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


// Implement "select item" feature with the following requirements:
// 1. Clicking an item selects it.
// 2. Only 1 item can be selected at a time.
// 3. Currently selected item should be visually highlighted.
// 4. Currently selected item's name should be shown at the top of the page.
// 5. There could be thousands of items in the list.

const List = ({ items }) => (
  <Fragment>
    <ul className="List">
      {items.map(item => (
        <li key={item.name} className={`List__item List__item--${item.colour}`}>
          {item.name}
        </li>
      ))}
    </ul>
    )
  </Fragment>
);

const sizes = ['tiny', 'small', 'medium', 'large', 'huge'];
const colours = ['navy', 'blue', 'aqua', 'teal', 'olive', 'green', 'lime', 'yellow', 'orange', 'red', 'maroon', 'fuchsia', 'purple', 'silver', 'gray', 'black'];
const fruits = ['apple', 'banana', 'watermelon', 'orange', 'peach', 'tangerine', 'pear', 'kiwi', 'mango', 'pineapple'];

const items = sizes.reduce(
  (items, size) => [
    ...items,
    ...fruits.reduce(
      (acc, fruit) => [
        ...acc,
        ...colours.reduce(
          (acc, colour) => [
            ...acc,
            {
              name: `${size} ${colour} ${fruit}`,
              colour,
            },
          ],
          [],
        ),
      ],
      [],
    ),
  ],
  [],
);

ReactDOM.render(
  <List items={items}/>,
  document.getElementById('root')
);