12. Display flex

Вітаю! На цьому занятті ми наповну випробуємо гнучкість властивості display flex і створимо свій плейліст. А ще трохи згадаємо про об’єкти та створимо елементи сторінки за допомогою javascript.

Тож готуйте навушники і свої найулюбленіші треки. Ми починаємо!

Display flex

Властивість display: flex дозволяє розташувати елементи так, щоб вони вигідно заповнювали простір сторінки. Елементи можуть бути розтягнуті пропорційно з урахуванням заданого співвідношення або стиснуті, щоб цілком вмістити всі елементи без переносів в один рядок.

Ця властивість має дуже широке застосування, тому що розташовує елементи у відповідній послідовності, скільки б їх не було на сторінці й, що дуже важливо, незалежно від того, якого розміру монітор у клієнта. Він чи вона завжди будуть бачити items (картки) з гарним розташуванням, не важливо, чи то на комп’ютері, на планшеті чи в телефоні.

Чудовий онлайн приклад, який допоможе потренуватися і побачити, як працюють різні налаштування для display: flex.

Створюємо Playlist

1: Створіть новий проєкт. Додайте код для створення першої картки з піснею. Вона матиме назву, виконавця та вбудоване відео з youtube. Клас cards – це клас, в середині якого ми створимо багато карток з піснями. Клас card відповідає на одну єдину картку. А клас container відповідає за текстову частину картки.

<div id="cards">
  <div class="card">
    <iframe width="100%" height="350px" src="https://www.youtube.com/embed/BvgNgTPTkSo?si=kXKe7HYSkHiI2lrj" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    <div class="container">
      <h4><b>Доброго вечора ми з України</b></h4>
      <p>PROBASS ∆ HARDI</p>
    </div>
  </div>
  
  <!--  Додайте ще 2 пісні тут -->
</div> 

2: Додайте ще 2 пісні (разом 3) до плейліста. Без стилів він буде виглядати не дуже. Але ми ж тільки-но почали!

3: А тепер черга за стилями. Приклад стилів для карток можна знайти на багатьох сайтах в інтернеті. Цей конкретно взяти звідси: приклад. Додайте такі стилі:

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  background-color: #00BFFF;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}

Зверніть увагу на коментарі. Вони дуже багато пояснюють і полегшують читання коду.
transition – властивість, яка визначає час за який елемент .card переходить в стан, який вказаний у .card:hover.
Давайте закруглимо кути у карток за допомогою :

/* With rounded corners: */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px; /* 5px rounded corners */
}

/* With rounded corners: */
/* Add rounded corners to the top left and the top right corner of the image */
iframe {
  border-radius: 10px 10px 0 0;
}

4: Додамо стилі для всі карток разом. Тут і попрацює наш display: flex. Спробуйте додати властивості одна за одною, щоб зрозуміти їхній ефект:

#cards {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  height: 90vh;
}

display: flex; – елементи одне за одним в рядок. Включає властивості flex
justify-content: space-around; – відступи навколо кожного елементу
flex-wrap: wrap; – створює новий рядок, якщо елементів забагато, щоб розмітити в один
height: 90vh; – Розмір елемента у vh.

Область перегляду (viewport) позначає розмір початкового блоку. Іншими словами, область перегляду – це вся область всередині вікна браузера або будь-яка інша видима область на екрані. Висота області перегляду (viewport height) – це відсоток від висоти фактичного вікна перегляду, який позначається одиницями vh, а ширина області перегляду (viewport width) – це відсоток від ширини фактичного вікна перегляду, який позначається одиницями vw.

Динамічна сторінка. Переносимо теги у javascript

5: А тепер приготуйтесь видалити майже увесь html-код, який ми так довго створювали. Насправді ми створили його лише, щоб налаштувати стилі. А зараз будемо генерувати сторінку за допомогою JavaScript! Для початку збережіть ваш поточний html код або закоментуйте його (виділяємо все , далі клавіша Ctrl+/ ). Нам ще знадобляться назви пісень і посилання на Youtube. Все, що має залишитись в файлі html (решту коментуємо або видаляємо):

<div id="cards">
</div>

6: Чудово! Тепер створюємо відомий нам об’єкт. Вносимо в нього ті ж дані, що були у html-файлі:

let songs = {
  1: {
    name: "Доброго вечора ми з України",
    link: "https://www.youtube.com/embed/BvgNgTPTkSo?si=kXKe7HYSkHiI2lrj",
    singer: "PROBASS ∆ HARDI"
  },
  2: {
    name: "Я з України",
    link: "https://www.youtube.com/embed/37Azj-eHw_M?si=ZV8P_tr7MrJKG4dL",
    singer: "МЕРІ"
  },
  3: {
    name: "Пес Патрон 🐶",
    link: "https://www.youtube.com/embed/fMSS6diyXQE?si=Skwqm6Kn3OGextsN",
    singer: "KARTA SVITU"
  }
};

Змініть назви і посилання.

7: Після цього готуємо цикл, в якому перебиратимемо всі пісні :

let cards = document.getElementById("cards");
for (const [skey, song] of Object.entries(songs)) {
  console.log(song);
 // Тут вставляємо новий код. В середині циклу
}

7: В середину цього циклу (туди, де зараз коментар) додаємо код, який створить елемент div з класом card. І додасть його в середину cards. Останній шматок додає код вбудованого відео. За допомогою змінної song[“link”] вказуємо посилання на відео:

   let card = document.createElement("div"); // створюємо новий div
  card.classList.add("card"); // додаємо йому клас card
  cards.appendChild(card); //додаємо новий <div class="card"> в середину <div class="cards">
  
    card.innerHTML = `<iframe width="100%" height="350px" src="${song["link"]}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`;

8: І ще шматочок на сьогодні додаємо відразу за попереднім (перевірте, що після нього все ще закривається фігурна дужка циклу). Цей код додає клас container з текстом. В цьому елемент заголовка для назви пісні

 let container = document.createElement("div"); // створюємо новий div
  container.classList.add("container"); // додаємо йому клас container
  card.appendChild(container); //додаємо новий <div class="container"> в середину <div class="card">

  let h4 = document.createElement("h4"); // створюємо новий h4
  container.appendChild(h4); // додаємо h4 в середину  <div class="container">
  h4.innerText = song["name"];

Створюємо форму додавання пісні

9: Для початку створимо функцію, що генерує всі пісні. Код у нас вже є, але його треба буде покласти у функцію. Це допоможе пізніше додавати нову пісню. Код, виділений фоном новий, але тут важливо правильно розташувати код, який вже є.

let songs = {
...
};

function refreshList() {
  let cards = document.getElementById("cards");
  cards.innerHTML = "";
  for (const [skey, song] of Object.entries(songs)) {
   ... // тут увесь код для циклу, який вже написали
  }
}

refreshList();

Рядок cards.innerHTML = “”; стирає всі пісні зі списку, щоб згенерувати нові. Якщо ви його забули, то у вас при кожному додаванні пісні будуть дублювати решта пісень.

В кінці викликаємо функцію, щоб при завантаженні сторінки вже мати список пісень

10: Додаємо поля для нової пісні. Стилі ми візьмемо з бібліотеки з цієї сторінки. Тому підключимо бібліотеку і створимо поля для форми (Створюємо на початку сторінки, перед списом пісень):

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


<form class="w3-container" id="add">
  <div class="w3-container w3-blue">
    <h2>Додати пісню</h2>
  </div>
  <label class="w3-text-blue">Назва</label>
  <input class="w3-input" id="name" type="text"  required></p>

  <input type="submit" class="w3-button w3-blue" value="Додати">
</form>

11: Додайте поле “Посилання” (link) до форми. Додайте зчитування посилання самостійно

12: Тепер додамо функцію, яка зчитає з полів нову пісню і додасть її у список :

let addForm = document.getElementById("add"); //зчитуємо форму
addForm.addEventListener("submit", (e) => { //Якщо на кнопку натиснули
  e.preventDefault();
  let name = document.getElementById("name").value; // Читаємо назву пісні
  let singer= ""; // Тут щось замініть
  let link= ""; // І тут

  id = Math.floor(Math.random() * 100);  //Генеруємо випадковий іd для пісні
  songs[id] = { //Додаємо в список нову пісню
    name: name,
    singer: singer,
    link: link
  };
  refreshList(); //Перезапускаємо функцію відображення пісень
});

Домашнє завдання

1: Додайте ще пісень (мін 6 на сторінці). Замініть пісні у прикладі на ті, які подобаються вам. Додайте ці ж пісні в об’єкт songs

2: Відредагуйте стилі. Додайте стилі на ваш смак

3: Додайте два поля для картки одне з них “Виконавець” (singer), а друге “Альбом” або “Країна”. Додайте ці поля на картки через javascript (Так само, яки ми додавали назву пісні).

4: Додайте нові поля у форму для додавання пісні. Змініть код так, щоб вони також додавалися функцією.

5: Для id з назвою add додайте стиль з відступом, щоб кнопка не зливалася з піснями:

Без відступу:

З відступом:

Level Up

1: Відкрийте проєкт-заготовку. Зробіть Fork (кнопка внизу справа). Далі за допомогою відео спробуйте відредагувати код так, щоб добитися таких самих картинок, які показані нижче.

Важливо: змініть тільки стилі для класу .container. Результат можете відправити текстом, наприклад так:

/* Завдання1 */
.container {
  display:block;
  justify-content: center;
}
/* Завдання2 */
.container {
  display:none;
  height: 10vh;
}

Отже, вам необхідні відтворити такі картинки (підписи під картинками з завданнями можуть допомогти) :

2: Додайте до ваших пісень теги за допомогою інформації тут. Написати можете що захочете.