Skip to content

Latest commit

 

History

History
79 lines (57 loc) · 5.92 KB

js-dom.md

File metadata and controls

79 lines (57 loc) · 5.92 KB

MIT Licensed Awesome        Telegram

Document Object Model

Дізнайтеся деякі frontend основи про DOM API:

  1. Прослухайте тільки розділ Document Object Model Manipulation

    Ви можете вдатися до автоматично перекладених субтитрів, зокрема, якщо ви відчуваєте що це допоможе вам краще засвоїти відеокурс.

  2. freecodecamp Algorithm Scripting Challenges

    • закінчити завдання 12..18 (Sum All Odd Fibonacci Numbers до Everything Be True) і збережіть скріншот.

.then():

  1. Практичне завдання: Впровадити інтерактивне side-menu без перезавантаження сторінки. Ви можете вибрати будь-яку тему: покемони, телефони, сторінки сайту aka about/prices/goal/etc. Action menu - щось на зразок цього, але не таке потворне :) image

Головна мета

Головна мета - меню з можливістю завантажувати деякий попередньо визначений HTML-контент, пов'язаний з власним пунктом меню, в контейнер вмісту <main>, розташований праворуч.

Цілі

  • комплексна реалізація full page responsive layout (курс Udacity про адаптивний HTML/CSS).
  • ви можете зберігати дані в масиві об’єктів
  • ви можете використовувати innerHTML, insertAdjacentHTML, append, createElement, addEventListener,
  • будуть корисними методи масиву як Array#filter, Array#sort, Array#find, etc.
  • і звичайно - методи DOM.

Ви можете опублікувати свої результати на GitHub Pages

Після завершення виконайте наступне:

  1. Зробіть скріншот своїх завершених уроків і помістіть його в теку task_js_dom вашого репо kottans-frontend
  2. В вашому kottans-frontend репо README.md:
    • додайте заголовок ## DOM
    • додати скріншот або додати посилання на скріншот
    • перерахуйте свої міркування щодо кожного пункту завдання (що для вас було новим, що вас здивувало, що ви плануєте використовувати в майбутньому)
  3. Для цього завдання вам знадобиться review коду:
  4. Чудова робота! Якщо ваш PR вже продивились ментори, узгодили та вмерджили (його статус змінено на merged з фіолетовою іконкою), то прийшов час ділитись своїми досягненнями з іншими – опублікуйте повідомлення в course channel: DOM — #done (або DOM — #p2p_done якщо ви студент курсу p2p) і додайте посилання до свого репо. Цей крок важливий, оскільки він допомагає наставникам відстежувати ваш прогрес!
  5. Вивчіть додаткові матеріали нижче, щоб покращити свої навички. Якщо ви вважаєте, що це вплине на вашу загальну ефективність курсу, подумайте над тим, щоб повернутись до них пізніше, наприклад коли ви виконаєте всі обов’язкові завдання.
  6. Ви можете пропустити опціональні матеріали з цього завдання (якщо такі є).

Коли ви закінчите це завдання, ви можете приступити до наступного.

Додаткові матеріали

Готово?

➡️ Ідіть далі Building a Tiny JS World

⤴️ Повернутися до Contents