前端实操：制作专属的To-do list，拒绝拖延

睡着学
532 阅读2分钟

前言

还在为没有找到喜欢的待做清单（To-do list）苦恼吗？看过来。

看完这篇文章，你就能coding出一个专属于你自己的待做清单。

屏幕截图 2024-04-25 103029.png

你还可以为你的待做清单（To-do list）加上你喜欢的背景图。

正文

这个To-do list拥有的功能：

  • 通过在输入框输入待办事项再点击新增就可以在文本框下的列表中添加一行作为新增的待办事项。
  • 点击复选框，把待做事项标记为已做事项。
  • 点击关闭按钮可以将对应的事项在列表中删除。

那我们该怎么实现这个To-do list？

构建思路：

  1. 用html搭建框架。
  2. 用css设置样式。
  3. 用JavaScript的监听器监听新增按钮和删除按钮，实现事项的增加和删除。

让我们开始coding我们的专属To-do list。

html部分

  1. 大体框架：
    • 使用 <div id="app" class="container"> 作为主要容器，包含其他相关元素。
    • <h2 class="title">Todo List</h2> 表示待办事项列表的标题。
    • <div class="input-group"> 包含输入框和按钮，用于输入和添加待办事项。
    • <div class="list"> 包含 <ul id="todo-list"></ul>，用于展示待办事项列表。
  2. 功能：
    • 输入功能：用户在 <input class="content" type="text" id="newTodo"> 中输入待办事项内容。
    • 新增功能：当用户点击 <button class="btn">新增</button> 时，触发相应的事件处理函数。
    • 展示功能：将新创建的列表项添加到 <ul id="todo-list"> 中进行展示。

点击新增按钮后会在用js实现添加一些html内容。

新增内容为：

<li class="item">
    <div class="flex">
        <input type="checkbox" class="item-check">
        <p class="item-content">${item.title}</p>
        <button class="close" onclick="reduceElement(event)">X</button>
    </div>
</li>
  1. 大体框架：
    • <li class="item">包含复选框、待做内容和关闭按钮。
    • 使用div.flex来实现元素的布局，使复选框、内容和关闭按钮在一行内排列。
  2. 功能：
    • 标记功能：当用户点击<input type="checkbox" class="item-check">复选框时，会标记该事件已被完成。
    • 删除功能：当用户点击<button class="close" onclick="reduceElement(event)">关闭按钮时，会触发reduceElement(event)函数进行删除操作。

实操代码

<div id="app" class="container">
    <h2 class="title">Todo List</h2>

    <div class="input-group">
        <div class="label">待办事项</div>
        <input class="content" type="text" id="newTodo">
        <button class="btn">新增</button>
    </div>

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

css部分

我们用css设置相关样式让我们的To-do list更加美观。

  1. 通过弹性布局使页面主体在视窗中垂直和水平居中显示。

    body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

  2. ​ 设置标题的居中对齐和边距。

    .title {
    text-align: center;
    margin: 10px;
}

    通过实操，我们应用了多种居中方法。

  3. 通过弹性布局使内容输入框占据剩余空间，形成下图效果：

屏幕截图 2024-04-25 113336.png

待办事项在左边，内容输入框占据剩余空间，新增按钮被挤到右边。

.content { 
    flex: 1; 
}

  1. 为了让列表更美观。我们可以在列表的的一个元素设置一个外边距，这样就可以与输入文本框间隔开。

    /* 方法一 */
.item:nth-child(1) {
    margin-top: 20px;
}
/* 方法二 */
.item:first-child{
    margin-top: 20px;
}

    方法一较为灵活。

JavaScript部分

最为精彩的部分就是js的交互部分了。我们一步步通过需求进行coding。

  1. 需求：我们要实现新增功能

    解决：

    • 思路：获取新增按钮元素addTodo；对addTodo设置监听器，当新增按钮被点击后触发addNewTdo()函数添加待做事项；

    • 代码实现：

      //获取新增按钮元素
var addTodo = document.querySelector('.btn')
//监听器
addTodo.addEventListener('click', addNewTdo)

  2. 新增需求：完善addNewTdo()函数。当输入文本框内容为null时不添加，不为空时便添加待做事项。然后通过添加li标签实现添加待做事项列表元素。

    解决：

    • 思路：创建一个数组存取内容输入框输入的内容；获取ul标签元素，以便添加li标签；通过document.getElementById('newTodo').value.trim()获取输入框去掉左右空格的内容，然后判断是否为空，如果不为空则push添加在数组内；通过reader()函数渲染新增加的li。

    • 代码实现：

      //创建数组
var todoData = []
//获取ul标签元素，以便添加li标签
var todoList = document.getElementById('todo-list')

function addNewTdo() {
    //获取input框的内容
    if (document.getElementById('newTodo').value.trim() != '') {
        //添加入数组
        todoData.push({
            id: Math.floor(Date.now()),
            title: document.getElementById('newTodo').value,
            completed: false
        })

        //渲染新的li
        reader()
    }
}

  3. 新增需求：完善reader()函数渲染新增加的li。

    解决：

    • 思路：创建一个空字符串str，然后将str和li标签的html内容进行拼接。拼接完成后再用todoList.innerHTML = str设置ul内部的 HTML 内容。

    • 代码实现：

      //将todoData的数据渲染出来
function reader() {
    var str = ''
    todoData.forEach(function (item) {
        str += `
        <li class="item">
            <div class="flex">
                <input type="checkbox" class="item-check">
                <p class="item-content">${item.title}</p>
                <button class="close" onclick="reduceElement(event)">X</button>
            </div>
        </li>
        `
    })
    todoList.innerHTML = str
}

  4. 需求：实现点击删除按钮触发reduceElement(event)函数清除事件。完善reduceElement(event)函数。

    解决：

    • 思路：当关闭按钮被点击则会触发reduceElement(event)函数；我们可以通过删除todoData数组元素再通过渲染从而实现清除事件：首先获取关闭按钮元素close；通过previousElementSibling.textContent获取close兄弟元素（p标签）的内容；通过内容查找到实在todoData数组的下标；通过splice方法继续删除；再进行渲染li。

    • 代码实现：

      function reduceElement(event) {
    //首先获取关闭按钮元素
    var close = event.target
    //获取close兄弟元素的内容
    var content = close.previousElementSibling.textContent
    //查找要删除元素的下标
    var index = todoData.findIndex(item => item.title === content);
    //删除该指定元素
    todoData.splice(index, 1)
    //渲染li
    reader()
}

小结

一个良好的coding方法：在实现一个大需求时，从头到尾进行coding，在这个顺序中将大需求逐步分化成多个小需求（封装思想），然后去针对性的实现这个小需求。一步步得coding。这样做思路会更加清晰。开始coding属于自己的To-do list吧。

avatar
文章
阅读
粉丝