Benchmark for animation

src/layouts/index.html

@@ -26,8 +26,8 @@
             <div class="traffic-light"></div>
           </div>
             <div class="p-5">
-              <p id="output"></p>
+              <p id="terminal-output"></p>
-              <p id="input"><span id="typing"></span></p>
+              <p id="terminal-input"></p>
           </div>
         </div>
       </div>
@@ -68,6 +68,19 @@
     border-bottom: 1px solid gray;
   }
 
+  #terminal-output {
+    white-space: pre;
+  }
+  #terminal-input {
+    position: relative;
+  }
+  #terminal-input:before {
+    content: ">";
+    color: green;
+    position: absolute;
+    left: 0;
+  }
+
 </style>
 
 <!-- Teal Impact Section -->
@@ -467,10 +480,7 @@
 
 
         <script>
-          var output = document.getElementById("output");
+          const commands = [
-          var typing = document.getElementById("typing");
-
-          var commands = [
             "$ node --eval 'console.log(\"Hello World!\")'",
             "command not found: node",
             "$ sh <(curl tea.xyz) --yes",
@@ -480,25 +490,29 @@
             "Hello World!"
           ];
 
-          var index = 0;
+          let commandIndex = 0;
+          let command = commands[commandIndex];
+          let commandOutput = "";
 
-          function type() {
+          function typeCommand() {
-            var command = commands[index];
+            if (commandIndex === commands.length) {
-            var chars = command.split("");
+              return;
-            var loop = setInterval(function() {
-              typing.innerHTML += chars.shift();
-              if (!chars.length) {
-                clearInterval(loop);
-                output.innerHTML += command + "<br>";
-                index++;
-                if (index < commands.length) {
-                  setTimeout(type, 1000);
             }
+            if (command.length === 0) {
+              commandIndex++;
+              command = commands[commandIndex];
+              commandOutput += '\n';
+              document.querySelector("#terminal-output").innerHTML = commandOutput;
+              setTimeout(typeCommand, 1000);
+              return;
             }
-            }, 50);
+            commandOutput += command[0];
+            command = command.slice(1);
+            document.querySelector("#terminal-output").innerHTML = commandOutput;
+            setTimeout(typeCommand, 50);
           }
 
-          type();
+          typeCommand();
         </script>
 
       </div>