Привет ребята!!

В этой статье я покажу вам, как создать приложение TO-Do на javascript.

Список дел означает, что вы просто создаете список, а когда работа закончена, вы удаляете этот список.

Давайте начнем:-

Вы можете использовать любую IDE для создания этого проекта. Здесь я использую код Visual Studio.

Создайте простую HTML-страницу для пользовательского ввода:-

давайте разбираться шаг за шагом

<!DOCTYPE html>

Это сообщит нашему браузеру, что тип документа — HTML, и отобразит текст в читаемом формате путем преобразования тега.

<html lang="en">

Эта строка сообщит браузеру, что тип языка — английский.

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDo APP</title>
 <script type="text/javascript" src="app.js"></script>
</head>

Теперь, как вы видите, мы добавили два метатега. Первый метатег сообщит нашему браузеру, что набор символов имеет тип utf-8, а второй очень полезен, чтобы сделать наш сайт отзывчивым, если вы откроете его на рабочем столе, чтобы он настраивался в соответствии с соотношением устройств.

мы также добавили заголовок, чтобы он отображался на вкладке. Я также добавил расположение файла javascript, о котором мы поговорим позже в этой статье.

Теперь мы создадим основную часть, которая будет отображаться в браузере, которая будет находиться внутри тела.

<body>
<h1>To do app</h1>
<input type="text" placeholder="todo-item"  style="width: 30px" id="item"><br>
<input type="button" value="add" onclick="add_item();">
<div class="add">
<ul class="this">
</ul>
</div>
</body>

Давайте разберем код и разберем каждый тег:

Тег H1:-

Тег H1 используется для печати текста в первой форме заголовка, который является большим текстом, если вы выберете h2, h3..h6, они будут продолжать уменьшать размер текста.

введите тег:-

это примет ввод от пользователей. Заполнитель будет использоваться, чтобы сообщить пользователю, что он должен ввести, и когда он начнет писать в поле ввода, он автоматически исчезнет. Я также дал этому идентификатор, который будет очень полезен в javascript для получения значения, которое дал пользователь.

в следующем входном теге я поместил кнопку, нажав которую пользователь может создать список дел. мы вызвали прослушиватель кликов (который сработает, когда пользователь нажмет кнопку добавления) и вызовем функцию, написанную в javascript.

Тег Div:-

div похож на контейнер, который мы создали, чтобы сделать его отдельным и удобным для доступа в доме.

Тег UL:-

ul используется для создания неупорядоченного списка. Без указания номера списка.

Краткое резюме:-

Итак, что мы здесь сделали?

мы создали одно поле ввода, где пользователь может вводить свои данные, а также мы дали одну кнопку добавления, нажав кнопку, ввод будет сохранен в списке.

теперь перейдите в браузер и напишите полный путь к вашему файлу или просто щелкните правой кнопкой мыши файл todo.html и откройте его в своем любимом браузере:

Теперь давайте напишем код Javascript, чтобы мы хотели, чтобы когда пользователь нажимал кнопку «Добавить», ввод должен был сохраняться в локальном хранилище (кэш браузера) и отображаться на том же экране.

Здесь нам также нужно сделать нашу логику такой, как когда пользователь ничего не ввел в поле ввода, поэтому мы сообщим пользователю, используя одно предупреждение, которое, пожалуйста, введите текст.

Создайте отдельный файл для javascript:-

Мы создадим имя файла, например app.js, в той же папке и поместим туда код javascript, и мы уже упомянули имя файла в нашем HTML-файле.

Теперь давайте напишем код Javascript:

function add_item(){
let user_input= document.getElementById("item");
let val = user_input.value;
if(val!==''){
let element = document.createElement('li')
element.className="mylist";
element.innerHTML= "<h1>"+user_input.value+"</h1>";
user_input.value="";
let un_list= document.querySelector('ul.this');
un_list.appendChild(element)
element.onclick=function(){
this.parentNode.removeChild(this);
}
}
else{
alert("Please eneter some value ")
}
}

Здесь мы создадим одну функцию и внутри этой функции напишем нашу логику для создания списка дел.

во-первых, нам нужно получить значение, которое дал пользователь, поэтому мы получим его с помощью DOM (объектная модель документа). поэтому вызовем метод getElementById и дадим имя идентификатора, которое мы дали тегу ввода, и сохраним значение в одна переменная (т.е. user_input).

let user_input= document.getElementById("item");

Теперь нам нужно проверить значение, что оно не пустое. Если он будет пустым, мы выдадим сообщение каким-либо предупреждением, в противном случае мы продолжим. Затем нам нужно создать новый элемент (так же, как создание нового тега), поэтому мы создадим новый элемент li, а затем напишем текст, который пользователь ввел с клавиатуры.

После этого нам также нужно добавить этот вновь созданный li в неупорядоченный список, после чего наша задача будет выполнена. Кроме того, мы очистим поле ввода, чтобы пользователь мог снова ввести текст и добавить его в список дел.

Вот несколько демонстрационных фотографий..

https://yogilookbook.s3.ap-south-1.amazonaws.com/2020-12-13+14-08-55.mp4

Большое спасибо, ребята, за чтение этого урока.