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() и длины массива строк таблицы.
- В качестве лота выбирается пользователь по случайно сгенерированному индексу победитель.
- Данные победителя (имя и сумма взноса) извлекаются из таблицы.