Coding Examples

<!-- HTML ------------------------------------------------------------------------------------------------------------------>

<div class="client">
  <div class="client-descr-box">
    <div class="client-descr">
      <h3>Busseys</h3>
      <p>One of the UK's leading Ford dealerships.</p>
      <div class="arrow"></div>
    </div>
  </div>
  <a class="img-link" href="#">
    <img src="https://www.netmatters.co.uk/uploads/page/1/home-T5gi.jpg" alt="">
    <img src="https://www.netmatters.co.uk/uploads/page/1/home-gZQR.png" alt="">
  </a>
</div>

<!-- CSS ------------------------------------------------------------------------------------------------------------------>

<!-- 1. Makes it so that the second image (the coloured version of the logo) is not displayed -->
.img-link img:nth-child(2) {
  display: none;
}

<!-- 2. Makes it so that the second image (the coloured version of the logo) is displayed on :hover -->
.img-link:hover img:nth-child(2) {
  display: block;
}

<!-- 3. Makes it so that the first image (the grey version of the logo) is not displayed on :hover -->
.img-link:hover img:nth-child(1) {
  display: none;
}

<!-- 4. Displays the client's description box when the box' parent div is hovered over -->
.client:hover > .client-descr-box {
  display: block;
}

<!-- 5. Sets the description box to not show by default,
  its position to absolute so it can be made to appear above the actual client image,
  adds width so the description box has the right dimensions,
  and a margin at the bottom so there's room for the "arrow" at the bottom does not overlap the client image -->
.client-descr-box {
  display: none;
  bottom: 100%;
  left: -100px;
  right: -100px;
  position: absolute;
  margin-bottom: 50px;
}

<!-- 6. Sets the background, text alignment and colour,
   padding, margin and width for the client description -->
.client-descr {
  display: block;
  background: colours.$dark-grey;
  text-align: center;
  color: white;
  padding: 20px;
  max-width: 260px;
  margin: 0 auto;
}

<!-- 7. Sets the positon for the "arrow" that points to the client's image -->
.arrow {
  top: 100%;
}

<!-- 8. Sets the shape of the "arrow" element,
 the border-width dictates the shape of the arrow with 35px being the width of the top and 36px the sides of the triangle,
 its positon to absolute so it can be placed correctly outside the client image,
and the transform property makes it so the arrow is centered above its client image  -->
.arrow:after {
  content: "";
  display: inline-block;
  border-width: 35px 36px 0;
  border-color: #333645 transparent transparent;
  border-style: solid;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}
  

// Declares the text to write
const text = [
  " I'm a Web Developer",
  " I'm a Software Developer",
  " I'm a Game Developer",
  " I'm a Designer"
];

// Declares counters for the typing effect, what sentence gets typed and set erasing to false, causing the script to type by default
let i = 0;
let textIndex = 0;
erasing = false;

function typeWriter(){

// Default state, erasing = false implicitly means typing = true
  if (erasing === false){
    // Checks if value of the counter i is lower the sentence's length, and if it is it will:
    if (i < text[textIndex].length) {
      // Adds letters to the element, where:
        // The i in charAt(i) stands for the number of the letter in the sentence
        // The i is increased by 1 so the script will type out the next letter
        // The script then waits 100ms before running again
      document.querySelector(".typewriterItem").textContent += text[textIndex].charAt(i);
      i++;
      setTimeout(typeWriter, 100);
    }
    // If the counter is not lower than the sentence, it will:
    else {
      // Set the erasing state to true, which will trigger the script to start deleting
      // Before proceeding, the script waits for 1 second
      erasing = true;
      setTimeout(typeWriter, 1000);
    }

  }
// Erasing state
  else if (erasing = true){
    // Checks if value of the counter i is is not 0, and if it is not it will:
    if (i !== 0) {
      // Removes letters from the element, where:
        // The i in slice(0, i) stands for the number of the last letter in the sentence
        // The i is decreased by 1 so the script will remove the next letter
        // The script then waits 100ms before running again
      document.querySelector(".typewriterItem").textContent = text[textIndex].slice(0, i);
      i--;
      setTimeout(typeWriter, 75);
    }
    // If the counter is 0, depending on the textIndex counter that tells what sentence to type out, it will:
    else {
      // Ïf the text array counter is 3 (the last sentence in the array) it will:
      if (textIndex === 3) {
          // Sets erasing to false, which will cause the script to start typing again
          // Waits 0.1 second
          // Sets the textIndex counter to 0, which will make the script type out the first sentence again
        erasing = false;
        setTimeout(typeWriter, 100);
        textIndex = 0;
      }
      // Ïf the text array counter is not 3 (the last sentence in the array) it will:
      else {
          // Sets erasing to false, which will cause the script to start typing again
          // Waits 0.1 second
          // Adds 1 to the textIndex counter, which will make the script type out the next sentence
        erasing = false;
        setTimeout(typeWriter, 100);
        textIndex++;
      }
    }
  }

}

// Runs the script when it's loaded in
typeWriter();