Just dipping my toes into the world of Javascript. I'd appreciate any help you can offer as I dive into creating a Lotte web game.
- Step one: Determine the number of participants
- Step two: Choose a number
The objective is to:
Select the number of participants from the table below and then choose the corresponding number in the [select option box]. For example, if there are 5 participants, select number 5. Upon clicking the submit button, random players will be displayed with their names and numbers.
Example: David-1, Jane-5, July-3, Michale-2, John-4
'use strict';
function initiate() {
const members = document.querySelectorAll('input[type="checkbox"]:checked');
const hitNum = +document.querySelector('select[name="hit"]').value;
const missNum = +document.querySelector('select[name="miss"]').value;
if (members.length > hitNum + missNum) {
alert("Not enough lottery tickets.");
return;
}
const lotArr = ('1'.repeat(hitNum) + '0'.repeat(missNum)).split('');
const result = [
[],
[]
];
for (const e of members) {
const rnd = Math.floor(Math.random() * lotArr.length);
const pickup = lotArr.splice(rnd, 1)[0];
result[pickup].push(e.value);
}
document.querySelector('#result h3:first-child').textContent = 'Winners：' + result[1].join();
}.wrapper {
margin: 50px 10%;
text-align: left;
}
body {
background: #6B92B9;
}
.area {
width: 80%;
margin: 0 auto;
}
table {
width: 100%;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 15px;
text-align: left;
}
#t01 tr:nth-child(even) {
background-color: #eee;
}
#t01 tr:nth-child(odd) {
background-color: #fff;
}
#t01 th {
background-color: #6c79e0;
color: white;
}
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
margin-left: 250px;
}
#member {
margin: 5px auto 20px;
}
#member label {
display: inline-block;
}
#lottery-numbers {
margin: 0 auto 20px;
}
.button {
border-bottom: solid 1px #000;
padding: 0 0 20px;
margin: 0 auto 50px
}
#result h3 {
font-size: 18px;
font-weight: bold;
color: white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="area">
<div id="member">
<h2>Let's select the participants!：</h2>
<div id="lottery-numbers">
<h2>Number of lottery tickets：</h2>
Winners：
<select name="hit">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
</select>
Tickets：
<select name="miss">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
</select><br>
</div>
<div class="button" style="text-align: center;">
<input type="button" value="Start Lottery" onclick="initiate();">
</div>
<div id="result">
<h3>Winners：</h3>
</div>
</div>
<table id="t01">
<tr>
<th>Sales Division</th>
<th>Marketing</th>
<th>Administration</th>
<th colspan="2" style="text-align: center;">Production Division</th>
<th>PART</th>
</tr>
<tr>
<td><label><input type="checkbox" value="A" checked/>A</label></td>
<td><label><input type="checkbox" value="B" checked/>B</label></td>
<td><label><input type="checkbox" value="C" checked/>C</label></td>
<td><label><input type="checkbox" value="D" checked/>D</label></td>
<td><label><input type="checkbox" value="E" checked/>E</label></td>
<td><label><input type="checkbox" value="F" checked/>F</label></td>
</tr>>
<!-- More rows of checkboxes go here -->
</table>
</div>
</div>