Projects, practices and exercises using ECMAScript 6+ without frameworks o libraries

A web page with random background colors

• 🎯 Main Goal: Use modules and attributes data-
• 🕹️ Live Demo
• 🗂️ Repository

A basic counter to know and practice with the DOM and event listener.

• 🎯 Main Goal: Practice basic syntax and DOM manipulation
• 🕹️ Live Demo
• 🗂️ Repository

A page to ask the user for a rating and respond with a thank you and the rank selected.

• 🎯 Main Goal: Working with radio buttons with accessibility and DOM manipulation
• 🕹️ Live Demo
• 🗂️ Repository
• 🧑‍💻 Frontend Mentor
• 🔵 Level: Newbie

A component to plot a chart with data from a local JSON file

• 🎯 Main Goal: Working with data from a JSON file and display a chart of columns.
• 🕹️ Live Demo
• 🗂️ Repository
• 🧑‍💻 Frontend Mentor
• 🟢 Level: Junior

A web page with a section with testimonials and dynamic rating

• 🎯 Main Goal: Working with images, DOM manipulation, CSS with two images for a background and responsive design
• 🕹️ Live Demo
• 🗂️ Repository
• 🧑‍💻 Frontend Mentor
• 🔵 Level: Newbie

A web challenge form Frontend Mentor

• 🎯 Main Goal: Use Grid to present a layout with several cards showing data from a local JSON file
• 🕹️ Live Demo
• 🗂️ Repository
• 🧑‍💻 Frontend Mentor
• 🟢 Level: Junior

A web page with toggle button to change light/dark theme

• 🎯 Main Goal: Working with CSS BEM names, variables and responsive design.
• 🕹️ Live Demo
• 🗂️ Repository
• 🔵 Level: Newbie

A basic client side validation.

• 🎯 Main Goal: Check for basic validation on the client side and show error messages under specific inputs
• 🕹️ Live Demo
• 🗂️ Repository

A web page with a modal Window

• 🎯 Main Goal: Working with DOM manipulation, and in specific with a modal window.
• 🕹️ Live Demo
• 🗂️ Repository
• 🔵 Level: Newbie

A web page with a collapsible hamburger menu, and a modal window for user registration

• 🎯 Main Goal: Working with a slider, as a menu, and a modal window.
• 🕹️ Live Demo
• 🗂️ Repository
• 🔵 Level: Newbie

A web page with a restaurant menu with pictures.

• 🎯 Main Goal: Working with images, DOM manipulation
• 🕹️ Live Demo
• 🗂️ Repository

A basic page to practice filters to update the DOM using a input search and a group of buttons

• 🎯 Main Goal: Working with JS to change by the user the data show on the page
• 🕹️ Live Demo
• 🗂️ Repository
• 🔵 Level: Newbie

A landing page for a tourist company all in Flexbox with a email contact

• 🎯 Main Goal: Working with Flexbox, responsive, and mobile first for different layouts: navbar, cards, features, image gallery and footer
• 🕹️ Live Demo
• 🗂️ Repository
• 🔵 Level: Newbie

A basic website with two pages: one for a catalog of products, and another for details of a selected product

• 🎯 Main Goal: Work with JS to show and share data in different pages.
• 🕹️ Live Demo
• 🗂️ Repository
• 🔵 Level: Newbie

A web page to practice the DOM manipulation with arrays and CSS classes.

• 🎯 Main Goal: [DOM] Practice with DOM, arrays and CSS classes.
• 🕹️ Live Demo
• 🗂️ Repository
• 🟢 Level: Junior

A web page to practice DOM manipulation and generate a test-quiz

• 🎯 Main Goal: [DOM] Practice with DOM, and interactivity with test quizzes.
• 🕹️ Live Demo
• 🗂️ Repository
• 🟢 Level: Junior

A web page to practice some very useful methods for arrays with a list of data from an external REST API

• 🎯 Main Goal: Practice with array methods (reduce, sort, filter, map and forEach) with a data list o people from a REST API.
• 🕹️ Live Demo
• 🗂️ Repository
• 🔵 Level: Newbie

A web page to practice requesting data by the user from a API via Fetch

• 🎯 Main Goal: Work with JS to change the data displayed on the page by the user, requesting new data from the server each time.
• 🕹️ Live Demo
• 🗂️ Repository
• 🔵 Level: Newbie

A web page to practice pagination with data from a API via Fetch

• 🎯 Main Goal: Practice with pagination with data from a REST API.
• 🕹️ Live Demo
• 🗂️ Repository
• 🔵 Level: Newbie

A web page to obtain a random meal (recipe and ingredients) using a REST API

• 🎯 Main Goal: Using Fetch API to retrieve external information on JSON data format.
• 🕹️ Live Demo
• 🗂️ Repository

A web page to practice the fetch API of HTML5 and DOM manipulation

• 🎯 Main Goal: [HTML5 API - FETCH] Practice with Fetch Api and practice with CSS cards
• 🕹️ Live Demo
• 🗂️ Repository

A web page to obtain the exchange rate of different currencies using an external API to get this information.

• 🎯 Main Goal: Using Fetch API, with async/await, to retrieve external information on JSON data format.
• 🕹️ Live Demo
• 🗂️ Repository

A project to consume data from an external REST API, using Fetch API and async/await

• 🎯 Main Goal: Consuming external REST API with Fetch API and async/await
• 🕹️ Live Demo: 🚧
• 🗂️ Repository

A web page with a virtual cinema to choose seats to watch a movie

• 🎯Main Goal: Work with local storage to store the seats chosen by the user
• 🕹️ Live Demo
• 🗂️ Repository

A web page to practice DOM manipulation with drag & drop API of HTM5 with event delegation

• 🎯 Main Goal: Practice with DOM manipulation with Drag & Drop API.
• 🕹️ Live Demo
• 🗂️ Repository

A video player with custom controls to know and practice with the <video> embed element.

• 🎯 Main Goal: Practice with <video> element
• 🕹️ Live Demo
• 🗂️ Repository

A web page with a game, the user has to guess the number in 15 attempts maximum.

• 🎯 Main Goal: Working with events, DOM manipulation, CSS with mobile first and responsive design
• 🕹️ Live Demo
• 🗂️ Repository
• 🔵 Level: Newbie

A web page with a game, the hangman to guess a hidden word in a set amount of chances (1000+ English Words).

• 🎯 Main Goal: Working with SVG, notifications and popup (modal window).
• 🕹️ Live Demo
• 🗂️ Repository

A web page with a game, the hangman to guess a hidden word in a set amount of chances (1000+ English Words).

• 🎯 Main Goal: Working with images, DOM manipulation
• 🕹️ Live Demo: 🚧
• 🗂️ Repository