Write code section

assets/css/styles.css

@@ -18534,6 +18534,12 @@ video {
   overflow: hidden
 }
 
+#code br {
+  display: block;
+  content: "";
+  margin-top: 0;
+}
+
 @media (min-width: 100%) {
   .none\:container {
     width: 100%;

index.html

@@ -106,26 +106,14 @@
 				</div>
 			</section>
 			<!-- section code -->
-			<section class="border-b border-grey pb-10 mb-10 md:border-0 lg:border-b lg:flex lg:justify-between lg:px-28 lg:pb-25 lg:mb-25">
+			<section id="sectionCode" class="border-b border-grey pb-10 mb-10 md:border-0 lg:border-b lg:flex lg:justify-between lg:px-28 lg:pb-25 lg:mb-25">
 				<div class="mb-11 md:mb-15 lg:max-w-xs">
 					<h2 class="font-bold text-sm leading-6 whitespace-nowrap mb-4">Get started with DappConnect in Minutes</h2>
 					<p class="text-sm leading-6 italic opacity-75 mb-7">The simple API allows you to introduce decentralized, private, secure communication in your application in minutes.</p>
 					<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 hover:underline" href="" >Get started</a>
 				</div>
-				<div class="bg-rectangle97 p-4 md:px-8 lg:max-w-code lg:w-full">
-					<pre><code class="text-rectangle102 text-sm font-special">
-{
-	<span class="text-rectangle99">"AdvertiseAddr"</span>: "YOUR_PUBLIC_IP",
-	<span class="text-rectangle99">"ListenAddr"</span>: "0.0.0.0:30303",
-	<span class="text-rectangle99">"HTTPEnabled"</span>: true,
-	<span class="text-rectangle99">"HTTPHost"</span>: "127.0.0.1",
-	<span class="text-rectangle99">"HTTPPort"</span>: 8545,
-	<span class="text-rectangle99">"APIModules"</span>: <br> "eth,net,web3,admin,mailserver",
-	<span class="text-rectangle99">"RegisterTopics"</span>: ["whispermail"],
-	<span class="text-rectangle99">"WakuConfig"</span>: {
-		<span class="text-rectangle99">"Enabled"</span>: true,
-}
-						</code></pre>
+				<div id="code" class="bg-rectangle97 p-4 md:px-8 lg:max-w-code lg:w-full">
+					<div id="testText" class="text-sm font-special"></div>
 				</div>
 			</section>
 			<!-- Use Cases -->

src/main.js

@@ -1,11 +1,55 @@
+const section = document.getElementById('sectionCode')
+const string = ' \n { \t\xa0\xa0 "AdvertiseAddr" \n: "YOUR_PUBLIC_IP", \n \t\xa0\xa0 "ListenAddr" \n: "0.0.0.0:30303", \t\xa0\xa0 "HTTPEnabled" \n: true, \t\xa0\xa0 "HTTPHost" \n: "127.0.0.1", \t\xa0\xa0"HTTPPort" \n: 8545, \t\xa0\xa0 "APIModules" \n: "eth,net,web3,admin,mailserver", \t\xa0\xa0 "RegisterTopics" \n : ["whispermail"], \t\xa0\xa0 "WakuConfig" \n: { \t \xa0\xa0\xa0\xa0\xa0\xa0"Enabled" \n : true, \n \xa0\xa0\xa0\xa0} \n }';
+const array = string.split("");
+const wrapper = document.getElementById("code")
+let container = document.getElementById("testText")
+let timer;
+
 const menuVisibility = () => {
     document.querySelector('body').classList.toggle('body-noScroll')
     document.querySelector('#menu-wrapper').classList.toggle('menu-visible');
 }
 
+function writeCode () {
+    if (array.length > 0) {
+        const letter = array.shift()
+        if(letter === '\n') {
+            const newContainer = document.createElement("span")
+            const brakeLine = document.createElement('br')
+            newContainer.classList.add('text-rectangle102', 'text-sm', 'font-special')
+            wrapper.appendChild(newContainer)
+            wrapper.appendChild(brakeLine)
+            container = newContainer
+        } else  if (letter === '\t') {
+            const newContainer = document.createElement("span")
+            newContainer.classList.add('text-rectangle99', 'text-sm', 'font-special')
+            wrapper.appendChild(newContainer)
+            container = newContainer
+        }
+        container.innerHTML += letter;
+    } else {
+        clearTimeout(timer);
+    }
+    loopTimer = setTimeout('writeCode()',40);
+}
+
+
+function isInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+}
+
 document.querySelector('#burger').addEventListener('click', menuVisibility);
 window.addEventListener('resize', function () {
     if(window.innerWidth > 768) {
         document.querySelector('body').classList.remove('body-noScroll')
     }
-})
+})
+document.addEventListener('scroll', function () {
+    isInViewport(section) ? writeCode() : null;
+});

src/styles.css

@@ -23,3 +23,9 @@
 .body-noScroll {
     @apply overflow-hidden
 }
+
+#code br {
+    display: block;
+    content: "";
+    margin-top: 0;
+}