javascript rectify

little612pea · Jul 3, 2024 · ce903bb · ce903bb
1 parent 1227a70
commit ce903bb
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 76 deletions.
diff --git a/docs/javascripts/typewriter.js b/docs/javascripts/typewriter.js
diff --git a/material/overrides/home.html b/material/overrides/home.html
@@ -44,7 +44,46 @@ <h2 class="typewriter hero_header" id="typewriter-header">JY-HF <span class="lig
         <p class="typewriter tagline" id="typewriter-tagline">Share the knowledge to you and <span
             class="blue">Us</span></p>
       </section>
-      <script src="/javascripts/typewriter.js"></script>
+      <script>
+        document.addEventListener("DOMContentLoaded", function () {
+          function typeWriter(element, text, speed, callback) {
+            let i = 0;
+            function type() {
+              if (i < text.length) {
+                element.innerHTML += text.charAt(i).replace('\n', '<br>'); // Replace newline with <br> for line breaks
+                i++;
+                setTimeout(type, speed);
+              } else {
+                console.log('Typing complete, pausing cursor animation for', element); // Debug output
+                if (callback) callback();
+              }
+            }
+            type();
+          }
+
+          const headerElement = document.querySelector('.hero_header');
+          const taglineElement = document.querySelector('.tagline');
+
+          const headerText = 'JY-HF Learning Site___';
+          const headerHTML = 'JY-HF <span class="light">Learning Site___</span>';
+          const taglineText = 'Share the knowledge to you and Us';
+          const taglineHTML = 'Share the knowledge to you and <span class="blue">Us</span>';
+
+          headerElement.textContent = '';
+          taglineElement.textContent = '';
+
+          typeWriter(headerElement, headerText, 300, () => {
+            headerElement.innerHTML = headerHTML;
+            headerElement.style.animationPlayState = 'paused'; // Pause the cursor animation
+            headerElement.style.borderRightColor = 'transparent'; // Make the cursor transparent
+            typeWriter(taglineElement, taglineText, 300, () => {
+              taglineElement.innerHTML = taglineHTML;
+
+            });
+          });
+        });
+
+      </script>
       <div class="mdx-hero__content">
         <h1 style="color: antiquewhite;font-family: 'Courier New', Courier, monospace;font-weight: 1000;">Welcome to the
           coding space of JY-HF!</h1>

diff --git a/site/index.html b/site/index.html
@@ -348,7 +348,46 @@ <h2 class="typewriter hero_header" id="typewriter-header">JY-HF <span class="lig
         <p class="typewriter tagline" id="typewriter-tagline">Share the knowledge to you and <span
             class="blue">Us</span></p>
       </section>
-      <script src="/javascripts/typewriter.js"></script>
+      <script>
+        document.addEventListener("DOMContentLoaded", function () {
+          function typeWriter(element, text, speed, callback) {
+            let i = 0;
+            function type() {
+              if (i < text.length) {
+                element.innerHTML += text.charAt(i).replace('\n', '<br>'); // Replace newline with <br> for line breaks
+                i++;
+                setTimeout(type, speed);
+              } else {
+                console.log('Typing complete, pausing cursor animation for', element); // Debug output
+                if (callback) callback();
+              }
+            }
+            type();
+          }
+
+          const headerElement = document.querySelector('.hero_header');
+          const taglineElement = document.querySelector('.tagline');
+
+          const headerText = 'JY-HF Learning Site___';
+          const headerHTML = 'JY-HF <span class="light">Learning Site___</span>';
+          const taglineText = 'Share the knowledge to you and Us';
+          const taglineHTML = 'Share the knowledge to you and <span class="blue">Us</span>';
+
+          headerElement.textContent = '';
+          taglineElement.textContent = '';
+
+          typeWriter(headerElement, headerText, 300, () => {
+            headerElement.innerHTML = headerHTML;
+            headerElement.style.animationPlayState = 'paused'; // Pause the cursor animation
+            headerElement.style.borderRightColor = 'transparent'; // Make the cursor transparent
+            typeWriter(taglineElement, taglineText, 300, () => {
+              taglineElement.innerHTML = taglineHTML;
+
+            });
+          });
+        });
+
+      </script>
       <div class="mdx-hero__content">
         <h1 style="color: antiquewhite;font-family: 'Courier New', Courier, monospace;font-weight: 1000;">Welcome to the
           coding space of JY-HF!</h1>

diff --git a/site/javascripts/typewriter.js b/site/javascripts/typewriter.js