با استفاده از HTML CSS JS صفحه ای طراحی کنید که کاربر بتواند لیست کارهای روزانه خود را وارد کند و به شکل یک لیست ببیند.
این تمرین یه پروژه ست! یعنی پتانسیل اینو داره که خیلی بیشتر روش کار بشه بنابراین ایده اصلی رو از اینجا
بردار و خودت بیشتر روش کار کن تا به یه تمرین بزرگتر تبدیل یشه
<!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>
<style>
body{
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h1{
text-align: center;
color: #333;
}
.input{
background-color: rgb(237, 102, 102);
padding: 10px;
display: flex;
gap: 8px;
max-width: 400px;
margin: 0 auto 20px auto;
border-radius: 8px;
}
.input input[type="text"]{
flex: 1;
padding: 8px;
border: none;
border-radius: 4px;
outline: none;
}
.input input[type="button"]{
padding: 8px 16px;
border: none;
border-radius: 4px;
background-color: white;
color: rgb(237, 102, 102);
font-weight: bold;
cursor: pointer;
}
.input input[type="button"]:hover{
background-color: #eee;
}
ul{
max-width: 400px;
margin: 0 auto;
padding: 0;
list-style: none;
}
ul li{
background-color: white;
padding: 10px;
margin-bottom: 6px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
cursor: pointer;
}
ul li:hover{
background-color: #ffe5e5;
text-decoration: line-through;
}
</style>
</head>
<body>
<H1>TO DO LIST </H1>
<section class="input">
<label for="todoinput"></label>
<input type="text" placeholder="..." id="todoinput">
<input type="button" value="ok" onclick="add()">
</section>
<section>
<ul id="todolist">
</ul>
</section>
<script>
let ul = document.getElementById('todolist')
let input = document.getElementById('todoinput')
let add = ()=>{
let valuei = input.value
if (valuei.length>0){
ul.innerHTML += `<li onclick="deleteitem(this)">${valuei}</li>`
input.value = ''
}
}
let deleteitem = (element)=>{
element.remove()
}
</script>
</body>
</html>
دانلود
Python - پایتون
PHP - پی اچ پی
C# - سی شارپ
C & C++ - سی و سی پلاس پلاس
Kotlin - کاتلین
Java - جاوا
DataBase - دیتابیس
Matlab - متلب
Rust - راست
Golang - گولنگ
Bash - بش
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>لیست کارهای روزانه</title>
<style>
body { font-family: Arial, sans-serif; }
#taskList { margin-top: 20px; }
li { margin: 5px 0; }
</style>
</head>
<body>
<h1>لیست کارهای روزانه</h1>
<input type="text" id="taskInput" placeholder="کار جدید را وارد کنید">
<button onclick="addTask()">اضافه کردن</button>
<ul id="taskList"></ul>
<script>
function addTask() {
const taskInput = document.getElementById('taskInput');
const taskText = taskInput.value;
if (taskText) {
const li = document.createElement('li');
li.textContent = taskText;
document.getElementById('taskList').appendChild(li);
taskInput.value = '';
}
}
</script>
</body>
</html>
<!-- prettier-ignore -->
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../CSS/practice.css" />
<title>لیست کارهای روزانه</title>
<style>
html {
font-size: 1.5em;
}
.header-text {
text-align: center;
background-color: pink;
margin-bottom: 5px;
}
.input-todo {
text-align: center;
background-color: yellowgreen;
padding: 30px;
}
#todo {
font-size: 1.2em;
overflow-x: auto;
}
#but {
font-size: 1.2em;
border-radius: 8px;
}
</style>
</head>
<body>
<header>
<h1 class="header-text">لیست کارهای روزانه</h1>
</header>
<section class="input-todo">
<label for="todo">یک کار روزانه وارد کنید.</label>
<input id="todo" type="text" placeholder="مثلا خرید نان" />
<button id="but" onclick="ShowTodo()">اتمام</button>
</section>
<section class="todos">
<ol class="todos-ol"></ol>
</section>
<script>
const ShowTodo = () => {
const Value = document.getElementById("todo");
let TodoValue = Value.value;
Value.value = "";
const element = `<li>${TodoValue}</li>`;
document.getElementsByClassName("todos-ol")[0].innerHTML += element;
};
</script>
</body>
</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>
</head>
<body>
<section class="input">
<input id="input" type="text" >
<input onclick="addItem()" type="submit">
</section>
<section >
<ul class="todolist">
</ul >
</section>
<script>
let list=document.querySelector('.todolist')
let input=document.querySelector('#input')
addItem=()=>{
list.innerHTML=list.innerHTML+`<li '>${input.value}</li>`
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDo-List</title>
<style>
@font-face {
font-family: "IRANYekanX-Bold";
src: url(./IRANYekanX-Bold.woff);
}
@font-face {
font-family: "FiraCode";
src: url(./FiraCode-Medium.ttf);
}
* {
font-family: "IRANYekanX-Bold";
text-align: center;
margin: auto;
user-select: none;
color: #d8d8d8;
box-sizing: border-box;
}
body {
background-color: #151515;
}
header {
width: 70%;
max-width: 550px;
margin: 20px auto;
padding: 10px;
background-color: #202020;
border: 7px solid #313131;
border-radius: 15px;
}
header h1 {
font-family: "FiraCode";
}
#todo-list,
#input {
width: 90%;
max-width: 620px;
margin: 20px auto;
padding: 15px;
background-color: #202020;
border: 7px solid #313131;
border-radius: 15px;
}
input[type=button] {
all: unset;
padding: 15px;
margin: 5px auto;
width: 85%;
height: auto;
color: white;
background-color: #303030;
border: 1px solid rgb(68, 68, 68);
border-radius: 4px;
transition: all 0.4s ease-in-out;
font-size: 20px;
}
input[type=button]:hover {
cursor: pointer;
background-color: #404040;
transform: translateY(-2px);
}
.in {
all: unset;
margin: 5px auto;
padding: 15px;
width: 85%;
height: auto;
background-color: #303030;
border: 1px solid rgb(68, 68, 68);
border-radius: 4px;
transition: all 0.4s ease-in-out;
font-size: 20px;
}
ul li {
user-select: text;
list-style: none;
font-family: "FiraCode", IRANYekanX-Bold;
text-align: justify;
padding: 10px;
margin: 5px auto;
width: 90%;
height: auto;
color: white;
background-color: #303030;
border: 2px solid rgb(68, 68, 68);
border-radius: 4px;
transition: all 0.4s ease-in-out;
font-size: 20px;
text-align: justify;
overflow: hidden;
}
button {
all: unset;
text-align: center;
font-family: "FiraCode";
font-size: 20px;
float: left;
width: 37px;
height: 37px;
color: white;
background-color: #303030;
border-radius: 5px;
transition: all 0.4s ease-in-out;
position: relative;
}
button:hover {
cursor: pointer;
background-color: #404040;
transform: translateY(-2px);
}
h4, h5, details, summary {
user-select: text;
display: inline;
text-align: justify;
}
h5 {
text-align: justify;
display: inline;
}
h5 {
display: inline-block;
vertical-align: top;
max-width: 97%;
word-wrap: break-word;
white-space: normal;
}
h4 {
color: white;
margin-right: 5px;
text-align: left;
}
h4:hover {
cursor: pointer;
}
</style>
</head>
<body>
<header><h1>ToDo-List</h1></header>
<section id="input">
<input type="text" class="in" placeholder="عنوان کار خود را وارد کنید"> <br>
<input type="text" class="in" placeholder="کار خود را وارد کنید"> <br>
<input type="button" value="ثبت" onclick="addItem()">
</section>
<section>
<ul id="todo-list">
<h2 id="empty-msg">فعلا کاری ندارید :)</h2>
</ul>
</section>
<script>
let n = document.getElementsByClassName("in")[0]
let i = document.getElementsByClassName("in")[1]
let list = document.getElementById("todo-list")
window.onload = () => {
let savedData = localStorage.getItem("todoData");
if (savedData) {
list.innerHTML = savedData;
} else {
list.innerHTML = `<h2 id="empty-msg">فعلا کاری ندارید :)</h2>`;
}
}
let addItem = ()=>{
if (n.value.length > 30) {
alert("عنوان نباید بیشتر از 30 کاراکتر باشد!")
return
}
if (i.value.length > 0) {
} else {
alert("ورودی نباید خالی باشد!")
return
}
if (i.value.length > 0) {
let emptymsg = document.getElementById("empty-msg")
if (emptymsg){
emptymsg.remove()
}
list.innerHTML = list.innerHTML +
`
<li>
<button title="حذف این کار" onclick="deletItem(this)" style="color: #ff3d3d">X</button>
<details>
<summary>
<h4>${n.value}</h4>
</summary>
<h5>${i.value}</h5>
</details>
</li>
`
localStorage.setItem("todoData", list.innerHTML);
n.value = ""
i.value = ""
} else {
alert("ورودی نباید خالی باشد!")
return
}
}
let deletItem = (element) => {
element.parentElement.remove()
if (list.querySelectorAll("li").length === 0){
list.innerHTML = `<h2 id="empty-msg">فعلا کاری ندارید :)</h2>`
localStorage.removeItem("todoData")
} else {
localStorage.setItem("todoData", list.innerHTML)
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript9</title>
</head>
<style>
.input{
background-color: #95bb2eea;
padding: 10px;
font-size: 20px;
}
ul{
background-color: rgba(231, 253, 199, 0.986);
}
ul li{
padding: 10px;
list-style-type:decimal;
}
ul li:hover{
background: #16ee94;
}
</style>
<body>
<h1 style="text-align: center;">ToDo List</h1>
<section class="input">
<label for="todo-input">input:</label>
<input id="todo-input" type="text" placeholder="...">
<input type="button" value="ok" onclick="addItem()" style="font-size: 18px;">
</section>
<section >
<ul id="todo-list" >
</ul>
</section>
<script>
let input = document.getElementById("todo-input")
let list = document.getElementById("todo-list")
let addItem = ()=>{
//let inputval = input.value//
//if(inputval.lenght < "0")//
list.innerHTML = list.innerHTML + `<li onclick="deletItem(this)" >${input.value}</li>`
}
let deletItem= (element)=>{
element.remove()
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List</title>
<style>
body{
color: white ;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 700px;
background-color: #34495e;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
border-radius: 10px;
height: auto;
}
ul.list {
width: 100%;
}
.item{
margin: 5px auto;
display: flex;
justify-content: space-between;
align-items: center;
width: 60%;
padding: 0px;
}
.item p{
font: bold 20px Arial, sans-serif;
margin-right: 20px;
}
.item button{
font-size: 15px;
min-width: 100px;
height: 40px;
background-color: blue;
color: white;
border-radius: 5px;
cursor: pointer;
}
.footer {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
}
.footer input {
width: 50%;
height: 40px;
border-radius: 5px;
border: none;
padding: 0 10px;
font-size: 16px;
}
.footer button {
width: 100px;
height: 40px;
background-color: green;
color: white;
border-radius: 5px;
margin-left: 5px;
cursor: pointer;
font: bold 16px Arial, sans-serif;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">Daily chores</h1>
<ul class="list">
<li class="item">
<p>Going to the Park </p>
<button class="delete">Delete</button>
</li>
<li class="item">
<p>Going to the gym</p>
<button class="delete">Delete</button>
</li>
<li class="item">
<p>Going to the Park </p>
<button class="delete">Delete</button>
</li>
<li class="item">
<p>Going to the gym</p>
<button class="delete">Delete</button>
</li>
</ul>
<div class="footer">
<input type="text" placeholder="Add new item">
<button>Add</button>
</div>
</div>
<script>
document.querySelectorAll(".delete").forEach((del)=>{
del.addEventListener("click", (e)=>{
del.parentElement.remove();
})
})
document.querySelector(".footer button").addEventListener("click", (e)=>{
const input = document.querySelector(".footer input");
if(input.value == "") return; // Do not add empty items
else {
const newItem = document.createElement("li");
newItem.className = "item";
newItem.innerHTML = `<p>${input.value}</p><button class="delete">Delete</button>`;
document.querySelector(".list").appendChild(newItem);
input.value = ""; // Clear the input field
newItem.querySelector(".delete").addEventListener("click", (e) => {
newItem.remove();
});
}
})
document.querySelector(".footer input").addEventListener("keypress", (e) => {
if (e.key === "Enter") {
document.querySelector(".footer button").click();
}
});
</script>
</body>
</html>
from tkinter import *
from tkinter import messagebox
from PIL import Image,ImageTk
import jdatetime
def delte_btn_enter(e):
delet_btn.config(background="#BDB76B",fg="white",cursor="hand2")
def delete_btn_leave(e):
delet_btn.config(background="#808000",fg="white",cursor="arrow")
def insert_enetr(e):
insert_btn.config(background="#556B2F",fg="white",cursor="hand2")
def insert_leave(e):
insert_btn.config(background="teal",fg="white",cursor="arrow")
def close_enter(e):
close_btn.config(background="#FF4500",fg="white",cursor="hand2")
def close_leave(e):
close_btn.config(background="orange",fg="white",cursor="arrow")
def close():
win.destroy()
def delete1():
text_entry.delete(0,END)
def delete2():
list_box.delete(0,END)
def insert():
try:
text = text_entry.get()
list_box.insert(END,text)
now = jdatetime.datetime.now()
date_time = now.strftime("%Y/%m/%d %H:%M:%S")
final_text = f"{text} = {date_time}"
list_box.insert(END, final_text)
except ValueError:
messagebox.showerror("plase enter text")
win = Tk()
win.title("TO DO list app")
win.geometry("950x900")
win.config(background="black")
win.resizable(False,False)
img = Image.open("image/25643.png")
icon = ImageTk.PhotoImage(img)
win.iconphoto(False,icon)
text_leble = Label(win,text="list weekend",font=("arial",16),width=30,bg="black",fg="orange")
text_leble.pack(padx=10,pady=10)
text_entry = Entry(win,font=("arial",16),width=30,bg="#008080",fg="white",justify=CENTER)
text_entry.pack(padx=15,pady=15)
list_box = Listbox(win,width=30,height=10,bg="purple",fg="white",font=("arial",16))
list_box.pack(padx=15,pady=15)
delet_btn = Button(win,font=("arial",16),bg="#808000",fg="white",width=30,text="delete",command=delete1)
delet_btn.pack(padx=15,pady=15)
delete_btn2 = Button(win,font=("arial",16),bg="green",fg="white",width=30,text="delete_list",command=delete2)
delete_btn2.pack(padx=10,pady=10)
insert_btn = Button(win,text="insert",font=("arial",16),width=30,bg="Teal",fg="white",command=insert)
insert_btn.pack(padx=15,pady=15)
close_btn = Button(win,text="close",font=("arial",16),bg="orange",fg="white",width=30,command=close)
close_btn.pack(padx=15,pady=15)
delet_btn.bind("<Enter>",delte_btn_enter)
delet_btn.bind("<Leave>",delete_btn_leave)
insert_btn.bind("<Enter>",insert_enetr)
insert_btn.bind("<Leave>",insert_leave)
close_btn.bind("<Enter>",close_enter)
close_btn.bind("<Leave>",close_leave)
win.mainloop()
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice</title>
<style>
</style>
</head>
<body>
<label for="work">Add Work</label>
<input type="text" id="work">
<input type="button" value="ok" onclick="addWork()">
<ul id="work-list">
</ul>
<script>
let add = document.getElementById("work")
let list = document.getElementById("work-list")
let addWork = () => {
list.innerHTML = list.innerHTML + `<li onclick="removeWork(this)">${add.value}</li>`
console.log(list)
}
let removeWork =(element)=>{
element.remove()
}
</script>
</body>
</html>
جوابت را با Markdown بنویس و ثبت کن
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نامتوضیح کوتاهی بنویسید تا تیم بررسی کند.