CSS-Todo-App 使用教程

最新推荐文章于 2024-09-27 17:22:24 发布

诸余煦

最新推荐文章于 2024-09-27 17:22:24 发布

阅读量376

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00621/article/details/141583019

版权

CSS-Todo-App 使用教程

CSS-Todo-AppBasic todo app functionality without using JavaScript项目地址:https://gitcode.com/gh_mirrors/cs/CSS-Todo-App

1. 项目的目录结构及介绍

CSS-Todo-App/
├── index.html
├── style.css
├── script.js
└── images/
    ├── pencil.png
    ├── delete.png
    ├── plus.png
    └── notebook.gif

index.html: 项目的入口文件，包含HTML结构和页面布局。
style.css: 项目的样式文件，定义了页面的外观和布局。
script.js: 项目的脚本文件，包含了应用的逻辑和功能实现。
images/: 存放项目所需的图片资源。

2. 项目的启动文件介绍

index.html

index.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 App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="todo-header">
            <h2>ToDo List</h2>
            <img src="images/notebook.gif" height="50px" />
        </div>
        <div class="todo-body">
            <input type="text" id="todoText" class="todo-input" placeholder="Add your items" />
            <img src="images/plus.png" alt="+" id="AddUpdateClick" onclick="CreateToDoItems()" />
        </div>
        <ul id="listItems"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. 项目的配置文件介绍

style.css

style.css 文件定义了页面的样式和布局。以下是文件的主要内容：

.container {
    width: 300px;
    margin: auto;
    text-align: center;
}

.todo-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 5px;
    justify-content: center;
}

.todo-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #edeef0;
    border-radius: 30px;
    padding-left: 20px;
    margin-bottom: 25px;
}

.todo-body input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 10px;
}

.todo-controls {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    cursor: pointer;
}

script.js

script.js 文件包含了应用的逻辑和功能实现。以下是文件的主要内容：

function CreateToDoItems() {
    const todoValue = document.getElementById("todoText");
    if (todoValue.value === "") {
        alert("Please enter a task");
        return;
    }
    const listItems = document.getElementById("listItems");
    const li = document.createElement("li");
    const todoItems = `<div title="Hit Double Click and Complete" ondblclick="CompletedToDoItems(this)">${todoValue.value}</div><div> <img class="edit todo-controls" onclick="UpdateToDoItems(this)" src="images/pencil.png" /> <img class="delete todo-controls" onclick="DeleteToDoItems(this)" src="images/delete.png" /></div></div>`;
    li.innerHTML = todoItems;
    listItems.appendChild(li);
    todoValue.value = "";
    setAlertMessage("Todo item Created Successfully ");
}

function setAlertMessage(message) {
    alert(message);
}

以上是 CSS-Todo-App 项目的使用教程，包含了项目的目录结构、启动文件和配置文件的介绍

CSS-Todo-AppBasic todo app functionality without using JavaScript项目地址:https://gitcode.com/gh_mirrors/cs/CSS-Todo-App