Harmony Harvest (Equib) — это веб-сайт, созданный для повышения благосостояния сообщества, черпая вдохновение в традиционной эфиопской культуре и преодолевая разрыв между традиционными и современными обычаями. Он предоставляет пользователям платформу, на которой они могут присоединиться и внести свой вклад в общественную инициативу по созданию благосостояния, в то же время включив элементы богатого культурного наследия Эфиопии.
Регистрация пользователей и взносы
Как пользователь Harmony Harvest (Equib), вы можете ввести свою личную информацию, такую как ваше имя, контактные данные и финансовая информация. После регистрации вы можете внести свой вклад в инициативу по созданию благосостояния. Эти взносы могут быть в форме денежных вложений, обмена ресурсами или знаниями или любыми другими способами, определяемыми сообществом.
Harmony Harvest (Equib) придерживается духа инклюзивности и справедливости, выбирая победителя из числа участников случайным образом через определенный промежуток времени. Этот процесс случайного отбора добавляет элемент волнения и обеспечивает равные возможности для всех участников. Он поощряет активное участие и мотивирует пользователей продолжать вносить свой вклад в достижение целей сообщества по созданию благосостояния.
Культурная интеграция
Harmony Harvest (Equib) признает и уважает традиционные ценности и обычаи Эфиопии, сочетая их с современными подходами к созданию богатства и сотрудничеству. Веб-сайт способствует развитию чувства общности, поощряет коллективные усилия и поддерживает принципы гармонии и изобилия, присущие эфиопской культуре.
Как работает система
Зависимость
Этот проект имеет следующие зависимости:
- Bootstrap CSS v5.2.1
- Шрифт потрясающий
Эти зависимости включаются через CDN (сети доставки контента) в файл HTML.
Если вам интересно посмотреть дизайн веб-страницы регистрации, вы можете посетить yosami14.github.io/Harmony-Harvest/, чтобы просмотреть ее.
1.Пользователь заполняет поля формы:
– Код JavaScript использует метод getElementById для доступа к полям ввода в HTML-форме и извлекает значения, введенные пользователем.
– Значения хранятся в переменных: firstName, FathersName, email, phoneNumber, IntroductionAmount и gender. .
— эти переменные будут использоваться для создания пользовательского объекта, представляющего данные, введенные пользователем.
let firstName = document.getElementById("firstNameInput").value; let fathersName = document.getElementById("fatherNameInput").value; let email = document.getElementById("userEmailInput").value; let phoneNumber = document.getElementById("userPhoneNumberInput").value; let contributionAmount = document.getElementById("userContributionInput").value; let gender = document.querySelector('input[name="userGender"]:checked').value; userObject[countOfUsers] = { firstName: firstName, fathersName: fathersName, gender: gender, email: email, phoneNumber: phoneNumber, contributionAmount: contributionAmount, date: formattedDate };
2. Пользователь нажимает кнопку «Отправить»:
- Прослушиватель событий прикрепляется к кнопке "отправить" с помощью метода addEventListener.
- Прослушиватель событий срабатывает при нажатии кнопки.
- Функция collectData вызывается при срабатывании события.
document.getElementById("collectDataBtn").addEventListener("click", collectData); function collectData() { // Code body }
3. Выполняется функция collectData:
– Функция collectData отвечает за сбор данных, введенных пользователем, и их обработку.
– Она извлекает значения, введенные пользователем, из полей ввода, используя соответствующие атрибуты идентификатора.
– Значения сохраняются. в переменных: имя, имя отца, электронная почта, номер телефона, сумма вклада и пол.
— Затем функция создает новый объект пользователя и присваивает полученные значения его свойствам.
— Объект пользователя сохраняется в переменная пользовательского объекта.
4. Данные пользователя добавляются в таблицу:
– Пользовательские данные добавляются в таблицу HTML путем манипулирования DOM (объектной моделью документа) таблицы.
– Функция addUserToTable вызывается для добавления пользовательских данных в таблицу.
– Сначала функция создает новая строка таблицы (‹tr›) и элементы данных таблицы (‹td›).
— пользовательские данные вставляются в элементы данных таблицы с помощью свойства textContent.
— элементы данных таблицы добавляются к строка таблицы.
— Затем строка таблицы добавляется к элементу ‹tbody› таблицы.
// Row data print let lastObject = userObject[countOfUsers - 1]; for (let property in lastObject) { if (lastObject.hasOwnProperty(property)) { var createRowData = document.createElement('td'); createRowData.textContent = lastObject[property]; createRow.appendChild(createRowData); } } // Append the row to the table addUserRow.appendChild(createRow); // append the row to the table addUserRow.appendChild(createRow);
5. Пользовательские данные отображаются в таблице:
- Пользовательские данные отображаются в таблице HTML, которая изначально пуста.
- При вызове функции addUserToTable она добавляет пользовательские данные в таблицу.
- Функция создает новую строку таблицы и добавляет его к элементу ‹tbody› таблицы.
— Строка таблицы содержит элементы данных таблицы, которые отображают данные пользователя в отдельных столбцах.
— Свойство textContent используется для установки содержимого каждого элемента данных таблицы. .
<tbody class="" id="addUserRow"> <! - User data will be added dynamically here → </tbody>
6. Общий вклад рассчитывается и отображается:
– Функция calculateTotalContribution вычисляет общую сумму пожертвований всех пользователей.
– Она перебирает строки таблицы и извлекает сумму пожертвований из каждой строки.
– Суммы пожертвований преобразуются в числа с помощью функции parseFloat и складываются вместе.
- Общая сумма вклада хранится в переменной totalContribution.
- Общий вклад отображается в таблице путем установки textContent соответствующего элемента данных таблицы.
// Update total contribution totalContribution += parseInt(contributionAmount); // Update total contribution display let totalContributionElement = document.getElementById("displayTotal"); totalContributionElement.textContent = `Total: ${totalContribution}`;
7. Генерируется победитель лота и отображается в модальном окне:
- Функция победителя вызывается при нажатии кнопки "сгенерировать".
- Функция выбирает случайного пользователя из таблицы для определения победителя лота.
- Извлекает строки таблицы с помощью метода querySelectorAll и сохраняет их в массив.
- Генерируется случайный индекс с использованием функции Math.random() и длины массива строк таблицы.
- В качестве лота выбирается пользователь по случайно сгенерированному индексу победитель.
- Данные победителя (имя и сумма взноса) извлекаются из таблицы.