From d855c245a3dcf9ebc22d45c080fdb78033009da4 Mon Sep 17 00:00:00 2001
From: Sam <74021826+x39OME@users.noreply.github.com>
Date: Fri, 28 Apr 2023 13:17:48 +0300
Subject: [PATCH] Add files via upload
---
.../66-type-writer-effect-on-text/css.css | 41 +++++++++++++++++++
.../66-type-writer-effect-on-text/index.html | 16 ++++++++
.../66-type-writer-effect-on-text/main.js | 15 +++++++
3 files changed, 72 insertions(+)
create mode 100644 100_projects/66-type-writer-effect-on-text/css.css
create mode 100644 100_projects/66-type-writer-effect-on-text/index.html
create mode 100644 100_projects/66-type-writer-effect-on-text/main.js
diff --git a/100_projects/66-type-writer-effect-on-text/css.css b/100_projects/66-type-writer-effect-on-text/css.css
new file mode 100644
index 0000000..f759225
--- /dev/null
+++ b/100_projects/66-type-writer-effect-on-text/css.css
@@ -0,0 +1,41 @@
+*{
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+body{
+ font-size: 18px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ flex-direction: column;
+ height: 100vh;
+ background: #E9BF8B;
+}
+#button{
+ text-transform: uppercase;
+ font-size: 18px;
+ padding: 10px 15px;
+ color: #2C2D2A;
+ background: transparent;
+ border: 1px solid #2C2D2A;
+ border-radius: 3px;
+ transition: .2s;
+ cursor:pointer;
+}
+#button:hover{
+ background:#2C2D2A;
+ color: #E9BF8B;
+ box-shadow: 1px 1px 1px #2C2D2A;
+}
+#type{
+ color: #2C2D2A;
+ font-size: 24px;
+ margin-top: 20px;
+ transition: .2s;
+}
+#type:hover{
+ background: #2C2D2A;
+ color: #E9BF8B;
+}
\ No newline at end of file
diff --git a/100_projects/66-type-writer-effect-on-text/index.html b/100_projects/66-type-writer-effect-on-text/index.html
new file mode 100644
index 0000000..8664bb7
--- /dev/null
+++ b/100_projects/66-type-writer-effect-on-text/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
diff --git a/100_projects/66-type-writer-effect-on-text/main.js b/100_projects/66-type-writer-effect-on-text/main.js
new file mode 100644
index 0000000..47bcfc5
--- /dev/null
+++ b/100_projects/66-type-writer-effect-on-text/main.js
@@ -0,0 +1,15 @@
+let myText = 'Hello Everyone My Name Is Essam, I Love Programming',
+ i = 0,
+ myButton = document.getElementById('button');
+
+myButton.onclick = function(){
+ 'use strict';
+
+ const typeWriter = setInterval(function(){
+ document.getElementById('type').textContent += myText[i];
+ i = i + 1;
+ if (i > myText.length - 1) {
+ clearInterval(typeWriter);
+ }
+ },200);
+};
\ No newline at end of file