Необходимо написать чеклист (ToDo) приложение на Vue.js
Необходимые функции для работы со списками:
===========================
1. Возможность задавать массив предопределенных значений списка как основную переменную. Приложение app.js должно быть отдельно, а переменная в HTML коде страницы.
Например что-то в духе:
$list = [
'овощи' => [
'картофель', 'томаты', '...', 'лук'
]
'фрукты' => [
'апельсин', 'яблоки', '...', 'бананы'
]
]
2. <input> добавления элемента в существующий список пользователем.
3. Кнопка редактирования элементов
4. Кнопка удаления элемента из списка.
5. Кнопка сброса к значениям по умолчанию для всех списков, которые берутся из массива в пункте 1. При нажатии должно быть все как и было по умолчанию до визита посетителя на страницу приложения.
Требования и уточнения
============================
1. Хранение данных в LocalStorage;
2. Должно работать в современных браузерах на iOS, Safari, Chrome, Firefox;
3. HTML/CSS - Bootstrap 5;
4. Пользователь может добавлять элементы в существующие списки, но не может создавать свой список;
5. При удалении пользователем всех элементов из конкретного списка (например «Овощи»), блок списка скрывается ( <div id="todo-1" class="todo-block" style="display: none"> ) и остается только список «Фрукты».
Пример кода страницы (что-то в духе что хочу видеть)
============================
<body>
<СКРИПТ>
$list = [...]
</СКРИПТ>
<div id="app" class="todo-app"></div>
<СКРИПТ src="app._j_s"></СКРИПТ>
</body>
Пример структуры (как видит посетитель)
============================
<div id="todo-1" class="todo-block">
<h2>Овощи</h2>
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Картофель [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Томаты [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Капуста [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Морковь [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
ПОЛЬЗОВАТЕЛЬСКАЯ ПЕРЕМЕННАЯ 1 [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
ПОЛЬЗОВАТЕЛЬСКАЯ ПЕРЕМЕННАЯ 2 [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
</label>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Введите новый элемент списка" aria-label="Введите новый элемент списка">
<button class="btn btn-outline-secondary" type="button">Добавить</button>
</div>
</div>
<div id="todo-2" class="todo-block">
<h2>Фрукты</h2>
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Апельсины [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Яблоки [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Ананасы [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Бананы [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
ПОЛЬЗОВАТЕЛЬСКАЯ ПЕРЕМЕННАЯ 1 [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
ПОЛЬЗОВАТЕЛЬСКАЯ ПЕРЕМЕННАЯ 2 [РЕДАКТИРОВАТЬ] [УДАЛИТЬ]
</label>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Введите новый элемент списка" aria-label="Введите новый элемент списка">
<button class="btn btn-outline-secondary" type="button">Добавить</button>
</div>
</div>Остальное во вложении.
Можно доработать существующий пример https://github.com/BurakGur/vue3-composition-api-todo-app
Budget: 200 UAH Deadline: 1 day
Добрый день Константин!
Готов выполнить задание
Опыт в веб разработке более 4 лет.
Сделаю качественно, быстро и недорого.
С уважением, Нарек
Какой бюджет и сроки?
10 October 2021
Сроки... Ну недели 2 есть. Бюджет - обсуждаем.
The website is already launched and operational. The main task is to understand the current project structure, check the quality of implementation, fix identified technical issues, and assist with further changes.Main Stack Next.js 15 React 19 TypeScript Tailwind CSS Zod Redux Toolkit The project may also use: Prisma JWT authorization Stripe Mailgun Google APIs Vercel or Netlify FunctionsMain Tasks conduct an audit of the existing project; evaluate the structure and quality of the code; fix bugs and enhance current functionality; improve server-side rendering and page load speed; check the correctness of the website display on mobile devices; work with forms, the administrative part, and external integrations; make technical SEO changes; maintain and gradually improve the existing website.What is Important to Us good experience with Next.js, React, and TypeScript; ability to understand someone else's code; understanding of SSR and the features of Next.js App Router; attention to performance and quality of implementation; ability to explain identified problems and propose clear solutions; independence and careful work with the existing website. At the first stage, it is necessary to familiarize yourself with the project, conduct a technical audit, and propose a list of priority changes. After that, ongoing work on the further development of the website is possible.
It is necessary to develop an online booking form for a beauty salon and integrate it into the existing website (landing page). The site is in the development stage (in HTML, CSS, JS). The site does not have its own database (and none is planned), so it is necessary to propose a free solution for storing and managing data that will be easy to administer and stable in operation. Required functionality: loading the list of service categories; loading services according to the selected category; loading the list of masters who perform the selected service; displaying available dates and free times according to the master's work schedule; creating a booking with automatic blocking of the selected time; protection against double booking. Data in the form: name; phone number; service category; service; master; date; time; comment (optional). Administration: There should be the ability to: add and edit service categories; add and edit services; add and edit masters; set the work schedule for each master; manage days off, vacations, and other periods of unavailability; view, edit, and cancel client bookings. Please specify: what solution you propose for data storage; estimated cost; completion time. Design is not important, the main thing is functionality. The person who does the site layout will design it in the required style.
I have some logic in Google Excel related to the integration with the Nova Poshta API and the Turbosms API. Overall, everything works fine, but some functionality needs to be added. All details will be discussed in correspondence. I will provide access to the Excel and the code. It is essential for the performer to have experience working with Google Excel JS in Apps Script.
Hello everyone, we need to create a website for event creation and ticket sales. Possible options include using a ready-made template, a framework, or your own solution. It is preferable that you have experience in developing websites for ticket sales. We will send examples of websites in private messages. If necessary, we will create a prototype. If you have previously worked on similar websites, please send examples in private messages. We will discuss the details in private messages. Thank you and have a great day!
The site is built on the Next.js framework (based on React). All points in the technical specification need to be completed. The technical specification is attached in the file. I look forward to your proposals.