Скрипт для масового формування параметрів для GET запиту
Над кожним стовпом є трикутник, при натисканні на який відкривається спеціальна форма.HTTPS://i.postimg.cc/mr0RVrw2/1.jpg
Ця форма служить для введення значення.Після введення значення і натискання Apply filter до поточного посилання додається параметр для гет запиту.Як назву параметра служить ідентифікатор трикутника, на який ми натиснули
https://i.postimg.cc/d3mDCCGy/2.jpg
Як значення параметра буде той, який ви вводимо в поле, яке відкривається при натисканні на трикутник.Ми натиснули на трикутник з id home і тому назва параметра буде такою ж, тобто home.Допустимо, ми в полі (яке відкрилося після натискання на трикутник з id home) ввели значення Namos і натиснули на кнопку Apply filter
Таким чином, формується параметр home=Namsos і додається до нинішньої посилання і відкривається отримана посилання.HTTPS://currenturl.com/demo.html&home=Namsos
Якщо ми після цього натискаємо на трикутник під назвою Away і вводимо там значення для прикладу Tangmoen то сформується черговий параметр, де назва буде id трикутника, тобто away а його значення Tangmoen і отримується такий параметр away=Tangmoen.Цей параметр також додається до нинішньої посилання і відкривається отримана посилання https://currenturl.com/demo.html&home=Namsos&away=Tangmoen
І так далі для інших.Існують різні форми
Звичайна з інпутом https://i.postimg.cc/mr0RVrw2/1.jpg
З шаблонкою (select) https://i.postimg.cc/QxP82GJt/3.jpg
З чекбоксами https://i.postimg.cc/pdvHv2h2/4.jpg
Логіка роботи у всіх однакова.Різниця тільки в тому, що в інпут можна ввести будь-яке значення, а в інших тільки готові.Тепер перейдемо до того, як виключити ці параметри з нинішнього посилання.
Після введення значення і застосування його, фоновий колір клітини з трикутником стає червоним.Це візуально говорить нам про те, що в посилання є параметр з ідентифікаційною клітиною, у якого фоновий колір червоний.При натисканні ми бачимо, що значення, яке ви ввели, відображається в інпуті.Щоб скасувати цю операцію ми натискаємо на Delete filter
https://i.postimg.cc/02mtG7jN/5.jpg
Після цього скрипт виключає з поточного посилання параметр, який має назву таку ж, як і ID клітини, де стоїть трикутник і де ми натиснули на Delete filter з поточного посилання і відкриває отриману посилання.Тобто з посилання виключається параметр away=Tangmoen
Ці параметри можна виключити в ручному режимі окремо натискаючи Delete filter всюди, де ми ввели значення або ж можна за одним кліком видалити всі параметри за допомогою кнопки
Reset all filters https://i.postimg.cc/v8KjtQv0/6.jpg
Все, що вище описується логікою роботи скрипта.Тепер до сутності завдання
Завдання полягає в тому, щоб сформувати параметри масово, які будуть додані до поточної посилання і потім відкриваються.Що означає масово.Вище описана логіка як додаються параметри до посилання.Як описано, цей процес відбувається за послідовністю.Тобто спочатку ми натискаємо на певний трикутник, вводимо значення в яке після цього відкривається і натискаємо Apply filter і потім відкривається нова отримана посилання з цим параметром.Після того, як нова посилання відкрилася, натискаючи на інший трикутник, вводячи значення і натискаючи Apply filter і чекаючи, коли відкриється нова отримана посилання.І так далі процес продовжується за послідовністю.На це йде певний час.Тому що після кожного разу, коли ми вводимо значення, потрібно чекати завантаження сторінки.Завдання полягає в тому, щоб сформувати всі ці параметри, додати їх в поточну посилання і відкрити отриману посилання за один раз.Тепер питання, де ввести, де зберігати всі ці значення, щоб скрипт міг взяти всі ці значення і сформувати нову посилання з параметрами і відкрити її.
Давайте подивимося на це відео.
https://drive.google.com/file/d/1EtsCR3nePlFKayjglpREJHNjRfhzykIE/view?usp=drive_link
Як бачимо, якщо вводить значення, але не натисніть Apply filter то дані значення зберігаються у формах, куди ми їх ввели.Вони зберігаються в DOM-дріві сторінки, поки сесія активна.Тож якщо перезавантажити, то вони зникають.Таким чином, скрипт може взяти значення з форм і за допомогою їх ID сформувати параметри, додати їх до поточної посилання і відкрити цю посилання.Дозвольмо ми натискаємо на трикутник під Away і вводимо туди Tangmoen.Не натисніть на Apply filer.Після натискання на трикутник під Home і вводимо туди Namsos тут теж не натискаємо на Apply filer
Тож у нас є дві форми, до яких ми ввели значення, але не застосували.Тепер вони зберігаються в DOM-треві сторінки
Потрібно зробити окремий кнопку як Reset all filters .Завантажити Apply all filters
Натискаю на Apply all filters, скрипт параситує всі форми, отримує список всіх форм, де значення не порожнє, формує параметри (назва це id а значення це те, що ми ввели в форму) , додає їх до поточної посилання і відкриває отриману посилання.Таким чином, ми одночасно сформували більше одного параметра і заощадили багато часу.Якщо подивимося на назву класу всіх трикутників, то побачимо, що вони однакові.
https://i.postimg.cc/FHbSg5qY/7.jpg
Скрипт повинен підтримувати парсінг з усіх видів форм (інпут, чекбокс, селект)
Найважливіше він не повинен суперечити з іншими скриптами, які вже присутні в коді.Прикріплення архіву, де HTML-файл з скриптами
Додатки 1
Відгук замовника про співпрацю з Олегом Патрушевим
Скрипт для масового формування параметрів для GET запитуВідмінний виконавчий. Зробив все якісно і швидко.
Відгук фрилансера про співпрацю з Иваном Паченком
Скрипт для масового формування параметрів для GET запитуВідмінний замовник. Я рекомендую .
-
612 21 0 Вітаємо Вас! Я можу виконати Вашу роботу. Я можу почати зараз.
-
1358 76 6 3 дуже гарно описане ТЗ, все зрозуміло, зроблю досить швидко і якісно
-
3698 111 3 5 Добрий день, Іван
Виконання необхідних функцій відповідно до ТЗ.
З повагою, Юрій
-
436 11 2 2 Добрий день .
Запрошуємо розглянути можливість співпраці.
З повагою Артем.
-
520 13 0 Добрий день . Я можу реалізувати цей скрипт на NodeJS. Будемо раді співпрацювати
Актуальні фриланс-проєкти в категорії Javascript та Typescript
Шукаю досвідченого Full Stack розробника для створення SaaS-сервісу для інтернет-магазинів.Ідея сервісу: Клієнт завантажує посилання на свій товарний фід (XML або CSV). Сервіс автоматично отримує товари, бере їхні фотографії та створює нові рекламні зображення за готовими шаблонами: ціна, знижка, логотип, акційні плашки тощо. Також у сервісі має бути простий редактор… Javascript та Typescript, Веб-програмування ∙ 16 годин 28 хвилин тому ∙ 68 ставок |
Розробка WebGL/Three.js сцени з генерацією та експортом 3D (снапшот) з анімованого шейдераОпис об'єкта:Проект являє собою дизайнерський стіл, виконаний у формі реалістичного, глибокого водовороту (центральна воронка, яка плавно переходить з широкої горизонтальної стільниці в тонку витончену ніжку). Суть задачі:Потрібен WebGL / Creative Coding розробник для створення… Javascript та Typescript, Веб-програмування ∙ 1 день 13 годин тому ∙ 27 ставок |
Підтримка та розвиток сайту клінінгової компанії
906 UAH
Шукаю веб-розробника / вебмайстра для довгострокової підтримки та розвитку сайту клінінгової компанії. Сайт: https://donely.ca Про проєкт DoneLy Home Services — компанія з надання послуг прибирання в Канаді, яка активно розвивається та розширює географію роботи. Шукаю… Javascript та Typescript, Веб-програмування ∙ 3 дні 14 годин тому ∙ 63 ставки |
Розробка сайту по ТЗ на FramerПотрібно зробити сайт по цим параметрам що в тз https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Називайте реальний рейт на основі цього дизайну HTML та CSS верстання, Javascript та Typescript ∙ 4 дні 15 годин тому ∙ 27 ставок |
Розробка інтерактивної карти Palworld для сайтуПотрібно розробити інтерактивну карту Palworld за прикладом: https://palworld.gg/map Нам потрібна не просто статична картинка, а повноцінна інтерактивна карта, де користувач може дивитися локації, вмикати / вимикати категорії об’єктів, шукати потрібні точки та взаємодіяти з… HTML та CSS верстання, Javascript та Typescript ∙ 6 днів 6 годин тому ∙ 36 ставок |