From 01ae675ae57c7d9692ccb5858222abcf29ebddc5 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Wed, 21 Oct 2020 11:11:34 -0400 Subject: [PATCH] Auto text effect --- auto-text-effect/index.html | 19 +++++++++++++++++++ auto-text-effect/script.js | 22 +++++++++++++++++++++ auto-text-effect/style.css | 38 +++++++++++++++++++++++++++++++++++++ 3 files changed, 79 insertions(+) create mode 100644 auto-text-effect/index.html create mode 100644 auto-text-effect/script.js create mode 100644 auto-text-effect/style.css diff --git a/auto-text-effect/index.html b/auto-text-effect/index.html new file mode 100644 index 0000000..3fb9ade --- /dev/null +++ b/auto-text-effect/index.html @@ -0,0 +1,19 @@ + + + + + + + Auto Text Effect + + +

Starting...

+ +
+ + +
+ + + + diff --git a/auto-text-effect/script.js b/auto-text-effect/script.js new file mode 100644 index 0000000..c302628 --- /dev/null +++ b/auto-text-effect/script.js @@ -0,0 +1,22 @@ +const textEl = document.getElementById('text') +const speedEl = document.getElementById('speed') +const text = 'We Love Programming!' +let idx = 1 +let speed = 300 / speedEl.value + +writeText() + +function writeText() { + textEl.innerText = text.slice(0, idx) + + idx++ + + if(idx > text.length) { + idx = 1 + } + + setTimeout(writeText, speed) +} + + +speedEl.addEventListener('input', (e) => speed = 300 / e.target.value) \ No newline at end of file diff --git a/auto-text-effect/style.css b/auto-text-effect/style.css new file mode 100644 index 0000000..71fae02 --- /dev/null +++ b/auto-text-effect/style.css @@ -0,0 +1,38 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: darksalmon; + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +div { + position: absolute; + bottom: 20px; + background: rgba(0, 0, 0, 0.1); + padding: 10px 20px; + font-size: 18px; +} + +input { + width: 50px; + padding: 5px; + font-size: 18px; + background-color: darksalmon; + border: none; + text-align: center; +} + +input:focus { + outline: none; +}