<h1 class="words-wrapper">
  I want to learn <span class="css">CSS</span> and
  <span class="words">
    <span class="current" data-bg-color="#ffc703" data-color="#000">React</span>
    <span class="next" data-bg-color="#004e98" data-color="#fff">TypeScript</span>
    <span data-bg-color="#8cb369" data-color="#000">Python</span>
    <span data-bg-color="#104911" data-color="#fff">PrestaShop</span>
    <span data-bg-color="#b8c0ff" data-color="#000">Ruby</span>
    <span data-bg-color="#e71d36" data-color="#fff">Angular</span>
    <span data-bg-color="#e2c044" data-color="#000">WordPress</span>
    <span data-bg-color="#065a82" data-color="#fff">Node</span>
  </span>.
</h1>
<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&display=swap");

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Kanit", sans-serif;
  height: 100vh;
}

.words-wrapper {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}

.words-wrapper .css {
  color: #2ec4b6;
}

.words-wrapper .words {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  width: var(--width);
  height: 60px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--color, #000);
  background: var(--color-bg, #ffc703);
  box-sizing: content-box;
  transition: all 0.7s;
}

.words-wrapper .words span {
  position: absolute;
  top: 0;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: transform 0.7s, opacity 0.25s 0.25s;
}

.words-wrapper .words span.current {
  opacity: 1;
  transform: translate(-50%, 0);
}

.words-wrapper .words span.next {
  transform: translate(-50%, 100%);
}

@media (max-width: 700px) {
  .words-wrapper .words {
    width: var(--width-mobile) !important;
  }
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 20px;
  display: flex;
  align-items: center;
  padding: 5px;
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

const wrapper = document.querySelector(".words");
const words = wrapper.querySelectorAll("span");
const currentWord = wrapper.querySelector("span.current");
const wordsWidths = Array.from(words).map((word) => word.offsetWidth);
const maxWordsWidth = Math.max(...wordsWidths);
const CURRENT_CLASS = "current";
const NEXT_CLASS = "next";

wrapper.style.setProperty("--width", `${currentWord.offsetWidth}px`);
wrapper.style.setProperty("--width-mobile", `${maxWordsWidth}px`);

setInterval(() => {
  const currentWord = wrapper.querySelector("span.current");
  const nextWord = wrapper.querySelector("span.next");
  const nextNextWord = nextWord.nextElementSibling
    ? nextWord.nextElementSibling
    : wrapper.firstElementChild;
  currentWord.classList.remove(CURRENT_CLASS);
  nextWord.classList.remove(NEXT_CLASS);
  nextWord.classList.add(CURRENT_CLASS);
  nextNextWord.classList.add(NEXT_CLASS);
  wrapper.style.setProperty("--color", nextWord.dataset.color);
  wrapper.style.setProperty("--color-bg", nextWord.dataset.bgColor);
  wrapper.style.setProperty("--width", `${nextWord.offsetWidth}px`);
}, 1500);