script.js

"use strict";

const textElement = document.createElement("span");
const fillElement = document.createElement("span");
const cursor = document.createElement("span");
cursor.classList.add("cursor");
cursor.innerHTML = " ";

const stavanger = "Stavanger";
const initialText = 'printf("Hello World");';

let typeIndex = 0;
const typeWriterPause = 200;

const bufferLength = 28;
let buffer = Array(bufferLength).join(" ");
let cursorIndex = 0;

const displayElement = document.querySelector(".console-text");
displayElement.appendChild(textElement);
displayElement.appendChild(cursor);
displayElement.appendChild(fillElement);
printBuffer();

function printBuffer() {
  textElement.innerHTML = buffer.slice(0, cursorIndex);
  if (
    buffer[cursorIndex] === " " ||
    buffer[cursorIndex] === undefined ||
    buffer[cursorIndex] === ""
  ) {
    cursor.innerHTML = " ";
  } else {
    cursor.innerHTML = buffer[cursorIndex];
  }
  fillElement.innerHTML = buffer.slice(cursorIndex + 1).replace(/ /g, " ");
}

function typeInitialText() {
  if (typeIndex < initialText.length) {
    buffer =
      buffer.slice(0, typeIndex) +
      initialText.slice(typeIndex, typeIndex + 1) +
      buffer.slice(typeIndex + 1);
    typeIndex++;
    cursorIndex++;
    printBuffer();
    setTimeout(typeInitialText, typeWriterPause);
  } else {
    setTimeout(typeWriterEffect, 1000);
  }
}

let phase = "backspacing";
function typeWriterEffect() {
  if (phase === "backspacing") {
    cursorIndex--;
    printBuffer();
    if (cursorIndex > 19) {
      setTimeout(typeWriterEffect, typeWriterPause * 4);
    } else {
      phase = "erasing";
      setTimeout(typeWriterEffect, typeWriterPause * 2);
    }
  } else if (phase === "erasing") {
    if (cursorIndex > 13) {
      cursorIndex--;
      buffer =
        buffer.slice(0, cursorIndex) + buffer.slice(cursorIndex + 1) + " ";
      printBuffer();
      setTimeout(typeWriterEffect, typeWriterPause * 2);
    } else {
      phase = "typing";
      typeIndex = 0;
      setTimeout(typeWriterEffect, typeWriterPause);
    }
  } else if (phase === "typing") {
    if (typeIndex < stavanger.length) {
      buffer =
        buffer.slice(0, cursorIndex) +
        stavanger.slice(typeIndex, typeIndex + 1) +
        buffer.slice(cursorIndex, bufferLength - 2);
      typeIndex++;
      cursorIndex++;
      printBuffer();
      setTimeout(typeWriterEffect, typeWriterPause);
    } else {
      phase = "backspacingAgain";
      setTimeout(typeWriterEffect, typeWriterPause);
    }
  } else if (phase === "backspacingAgain") {
    cursorIndex--;
    printBuffer();
    if (cursorIndex > 8) {
      setTimeout(typeWriterEffect, typeWriterPause);
    } else {
      phase = "hashtag";
      setTimeout(typeWriterEffect, typeWriterPause * 2);
    }
  } else if (phase === "hashtag") {
    buffer =
      buffer.slice(0, cursorIndex) +
      "#" +
      buffer.slice(cursorIndex, bufferLength - 2);
    typeIndex++;
    cursorIndex++;
    printBuffer();
    phase = "end";
    setTimeout(typeWriterEffect, typeWriterPause * 4);
  } else if (phase === "end") {
    cursorIndex = buffer.length - 1;
    printBuffer();
  }
}

document
  .getElementById("revealLink")
  .addEventListener("click", function (event) {
    event.preventDefault();

    document.querySelector(".page2").scrollIntoView({
      block: "start",
      inline: "nearest",
      behavior: "smooth",
    });
  });

window.onload = function () {
  setTimeout(typeInitialText, 500);
  setTimeout(() => {
    document.querySelector(".more-info").classList.add("fade-in");
  }, 1000);
};