<h1 id="main-title">DOM Manipulation Sandbox</h1>

<div class="container">

  <!-- Box 1 -->
  <div class="item" id="div1">
    <h4>1</h4>
    <p>
      <strong>Click </strong> here to generate a random color!
    </p>
    <strong>
      <p class="p1" id="randomColorId"></p>
    </strong>
  </div>

  <!-- Box 2 -->
  <div class="item" id="div2">
    <h4>2</h4>
    <p id="p2">
      <strong>Mouseover</strong> to change me red.
      <strong>Mouseout</strong> to reset me!
    </p>
  </div>

  <!-- Box 3 -->
  <div class="item" id="div3">
    <h4>3</h4>
    <p id="p3"><strong>Double click</strong> me for a surprise!</p>
  </div>

  <!-- Box 4 -->
  <div class="item" id="div4">
    <h4>4</h4>
    <p>
      Click and hold to invert the colours in this box.
    </p>
  </div>

  <!-- Box 5 -->
  <div class="item" id="div5">
    <h4>5</h4>
    <p>Click the car to animate</p>
    <div id="animatedElement">
      <i class="fas fa-car-side"></i>
    </div>
  </div>

  <!-- Box 6 -->
  <div class="item" id="div6">
    <h4>6</h4>
    <button id="showMore">Show Text / Hide Text</button>
    <div class="hidden" id="hidden-text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni eveniet
      in ab est harum consequatur voluptas quasi voluptatum rerum iusto.
    </div>

    <!-- Box 7 -->
  </div>
  <div class="item" id="div7">
    <h4>7</h4>
    <p>Add your own</p>
  </div>

  <!-- Box 8 -->
  <div class="item" id="div8">
    <h4>8</h4>
    <p>Add your own</p>
  </div>

  <!-- Box 9 -->
  <div class="item" id="div9">
    <h4>9</h4>
    <p>Add your own</p>
  </div>

</div>
* {
  box-sizing: border-box;
}

body,
html {
  font-family: "Roboto", sans-serif;
}

#main-title {
  margin: 10px;
  text-align: center;
}

h4 {
  margin: 0;
}

p {
  font-size: 16px;
}

#randomColorId {
  background-color: white;
  width: auto;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

.item {
  width: 30%;
  height: 150px;
  margin: 5px;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 10px;
  font-size: 20px;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.img1 {
  background-image: url("https://i.pinimg.com/736x/52/bc/39/52bc3928fd63daa22ebfb555f9ae07dd.jpg");
  background-size: cover;
  background-position: center;
}

#animatedElement {
  width: 50px;
  height: 50px;
  position: absolute;
  font-size: 30px;
}

.hidden {
  display: none;
}

#hidden-text {
  font-size: 12px;
  margin: 5px;
}

#showMore {
  padding: 10px;
}

button {
  cursor: pointer;
}
// SET THE VARIABLES
const one = document.getElementById("div1");
const two = document.getElementById("div2");
const three = document.getElementById("div3");
const four = document.getElementById("div4");
const five = document.getElementById("div5");
const six = document.getElementById("showMore");
// YOU CAN ADD MORE:
//const seven
//const eight
//const nine

// SET THE EVENT LISTENERS
// variableName.addEventListener("event", functionName)
one.addEventListener("click", randomColorChanger);
two.addEventListener("mouseover", changeRed);
two.addEventListener("mouseout", resetStyle);
three.addEventListener("dblclick", revealImage);
four.addEventListener("mousedown", invertColors);
four.addEventListener("mouseup", resetStyle);
five.addEventListener("click", moveAnimation);
six.addEventListener("click", showMore);

// FUNCTIONS THAT DO FUN THINGS!

// Pick a random color & set it as the background
function randomColorChanger() {
  let randomColor = Math.floor(Math.random() * 16777215).toString(16);
  one.style.backgroundColor = "#" + randomColor;
  randomColorId.innerHTML = "#" + randomColor;
}

// Change background color to red
function changeRed() {
  two.style.backgroundColor = "red";
}

// Reset background color
function resetStyle(e) {
  e.target.style.backgroundColor = "";
  e.target.style.color = "";
}

// Append CSS class img1 to show the image
function revealImage() {
  three.classList.add("img1");
  document.getElementById("p3").classList.add("hidden");
}

// Invert Colors
function invertColors() {
  four.style.backgroundColor = "black";
  four.style.color = "white";
}

// Animation
function moveAnimation() {
  const car = document.getElementById("animatedElement");
  let pos = 0;
  let id = setInterval(frame, 10);
  function frame() {
    if (pos == 180) {
      clearInterval(id);
    } else {
      pos++;
      car.style.left = pos + "px";
      car.style.right = pos + "px";
    }
  }
}

// If text is hidden, then show text when button is clicked
function showMore() {
  const theText = document.getElementById("hidden-text");
  if (theText.style.display === "none") {
    theText.style.display = "block";
  } else {
    theText.style.display = "none";
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://kit.fontawesome.com/b8ef7b7761.js