Добавление стилей и классов в приложение книги

В day72 мы смогли добавить новую книгу в наше книжное приложение. Однако проблема заключается в том, что к созданным нами элементам не прикреплены классы, то есть теги span. Это делает вновь созданные элементы книги не похожими на элементы книги по умолчанию. Это то, что мы будем лечить сегодня. Чтобы добавить класс name в тег bookName span и класс delete в тег delete span. Мы также воспользуемся этой возможностью, чтобы научиться добавлять новый класс к элементам с помощью javascript на лету.

Вот наши html и CSS.

Вот текущий файл js

Для начала мы используем свойство стиля, чтобы добавить новый стиль к элементам.

Предположим, мы хотим добавить цвет к тегу li, мы сначала захватываем элемент

const li = document.createElement(‘li’);

// добавляем желтый фон к тегу li

li.style.background = “yellow”;

//добавляем отступ

li.style.padding = “50px”;

Чтобы получить или добавить курсы

Чтобы добавить класс к элементу, мы используем свойство className следующим образом;

// добавляем класс

li.className = “newClass”;

// консоль класса

li.className

или лучше с помощью свойства classList мы можем создать новый класс.

Для нашего книжного приложения bookName span должен получить класс name, а deletebutton должен получить класс delete. >. Вот как это сделать с помощью classList.

// добавляем тег class="name" t bookName span

bookName.classList.add(‘name’);

// добавляем class="delete" для удаления тега span

deleteButton.classList.add(‘delete’);

У classList есть и другие возможности. Его можно использовать для удаления или переключения класса.

Вот и все, наши новые добавленные книги теперь могут иметь хороший интерфейс, как книги по умолчанию.

Изменить события

Событие изменения возникает при изменении элемента формы, например при выборе переключателя или установке флажка.

Мы применим событие изменения в нашем книжном приложении, установив флажок для отображения или скрытия книг.

Для начала давайте добавим флажок в нашу форму.

<form id=”add-book”>
<input type=”checkbox” id=”hide”>
<label for=”hide” id=”hideLabel” >Hide all books</label>
<input type=”text” placeholder=”Add new book…” />
<button>Add</button>
</form>`

Перейдите к CSS и стилизуйте их так

#add-book #hide {
width: 30px
}
#add-book label {
line-height: 52px
}

Теперь давайте напишем javascript для реализации функций. Мы также изменим текстовое содержимое ярлыка, чтобы скрыть или показать книги.

// как обычно захватываем кое-что

const bookName = document.createElement(‘span’);
const deleteButton = document.createElement(‘span’);

// получаем метку для скрытия книг

const hideLabel = document.querySelector(‘#hideLabel’);
bookName.classList.add(‘name’);
deleteButton.classList.add(‘delete’);

// СКРЫТИЕ КНИГ

// сначала берем флажок

const hideBooks = document.querySelector(‘#hide’);

// затем добавляем событие изменения и прослушиватель

hideBooks.addEventListener(‘change’, function(e){

// проверяем, установлен ли флажок

if(hideBooks.checked){

// если отмечено, скрываем ul, содержащий все книги

ul.style.display = “none”;

// меняем содержимое метки

hideLabel.textContent = “Show all books”
}else {

// показать тег ul

ul.style.display = “initial”;

// меняем содержимое метки

hideLabel.textContent = “Hide all books”;
}
})

Вот скомпилированный код

const bookName = document.createElement(‘span’);
const deleteButton = document.createElement(‘span’);
const hideLabel = document.querySelector(‘#hideLabel’);
bookName.classList.add(‘name’);
deleteButton.classList.add(‘delete’);
const hideBooks = document.querySelector(‘#hide’);
hideBooks.addEventListener(‘change’, function(e){
if(hideBooks.checked){
ul.style.display = “none”;
hideLabel.textContent = “Show all books”
}else {
ul.style.display = “initial”;
hideLabel.textContent = “Hide all books”;
}
})

Именно так мы реализуем управление стилями и классами, чтобы

1) Дайте className каждой новой добавленной книге;

2) Скрыть или показать все книги, установив или сняв флажок

Вот наши обновленные html, CSS и javascript.