Как создать список дел с помощью jQuery?

Опубликовано: 6 Января, 2022

Эта статья посвящена разработке списка дел с некоторыми основными функциями, такими как:

  1. Добавить задачу
  2. Удалить задачу
  3. Перечеркните выполненные задачи

Предпосылки:
Базовые знания Front-end разработки с использованием HTML, CSS, JS, jQuery и Bootstrap-3.

Шаги:

  1. Инициализируем макет:
    - Добавьте текстовое поле ввода с кнопкой для добавления задач в основной список.
    - Мы установим контейнер, содержащий вышеуказанное, как фиксированный на кнопке, используя некоторое свойство CSS position fixed.
    - Теперь добавим контейнер, в который будут добавляться задачи.

    Ниже приведен код с объяснением вышеизложенного:

    <!-- Initialize the layout -->
    <!DOCTYPE html>
    < html lang = "en" >
    < head >
    < meta charset = "utf-8" />
    <!-- Required CDN's -->
    < link rel = "stylesheet"
    href =
    " https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css " >
    < script src =
    " https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js " >
    </ script >
    < script src =
    " https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js " >
    </ script >
    < script src = " https://code.jquery.com/jquery-3.4.1.js "
    integrity =
    "sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin = "anonymous" >
    </ script >
    < style >
    .container {
    width: 90%;
    height: auto;
    }
    .foot {
    position: fixed;
    left: 10%;
    bottom: 0;
    width: 80%;
    text-align: center;
    }
    </ style >
    </ head >
    < body >
    < center >
    < div class = "foot" >
    < div class = "row" >
    < div class = "col-sm-1" > </ div >
    < div class = "col-sm-10" >
    <!-- Input for tasks -->
    < div class = "input-group" >
    < input type = "text"
    class = "form-control"
    placeholder = "Add Task"
    id = "text" >
    < div class = "input-group-btn" >
    < button class = "btn btn-success" >
    < i class = "glyphicon glyphicon-plus" >
    </ i ></ button >
    </ div >
    </ div >
    < br >
    < br >
    </ div >
    </ div >
    </ div >
    <!-- Rest of the screen used for Adding Tasks -->
    < br >
    < h2 class = "text text-success" >My Tasks:</ h2 >
    < br >
    < div class = "container" >
    <!-- For adding tasks to the list -->
    </ div >
    </ center >
    </ body >
    </ html >
  2. Скрипт jQuery для добавления задач:
    Теперь мы добавим код jQuery, чтобы мы могли добавлять задачи в наш список дел. Здесь мы использовали класс предупреждений Bootstrap для добавления контейнеров задач.
    • Нажатие на крестообразную кнопку справа от задачи приведет к окончательному удалению задачи.
      (у предупреждения есть атрибут для этого, иначе нам бы также пришлось реализовать скрипт для удаления).

    Ниже приведен код с объяснением вышеизложенного:

    <!-- Adding tasks in the list -->
    <!DOCTYPE html>
    < html lang = "en" >
    < head >
    < meta charset = "utf-8" />
    < link rel = "stylesheet"
    href =
    " https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css " >
    < script src =
    " https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js " >
    </ script >
    < script src =
    " https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js " >
    </ script >
    < script src = " https://code.jquery.com/jquery-3.4.1.js "
    integrity = "sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin = "anonymous" ></ script >
    < style >
    .container {
    width: 80%;
    height: auto;
    }
    .foot {
    position: fixed;
    left: 10%;
    bottom: 0;
    width: 80%;
    text-align: center;
    }
    </ style >
    </ head >
    < body >
    < center >
    < div class = "foot" >
    < div class = "row" >
    < div class = "col-sm-1" > </ div >
    < div class = "col-sm-10" >
    <!-- Input for tasks -->
    < div class = "input-group" >
    < input type = "text"
    class = "form-control"
    placeholder = "Add Task"
    id = "text" >
    < div class = "input-group-btn" >
    < button class = "btn btn-success" >
    < i class = "glyphicon glyphicon-plus" >
    </ i ></ button >
    </ div >
    </ div >
    < br >
    < br >
    </ div >
    </ div >
    </ div >
    < br >
    < h2 class = "text text-success" >My Tasks:</ h2 >
    < br >
    < div class = "container" >
    </ div >
    </ center >
    < script >
    $(document).ready(function() {
    $('.btn-success').click(function() {
    // If something is written
    if ($('#text').val().length != 0) {
    //Store previous data
    var x = $('.container').html();
    // Add typed text in alert container
    var y =
    `< div class = "alert alert-success alert-dismissible fade in" >
    < a href = "#" class = "close" data-dismiss = "alert" aria-label = "close" >×</ a >
    ` + $('#text').val() + `</ div >`;
    //Update
    $('.container').html(y + x);
    //Clear after addition
    $('#text').val("");
    } else alert("Enter some Text!");
    });
    });
    </ script >
    </ body >
    </ html >
  3. Скрипт для обозначения выполненных задач:
    Наконец, мы добавим скрипт для реализации функции, согласно которой всякий раз, когда мы нажимаем на задачу, она будет пересекаться и, если это уже сделано, будет восстановлена обратно.
    Для перехода к задаче воспользуемся свойством text-decoration-line: line-through в CSS.

Окончательное решение:

<!-- To-Do List implemented using jQuery -->
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" />
< link rel = "stylesheet"
href =
" https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css " >
< script src =
" https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js " >
</ script >
< script src =
" https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js " >
</ script >
< script src = " https://code.jquery.com/jquery-3.4.1.js "
integrity =
"sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin = "anonymous" ></ script >
< style >
.container {
width: 80%;
height: auto;
}
.foot {
position: fixed;
left: 10%;
bottom: 0;
width: 80%;
text-align: center;
}
</ style >
</ head >
< body >
< center >
< div class = "foot" >
< div class = "row" >
< div class = "col-sm-1" > </ div >
< div class = "col-sm-10" >
<!-- Input for tasks -->
< div class = "input-group" >
< input type = "text"
class = "form-control"
placeholder = "Add Task"
id = "text" >
< div class = "input-group-btn" >
< button class = "btn btn-success" >
< i class = "glyphicon glyphicon-plus" >
</ i ></ button >
</ div >
</ div >
< br >
< br >
</ div >
</ div >
</ div >
< br >
< h2 class = "text text-success" >My Tasks:</ h2 >
< br >
< div class = "container" >
</ div >
</ center >
< script >
$(document).ready(function() {
$('.btn-success').click(function() {
if ($('#text').val().length != 0) {
var x = $('.container').html();
var y =
`< div class = "alert alert-success alert-dismissible fade in" >
< a href = "#" class = "close" data-dismiss = "alert" aria-label = "close" >×</ a >
` + $('#text').val() + `</ div >`;
$('.container').html(y + x);
$('#text').val("");
} else alert("Enter some Text!");
});
// When Task is clicked
$(document).on('click', '.alert', function() {
if ($(this).css('text-decoration-line') == "none")
$(this).css('text-decoration-line', 'line-through');
else
$(this).css('text-decoration-line', 'none');
});
});
</ script >
</ body >
</ html >

Выход:
Перед добавлением задач:

После добавления задач:

Вопросы о Web технологиях JQuery

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Trovo: Путь к звездам стриминга в новом десятилетии
31 Октября, 2023
Топ сервисов для создания чат-бота в Телеграме
15 Июня, 2023
Что такое прокси IPv4 и что он умеет
14 Июня, 2023
Как получить данные атрибутов пользовательских элементов в jQuery?
20 Февраля, 2023
Объясните роль функции обратного вызова в AJAX.
20 Февраля, 2023
Объясните технологии, используемые AJAX.
20 Февраля, 2023
Метод jQuery undelegate()
16 Февраля, 2023
jQuery метод остановки()
16 Февраля, 2023