Update functions and variables to jQuery

This commit is contained in:
Oskar-Mikael
2021-01-27 13:24:55 +01:00
parent a947b25605
commit a106a7a79a

View File

@@ -1,47 +1,55 @@
let items = [] let items = []
let result = "" let result = ""
let input = document.querySelector("#input"); let input = $('#input');
input.addEventListener('keyup', function (event) {
if (event.keyCode === 13) {
event.preventDefault();
document.querySelector("#add").click();
}
$(function () {
$('form').on('submit', function(e) {
e.preventDefault();
}) })
document.querySelector("#add").addEventListener('click', addItem); })
document.querySelector("#submit").addEventListener('click', displayResult);
document.querySelector("#reset").addEventListener('click', reset); $(input).on('keypress', function(e) {
if(e.which == 13) {
addItem();
}
});
$('#add').on('click', function(){
addItem()
})
$('#reset').on('click', function(){
window.location.reload();
});
$('#submit').on('click', function(){
displayResult()
});
function addItem() { function addItem() {
if (input.value.length < 1) { if (input.val().length < 1) {
document.querySelector("#inputError").innerHTML = "Add an item please"; $('#inputError').html("Add an item please");
} else { } else {
items.push(document.querySelector("#input").value) items.push($(input).val());
let ul = document.querySelector("#itemlist"); let ul = $('#itemlist');
let li = document.createElement('li'); let li = document.createElement('li');
li.appendChild(document.createTextNode(input.value)); li.append($('#input').val());
ul.appendChild(li) ul.append(li)
document.querySelector("#input").style.border = "2px solid black"; $('#input').css('border', '1px solid black');
document.querySelector("#input").value = ''; $('#input').val('');
document.querySelector("#inputError").innerHTML = ""; $('#inputError').html("")
} }
} }
function displayResult() { function displayResult() {
if (items.length < 1) { if (items.length < 1) {
document.querySelector("#result").innerHTML = "Error: Add atleast 1 item" $('#result').html('Error: Add atleast 1 item')
document.querySelector("#input").style.border = "2px solid red" $('#input').css('border', '2px solid red');
} else { } else {
result = items[Math.floor(Math.random() * items.length)]; result = items[Math.floor(Math.random() * items.length)];
document.querySelector("#result").innerHTML = result $('#result').html(result)
} }
} }
function reset() {
window.location.reload();
}