Добър вечер на всички!
Бих искал да помоля, ако някой разбира условието на горепосочената задача, да ме светне какво точно се иска. Всички котки ли трябва да се показват на страницата? Или само да направим техните бутони да си работят коректно? Какъв Template искат да се направи? От условието поне аз почти нищо не разбрах.
Поздрави!
Условието на задачата е да изчистиш "body"-то на файла "cats.html" като направиш файл с темплейт за котките "cat-template.hbs", а в "body"-то да оставиш само пътя до "template.js". Така трябва да изглежда твоя темплейт: https://pastebin.com/a5yC25GQ
В "template.js" трябва да заредиш своя темплейт като използваш handlebars, т.е
(
let source = await $.get(`./cat-template.hbs`);
let compiled = Handlebars.compile(source);
let template = compiled({
cats: window.cats
});
$('body').append(template);
). На първият ред зареждаш темплайта, който си направил, след това го "compile"-ваш с handlebars, а на третият ред зареждаш данните за всички котки от файла "catSeeder.js" като всички данни за котките са закачени за "window"-a. След това на "body"-то на "cats.html" "append"-ваш променливата "template". По този начин ще ти се визуализират картинките с всички котки. За бутона :
(
$('button').on('click', (event) => {
let targetBtn = $(event.target);
let divInfo = targetBtn.next();
let textBtn = targetBtn.text();
if (textBtn.includes('Show')) {
targetBtn.text(textBtn.replace('Show', 'Hide'))
} else {
targetBtn.text(textBtn.replace('Hide', 'Show'))
}
divInfo.toggle();
})
). Като хванеш всички бутони им закачаш един евент и на него му казваш, че при натиснат бутон и визуализация на информацията за дадената котка текста на бутона, ако съдържа "Show" трябва да се промени на "Hide" и обратно. С "toggle()" правиш показването и скриването на инфорнацията на дадената картинка.