Введение. В Эфиопии концепция «экуб» долгое время была традиционным способом экономии денег и укрепления чувства общности. Практика предполагает, что группа лиц периодически вносит определенную сумму денег и по очереди получает объединенные средства. Чтобы перенести эту традиционную практику в эпоху цифровых технологий, мы разработали веб-приложение Ekub с использованием HTML, CSS и JavaScript. В этой статье мы познакомим вас с кодом и объясним функциональность каждого компонента.
Структура HTML. Структура HTML начинается с необходимых метатегов и включения внешних библиотек CSS и JavaScript. Заголовок страницы установлен на «Eqube», а в качестве значка добавлен собственный логотип. Основной макет состоит из панели навигации, за которой следуют два столбца. Левый столбец содержит форму для ввода информации пользователями, а правый столбец отображает список участников и возможность определить победителя. Также есть дополнительные разделы для отображения имени победителя и общей суммы собранных денег.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<span class="navbar-text">Ekub(እቁብ)</span>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-6 mt-3">
<div class="card border-0 shadow-lg pb-3 rounded-3" id="card1">
<div class="card-title">
<h4 class="text-center mt-3">Ekub Form (የእቁብ ፎርም)</h4>
</div>
<div class="card-body">
<p class="fw-bold">Enter Your Information Carefully!</p>
<form>
<label for="fname" id="fnamelabel" class="text-danger" style="visibility: hidden">* Please enter your name</label>
<input type="text" class="form-control" placeholder="Name" name="" id="fname" />
<label for="pnumber" id="pnumberlabel" class="text-danger" style="visibility: hidden">* Please enter your phone number</label>
<input type="tel" class="form-control" placeholder="Phone Number" name="" id="pnumber" />
<label for="moneyOption" id="moneyOptionlabel" class="text-danger" style="visibility: hidden">* Please select an option</label>
<select class="form-select" id="moneyOption">
<option selected value="0">Select Option</option>
<option value="100">100</option>
<option value="500">500</option>
<option value="1000">1000</option>
</select>
<button type="button" class="btn btn-dark mt-4" onclick="validation()">Pay</button>
</form>
</div>
</div>
</div>
<div class="col-md-6 mt-3">
<div class="card border-0 shadow-lg m-0 p-0 rounded-3">
<div class="card-title">
<h4 class="text-center mt-3">Ekubtegna(እቁብተኛ)</h4>
</div>
<div class="card-body mb-0">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Phone Number</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody id="printForm"></tbody>
</table>
</div>
</div>
<div class="card-footer">
<div class="d-grid gap-2">
<button class="btn btn-success" id="generate">Generate Winner</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-12">
<div class="card border-0 shadow-lg pb-3 rounded-3">
<div class="card-title">
<h4 class="text-center mt-3">Ekub Winner(እቁብ አሸናፊ)</h4>
</div>
<div class="card-body">
<div id="printWin" class="text-center"></div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-12">
<div class="card border-0 shadow-lg pb-3 rounded-3">
<div class="card-body">
<h4 class="text-center mt-3">Total Amount:</h4>
<h1 class="text-center mt-3" id="totalMoney">0</h1>
</div>
</div>
</div>
</div>
</div>
Стили с помощью CSS. Чтобы улучшить визуальную привлекательность веб-приложения, мы применили несколько пользовательских стилей CSS. Цвет фона тела установлен в темный оттенок, создавая визуально привлекательный контраст с содержимым. Разделу «card1», содержащему форму, присваивается характерный зелено-желтый цвет фона, что делает его визуально отличным от других разделов.
<style>
body {
background-color: #03000f;
}
#card1 {
background-color: greenyellow;
}
</style>
Проверка формы и сбор данных. Код JavaScript обрабатывает проверку формы и сбор пользовательских данных. Когда пользователь отправляет форму, срабатывает функция проверки. Он проверяет, правильно ли заполнены все обязательные поля, такие как имя, номер телефона и выбранная опция. Если какое-либо поле отсутствует или неверно, рядом с соответствующим полем ввода отображается метка ошибки. После проверки формы информация о пользователе сохраняется в массивах вместе с соответствующей внесенной суммой. Общая сумма также обновляется с каждым представлением.
Сгенерировать победителя. При нажатии кнопки «Создать победителя» из собранных данных выбирается случайный участник. Имя победителя отображается в специально отведенном разделе вместе с поздравительным сообщением. Эта функция добавляет элемент волнения и предвкушения к опыту Ekub, даже в онлайн-сфере.
Отображение информации об участнике. Когда участники отправляют свою информацию, она динамически отображается в таблице в правом столбце веб-приложения. Каждая строка таблицы представляет участника с указанием его имени, номера телефона и внесенной суммы. Это отображение информации об участниках в режиме реального времени способствует прозрачности и информирует всех о текущем Ekub.
<script>
var globalFname = [];
var globalPhone = [];
var globalAmount = [];
var index = 0;
var total = 0;
function validation() {
var fname = document.getElementById("fname");
var phonoNumber = document.getElementById("pnumber");
var amount = document.getElementById("moneyOption");
var fnameLabel = document.getElementById("fnamelabel");
var phonoNumberLabel = document.getElementById("pnumberlabel");
var amountLabel = document.getElementById("moneyOptionlabel");
// Reset error labels
fnameLabel.style.visibility = "hidden";
phonoNumberLabel.style.visibility = "hidden";
amountLabel.style.visibility = "hidden";
if (fname.value.trim() === "" && phonoNumber.value.trim() === "" && amount.value === "0") {
fnameLabel.style.visibility = "visible";
phonoNumberLabel.style.visibility = "visible";
amountLabel.style.visibility = "visible";
} else if (fname.value.trim() === "") {
fnameLabel.style.visibility = "visible";
} else if (phonoNumber.value.trim() === "") {
phonoNumberLabel.style.visibility = "visible";
} else if (amount.value === "0") {
amountLabel.style.visibility = "visible";
} else {
globalFname[index] = fname.value;
globalPhone[index] = phonoNumber.value;
globalAmount[index] = parseInt(amount.value);
total += globalAmount[index];
var formRow = document.createElement("tr");
formRow.innerHTML =
"<td class='border'>" +
globalFname[index] +
"</td>" +
"<td class='border'>" +
globalPhone[index] +
"</td>" +
"<td class='border'>" +
globalAmount[index] +
"</td>";
document.getElementById("printForm").appendChild(formRow);
fname.value = "";
phonoNumber.value = "";
amount.value = "0";
index++;
}
}
document.getElementById("generate").addEventListener("click", function () {
var randomIndex = Math.floor(Math.random() * index);
var winner = globalFname[randomIndex];
document.getElementById("printWin").innerHTML =
"<h4>Congratulations to the winner:</h4><h3>" + winner + "</h3>";
var totalMoney = document.getElementById("totalMoney");
totalMoney.innerHTML = total;
});
</script>
Вывод. Разработанное нами веб-приложение Ekub предоставляет цифровую платформу, позволяющую отдельным лицам участвовать в онлайн-сберегательной группе. Используя HTML, CSS и JavaScript, мы создали удобный интерфейс, облегчающий отправку форм, проверку, создание победителей и отображение информации об участниках. Это веб-приложение сохраняет суть традиционной практики Ekub, сочетая удобство и эффективность цифрового мира.
Смело смотрите мой код: https://bereket0.github.io/ekub/
