jessquery
Version:
Modern JavaScript is pretty good, but typing document.querySelector() is a pain. This is a tiny library that makes DOM manipulation easy. jQuery is around 80kb (30kb gzipped), while this is only around 8kb (3.5kb gzipped). Lots of JSDoc comments so it's s
70 lines (58 loc) • 2.02 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="container">
<div class="test" id="hey">hi</div>
<div class="test" id="hey">yo</div>
<div class="test" id="hey">sup</div>
<div class="display"></div>
</div>
<button>click me</button>
<button>click me too!</button>
<script type="module">
import { $, $$ } from "../index.js"
async function fetchData() {
const response = await fetch(
"https://api.github.com/users/jazzypants1989"
)
const data = await response.json()
return data.name
}
const button = $("button")
const display = $(".display")
// button.on("click", () => {
// display
// .do(async (el) => {
// el.text("Loading...")
// await new Promise((resolve) => setTimeout(resolve, 2000))
// el.text(fetchData()).css("color", "green")
// await new Promise((resolve) => setTimeout(resolve, 3000))
// })
// .text(
// "This will be green and replace the element's text after three seconds."
// )
// })
// async function fetchDog() {
// const response = await fetch("https://dog.ceo/api/breeds/image/random")
// const data = await response.json()
// return data.message
// }
// button.on("click", () => {
// display.html(`<img />`, true).set("src", fetchDog())
// })
const fetchDog = async (el) => {
const response = await fetch("https://dog.ceo/api/breeds/image/random")
const data = await response.json()
el.set("src", data.message)
}
button.on("click", () => {
display.html(`<img />`, true).do(fetchDog)
})
</script>
</body>
</html>