Section overview

Course structure

Required software

Course resources and repository

Folder structure & boilerplate

E02-04-Folder structure & boilerplate

Introduction

App presentation

General setup and resources

Add the World Map SVG using JavaScript

HTML markup and basic styles

Simple currencies convertor using JavaScript & exchange rate API

Get the exchange rate from using the fetch API

Get all countries from the World map

Create CSS components structure

Add search functionality to the currency list

CSS App variables

Display the selected country's currency and all conversion rates

Style the App container

Style the World Map

Style the simple currency convertor

Style the world currencies convertor

General setup and folder structure

Create `style.css` and import `variables.css` files

Create the HTML markup

Create `global.css` style

Create the main app.js and get DOM elements module with global variables

Add event listener to the `calculate-button` & get the input values

Validate input and add alert component

Display standard deduction based on status

Create and Style the `form.css` file

Style and Add the alert component to the DOM

Style the result component

Calculate the income tax based on the tax brackets

Close results and reset all values

Create `global.css` and `variables.css` style

Style global `btn.css` file

Style the `calculator-container.css` file

Add onclick to the `calculateBtn` & get the input values

Validate each individual input

Create and Style the alert component in `alert.css` and `showAlert.js`

Handle labels error and success with`handleLabel.js`

Calculate and display retirement savings

Check for successful calculations of the retirement

Get calculated values for the table

Display and style the table component

Delete a row from the table

Create and add a new row element

Clear the input fields and hide the results

Create the HTML markup

App presentation

General setup and folder structure

Create short-news section

Create detailed analytics section

Style the side navigator

Create stocks crypto and forex maps section

Toggle maps and detaild chart.mp4

General setup and folder structure (HTML, CSS, JS)

Create and styles the `btn.css` components

Create the HTML markup for .app-container, .header and .inputs-container

Create `main.css`, `variables.css` and the `app-container.css`

Style the `header-container.css` and `inputs-container.css`

Get DOM elements and create global variables

Manage the ADD button click event

Create the HTML markup for the budget list

Calculate total the budget

Create and style `budget-list-header.css` and `budget-list-container.css`

Remove elements form the budget list

Calculate the total per category

Update the budget list and add to category

Edit elements from the budget list

Clear budget list when requested

Save and load data from local storage

Create and Style the Alert components

Create the HTML markup for .app-container, and .parameters-form

Create `main.css`, `variables.css` and style the `app-container.css`

Create the HTML markup for .goal-list and style it with `goal-list.css`

Create and styles `form.css`

Create the main app.js file and Get DOM elements

Calculate and display the goal amount

Toggle interest rate input

Calculate and display monthly contribution

Calculate and display current savings

Calculate months with interest

Bars style

Form group validation

App presentation

General setup and folder structure (HTML, CSS, JS)

Create `style.css`, `variables.css` and style the `app-container.css`

Create the HTML markup for .app-container, and Loan conditions

Create and styles `form.css`.

Get DOM elements and manipulate input values

Display and style `results.js`

Create and style Pie Chart

Calculate loan `calculateLoan.js` - create a function that calculates the

App presentation

General setup and folder structure (HTML, CSS, JS)

Investment Container HTML Markup

Create HTML Markup and CSS Style for Adding Stoks

Style the investment container

Style main App and add CSS variables

Create Portfolio HTML Markup and CSS Style

Create and Style the Portfolio analysis section

Utility functions showAlert and formatNumbers

Add Stocks to LocalStorage

Edit and Delete Stocks from the Portfolio

Display Stock Portfolio

Edit and Delete investments from the list

Add investment to list and dinsplay list

Analyse Gain Loss Retunr

Save Investment data to a CSV file

Create and Show Custom Pie Chart

App presentation

General setup and folder structure (HTML, CSS, JS)

HTML section structure and gerenal CSS style for the app

Entries form HTML Markup and CSS Style

Summary table HTML Markup and CSS Style

Get DOM Elements and add event-listeners

Entries List HTML Markup and CSS Style

Change the input color when the user selects a type.mp4

E12-12-Display only icons on Mobile devices

Save load and clear all entries from the list

Display chart entries with colors and percentages

Add, delete and display antries in the list

Export to HTML and PDF

Setup your code space

Create index.html file and add basic HTML tags

Add id's classes and props to HTML Tags

Create style.css

Create CSS variables

Style the form

Style Table Buttons and input

Add event listeners to the input

Create a JavaScript file

Add event listeners to the form

Create variables and calc the discount

Change the quant using the buttons

Handle the form submit

Calculate the final including the discount

Out the result to the DOM

Style the output and result

Refactor the code

Create the CSS styles `credit-score` form

Form submission & validation parameters

Create a validation module

Validate input value & type

DOM elements module and global variables

Create the alert component module

Check validation & Show the result (html only)

Style the result

Create the `checkCreditScore` function

Remove the result and recheck the credit score

Create the responsive design for mobile, tablet and desktop devices

Style and add the alert component to the DOM

ES6 Crash course with project