Refactor script.js for improved functionality and style

Author: VectorArchitect

script.js

@@ -1,120 +1,94 @@
-body {
-  margin: 0;
-  background: #0f0f0f;
-  color: #00ffcc;
-  font-family: 'Courier New', monospace;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  padding: 2rem;
-  overflow: hidden;
-  text-align: center;
-}
+const logo = document.getElementById("logo");
+const intervals = new Map();
+const editModal = document.getElementById("editModal");
+const editInput = document.getElementById("editInput");
+const submitEdit = document.getElementById("submitEdit");
 
-.logo {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-content: center;
-  font-size: clamp(1.5rem, 8vw, 4rem);
-  letter-spacing: 0.25rem;
-  max-width: 100%;
-  line-height: 1.2;
-  padding: 0.5rem;
-  gap: 0.5rem;
-}
+let userText = "WELCOME TO MY WORLD"; // fallback default
 
-.word {
-  display: inline-flex;
-  flex-wrap: nowrap;
-  white-space: pre;
-  margin: 0 clamp(0.3rem, 2vw, 1rem);
-  max-width: 100%;
-}
+renderLogo(userText);
 
-.char {
-  position: relative;
-  padding: 0 0.1em;
-  transition: color 0.2s ease;
-  white-space: pre-wrap;
+function getRandomChar() {
+  const pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*";
+  return pool[Math.floor(Math.random() * pool.length)];
 }
 
-.controls {
-  position: absolute;
-  bottom: 2rem;
-  display: flex;
-  gap: 1rem;
-  padding: 0 2rem;
-  width: 100%;
-  justify-content: center;
-}
+function startRandomizing(char) {
+  if (char.dataset.char === " ") return;
+  if (intervals.has(char)) return;
 
-#editBtn,
-#refreshBtn {
-  padding: 0.5rem 1rem;
-  font-size: 1rem;
-  font-family: 'Courier New', monospace;
-  background-color: #00ffcc;
-  color: #0f0f0f;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
+  const interval = setInterval(() => {
+    char.textContent = getRandomChar();
+  }, 50);
 
-#editBtn:hover,
-#refreshBtn:hover {
-  background-color: #00ddb3;
+  intervals.set(char, interval);
 }
 
-.edit-modal {
-  position: absolute;
-  bottom: 6rem;
-  display: none;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  background: #0f0f0f;
-  padding: 1rem;
-  border: 1px solid #00ffcc;
-  border-radius: 6px;
-  z-index: 20;
+function stopRandomizing(char) {
+  if (char.dataset.char === " ") return;
+  if (intervals.has(char)) {
+    clearInterval(intervals.get(char));
+    intervals.delete(char);
+  }
+  char.textContent = char.dataset.char;
 }
 
-.edit-modal input {
-  font-family: 'Courier New', monospace;
-  font-size: 1rem;
-  padding: 0.5rem;
-  width: 250px;
-  background: #1a1a1a;
-  color: #00ffcc;
-  border: 1px solid #00ffcc;
-  border-radius: 4px;
-}
+function renderLogo(text) {
+  logo.innerHTML = "";
+  const words = text.match(/(\S+|\s)/g);
 
-.edit-modal button {
-  background-color: #00ffcc;
-  color: #0f0f0f;
-  border: none;
-  padding: 0.5rem 1rem;
-  font-family: 'Courier New', monospace;
-  border-radius: 4px;
-  cursor: pointer;
+  words.forEach((word) => {
+    const wordSpan = document.createElement("span");
+    wordSpan.classList.add("word");
+
+    if (word === " ") {
+      const space = document.createElement("span");
+      space.classList.add("char");
+      space.textContent = " ";
+      wordSpan.appendChild(space);
+    } else {
+      word.split("").forEach((char, i) => {
+        const span = document.createElement("span");
+        span.classList.add("char");
+        span.dataset.index = i;
+        span.dataset.char = char;
+        span.textContent = char;
+        wordSpan.appendChild(span);
+      });
+    }
+
+    logo.appendChild(wordSpan);
+  });
 }
 
-@media (max-width: 480px) {
-  .logo {
-    font-size: clamp(1.2rem, 10vw, 2.5rem);
-    letter-spacing: 0.1rem;
-    padding: 0 0.5rem;
-  }
+document.addEventListener("mousemove", (e) => {
+  const chars = document.querySelectorAll(".char");
+
+  chars.forEach((char) => {
+    const charX = char.getBoundingClientRect().left + char.offsetWidth / 2;
+    if (e.clientX < charX) {
+      startRandomizing(char);
+    } else {
+      stopRandomizing(char);
+    }
+  });
+});
 
-  .controls {
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    bottom: 1rem;
+document.getElementById("editBtn").addEventListener("click", () => {
+  editInput.value = userText;
+  editModal.style.display = "flex";
+  editInput.focus();
+});
+
+submitEdit.addEventListener("click", () => {
+  const newText = editInput.value.trim();
+  if (newText) {
+    userText = newText;
+    renderLogo(userText);
   }
-}
+  editModal.style.display = "none";
+});
+
+document.getElementById("refreshBtn").addEventListener("click", () => {
+  window.location.href = window.location.href;
+});