标签：todo const text app 10px border 留言板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Todo List</title>
<style>
body {
background-color: #f6f6f6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 20px auto;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 20px;
color: #3f51b5;
}
.todo-form {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.name{
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}
.account{
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}
.todo-input {
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}
.todo-date {
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}
.error-message {
color: #ff6b6b;
font-size: 14px;
margin-bottom: 10px;
}
.todo-button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #3f51b5;
color: #fff;
cursor: pointer;
}
.todo-list {
list-style: none;
padding: 0;
}
.todo-item {
display: flex;
align-items: center;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
background-color: #e8e8e8;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.todo-item:last-child {
margin-bottom: 0;
}
.todo-item-checkbox {
margin-right: 10px;
}
.todo-item-text {
flex: 1;
color: #3f51b5;
font-weight: bold;
}
.todo-item-delete {
padding: 5px 10px;
border: none;
border-radius: 5px;
background-color: #ff6b6b;
color: #fff;
cursor: pointer;
transition: background-color 0.3s;
}
.todo-item-delete:hover {
background-color: #ff4f4f;
}
</style>
</head>
<body>
<div class="container">
<h1 class="header">留言板</h1>
<form class="todo-form" id="todoForm">
<!-- <input type="text" class="name" placeholder="请输入你的昵称" id="name">-->
<input type="text" class="todo-input" placeholder="请输入你的留言内容" id="todoInput">
<input type="date" class="todo-date" id="todoDate">
<button type="submit" class="todo-button">Add</button>
<div id="errorMessage" class="error-message"></div>
</form>
<ul class="todo-list" id="todoList"></ul>
</div>
<script src="/bbb/jquery/dist/jquery.js"></script>
<script>
$(function() {
$('#todoForm').submit(function(event) {
event.preventDefault()
//
/* const todoName=$('#name').val().trim()
const todoAccount = $('#account').val().trim()*/
const todoText = $('#todoInput').val().trim()
const todoDate = $('#todoDate').val().trim()
/*
if (todoName===null || todoAccount===null) {
$('#errorMessage').text('请输入内容.')
return
}*/
if (todoText===null) {
$('#errorMessage').text('请输入内容.')
return
}
if (!todoDate) {
$('#errorMessage').text('Please enter todo task and date.')
return
}
/*if (!todoText || !todoDate) {
$('#errorMessage').text('Please enter todo task and date.')
return
}*/
if (new Date(todoDate) < new Date()) {
$('#errorMessage').text('The deadline cannot be in the past.')
return
}
$('#errorMessage').text('')
const todoItem = $('<li>').addClass('todo-item')
const todoCheckbox = $('<input>').attr({
type: 'checkbox',
class: 'todo-item-checkbox'
})
const todoTextEl = $('<span>').addClass('todo-item-text').text(todoText)
const todoDateEl = $('<span>').addClass('todo-item-date').text(todoDate)
const todoDeleteBtn = $('<button>').addClass('todo-item-delete').text('Delete')
todoItem.append(todoCheckbox, todoTextEl, todoDateEl, todoDeleteBtn)
$('#todoList').append(todoItem)
/*$('#name').val('')
$('#account').val('')*/
$('#todoInput').val('')
$('#todoDate').val('')
$.ajax({
type: 'post',
url: '/app/tasks',
data: JSON.stringify({
// name: todoName,
// text: todoAccount,
name: todoText,
date: todoDate
}),
dataType: 'object',
contentType: 'apply/object',
success: function(response) {
console.log(response)
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown)
}
})
})
$(document).on('click', '.todo-item-delete', function() {
if (confirm('Are you sure you want to delete this todo?')) {
$(this).parent().remove()
}
})
})
</script>
</body>
</html>
server js:
const express=require('express')
const app=express()
app.engine('html',require('express-art-template'))
app.use(express.urlencoded({extended:false}))
app.use(express.json())
//开放node_modules,public两个文件夹的权限，允许用户查看
app.use('/bbb',express.static('node_modules'))
app.get('/',(req,res) =>{
res.render('login.html')
})
let tasks = [];
app.post('/app/tasks', (req, res) => {
const { name, date } = req.body;
tasks.push({ name, date });
res.send({ message: 'Task added success.' });
});
app.get('/app/tasks', (req, res) => {
res.send(tasks);
});
app.listen(3020,()=>console.log('app listening on http://localhost:3020'))
标签：todo,
const,
text,
app,
10px,
border,
留言板
From： https://www.cnblogs.com/ckyjbd/p/17516593.html