DOM

Instructions

1. Fork and clone this repo.

2. Open the index.html on your browser.

3. Check what the code does and understand it.

4. Do the suggested exercises.

Exercises

DOM Manipulation

📝 Implement the following features:

• 🔍 Show all the countries with their capitals.

• 📖 Show a random country and its information

• ➕ Add a country. extra points if it is though user input.

• ➖ Delete a country. extra points if it is though a click action.

• ✔️ Change the color of an element on click.

• 💅 Add styles.

CSS Excercises

Apply styles:

For all the document

• Include the font Gill Sans.

For the list container

• Make 5 columns for the children elements.
• The children elements should ocupy the 100% of the window width.

For all the elements from the list

• Margin in all sides of 2 pixels.
• Gray background.
• The text color must be white.
• Height of 50 pixels.
• Centered text, vertically and horizontally.

For only the odd elements

• Gold background color.

Just for Colombia and Jamaica

• Red background color.

Resources

Here are some resources that may be useful to help you complete this exercise.

getElementById The getElementById() method returns the element that has the ID attribute with the specified value. reference: W3schools getElementById

getElementsByTagName The getElementsByTagName() method returns a collection of all elements in the document with the specified tag name, as a NodeList object. reference: W3schools getElementsByTagName

getElementsByClassName The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as a NodeList object.reference: W3schools getElementsByClassName

innerHTML The innerHTML property sets or returns the HTML content (inner HTML) of an element. reference: W3schools innerHTML

innerText The innerText property sets or returns the text content of the specified node, and all its descendants. reference: W3schools innerText

createElement The createElement() method creates an Element Node with the specified name. reference: W3schools createElement

appendChild The appendChild() method appends a node as the last child of a node. reference: W3schools appendChild

removeChild The removeChild() method removes a specified child node of the specified element. reference: W3schools removeChild

parentNode The parentNode property returns the parent node of the specified node, as a Node object. reference: W3schools parentNode

eventListeners Event listeners are handlers which trigger functions upon certain events happening in the DOM. reference: W3schools eventListeners

The addEventListener() method attaches an event handler to the specified element.reference: W3schools addEventListener

Some extra info about the code

NOTE: This code is over-commented, it is not usual or advisable to document your code in this way as it is highly inefficient. This has been done to provide an exaggeratedly clear base for the exercise.

What is a callback?

Simply put: A callback is a function that is to be executed after another function has finished executing — hence the name ‘call back’. You can read more about this here

What is an API?

Simply put: API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message, or check the weather on your phone, you’re using an API. You can read more about this here

Why `text ${variable} text` instead of 'text' + variable +'text'

This makes part of string interpolation on template literals handling part of the the ES6 implementation of javascript, it may seem confusing at first but in the long run can make your code look and feel cleaner. You can read more about this here