純JavaScript創(chuàng)建一個簡單的待辦事項列表

更新時間：2024年01月05日 11:27:49 作者：刻刻帝的海角

這篇文章主要給大家介紹了關于純JavaScript創(chuàng)建一個簡單的待辦事項列表的相關資料,清單通常用于記錄我們在某一天需要完成的所有事項,將最關鍵的任務放在最上方,將最不重要的事項放在最下方,需要的朋友可以參考下

前言

在現代的web開發(fā)中，待辦事項列表是一個常見且實用的功能。它允許用戶記錄、追蹤和完成他們的任務。在這篇文章中，我們將使用純JavaScript來創(chuàng)建一個簡單的待辦事項列表。我們會涉及到HTML結構的創(chuàng)建、CSS樣式的添加以及JavaScript交互的實現。

步驟1：創(chuàng)建HTML結構

首先，我們需要在HTML文件中定義待辦事項列表的結構。我們可以使用一個輸入框讓用戶輸入任務，一個按鈕來添加任務，以及一個無序列表來顯示任務。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Todo List</title>  
    <link rel="stylesheet" href="styles.css" rel="external nofollow" >  
</head>  
<body>  
    <div class="container">  
        <h1>Todo List</h1>  
        <input type="text" id="todoInput" placeholder="Enter a new todo">  
        <button id="addButton">Add Todo</button>  
        <ul id="todoList">  
        </ul>  
    </div>  
    <script src="script.js"></script>  
</body>  
</html>

步驟2：添加CSS樣式

接下來，我們可以在一個單獨的CSS文件中添加一些樣式來美化我們的待辦事項列表。例如，我們可以為輸入框、按鈕和列表項添加樣式

/* styles.css */  
.container {  
    max-width: 600px;  
    margin: 0 auto;  
    padding: 20px;  
}  
  
input[type="text"] {  
    width: 100%;  
    padding: 10px;  
    margin-bottom: 10px;  
}  
  
button {  
    padding: 10px 20px;  
    background-color: #007BFF;  
    color: white;  
    border: none;  
    cursor: pointer;  
    margin-bottom: 10px;  
}  
  
ul {  
    list-style-type: none;  
    padding: 0;  
}  
  
li {  
    padding: 10px;  
    background-color: #F8F9FA;  
    margin-bottom: 5px;  
}

步驟3：使用JavaScript實現交互功能

最后，我們需要在JavaScript文件中編寫代碼來實現待辦事項的添加和顯示功能。我們可以通過為按鈕添加一個事件監(jiān)聽器來實現這一點，當按鈕被點擊時，獲取輸入框的值，創(chuàng)建一個新的列表項，并將其添加到列表中。

// script.js  
document.addEventListener('DOMContentLoaded', function() {  
    const todoInput = document.getElementById('todoInput');  
    const addButton = document.getElementById('addButton');  
    const todoList = document.getElementById('todoList');  
      
    addButton.addEventListener('click', function() {  
        const todoText = todoInput.value.trim(); // 獲取輸入框的值并去除前后的空格  
        if (todoText) { // 如果輸入框的值不為空  
            const listItem = document.createElement('li'); // 創(chuàng)建一個新的列表項元素li  
            listItem.textContent = todoText; // 設置列表項的文本內容為輸入框的值  
            todoList.appendChild(listItem); // 將新的列表項添加到無序列表ul中  
            todoInput.value = ''; // 清空輸入框的值以便用戶輸入下一個待辦事項  
        } else {  
            alert('Please enter a valid todo'); // 如果輸入框的值為空，則顯示一個警告消息提醒用戶輸入有效的待辦事項內容。注意這里只是一個簡單的錯誤處理，實際開發(fā)中可能需要更友好的用戶體驗設計。  
        }  
    });  
});

現在，當你打開HTML文件時，你應該能夠看到一個簡單的待辦事項列表應用程序。你可以在輸入框中輸入任務，點擊按鈕將其添加到列表中。每個任務都會作為一個新的列表項顯示在列表中。當然，這只是一個基本示例，你可以根據自己的需求擴展它，例如添加刪除任務的功能、標記任務為已完成的功能等。希望這篇文章能幫助你了解如何使用JavaScript創(chuàng)建一個待辦事項列表！