https://github.com/mr9d/dom-inserts-demo
Demo application for Yandex Praktikum students to demonstrate the different approaches to DOM manipulation in ES6 JavaScript.
https://github.com/mr9d/dom-inserts-demo
css3 dom es6 gh-pages html5 javascript practicum praktikum yandex
Last synced: about 1 year ago
JSON representation
Demo application for Yandex Praktikum students to demonstrate the different approaches to DOM manipulation in ES6 JavaScript.
- Host: GitHub
- URL: https://github.com/mr9d/dom-inserts-demo
- Owner: mr9d
- Created: 2019-11-25T18:09:12.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-11-15T05:40:37.000Z (over 3 years ago)
- Last Synced: 2025-05-21T20:12:12.886Z (about 1 year ago)
- Topics: css3, dom, es6, gh-pages, html5, javascript, practicum, praktikum, yandex
- Language: JavaScript
- Homepage: https://mr9d.github.io/dom-inserts-demo/
- Size: 229 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DOM inserts demo for Yandex Praktikum
## About
Demo application developed at the request of [Yandex Praktikum](https://practicum.com/) students. The goal was to demonstrate the different approaches to DOM manipulation in ES6 JavaScript.
The following technics are used in this demo:
* [.innerHTML](https://developer.mozilla.org/ru/docs/Web/API/Element/innerHTML)
* [.insertAdjacentHTML](https://developer.mozilla.org/ru/docs/Web/API/Element/insertAdjacentHTML)
* [.appendChild()](https://developer.mozilla.org/ru/docs/Web/API/Node/appendChild)
* [.append()](https://developer.mozilla.org/ru/docs/Web/API/ParentNode/append)
* [<template>](https://developer.mozilla.org/ru/docs/Web/HTML/Element/template)
## Live version
Available at GitHub pages: (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](https://docs.github.com/en/pages))