Selecting number of items
This commit is contained in:
17
index.html
17
index.html
@@ -45,6 +45,23 @@
|
|||||||
</h2>
|
</h2>
|
||||||
<h3 id="result"></h3>
|
<h3 id="result"></h3>
|
||||||
<form>
|
<form>
|
||||||
|
<select id="selectNumber">
|
||||||
|
<option value="1">
|
||||||
|
Pick 1
|
||||||
|
</option>
|
||||||
|
<option value="2">
|
||||||
|
Pick 2
|
||||||
|
</option>
|
||||||
|
<option value="3">
|
||||||
|
Pick 3
|
||||||
|
</option>
|
||||||
|
<option value="4">
|
||||||
|
Pick 4
|
||||||
|
</option>
|
||||||
|
<option value="5">
|
||||||
|
Pick 5
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
<button type="submit" id="submit">Randomize</button>
|
<button type="submit" id="submit">Randomize</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
28
script.js
28
script.js
@@ -30,20 +30,18 @@ $(document).on('click', 'img.delete', function () {
|
|||||||
let deletedItem = $(this).closest('li')
|
let deletedItem = $(this).closest('li')
|
||||||
let itemValue = $(this).closest('li').text()
|
let itemValue = $(this).closest('li').text()
|
||||||
let index = items.indexOf(itemValue);
|
let index = items.indexOf(itemValue);
|
||||||
if(index != -1) {
|
if (index != -1) {
|
||||||
items.splice(index, 1);
|
items.splice(index, 1);
|
||||||
}
|
}
|
||||||
deletedItem.remove();
|
deletedItem.remove();
|
||||||
console.log(itemValue)
|
console.log(itemValue)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function addItem() {
|
function addItem() {
|
||||||
if (input.val().length < 1) {
|
if (input.val().length < 1) {
|
||||||
$('#inputError').html("Add an item please");
|
$('#inputError').html("Add an item please");
|
||||||
} else {
|
return
|
||||||
|
}
|
||||||
items.push($(input).val());
|
items.push($(input).val());
|
||||||
let ul = $('#itemlist');
|
let ul = $('#itemlist');
|
||||||
let li = document.createElement('li');
|
let li = document.createElement('li');
|
||||||
@@ -56,17 +54,25 @@ function addItem() {
|
|||||||
$(input).css('border', '1px solid black');
|
$(input).css('border', '1px solid black');
|
||||||
$(input).val('');
|
$(input).val('');
|
||||||
$('#inputError').html("")
|
$('#inputError').html("")
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function displayResult() {
|
function displayResult() {
|
||||||
if (items.length < 1) {
|
if (items.length < 1) {
|
||||||
$('#result').html('Error: Add atleast 1 item')
|
$('#result').html('Error: Add atleast 1 item')
|
||||||
$(input).css('border', '2px solid red');
|
$(input).css('border', '2px solid red');
|
||||||
} else {
|
return;
|
||||||
result = items[Math.floor(Math.random() * items.length)];
|
|
||||||
$('#result').html(result)
|
|
||||||
$('#result').hide().fadeIn(1000);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
let selectNumber = $('#selectNumber').val()
|
||||||
|
const shuffled = items.sort(() => 0.5 - Math.random());
|
||||||
|
result = shuffled.slice(0, selectNumber)
|
||||||
|
|
||||||
|
let resultText = '';
|
||||||
|
result.forEach(function (item) {
|
||||||
|
resultText += item + ', ';
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#result').html(resultText.slice(0, -2))
|
||||||
|
$('#result').hide().fadeIn(1000);
|
||||||
|
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user