Эфиопский EqubПроект с использованием HTML, CSS и JavaScript
У эфиопов сильная социальная культура, передающаяся из поколения в поколение. Большинство дел они делают вместе, и экономия — одна из них. Equb, можно сказать, что-то вроде клуба, состоящего из ограниченного числа людей, членов (Equbtegna). Ожидается, что эти участники будут вносить постоянную сумму денег каждую неделю или пару недель. А собранные деньги отдаются победителю, которого случайным образом выбирают из участников. Многие эфиопы утверждают, что эта культура помогает им работать усерднее, поскольку в конце недели они должны оплатить свою долю Equb. Возвращаясь к нашей основной теме, эта статья написана, чтобы дать представление о процессе разработки веб-страницы, поддерживающей Equb. Веб-страница имеет интерфейс, который принимает имя пользователя и сумму денег, которую необходимо внести. Затем он добавляет добавленных пользователей в таблицу, и когда нажимается кнопка «Разыграть лоты», он случайным образом генерирует победителя среди добавленных участников вместе с суммой денег, которая будет передана вышеупомянутому победителю.
Веб-страница доступна как на амхарском, так и на английском языках.
HTML, CSS, JavaScript и Bootstrap 5 используются для разработки этой веб-страницы. HTML используется для определения макета. Форма используется для получения входных данных от пользователя, и создается таблица с одной строкой, к которой будут добавлены элементы.
Вот фрагмент кода из HTML:
<!-- Code for adding the form-->
<form id="nfor">
<div class="mb-3 mt-3">
<label for="exampleFormControlInput1" class="form-label">ሙሉ ስም</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="ሙሉ ስም" style="width: 400px">
</div>
<div class="mb-3 ml-5">
<label for="exampleFormControlTextarea1" class="form-label">የገንዘብ መጠን</label>
<input type="text" class="form-control" id="exampleFormControlTextarea1" placeholder="ገንዘብ" style="width: 400px">
</div>
<div>
<button type="button" id="btn" >አስገባ</button>
</div>
</form>
<!-- Code for adding the table-->
<table class="table table-bordered mt-3" border ="2px" id="tb">
<thead id="row1">
<th>
አባላት
</th>
<th>
ገንዘብ
</th>
</thead>
</table>
Две основные функции веб-страницы, а именно добавление новых участников и создание случайного победителя, выполняются с использованием JavaScript.
Добавление новых добавленных участников в таблицу
Метод, используемый для выполнения задачи, включает в себя реализацию массивов. Используются два отдельных массива: один для хранения пользователей, а другой для хранения денег, вставленных соответствующим пользователем. Затем создается событие при нажатии кнопки «Ввод» с использованием метода «addEventListener». В этом методе методы «insertRow» и «insertCell» используются для добавления новой строки и новых ячеек всякий раз, когда нажимается кнопка. Данные, вставленные в форму, сохраняются в соответствующих переменных с помощью метода «getElementById». Затем они помещаются в ранее созданные массивы с помощью метода «push». Наконец, в созданные ячейки таблицы помещаются недавно отправленные элементы массива, и форма сбрасывается для дополнительного набора данных.
Вот фрагмент кода для вышеуказанного метода:
// Create separate Arrays
const users = [];
const amounts = [];
// get the table(to append rows) and form(to reset)
let table = document.getElementById('tb');
let eForm = document.getElementById('nfor');
// Create an event
document.getElementById('btn').addEventListener('click', function() {
// Insert row, and two cells
let row = table.insertRow();
let nameCell = row.insertCell();
let emailCell = row.insertCell();
// Store the inserted data in their respective variables
let userd = document.getElementById('exampleFormControlInput1').value;
let userm = document.getElementById('exampleFormControlTextarea1').value;
// push the data into the arrays
users.push(userd);
amounts.push(userm);
for (let i=0;i<users.length;i++){
nameCell.textContent = users[i];
emailCell.textContent = amounts[i];
}
eForm.reset();
});
Создание случайного победителя
Чтобы выбрать случайного победителя из вставленных участников, применяется метод «Math.random». Поскольку этот метод возвращает случайные числа в диапазоне от 0 до 0,9999, были внесены некоторые коррективы. Пол произведения сгенерированного случайного числа (от 0 до 0,9999) и длины одного из массивов дает случайное число от 0 до любой длины массивов. Затем цикл for используется для сравнения индекса каждого зарегистрированного пользователя с сгенерированным числом, и пользователь, чей индекс совпадает с сгенерированным числом, сохраняется в переменной winner . Еще один цикл for используется для подсчета общей суммы собранных денег, которые будут вознаграждены победителю. Наконец, с помощью метода «createElement» создается заголовок, а его текстовое содержимое включает в себя имя победителя и общую сумму присуждения. Этот заголовок добавляется к пустому элементу div, уже созданному в HTML-документе.
Вот фрагмент кода для розыгрыша победителя и нахождения общей суммы
// generate random winner
document.getElementById('btn2').addEventListener('click', function() {
let winner = '';
let num = Math.floor(Math.random() * users.length);
for(let i=0; i< users.length; i++){
if(num == users.indexOf(users[i])){
winner = users[i];
}
}
// Find he total sum to be given to winner
let sum=0;
for(let i=0; i< amounts.length; i++){
sum = parseInt(sum) + parseInt(amounts[i]);
}
// Create a header and apped it to the div element
let h1_element = document.createElement('h1');
h1_element.textContent = "የዚ ሳምንት አሸናፊ፡ " + winner + " ነው፡፡ ገንዘቡም፡ " + sum + " ነው፡፡";
h1_element.style.fontSize='24px';
let parent_div = document.getElementById("generatee");
parent_div.appendChild(h1_element);
})
В заключение, Equb — одна из самых распространенных и полезных культур в Эфиопии. Это объединяет людей и мотивирует их финансово. Я надеюсь, что эта веб-страница имеет некоторую суть реальной практики и будет доработана мной или другими для поддержки существующей системы. Я также надеюсь, что эта статья смогла прояснить внутреннюю работу веб-страницы. Для тех, кто хочет оформить заказ, вот ссылка:
