Javascript & Jquery & node | جافا سكربت بأحترافية مع المكاتب

كورس جافا سكربت كامل من الصفر للاحتراف مع 10 مكاتب رائعة وسهلة جدا لغة المستقبل

Udemy

platform

العربية

language

Web Design

Why take this course?

إذا كنت تبحث عن تعلم مكاتب الألغريا معجم في JavaScript وترغب في استخدام هذه المعرفة لإنشاء موقع يحتوي على تفاعل مع لوحة الأمور (To-Do List)، فإننا سنبدأ في هذا الرأي بخطوات بسيطة لإنشاء نموذج أساسي لقائمة الأمور مع استخدام localStorage لحفظ الأمور.

الخطوات:

إعداد النموذج HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List App</title>
</head>
<body>
    <h1>My To-Do List</h1>
    <form id="todoForm">
        <input type="text" id="todoInput" placeholder="Enter a new task..." />
        <button type="submit">Add Task</button>
    </form>
    <ul id="todoList"></ul>
    <script src="app.js"></script>
</body>
</html>

إنشاء التطبيق JavaScript: في ملف app.js، سنأخذ كل من النموذج والوظيفة لإضافة الأمور وتعريفها.

إجراء التطبيق JavaScript: سيكون هذا الكود مفيدًا لاحقًا:

document.addEventListener('DOMContentLoaded', () => {
    const todoForm = document.getElementById('todoForm');
    const todoInput = document.getElementById('todoInput');
    const todoList = document.getElementById('todoList');

    todoForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const newTask = todoInput.value.trim();
        if (newTask) {
            addTodo(newTask);
            todoInput.value = '';
        }
    });

    // Load saved tasks from localStorage
    const todosJSON = localStorage.getItem('todos');
    let todos = JSON.parse(todosJSON) || [];
    renderTodos(todos);
});

function addTodo(task) {
    todos.push({ text: task, completed: false });
    saveTodos();
    renderTodos(todos);
}

function saveTodos() {
    localStorage.setItem('todos', JSON.stringify(todos));
}

function renderTodos(tasks) {
    const todoListItems = tasks.map((task, index) => {
        return `
            <li>
                <label>
                    <input type="checkbox" ${task.completed ? 'checked' : ''} />
                    ${task.text}
                </label>
                <button onclick="removeTodo(${index})">Remove</button>
            </li>`;
    }).join('');
    todoList.innerHTML = todoListItems;
}

function removeTodo(index) {
    todos.splice(index, 1);
    saveTodos();
    renderTodos(todos);
}

إضافة الوظيفة removeTodo: هذه الوظيفة تأخد إطارًا نموذج (index) وتزيل المهمة من مссиي الأمور.
```
function removeTodo(index) {
    todos.splice(index, 1);
    saveTodos();
    renderTodos(todos);
}
```
إضافة الوظيفة saveTodos: هذه الوظيفة تحدد مكتبة localStorage بمصدر JSON لتخزين مجموعة الأمور.
```
function saveTodos() {
    localStorage.setItem('todos', JSON.stringify(todos));
}
```

إضافة الوظيفة renderTodos: هذه الوظيفة تخلق مجموعة العناصر <li> لكل أمور وتحدث المستخدم بها.

function renderTodos(tasks) {
    const todoListItems = tasks.map((task, index) => {
        return `
            <li>
                <label>
                    <input type="checkbox" ${task.completed ? 'checked' : ''} />
                    ${task.text}
                </label>
                <button onclick="removeTodo(${index})">Remove</button>
            </li>`;
    }).join('');
    todoList.innerHTML = todoListItems;
}

باستخدام هذه الرأي، يمكنك إضافة مزيد من الوظائف والجمال لتطوير تطبيق أمور (To-Do List) مثل تعديل الأمور، فك استخدام الزر محدد (checked)، إضافة وظائف وقت أو منطقة بحث، وغيرها.

Loading charts...

Javascript & Jquery & node | جافا سكربت بأحترافية مع المكاتب

Why take this course?

الخطوات:

Related Topics