<div id="root"></div>
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Fira Code', monospace;
}

body,
html,
#root {
  /* Full (Size) */
  width: 100%;
  height: 100%;

  /* Items dispositions -> Everything to the center of the DOM */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

/* Reset CSS */
li {
  list-style: none;
}

input,
button {
  padding: 6px 12px;
  /* Remove default border */
  border-style: none; 
}
button {
  background-color: transparent;
  cursor: pointer;
  
  &:disabled {
    cursor: not-allowed
  }
}

/* Accessibility */
li:focus,
input:focus,
button:focus {
  outline: 1px dashed #1f1f1f
}

/* Styled components */
ul {
  overflow-y: auto;
  max-height: 50vh
}

ul > li {
  margin: 1rem;
  padding: 6px 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border: 1px solid blueviolet;
  border-radius: 5px;

  background-color: #1f1f1f;
  color: #fff;
}

input {
  border-radius: 5px;

  background-color: #1f1f1f;
  color: #fff
}
button[type=submit] {
  margin-left: 1rem;

  border-radius: 5px;

  background-color: blueviolet;
  color: #fff
}
View Compiled
function Technologies() {
  const [technologies, setTechnologies] = React.useState(['React']);
  const [newTech, setNewTech] = React.useState('');

  const handleSubmit = e => {
    e.preventDefault();

    if (!newTech || technologies.includes(newTech)) return;

    setTechnologies([...technologies, newTech]);
    setNewTech('');
  }

  const handleDelete = (tech) => {
    setTechnologies(technologies.filter((techItem) => techItem !== tech));
  }

  return (
    <>
      <ul data-testid="ul-techs">
        {technologies.map(tech => (
          <li data-testid={tech} key={tech}>
            {tech}
            {"  "}
            <button
              disabled={tech === "React"}
              data-testid={`${tech}-btn-delete`}
              type="button"
              onClick={() => handleDelete(tech)}
            >
              ❌
            </button>
          </li>
        ))}
      </ul>

      <form data-testid="form-add-tech" onSubmit={handleSubmit}>
        <input
          data-testid="input-add-tech"
          type="text"
          placeholder="Type your favourite tool"
          value={newTech}
          onChange={(e) => setNewTech(e.target.value)}
        />
        <button type="submit">
          Save
        </button>
      </form>
    </>
  );
};

function App() {
  return (
    <>
      <h1>Hello, testing world</h1>
      <Technologies />
      <footer>
        Mady with 💜 {' '}
        <a href="https://twitter.com/esau_morais">
          By Esaú Morais
        </a>
      </footer>
    </>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js