Close Frontend 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>
<!--
GOAL:

Using React and React Hooks, generate a full-screen grid of grey squares. Hovering over a square should toggle its "active" status. At the top, display the number of currently active squares. It should be as efficient as possible even for very large grids.
-->

CSS

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10px, 1fr));
  grid-auto-rows: 10px;
  grid-gap: 0px;
  margin: 2px;
}

li {
  cursor: pointer;
  background: #ccc;
}

.active {
  background-color: blue;
}

React

const { Fragment } = React;

const List = ({ items }) => (
  <Fragment>
    <p>Selected: 0</p>
    <ul>
      {items.map((item, index) => {
        return (
          <li key={index} onMouseOver={(e) => { e.target.classList.toggle('active') }}></li>
        )})}
    </ul>
  </Fragment>
);

const items = Array(3000).fill(true);

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