projects from youtube videos that I found interesting or useful. More to come
This commit is contained in:
parent
5f0e68b80b
commit
4be741a09b
|
|
@ -0,0 +1,25 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Typewriter Animation Effect with HTML, CSS, and JavaScript</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script src="script.js" defer></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="container">
|
||||||
|
<p data-typewriter="Developer...,Designer...,Photographer... ">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p data-typewriter="Coffee Roaster...,Pizza Maker...,Basket Weaver..."></p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
Just some quick notes. This project comes from the video [Typewriter Animation Effect with HTML, CSS, and JavaScript](https://www.youtube.com/watch?v=7uDdiMCVwJk). It appealed because it was showing the sort of typing effect without using any frameworks, sdks or anything else.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
class Typewriter {
|
||||||
|
constructor(el, options) {
|
||||||
|
this.el = el;
|
||||||
|
this.words = [...this.el.dataset.typewriter.split(",")];
|
||||||
|
|
||||||
|
this.speed = options?.speed || 100;
|
||||||
|
this.delay = options?.delay || 1000;
|
||||||
|
this.repeat = options?.repeat || false;
|
||||||
|
|
||||||
|
this.initTyping();
|
||||||
|
}
|
||||||
|
|
||||||
|
wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
|
||||||
|
|
||||||
|
toggleTyping = () => this.el.classList.toggle("typing");
|
||||||
|
|
||||||
|
async typewrite(word) {
|
||||||
|
await this.wait(this.delay);
|
||||||
|
this.toggleTyping();
|
||||||
|
|
||||||
|
for (const letter of word.split("")) {
|
||||||
|
this.el.textContent += letter;
|
||||||
|
await this.wait(this.speed);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.toggleTyping();
|
||||||
|
await this.wait(this.delay);
|
||||||
|
|
||||||
|
this.toggleTyping();
|
||||||
|
while (this.el.textContent.length !== 0) {
|
||||||
|
this.el.textContent = this.el.textContent.slice(0, -1);
|
||||||
|
await this.wait(this.speed);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.toggleTyping();
|
||||||
|
}
|
||||||
|
|
||||||
|
async initTyping() {
|
||||||
|
for (const word of this.words) {
|
||||||
|
await this.typewrite(word);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.repeat) {
|
||||||
|
await this.initTyping();
|
||||||
|
} else {
|
||||||
|
this.el.style.animation = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
// can't use forEach with await
|
||||||
|
// this.words.forEach((word) => {
|
||||||
|
// await this.typewrite(word);
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// const el1 = new Typewriter(document.querySelector("[data-typewriter]"), {
|
||||||
|
// speed: 10,
|
||||||
|
// delay: 10,
|
||||||
|
// repeat: true,
|
||||||
|
// });
|
||||||
|
// console.log(el1);
|
||||||
|
|
||||||
|
document.querySelectorAll("[data-typewriter]").forEach((el) => {
|
||||||
|
new Typewriter(el, {
|
||||||
|
repeat: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4rem;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: linear-gradient(#eff0f3, #efe0ef);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
justify-items: start;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-typewriter] {
|
||||||
|
font-family: system-UI;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 4.5rem;
|
||||||
|
color: #d9376e;
|
||||||
|
height: 6rem;
|
||||||
|
border-right: 0.8rem solid transparent;
|
||||||
|
padding: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-typewriter]:not(.typing) {
|
||||||
|
animation: blink-cursor 1.1s step-end infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink-cursor {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
border-color: #ff8e3c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
.search-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-cards {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||||
|
gap: 0.25rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border: 1px solid black;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card > .name {
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card > .email {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
columns: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<script src="js/script.js" defer></script>
|
||||||
|
<title>Using Template with Search</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- * Section for search -->
|
||||||
|
<!-- note that really this is filtering, not searching -->
|
||||||
|
<div class="search-wrapper">
|
||||||
|
<label for="search">Search (filter) Users</label>
|
||||||
|
<input type="search" id="search" data-search>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- * Section for users -->
|
||||||
|
<div class="user-cards" data-user-cards-container>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<template data-user-template>
|
||||||
|
<div class="card">
|
||||||
|
<div class="name" data-name>My Name</div>
|
||||||
|
<div class="email" data-email>My email address</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
// * https://jsonplaceholder.typicode.com/users
|
||||||
|
|
||||||
|
const userCardTemplate = document.querySelector("[data-user-template]");
|
||||||
|
// console.log(userCardTemplate);
|
||||||
|
|
||||||
|
const userCardsContainer = document.querySelector(
|
||||||
|
"[data-user-cards-container]"
|
||||||
|
);
|
||||||
|
// console.log(userCardsContainer);
|
||||||
|
|
||||||
|
// Original code from video used the attribute for the query rather
|
||||||
|
// than the ID that he had setup. So I swapped it over.
|
||||||
|
// const searchInput = document.querySelector("[data-search]");
|
||||||
|
const searchInput = document.querySelector("#search");
|
||||||
|
// console.log(searchInput);
|
||||||
|
|
||||||
|
let users = []; // filed from user data retrieved from server
|
||||||
|
|
||||||
|
searchInput.addEventListener("input", (event) => {
|
||||||
|
const value = event.target.value.toLowerCase();
|
||||||
|
// console.log(users);
|
||||||
|
users.forEach((user) => {
|
||||||
|
// this seems wasteful to run toLowerCase each time you type a letter
|
||||||
|
// surely better to just store a lowercase version when saving original data
|
||||||
|
// const isVisible =
|
||||||
|
// user.name.toLowerCase().includes(value) ||
|
||||||
|
// user.email.toLowerCase().includes(value);
|
||||||
|
|
||||||
|
const isVisible =
|
||||||
|
user.lowercaseName.includes(value) ||
|
||||||
|
user.lowercaseEmail.includes(value);
|
||||||
|
|
||||||
|
user.element.classList.toggle("hide", !isVisible);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
fetch("https://jsonplaceholder.typicode.com/users")
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
users = data.map((user) => {
|
||||||
|
const card = userCardTemplate.content.cloneNode(true).children[0];
|
||||||
|
|
||||||
|
const name = card.querySelector("[data-name]");
|
||||||
|
const email = card.querySelector("[data-email]");
|
||||||
|
|
||||||
|
name.textContent = user.name;
|
||||||
|
email.textContent = user.email;
|
||||||
|
|
||||||
|
// console.log(card);
|
||||||
|
|
||||||
|
userCardsContainer.append(card);
|
||||||
|
|
||||||
|
// Below is original return
|
||||||
|
// return { name: user.name, email: user.email, element: card };
|
||||||
|
return {
|
||||||
|
name: user.name,
|
||||||
|
email: user.email,
|
||||||
|
lowercaseName: user.name.toLowerCase(),
|
||||||
|
lowercaseEmail: user.email.toLowerCase(),
|
||||||
|
element: card,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue