10+ HTML CSS and JS Financial Web Apps – Front-End Web Dev

سرفصل های دوره

Lean HTML, CSS and JS by building 10 real world financial web applications using HTML, CSS and JavaScript.

1. Introduction

1. Introduction

2. General setup

1. Section overview

2. Course structure

3. Required software

4.1 E02-04-Folder structure & boilerplate

4. Folder structure & boilerplate

5.1 00-boileplate.zip

5.2 Course repository.html

5.3 Google Fonts.html

5. Course resources and repository

3. World currencies convertor app

1. App presentation

2.1 Exchange rate API.html

2.2 world-map.zip

2. General setup and resources

3. HTML markup and basic styles

4. Add the World Map SVG using JavaScript

5. Simple currencies convertor using JavaScript & exchange rate API

6. Get the exchange rate from using the fetch API

7. Get all countries from the World map

8. Display the selected countrys currency and all conversion rates

9. Add search functionality to the currency list

10. Create CSS components structure

11. CSS App variables

12. Style the App container

13. Style the World Map

14. Style the simple currency convertor

15. Style the world currencies convertor

4. Tax-Calculator

1. App presentation

2.1 data.zip

2. General setup and folder structure

3. Create the HTML markup

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

5. Create `global.css` style

6. Create and Style the `form.css` file

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

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

9. Validate input and add alert component

10. Display standard deduction based on status

11. Style and Add the alert component to the DOM

12. Display standard deduction based on status

13. Calculate the income tax based on the tax brackets

14. Style the result component

15. Close results and reset all values

5. Retirement Calculator

1. App presentation

2. General setup and folder structure

3. Create the HTML markup

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

5. Style the `calculator-container.css` file

6. Style global `btn.css` file

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

8. Validate each individual input

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

10. Handle labels error and success with`handleLabel.js`

11. Calculate and display retirement savings

12. Get calculated values for the table

13. Check for successful calculations of the retirement

14. Display and style the table component

15. Create and add a new row element

16. Clear the input fields and hide the results

17. Delete a row from the table

6. Stock-Market-Watch-List

1. 07-01-App presentation

2. 07-02-General setup and folder structure

3. 07-03-Create the HTML markup

4. 07-04-Create short-news section

5. 07-05-Create stocks crypto and forex maps section

6. 07-06-Create detailed analytics section

7. 07-07-Style the side navigator

8. 07-08-Toggle maps and detaild chart

7. Budget Planner App

1. App presentation

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

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

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

5. Create and styles the `btn.css` components

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

7. Create the HTML markup for the budget list

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

9. Get DOM elements and create global variables

10. Manage the ADD button click event

11. Calculate total the budget

12. Calculate the total per category

13. Create and Style the Alert components

14. Update the budget list and add to category

15. Remove elements form the budget list

16. Edit elements from the budget list

17. Save and load data from local storage

18. Clear budget list when requested

8. Savings-Goal-Tracker

1. App presentation

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

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

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

5. Create and styles `form.css`

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

7. Create the main app.js file and Get DOM elements

8. Calculate and display the goal amount

9. Calculate and display current savings

10. Calculate and display monthly contribution

11. Toggle interest rate input

12. Calculate months with interest

13. Bars style

14. Form group validation

9. Loan calculator

1. 10-01-App presentation

2. 10-02-General setup and folder structure (HTML, CSS, JS)

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

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

5. 10-05-Create and styles `form.css`.

6. 10-06-Get DOM elements and manipulate input values

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

8. 10-08-Display and style `results.js`

9. 10-09-Create and style Pie Chart

10. Investment-Portfolio-Tracker

1. 11-01-App presentation

2. 11-02-General setup and folder structure (HTML, CSS, JS)

3. 11-03-Investment Container HTML Markup

4. 11-04-Style main App and add CSS variables

5. 11-05-Style the investment container

6. 11-06-Create HTML Markup and CSS Style for Adding Stoks

7. 11-07-Create Portfolio HTML Markup and CSS Style

8. 11-08-Create and Style the Portfolio analysis section

9. 11-09-Utility functions showAlert and formatNumbers

10. 11-10-Add Stocks to LocalStorage

11. 11-11-Display Stock Portfolio

12. 11-12-Edit and Delete Stocks from the Portfolio

13. 11-13-Add investment to list and dinsplay list

14. 11-14-Edit and Delete investments from the list

15. 11-15-Analyse Gain Loss Retunr

16. 11-16-Create and Show Custom Pie Chart

17. 11-17-Save Investment data to a CSV file

11. Income and Expense tracker app

1. 12-01-App presentation

2. 12-02-General setup and folder structure (HTML, CSS, JS)

3. 12-03-HTML section structure and gerenal CSS style for the app

4. 12-04-Entries form HTML Markup and CSS Style

5. 12-05-Summary table HTML Markup and CSS Style

6. 12-06-Entries List HTML Markup and CSS Style

7. 12-07-Get DOM Elements and add event-listeners

8. 12-08-Change the input color when the user selects a type

9. 12-09- Add, delete and display antries in the list

10. 12-10-Display chart entries with colors and percentages

11. 12-11-Save load and clear all entries from the list

12. E12-12-Display only icons on Mobile devices

13. 12-13-Export to HTML and PDF

12. ES6 Modules Explained - Optional

1. ES6 Crash course with project

13. HTML CSS and JS Crash Course with Web App Project - Optional

1. Section overview

2. Setup your code space

3. Create index.html file and add basic HTML tags

4. Add ids classes and props to HTML Tags

5. Create style.css

6. Create CSS variables

7. Style the form

8. Style Table Buttons and input

9. Create a JavaScript file

10. Add event listeners to the input

11. Add event listeners to the form

12. Create variables and calc the discount

13. Change the quant using the buttons

14. Handle the form submit

15. Calculate the final including the discount

16. Out the result to the DOM

17. Style the output and result

18. Refactor the code

14. Credit score checker app

1. App presentation

2. General setup and folder structure

3. Create the HTML markup

4. Create the CSS styles `credit-score` form

5. DOM elements module and global variables

6. Form submission & validation parameters

7. Create a validation module

8. Validate input value & type

9. Create the alert component module

10. Style and add the alert component to the DOM

11. Check validation & Show the result (html only)

12. Style the result

13. Create the `checkCreditScore` function

14. Remove the result and recheck the credit score

15. Create the responsive design for mobile, tablet and desktop devices

139,000 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy