{"draftJsState":{"blocks":[{"data":{"image":{"id":"676863d05551ee0378248868"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Просто красивая картинка)","type":"atomic:image","key":"b5lel"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":276,"offset":0,"style":"BOLD"}],"text":"Всем привет! Создание веб-приложения — это отличный способ улучшить свои навыки программирования и веб-разработки. В этой статье мы создадим простое приложение на HTML, CSS и JavaScript, которое позволит пользователям добавлять, просматривать и удалять задачи. Давайте начнем!","type":"unstyled","key":"fnonp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подготовка проекта","type":"header-two","key":"qtu4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте папку для проекта. Назовите её, например, TodoApp.","type":"header-three","key":"dl6l0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте следующие файлы внутри папки:","type":"header-three","key":"154nl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"index.html","type":"blockquote","key":"3d5g7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"styles.css","type":"blockquote","key":"3v27i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"script.js","type":"blockquote","key":"ehn8p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание HTML-структуры","type":"header-two","key":"9ekg0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":14,"style":"ITALIC"}],"text":"Откройте файл index.html и добавьте следующий код:","type":"unstyled","key":"4d60v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"actg6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"2d131"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ctb5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"31m91"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"4efst"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Список задач","type":"blockquote","key":"fhv8b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"7clp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"crkqk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"fquce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"2tgdk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Список задач

","type":"blockquote","key":"evvpk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"3g9lf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"6dbsn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"7rsdu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"7na7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"1a9e2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"edt07"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8v9c8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стилизация с помощью CSS","type":"header-two","key":"6ei9c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте файл styles.css и добавьте следующий код:","type":"unstyled","key":"b1e5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body {","type":"blockquote","key":"8mu48"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" font-family: Arial, sans-serif;","type":"blockquote","key":"ccfut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #f4f4f4;","type":"blockquote","key":"9i77r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" margin: 0;","type":"blockquote","key":"a5umr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 20px;","type":"blockquote","key":"6efeu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"6kr43"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" .container {","type":"blockquote","key":"e60ep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" max-width: 400px;","type":"blockquote","key":"95o00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" margin: auto;","type":"blockquote","key":"4ktri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background: white;","type":"blockquote","key":"6ts7r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 20px;","type":"blockquote","key":"5utn2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-radius: 5px;","type":"blockquote","key":"2fi8i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);","type":"blockquote","key":"dklr7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"varr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"h1 {","type":"blockquote","key":"1dg8l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-align: center;","type":"blockquote","key":"aqdl7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"aqssi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" input[type=\"text\"] {","type":"blockquote","key":"5tp7c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: calc(100% - 22px);","type":"blockquote","key":"62ovd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 10px;","type":"blockquote","key":"6v1k0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" margin-bottom: 10px;","type":"blockquote","key":"a03nl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border: 1px solid #ccc;","type":"blockquote","key":"po9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-radius: 5px;","type":"blockquote","key":"8b5fk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"5qku1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"button {","type":"blockquote","key":"dpj34"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: 100%;","type":"blockquote","key":"cttlq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 10px;","type":"blockquote","key":"4i04c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #007bff;","type":"blockquote","key":"futmg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: white;","type":"blockquote","key":"754hj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border: none;","type":"blockquote","key":"49l0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-radius: 5px;","type":"blockquote","key":"8pj5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" cursor: pointer;","type":"blockquote","key":"97u6q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"1hm1m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"button:hover {","type":"blockquote","key":"bbche"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #0056b3;","type":"blockquote","key":"fipn4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"eok7t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ul {","type":"blockquote","key":"8app5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" list-style-type: none;","type":"blockquote","key":"e5m6p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 0;","type":"blockquote","key":"cjlb3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"b8dp5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"li {","type":"blockquote","key":"8bp4l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" padding: 10px;","type":"blockquote","key":"7196s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" margin-top: 5px;","type":"blockquote","key":"eaa62"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background: #e9ecef;","type":"blockquote","key":"462kh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-radius: 5px;","type":"blockquote","key":"3m3rt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" display: flex;","type":"blockquote","key":"7eeo2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" justify-content: space-between;","type":"blockquote","key":"4kvj8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" align-items: center;","type":"blockquote","key":"322ti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"29kce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"li button {","type":"blockquote","key":"76g7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #dc3545;","type":"blockquote","key":"3a2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border: none;","type":"blockquote","key":"5r8eu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" color: white;","type":"blockquote","key":"c6ntt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border-radius: 5px;","type":"blockquote","key":"eu0a2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" cursor: pointer;","type":"blockquote","key":"578ms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"8648m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"li button:hover {","type":"blockquote","key":"7594t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #c82333;","type":"blockquote","key":"bbvbm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"4rh8f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавление функциональности с помощью JavaScript","type":"header-two","key":"8rb02"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте файл script.js и добавьте следующий код:","type":"unstyled","key":"36h2n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('addTaskButton').addEventListener('click', function() {","type":"blockquote","key":"fb9l0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const taskInput = document.getElementById('taskInput');","type":"blockquote","key":"3mf8v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const taskText = taskInput.value;","type":"blockquote","key":"78ckh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" if (taskText) {","type":"blockquote","key":"1ls9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const taskList = document.getElementById('taskList');","type":"blockquote","key":"b22uf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const li = document.createElement('li');","type":"blockquote","key":"c3v7e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" li.textContent = taskText;","type":"blockquote","key":"8nrah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const deleteButton = document.createElement('button');","type":"blockquote","key":"36ahi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" deleteButton.textContent = 'Удалить';","type":"blockquote","key":"5d983"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" deleteButton.addEventListener('click', function() {","type":"blockquote","key":"17ac8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" taskList.removeChild(li);","type":"blockquote","key":"8fao3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" });","type":"blockquote","key":"akgei"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" li.appendChild(deleteButton);","type":"blockquote","key":"dulgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" taskList.appendChild(li);","type":"blockquote","key":"7j7nk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" taskInput.value = ''; // Очистка поля ввода","type":"blockquote","key":"9166e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" } else {","type":"blockquote","key":"dnugm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" alert('Пожалуйста, введите задачу.');","type":"blockquote","key":"1v3r0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"5eb61"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"blockquote","key":"ambf7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тестирование приложения","type":"header-two","key":"72m71"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте файл index.html в своем веб-браузере.","type":"unstyled","key":"b2tai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Введите текст задачи в поле ввода и нажмите кнопку \"Добавить задачу\".","type":"unstyled","key":"ah824"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Убедитесь, что задача добавилась в список, и что вы можете удалить её, нажав кнопку \"Удалить\".","type":"unstyled","key":"cbtgd"},{"data":{"image":{"id":"67686320d9d3e623e710a6ea"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Готовое приложение","type":"atomic:image","key":"1g42"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поздравляю! Вы только что создали простое веб-приложение для управления задачами, используя HTML, CSS и JavaScript. Вы можете добавлять новые функции, такие как сохранение задач в локальном хранилище, добавление сроков выполнения и многое другое. ","type":"header-three","key":"3lln9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всем пока!","type":"header-two","key":"tnoq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Метки:","type":"unstyled","key":"5vbc6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#веб-разработка #программирование #html #css #javascript #js #htmlcss #программа ","type":"unstyled","key":"bs2g3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dls6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"XtyJiJwMWVHI3jXPACLc"}],"entityMap":{}},"mentions":[]}