Nice, I was thinking about doing components for the button but I didn’t want to jam the thread with code…
Its good to promote WC so maybe I’ll do all of the rest of my posts with WC…
Its also good to see how others do WC.
I don’t use template literals/ lit, I have a function that I pass in an array and it returns a docFrag with the tree. To update I iterate over both the array and the component…
I do often feel dirty using innerHTML, but it is the quickest way to get some DOM going in the web component (and the clearest way to see the DOM structure). And with the right editor plugins, you can get code coloring and code hints in those template strings to help keep you from making mistakes and make editing easier.
HTML templates exist, but they’re a pain to work with, having to include them in the HTML and then dig them back out again.
I’d like to think if we still had E4X it would work as a great way to represent DOM in JS. I can’t remember, though, if XML elements counted as DOM Nodes. Probably not so you’d still need some kind of parsing step to go from the XML to the DOM. But who needs E4X when we now have JSX? … all the people that don’t want to have to deal with a build step, that’s who .
You could do something similar with innerHTML and a string too. That can be lazily parsed into a template element and that template can be used to clone nodes into instances. In my component, moving the shadow DOM code to a static utility for this could look something like:
This wouldn’t work if you wanted to include variables in the markup, but if you’re concerned about performance, you’d want to handle those through the DOM APIs anyway.
for (let i = 99; i >= 0; i--) {
if (i >= 2) {
console.log(`${i} bottles of beer on the wall, ${i} bottles of beer.`);
console.log(`Take one down and pass it around, ${i - 1} bottles of beer on the wall.
`);
}
if (i == 1) {
console.log(`1 bottle of beer on the wall, 1 bottle of beer.`);
console.log(`Take one down and pass it around, no more bottles of beer on the wall.
`);
}
if (i == 0) {
console.log(`No more bottles of beer on the wall, no more bottles of beer.`);
console.log(`Go to the store and buy some more, 99 bottles of beer on the wall.
`);
}
}
bottles = c(paste(99:2, "bottles"), "1 bottle")
bottles2 = c(bottles, "no more bottles")
bottles = c(bottles, "No more bottles")
bottles3 = c(paste("Take one down and pass it around,", bottles2[-1], "of beer on the wall.\n\n"),
"Go to the store and buy some more, 99 bottles of beer on the wall.")
cat(paste0(bottles, " of beer on the wall, ", bottles2, " of beer.\n",
bottles3), sep = "")
const numberOfBeers = 99;
function printLyrics(numberOfBeers) {
for (beerCounter = numberOfBeers; beerCounter >= 0; beerCounter--) {
if (beerCounter >= 2) {
console.log(
`${beerCounter} bottles of beer on the wall, ${beerCounter} bottles of beer.`
);
console.log(
`Take one down and pass it around, ${
beerCounter - 1
} bottles of beer on the wall.`
);
} else if (beerCounter == 1) {
console.log(
`${beerCounter} bottle of beer on the wall, ${beerCounter} bottle of beer.`
);
console.log(
`Take one down and pass it around, no more bottles of beer on the wall.`
);
} else {
console.error(
"No more bottles of beer on the wall, no more bottles of beer."
);
console.info(
`Go to the store and buy some more, ${beerCounter} bottles of beer on the wall.`
);
}
}
}
printLyrics(numberOfBeers);
const beer = (amount) => Array.from(new Array(amount+1), (whocares, x) => x > 1 ? x + ' bottles of beer on the wall, ' + x + ' bottles of beer.\n' + 'Take one down and pass it around, ' + (x - 1) + ' bottles of beer on the wall.\n\n' : x== 1 ? '1 bottle of beer on the wall, 1 bottle of beer.\nTake one down and pass it around, no more bottles of beer on the wall.\n\n' : 'No more bottles of beer on the wall, no more bottles of beer.\nGo to the store and buy some more, ' + (amount) + ' bottles of beer on the wall.').reverse().join('');
console.log(beer(99))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>99 Bottles of Beer on the Wall</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Aref+Ruqaa+Ink:wght@400;700&family=Bagel+Fat+One&family=Chela+One&family=Chilanka&family=Coiny&family=Ewert&family=Gamja+Flower&family=Gloria+Hallelujah&family=Indie+Flower&family=Life+Savers:wght@400;700;800&family=Nosifer&family=Patrick+Hand&family=Quicksand:wght@300;500;700&family=Rubik+Vinyl&family=Yomogi&display=swap" rel="stylesheet">
<style>
body {
background-color: darkcyan;
color: cyan;
word-spacing: 5px;
font-family: 'Architects Daughter', cursive;
/*
font-family: 'Chilanka', cursive;
font-family: 'Gamja Flower', cursive;
font-family: 'Indie Flower', cursive;
*/
padding: 2%;
}
h1 {
font-size: 3rem;
text-shadow: 2px 2px 2px plum;
letter-spacing: 1px;
width: 55%;
border-bottom: 5px double plum;
}
h2 {
font-size: 2.5rem;
text-shadow: 2px 2px 2px plum;
letter-spacing: 1px;
}
p {
font-size: 1.5rem;
font-family: 'Chilanka', cursive;
line-height: 1.5;
text-shadow: 2px 2px 2px slateblue;
width: 60%;
}
@media screen and (max-width: 1400px) {
h1 {
width: 70%;
}
}
@media screen and (max-width: 1000px) {
p {
width: 80%;
}
}
@media screen and (max-width: 800px) {
h1 {
width: 90%;
}
p {
width: 100%;
}
}
</style>
</head>
<body>
<center>
<h1>99 Bottles of Beer on the Wall</h1>
<h2>Instructions:</h2>
<p>Print the entire song of "99 Bottles of Beer on the wall" into the console. The lyrics go like this:</p>
<p>"99 Bottles of Beer on the wall, 99 Bottles of beer. Take one down, pass it around, 98 Bottles of beer on the wall.</p>
<p>98 Bottles of Beer on the wall, 98 Bottles of beer. Take one down, pass it around, 97 Bottles of beer on the wall.</p>
<p>97 Bottles of Beer on the wall, 97 Bottles of beer. Take one down, pass it around, 96 Bottles of beer on the wall..."</p>
<p>Keep repeating this until it gets to 1 Bottle (remember to use singular form for "beer"). The song ends like this:</p>
<p>"...1 bottle of beer on the wall, 1 bottle of beer. Take one down, pass it around, no more bottles of beer on the wall.</p>
<p>No more bottles of beer on the wall, no more bottles of beer. Go to the store and buy some more, 99 bottles of beer on the wall."</p>
<p>...and with this, the song starts over. But it doesn't have to be repeated in the console; just one loop through the entire song is <i>plenty</i>!</p>
</center>
<script>
for (let i = 99; i > 0; i--) {
if (i > 1) {
console.log(`${i} bottles of beer on the wall, ${i} bottles of beer. Take one down, pass it around, ${i-1} bottles of beer on the wall.`);
} else {
console.log(`${i} bottle of beer on the wall, ${i} bottle of beer. Take one down, pass it around, no more bottles of beer on the wall.`);
console.log(`No more bottles of beer on the wall, no more bottles of beer. Go to the store and buy some more, 99 bottles of beer on the wall.`);
}
}
</script>
</body>
</html>
for (let i = 100; i > 1;i--) {
document.writeln(i + " bottles of beer on the wall, " + i + " bottles of beer.<br> Take one down and pass it around, " + (i - 1) + " bottles of beer on the wall. <br><br>" );
}
document.writeln("1 bottle of beer on the wall, 1 bottle of beer. <br> Take one down and pass it around, no more bottles of beer on the wall. <br> <br> No more bottles of beer on the wall, no more bottles of beer.<br> Go to the store and buy some more, 99 bottles of beer on the wall.")