01: Hello world

kevin-zou · Nov 13, 2023 · bff6496 · bff6496
1 parent a6f48f7
commit bff6496
Show file tree

Hide file tree

Showing 4 changed files with 145 additions and 0 deletions.
diff --git a/01_hello-world/README.md b/01_hello-world/README.md
@@ -0,0 +1,4 @@
+# Hello world
+The classic first project for many (with a little twist).
+
+I wish I had more time to flesh this out and turn it into an interesting story (with more user interaction), but I'm happy to try it out at least. This was fun to make and I will definitely revisit this one day.
diff --git a/01_hello-world/index.html b/01_hello-world/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hello world</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="script.js"></script>
+</head>
+
+<body>
+  <div id="text" class="blink"></div>
+</body>
+
+</html>
diff --git a/01_hello-world/script.js b/01_hello-world/script.js
@@ -0,0 +1,87 @@
+const typewriterSpeed = 0;
+const typewriterBaseSpeed = 65;
+let busy = false;
+let interrupt = false;
+
+function delay(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+function typewriterEffect(element, text) {
+  return new Promise(async (resolve) => {
+    busy = true;
+    for (let index = 0; index < text.length; index++) {
+      if (interrupt) {
+        break;
+      }
+      element.innerHTML += text.charAt(index);
+      const ms = typewriterBaseSpeed + (Math.random() * typewriterSpeed);
+      await delay(ms);
+    }
+    interrupt = false;
+    busy = false;
+    resolve();
+  });
+}
+
+function typewriterClearEffect(element) {
+  const text = element.innerHTML;
+  return new Promise(async (resolve) => {
+    for (let index = text.length; index >= 0; index--) {
+      element.innerHTML = text.substring(0, index);
+      const ms = typewriterBaseSpeed + (Math.random() * typewriterSpeed);
+      await delay(ms);
+    }
+    await delay(1000);
+    resolve();
+  });
+}
+
+window.addEventListener('load', async () => {
+  const element = document.getElementById('text');
+  await typewriterEffect(element, 'Hello world');
+  await delay(3000);
+  await typewriterClearEffect(element);
+  typewriterEffect(element, 'Is anyone out there?');
+  await delay(500);
+
+  const buttonContainer = document.createElement('div');
+  buttonContainer.classList.add('buttons');
+
+  const noButton = document.createElement('button');
+  noButton.addEventListener('click', async () => {
+    if (busy) {
+      interrupt = true;
+    }
+    buttonContainer.remove();
+    await typewriterClearEffect(element);
+    await typewriterEffect(element, `Okay... I'll try again later`);
+    await delay(3000);
+    await typewriterClearEffect(element);
+    await typewriterEffect(element, 'Goodbye world');
+    await delay(3000);
+    await typewriterClearEffect(element);
+    await delay(1000);
+    element.remove();
+  });
+  noButton.textContent = 'No';
+
+  const yesButton = document.createElement('button');
+  yesButton.addEventListener('click', async () => {
+    if (busy) {
+      interrupt = true;
+    }
+    buttonContainer.remove()
+    await typewriterClearEffect(element);
+    await typewriterEffect(element, `I'm glad that someone is there. Please visit again sometime`);
+    await delay(3000);
+    await typewriterClearEffect(element);
+  });
+  yesButton.textContent = 'Yes';
+
+  buttonContainer.append(noButton);
+  buttonContainer.append(yesButton);
+  document.body.append(buttonContainer);
+});
diff --git a/01_hello-world/style.css b/01_hello-world/style.css
@@ -0,0 +1,38 @@
+#text {
+  width: fit-content;
+}
+
+.blink::after {
+  content: "";
+  display: inline-block;
+  background-color: gray;
+  vertical-align: bottom;
+  width: 6px;
+  height: 1.2em;
+  margin-left: 4px;
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  0% { opacity: 1.0; }
+  50% { opacity: 0.0; }
+  100% { opacity: 1.0; }
+}
+
+.buttons {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+button {
+  background: none;
+  border: solid 1px black;
+  border-radius: 4px;
+  padding: 4px 16px;
+}
+
+button:hover {
+  background-color: aliceblue;
+  cursor: pointer;
+}