iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
🔰

Build a Simple ToDo List Web App for Absolute Beginners

に公開
CSS
HTML
JavaScript
入門
todo
tech

Overview

  • Introduced how to create a simple ToDo app for absolute beginners
    • A simple web app using only HTML, CSS, and JS (JavaScript)
    • You can complete a working ToDo app in as little as 30 to 60 minutes
  • Divided into a mandatory part (completion up to this point) and an advanced part (challenges based on your time and skill)
  • Included URLs to other articles for those seeking a higher level

Background

Target Audience

  • Participants of My First Hackathon by Voltech
  • People participating in a hackathon for the first time
  • People who want to participate in a hackathon but don't know what to make or how to make it

What will be created

  • A simple ToDo list as a web application

Environment

  • PC
  • Browser (Chrome, Edge, etc.)
  • Text editor (Notepad, VS Code, etc.)

Preparing the Development Environment

Goal

  • Be able to open your HTML file in a browser

Steps

  1. Create a todo-app folder in a preferred location, such as your desktop.
  2. Create three files inside it: index.html, style.css, and main.js.
    • On Windows, you can do this by Right-click -> New -> Text Document, etc.!
    • Just change the filename from New Text Document.txt to index.html!
  3. Open index.html in your browser (double-clicking should work).
  4. A blank white page will appear in the browser.

Building the Foundation with HTML

Goal

  • See the "Title, Input Field, Add Button, and Empty List" on the screen

Sample Code

Please save the following into index.html.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>はじめてのToDoリスト</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>はじめてのToDoリスト</h1>

    <div class="input-area">
      <input id="todo-input" type="text" placeholder="やることを入力" />
      <button id="add-button">追加</button>
    </div>

    <ul id="todo-list"></ul>

    <script src="main.js"></script>
  </body>
</html>

Simple Explanation

Strings using < and > like <!DOCTYPE html> are called HTML tags.

<!DOCTYPE html> itself explicitly states that this is an HTML document.

If you want to learn more about HTML, you should refer to the following MDN article.

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax

MDN is an official and highly reliable collection of documents for learning web technologies (HTML/CSS/JavaScript, etc.).
(To provide a strict supplement, "official" here means that the documents are primarily maintained by Mozilla, the creator of the Firefox browser.)

  • <h1>: Title
  • <input>: Input field. id="todo-input" is the "name" to be used from JS later
  • <button>: Button
  • <ul>: Bulleted list. To-dos will be added here
  • <script src="main.js">: Written at the end. Loads the JS file

Making it Look a Little Nicer with CSS

Goal

Improve the appearance to look a bit better.

Sample Code

/* style.css */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  max-width: 480px;
  margin: 40px auto;
  padding: 0 16px;
  line-height: 1.5;
}

h1 {
  text-align: center;
}

.input-area {
  display: flex;
  gap: 8px;
}

#todo-input {
  flex: 1;
  padding: 8px;
}

#add-button {
  padding: 8px 12px;
  cursor: pointer;
}

#todo-list {
  margin-top: 16px;
  padding-left: 0;
  list-style: none;
}

#todo-list li {
  padding: 4px 0;
  border-bottom: 1px solid #ddd;
}

Making the "Add Button" Work with JavaScript

const input = document.getElementById("todo-input");
const button = document.getElementById("add-button");
const list = document.getElementById("todo-list");

function addTodo() {
  const text = input.value.trim(); // Entered text

  if (text === "") {
    // Do nothing if it's empty
    return;
  }

  const li = document.createElement("li"); // Create <li>
  li.textContent = text; // Set the text content
  list.appendChild(li); // Add to the bottom of <ul>

  input.value = ""; // Clear the input field
  input.focus(); // Return focus to the input field
}

button.addEventListener("click", addTodo);

Troubleshooting

  • Nothing happens when the button is clicked
    • Check the filename of main.js
    • Check if <script src="main.js"></script> is at the very bottom of the <body>
  • The browser has not been refreshed
    • Always press the refresh button (or F5 key) in your browser after saving
  • Japanese characters are garbled
    • Check if <meta charset="UTF-8"> is included

References

GitHubで編集を提案

Discussion