DOM inserts demo for Yandex Praktikum

About

Demo application developed at the request of Yandex Praktikum students. The goal was to demonstrate the different approaches to DOM manipulation in ES6 JavaScript.

The following technics are used in this demo:

• .innerHTML
• .insertAdjacentHTML
• .appendChild()
• .append()
• <template>

Live version

Available at GitHub pages: https://mr9d.github.io/dom-inserts-demo/ (deployed from the master branch)

Running locally

If you want to run the application locally, you can do the following:

• git clone the repository
• Open index.html in the browser

That’s it, no build required.

How to use

The application itself is a list of students.

You can add students with the provided name and remove them. While adding students, you can select how exactly you want to add them: this affects the DOM API being used but doesn’t affect the final result. Avatar is selected randomly.

Used technologies

• HTML5
• CSS3
• JavaScript ES6
• GitHub Pages (documentation)