Document Object Model

Learn some frontend basics about DOM API:

1. JavaScript and the DOM (4 lessons, estimated completion time 8 hrs)

2. freecodecamp Algorithm Scripting Challenges

   • finish tasks 12..18 (Sum All Odd Fibonacci Numbers to Everything Be True) and save a screenshot.

.then():

3. Practical task: Implement interactive side-menu' site without page reloads. You may choose any theme: pokemons, phones, site pages aka about/prices/goal/etc. Action menu - something like this but not so ugly :)

The goal

Main goal - menu with ability to load some predefined html content related to own menu item into right-positioned <main> content container.

Goals

• complex implementation of full page responsive layout (credit to Udacity course about responsive HTML/CSS).
• you can store data in an array of objects
• you can use innerHTML, insertAdjacentHTML, append, createElement, addEventListener,
• you may find useful array methods as Array#filter, Array#sort, Array#find, etc.
• and of course - DOM methods.

You may want to publish your results on GitHub Pages

When complete do the following:

1. Make screenshots of your progress in (1) and (2) and put the screenshots in task_js_dom folder in your kottans-frontend repo
2. In your kottans-frontend repo README.md:
   • add header ## DOM
   • embed the screenshots or add links to the screenshots
   • list your reflections on all subtasks (what was new to you, what surprised you, what you intend to use in future)
3. Great job! Go ahead and share your progress with others – post a message in course channel: DOM — #done (or DOM — #p2p_done if you are p2p course student) and add the link to your repo. This step is important, as it helps mentors to track your progress!
4. You will require code review for your subtask (3):
   • For Frontend 2021 course students: please, follow these instructions
   • For p2p course students: please, follow these instructions
5. Study Extra Materials below to improve your skills. If you feel it affects your overall course performance consider reverting to those later e.g. when you have all mandatory tasks completed.
6. You may skip Optional materials from this task (if any).

You have completed Front-End basics tasks section. We shall appreciate your feedback on this section especially if you're doing this course from Ukraine. Please, grant us 10-15 minutes of your time and complete this feedback form.

When you finish this task you can proceed to the next one.

Extra materials

• The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery)
• JavaScript DOM Crash Course by Brad Traversy

Done?

➡️ Go forward to Building a Tiny JS World

⤴️ Back to Contents