typewriter

RachitSahu26 · May 15, 2022 · 3f01983 · 3f01983
1 parent 22dda1e
commit 3f01983
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 22 deletions.
diff --git a/151 - Type Writer Effect/css/style.css b/151 - Type Writer Effect/css/style.css
@@ -3,19 +3,27 @@
   margin: auto;
   height: 100vh;
 }
-.container p {
-  font-size: 26px;
-  text-align: center;
-  padding: 18px;
-  font-weight: bold;
-  background-color: red;
-}
+
 button {
   width: 270px;
   height: 50px;
   background-color: black;
   color: white;
   font-size: 20px;
+  cursor: pointer;
+}
+.typeLine{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.container span{
+  margin: 10px;
+  font-size: larger;
+}
+.container input{
+  height: 40px;
+  padding-left: 10px;
 }
 #mydiv {
   width: 100%;

diff --git a/151 - Type Writer Effect/index.html b/151 - Type Writer Effect/index.html
@@ -10,12 +10,17 @@
 
 <body>
     <div class="container">
-        <p id="mytext"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, asperiores.
-        </p>
+        <div class="typeLine">
+            <span>Enter the Text :</span> 
+            <input type="text" id="inputText">
+        </div>
         <div id="mydiv"></div>
-        <button id="mybutton">Type Writer Effect</button>
+        <button id="mybutton" onclick="typewrite()">Type Writer Effect</button>
     </div>
     <script src="js/index.js"></script>
 </body>
 
 </html>
+
+
+
diff --git a/151 - Type Writer Effect/js/index.js b/151 - Type Writer Effect/js/index.js
@@ -1,15 +1,15 @@
-var mytext = document.getElementById("mytext");
+
 var mydiv = document.getElementById("mydiv");
 var mybutton = document.getElementById("mybutton");
-var i = 0;
-mybutton.onclick = function () {
-    var typewriter = setInterval(function () {
-    mydiv.textContent += mytext.textContent[i];
-    i++;
-    if (i > mytext.textContent.length - 1) {
-    	mytext.textContent="Done !!!!!";
-    	i=0;
-      	clearInterval(typewriter);
+
+const typewrite = () =>{
+  var text = document.getElementById("inputText").value;
+    mydiv.textContent="";
+    for(let i=0 ; i<text.length ; i++){
+      const j = i;
+      setTimeout(()=>{
+        mydiv.textContent += text[j];
+      }, 100*j)
     }
-  }, 100);
-};
+
+}