JSFiddle - React, Tailwind, and code Playground

[ASSIGNMENT] Close Frontend Application Quiz

by sridhar reddy

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

.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: 3px solid transparent;
  transition: 100ms all ease-in;
  cursor: pointer;
  opacity: 0.75;
}
.List__item:hover {
  opacity: 1;
}
.List__item.selected {
  opacity: 1;
  border: 3px solid #009688;
}
.List__selected {
  margin: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 60px;
  grid-gap: 16px;
}
.List__selected__item {
  text-align: center;
  background: #fff;
  line-height: 60px;
  box-shadow: 0px 2px 20px 2px 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, 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. Currently selected items should be visually highlighted.
// 4. Currently selected items' names should be shown at the top of the page.
// 5. Make sure to avoid unnecessary re-renders.

function List({ items }) {
            const [activeColors, setActiveColors] = useState([]);

            const setNewActiveColor = (state, name) => {
              let newActiveColors = [...state];

              if (newActiveColors.indexOf(name) > -1) {
                newActiveColors.splice(activeColors.indexOf(name), 1);
              } else {
                newActiveColors.push(name);
              }
              return [...newActiveColors];
            }

            const handleColorClick = (name) => {
              setActiveColors( (prevState) => setNewActiveColor(prevState, name))
            }

            return (
              <Fragment>
                {
                  activeColors.length ? (
                    <div className='List__selected'>
                      {
                        activeColors.map((color) => {
                          return (
                            <div key={color} className='List__selected__item'>{color}</div>
                          )
                        })
                      }
                    </div>
                  ) : null
                }
                <ul className="List">
                  {
                    items.map(item => (
                        <li
                          key={item.name}
                          className={`List__item List__item--${item.color} ${activeColors.indexOf(item.name) > -1 ? 'selected' : ''}`}
                          onClick={() => handleColorClick(`${item.name}`)}

                        >
                        {item.name}
                       ...