API tools faq
paste
horozov86

Eco Events

horozov86
Apr 8th, 2025
98
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 8.62 KB | None | 0 0
raw download clone embed print report
  1. window.addEventListener("load", solve); // Изчаква зареждането на целия документ, преди да извика функцията solve
  2.  
  3. function solve() {
  4.   // Вземане на елементите от формата
  5.   let formElement = document.querySelector("form");  // Взема формата от документа
  6.   let taskTitleInput = document.getElementById("email");  // Взема input полето за имейл (това ще бъде title)
  7.   let taskCategoryInput = document.getElementById("event");  // Взема input полето за събитие (категория)
  8.   let taskContentInput = document.getElementById("location");  // Взема input полето за местоположение
  9.  
  10.   // Вземане на бутона за публикуване на събитието
  11.   let publishBtn = document.getElementById("next-btn");  // Взема бутона за публикуване
  12.   publishBtn.addEventListener("click", publish);  // Добавя слушател за събитие на бутона, който ще извика функцията publish при клик
  13.  
  14.   // Основната функция, която ще се изпълни при натискане на бутона "Next"
  15.   function publish() {
  16.     // Проверка дали полетата не са празни
  17.     if (
  18.       taskTitleInput.value == "" ||
  19.       taskCategoryInput.value == "" ||
  20.       taskContentInput.value == ""
  21.     ) {
  22.       return;  // Ако някое поле е празно, спираме изпълнението на функцията
  23.     }
  24.  
  25.     // Вземане на списъците за предварителни и публикувани събития
  26.     let reviewList = document.getElementById("preview-list");  // Списък за предварителни събития
  27.     let publishedList = document.getElementById("event-list");  // Списък за публикувани събития
  28.  
  29.     // Създаване на нов елемент <li> за събитието
  30.     let taskLiElement = document.createElement("li");  // Създаваме нов <li> елемент
  31.     taskLiElement.classList.add("application");  // Добавяме клас "application" към него
  32.  
  33.     // Създаване на <article> елемент за събитието
  34.     let taskArticleElement = document.createElement("article");  // Създаваме нов <article> елемент
  35.  
  36.     // Създаване на заглавие <h4> с имейл
  37.     let titleHeadingElement = document.createElement("h4");  // Създаваме нов <h4> елемент за заглавието
  38.     titleHeadingElement.textContent = taskTitleInput.value;  // Задаваме текст за заглавието от полето "email"
  39.     let taskTitle = taskTitleInput.value;  // Записваме стойността на имейл за по-късно (за редактиране)
  40.  
  41.     // Създаване на параграф <p> за категория (събитие)
  42.     let categoryPElement = document.createElement("p");  // Създаваме нов <p> елемент
  43.     categoryPElement.innerHTML = `<strong>Event:</strong><br>${taskCategoryInput.value}`;  // Добавяме стойността на "event" в него
  44.     let taskCategory = taskCategoryInput.value;  // Записваме стойността на събитие за по-късно (за редактиране)
  45.  
  46.     // Създаване на параграф <p> за местоположение
  47.     let contentPElement = document.createElement("p");  // Създаваме нов <p> елемент
  48.     contentPElement.innerHTML = `<strong>Location:</strong><br>${taskContentInput.value}`;  // Добавяме стойността на "location" в него
  49.     let taskContent = taskContentInput.value;  // Записваме стойността на местоположение за по-късно (за редактиране)
  50.  
  51.     // Добавяме всички създадени елементи в <article>
  52.     taskArticleElement.appendChild(titleHeadingElement);  // Добавяме заглавието в <article>
  53.     taskArticleElement.appendChild(categoryPElement);  // Добавяме категорията (събитие) в <article>
  54.     taskArticleElement.appendChild(contentPElement);  // Добавяме местоположението в <article>
  55.  
  56.     // Създаване на бутон за редактиране
  57.     let editBtn = document.createElement("button");  // Създаваме бутон за редактиране
  58.     editBtn.classList.add("action-btn");  // Добавяме клас "action-btn"
  59.     editBtn.classList.add("edit");  // Добавяме допълнителен клас "edit"
  60.     editBtn.textContent = "edit";  // Задаваме текста на бутона "edit"
  61.     editBtn.addEventListener("click", edit);  // Добавяме слушател за събитие при клик, който извиква функцията edit
  62.  
  63.     // Създаване на бутон за публикуване
  64.     let postBtn = document.createElement("button");  // Създаваме бутон за публикуване
  65.     postBtn.classList.add("action-btn");  // Добавяме клас "action-btn"
  66.     postBtn.classList.add("apply");  // Добавяме допълнителен клас "apply"
  67.     postBtn.textContent = "apply";  // Задаваме текста на бутона "apply"
  68.     postBtn.addEventListener("click", post);  // Добавяме слушател за събитие при клик, който извиква функцията post
  69.  
  70.     // Добавяме всички елементи в <li>
  71.     taskLiElement.appendChild(taskArticleElement);  // Добавяме <article> в <li>
  72.     taskLiElement.appendChild(editBtn);  // Добавяме бутона за редактиране в <li>
  73.     taskLiElement.appendChild(postBtn);  // Добавяме бутона за публикуване в <li>
  74.  
  75.     // Добавяме новия <li> елемент в списъка за преглед
  76.     reviewList.appendChild(taskLiElement);  // Добавяме <li> в списъка с предварителни събития
  77.  
  78.     // Изчистваме формата
  79.     formElement.reset();  // Изчистваме стойностите във формата
  80.  
  81.     // Деактивираме бутона "Next"
  82.     publishBtn.disabled = true;  // Бутонът "Next" е деактивиран, докато не се добави ново събитие
  83.  
  84.     // Функция за редактиране на събитието
  85.     function edit() {
  86.       // Поставяме стойностите на събитието в input полетата за редактиране
  87.       taskTitleInput.value = taskTitle;  // Връщаме имейла в полето
  88.       taskCategoryInput.value = taskCategory;  // Връщаме събитието в полето
  89.       taskContentInput.value = taskContent;  // Връщаме местоположението в полето
  90.  
  91.       // Премахваме събитието от списъка за преглед
  92.       reviewList.removeChild(taskLiElement);  // Премахваме <li> от списъка за преглед
  93.  
  94.       // Активираме бутона "Next" отново
  95.       publishBtn.disabled = false;  // Активираме бутона за добавяне на ново събитие
  96.     }
  97.  
  98.     // Функция за публикуване на събитието в списъка с одобрени
  99.     function post() {
  100.       // Премахваме събитието от списъка за преглед
  101.       reviewList.removeChild(taskLiElement);  // Премахваме <li> от списъка за преглед
  102.  
  103.       // Премахваме бутоните "edit" и "apply"
  104.       taskLiElement.removeChild(postBtn);  // Премахваме бутона за публикуване
  105.       taskLiElement.removeChild(editBtn);  // Премахваме бутона за редактиране
  106.  
  107.       // Добавяме събитието в списъка с одобрени събития
  108.       publishedList.appendChild(taskLiElement);  // Добавяме събитието в списъка с одобрени събития
  109.  
  110.       // Активираме бутона "Next" отново
  111.       publishBtn.disabled = false;  // Бутонът "Next" е активиран, за да може да се добавят нови събития
  112.     }
  113.   }
  114. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!