Поэтому моим следующим проектом было сделать приложение, которое могло бы ранжировать разные продукты по порядку. С возможностью размещать разные продукты выше или ниже других. Для начала мне нужен веб-сайт со списком из 10 различных продуктов, поставляемых с веб-сайта, а затем кнопки вверх и вниз, при нажатии которых они перемещают элемент списка вверх или вниз, чтобы изменить порядок продуктов.
Я быстро погуглил и просмотрел предыдущие проекты, которые я проходил с курсом Udemy в прошлом, чтобы понять, как это сделать и какие методы использовать.
Сначала я создал html-файл с 10 элементами списка с 10 различными продуктами питания и дал им всем кнопку «вверх» и кнопку «вниз». Кнопки вверх и вниз имели имена классов «вверх» и «вниз», чтобы помочь связать их с Javascript.
<ul> <li>Taco <button class='up btn btn-primary'>up</button> <button class='down'>down</button></li> <li>Curry <button class='up'>up</button> <button class='down'>down</button></li> <li>Roast Chicken <button class='up'>up</button> <button class='down'>down</button></li> <li>Lamb Chops <button class='up'>up</button> <button class='down'>down</button></li> <li>Burgers <button class='up'>up</button> <button class='down'>down</button></li> <li>Nachoes <button class='up'>up</button> <button class='down'>down</button></li> <li>Steak <button class='up'>up</button> <button class='down'>down</button></li> <li>Fish <button class='up'>up</button> <button class='down'>down</button></li> <li>Pizza <button class='up'>up</button> <button class='down'>down</button></li> <li>Corned Beef <button class='up'>up</button> <button class='down'>down</button></li> </ul>
Затем я написал Javascript, чтобы кнопки работали при нажатии. Вверху и внизу есть похожий javascript, но один помещает элемент перед родственным элементом, а другой - после.
Это было сделано путем перебора узлов с помощью цикла For и последующего добавления EventListener, когда пользователь нажимает кнопку. Оболочка переменной подключается к parentNode кнопки, которая в данном случае является элементом li, а затем запускается оператор if, чтобы предотвратить перемещение элемента из верхней части списка в нижнюю. Затем insertBefore используется для размещения parentNode (li) нажатой кнопки перед предыдущимElementSibling (элемент списка выше). Затем кнопка «вниз» такая же, но сначала ставится предыдущийElementSibling.
//link to the HTML class of up on all list items
var moveUp = document.querySelectorAll(".up");
for (var i = 0; i < moveUp.length; i++) {
//when clicked this function will run
moveUp[i].addEventListener('click', function(){
//create variable to link to parentNode
var wrapper = this.parentNode;
//run statement - if parentNode has a previous element then run the if statement of insert the parentNode
//that was clicked before the previousElement sibling
if (wrapper.previousElementSibling)
wrapper.parentNode.insertBefore(wrapper, wrapper.previousElementSibling)
};
//link to the HTML class of down on all list items
var moveDown = document.querySelectorAll(".down");
//loop through the list items
for (var i = 0; i < moveDown.length; i++) {
//when clicked this function will run
moveDown[i].addEventListener('click', function () {
//create variable to link to parentNode
var wrapper = this.parentNode;
//run statement - if parentNode has a previous element then run the if statement of insert the parentNode
//that was clicked before the nextElement sibling
if (wrapper.nextElementSibling)
wrapper.parentNode.insertBefore(wrapper.nextElementSibling, wrapper);
});
}
Затем я использовал Git, чтобы зафиксировать эту первую фиксацию проекта, и решил, что это ночь.
Мне удалось немного поработать над проектом в течение дня вместе с детьми, что само по себе было достижением.
