Hello world, tadi style

Here’s how to code all the classic ‘hello world’ examples using a slippy mindset.

Hello world

Easy, just an html file with the following words.

Hello world!

Hello world!

Button counter

Another classic. A button that counts upwards.

<button onclick="handleClick()">Count: <span id="count">0</span></button>

  const span = document.querySelector("#count");
  const handleClick = () => {
    span.textContent = parseInt(span.textContent) + 1;

To-do list

We can use templates for this one.

<button onclick="addItem()">Add item</button>

  <p style="display: flex; gap: 11px">
    <input type="checkbox" />
    <input type="text" />

  const main = document.querySelector("main");
  const template = document.querySelector("template");

  const addItem = () => {
    const fragment = template.content.cloneNode(true);
    const item = fragment.querySelector("p");
    const button = item.querySelector("button");
    button.addEventListener("click", () => item.remove());

Any others?

Do you know any other classic examples I could make? Let me know. My details are on todepond dot com.

Back to the wikiblogarden.