← Volver a ejercicios

Learn how to manipulate The DOM with JS

Star

Solicitud de acceso directo

Ingresa tu información y recibirás acceso instantáneo

Dificultad

easy

Repositorio

Clic para abrir

Video

No disponible

Demo en vivo

No disponible

Duración promedio

8 hrs

Tecnologías

Learn The DOM Interactively

You will learn the following concepts:

  1. How to select elements from your website

  2. Manipulate them with Javascript (change styles, add event listeners).

  3. Remove elements programmaticall.

  4. Change your entire website without a refresh.

One click installation:

Open in Gitpod

Local Installation

1) Make sure you have learnpack installed and node.js version v14+ and jest v27. This is the command to install the learnpack-cli and jest:

$ npm i learnpack jest@27.0.6 -g

2) Clone or download this repository. Once you finish downloading, you will find a new folder with a subdirectory "exercises" that contains all the exercises within.

3) Install the learnpack plugin to test and compile vanillajs:

$ learnpack plugins:install learnpack-dom

4) Start the tutorial/exercises by running the following command from the root of the project:

$ learnpack start

How are the exercises organized?

Each exercise is a small vanillajs website containing the following files:

  1. index.js: represents the entry javascript file that will be executed when the website loads.
  2. index.html: represents the HTML entry for website.
  3. style.css: your website styles, they have to be imported from the index.html
  4. README.md: contains exercise instructions.
  5. test.js: you don't have to open this file, it contains the testing script for the exercise.

Contributors

Thanks goes to these wonderful people (emoji key):

  1. Alejandro Sanchez (alesanchezr), contribution: (coder) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 🤓 (build-tutorial) ✅ (documentation) 📖

  2. Paolo (plucodev), contribution: (bug reports) 🐛, contribution: (coder), (translation) 🌎

This project follows the all-contributors specification. Contributions of any kind are welcome!

Solicitud de acceso directo

Ingresa tu información y recibirás acceso instantáneo

Dificultad

easy

Repositorio

Clic para abrir

Video

No disponible

Demo en vivo

No disponible

Duración promedio

8 hrs

Tecnologías