10+ Financial Web Apps Using Html Css And Js - Front-End

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

What you'll learn

How to create real life Web appications, using html css and js

Modern web app UI/ UX design

Modular based web applications using JavaScrip ES6 Modules

New CSS features

Requirements

PC

Description

Welcome to "10+ Financial Web Apps using HTML, CSS, and JavaScript - Front-End"!Hope you ready to dive into the world of front-end web development while creating 10 real world financial web applications using HTML, CSS and JavaScript? In this course, you will embark on an enriching journey to master HTML, CSS, and JavaScript by building practical financial web applications.Throughout this course, you will learn the fundamentals of front-end development while focusing on the integration of financial tools and applications. By the end of our journey together, you will have created 10+ financial web apps, each designed to enhance your understanding of web development and financial concepts.Our first project, "Currency Converter," sets the stage for your learning adventure. In this initial application, you will harness the power of HTML to structure the content of your web page, CSS to style and design your interface, and JavaScript to implement dynamic functionality.As you progress through the course, you will unlock the secrets behind creating interactive and user-friendly financial web applications. From budget calculators to investment trackers, you will gain invaluable hands-on experience in crafting robust front-end solutions tailored to financial needs.Are you ready to transform your passion for coding into tangible skills that merge technology with finance? Join us as we embark on this exhilarating journey of discovery and creation in "10+ Financial Web Apps using HTML, CSS, and JavaScript - Front-End"! Let's code our way to financial innovation together.1.      Expense Tracker: Keep tabs on your spending habits with this intuitive expense tracking application.Investment Portfolio Tracker: Monitor and manage your investments seamlessly with our portfolio tracking tool.Loan Calculator: Explore various loan scenarios and calculate repayment plans effortlessly.Savings Goal Tracker: Set, track, and achieve your financial goals with precision and ease.Budget Planner: Plan your finances effectively and stay on top of your budget with this indispensable tool.Stock Market Watch List: Stay informed about your favorite stocks and market trends with our customizable watch list.Retirement Calculator: Plan for your golden years confidently with our comprehensive retirement planning tool.Tax Calculator: Estimate your tax liability and plan your finances intelligently with our user-friendly tax calculator.Credit Score Checker: Monitor and improve your credit health with our insightful credit score checking application.What you will learn:- HTML advance tag elements - CSS latest feature and selectors- JavaScript modules and ES6Throughout the course, you'll utilize essential tools and resources, including Visual Studio Code for coding, Node.js for server-side JavaScript, Git for version control, Google Fonts and Font Awesome for enhancing the visual appeal of your applications, and ChartJS for creating interactive data visualizations. Additionally, you'll leverage the Exchange rate API for currency conversion functionalities.Are you ready to unlock the full potential of front-end development while revolutionizing the way we interact with financial data? Join us as we embark on this transformative journey in "10+ Financial Web Apps using HTML, CSS, and JavaScript - Front-End"! Let's code our way to financial innovation together.There is also a complete crash Cours on HTML CSS and JavaScript which should get you up and running if you are completely new to them.If you have any kind of questions pleas ask them and I will get write back to you.With this being sad,I wish you all happy coding!Norbert BM

Overview

Section 1: Introduction

Lecture 1 Introduction

Section 2: General setup

Lecture 2 Section overview

Lecture 3 Course structure

Lecture 4 Required software

Lecture 5 Folder structure & boilerplate

Lecture 6 Course resources and repository

Section 3: World currencies convertor app

Lecture 7 App presentation

Lecture 8 General setup and resources

Lecture 9 HTML markup and basic styles

Lecture 10 Add the World Map SVG using JavaScript

Lecture 11 Simple currencies convertor using JavaScript & exchange rate API

Lecture 12 Get the exchange rate from using the fetch API

Lecture 13 Get all countries from the World map

Lecture 14 Display the selected country's currency and all conversion rates

Lecture 15 Add search functionality to the currency list

Lecture 16 Create CSS components structure

Lecture 17 CSS App variables

Lecture 18 Style the App container

Lecture 19 Style the World Map

Lecture 20 Style the simple currency convertor

Lecture 21 Style the world currencies convertor

Section 4: Tax-Calculator

Lecture 22 App presentation

Lecture 23 General setup and folder structure

Lecture 24 Create the HTML markup

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

Lecture 26 Create `global.css` style

Lecture 27 Create and Style the `form.css` file

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

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

Lecture 30 Validate input and add alert component

Lecture 31 Display standard deduction based on status

Lecture 32 Style and Add the alert component to the DOM

Lecture 33 Display standard deduction based on status

Lecture 34 Calculate the income tax based on the tax brackets

Lecture 35 Style the result component

Lecture 36 Close results and reset all values

Section 5: Retirement Calculator

Lecture 37 App presentation

Lecture 38 General setup and folder structure

Lecture 39 Create the HTML markup

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

Lecture 41 Style the `calculator-container.css` file

Lecture 42 Style global `btn.css` file

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

Lecture 44 Validate each individual input

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

Lecture 46 Handle labels error and success with`handleLabel.js`

Lecture 47 Calculate and display retirement savings

Lecture 48 Get calculated values for the table

Lecture 49 Check for successful calculations of the retirement

Lecture 50 Display and style the table component

Lecture 51 Create and add a new row element

Lecture 52 Clear the input fields and hide the results

Lecture 53 Delete a row from the table

Section 6: Stock-Market-Watch-List

Lecture 54 07-01-App presentation

Lecture 55 07-02-General setup and folder structure

Lecture 56 07-03-Create the HTML markup

Lecture 57 07-04-Create short-news section

Lecture 58 07-05-Create stocks crypto and forex maps section

Lecture 59 07-06-Create detailed analytics section

Lecture 60 07-07-Style the side navigator

Lecture 61 07-08-Toggle maps and detaild chart.mp4

Section 7: Budget Planner App

Lecture 62 App presentation

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

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

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

Lecture 66 Create and styles the `btn.css` components

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

Lecture 68 Create the HTML markup for the budget list

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

Lecture 70 Get DOM elements and create global variables

Lecture 71 Manage the ADD button click event

Lecture 72 Calculate total the budget

Lecture 73 Calculate the total per category

Lecture 74 Create and Style the Alert components

Lecture 75 Update the budget list and add to category

Lecture 76 Remove elements form the budget list

Lecture 77 Edit elements from the budget list

Lecture 78 Save and load data from local storage

Lecture 79 Clear budget list when requested

Section 8: Savings-Goal-Tracker

Lecture 80 App presentation

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

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

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

Lecture 84 Create and styles `form.css`

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

Lecture 86 Create the main app.js file and Get DOM elements

Lecture 87 Calculate and display the goal amount

Lecture 88 Calculate and display current savings

Lecture 89 Calculate and display monthly contribution

Lecture 90 Toggle interest rate input

Lecture 91 Calculate months with interest

Lecture 92 Bars style

Lecture 93 Form group validation

Section 9: Loan calculator

Lecture 94 10-01-App presentation

Lecture 95 10-02-General setup and folder structure (HTML, CSS, JS)

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

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

Lecture 98 10-05-Create and styles `form.css`.

Lecture 99 10-06-Get DOM elements and manipulate input values

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

Lecture 101 10-08-Display and style `results.js`

Lecture 102 10-09-Create and style Pie Chart

Section 10: Investment-Portfolio-Tracker

Lecture 103 11-01-App presentation

Lecture 104 11-02-General setup and folder structure (HTML, CSS, JS)

Lecture 105 11-03-Investment Container HTML Markup

Lecture 106 11-04-Style main App and add CSS variables

Lecture 107 11-05-Style the investment container

Lecture 108 11-06-Create HTML Markup and CSS Style for Adding Stoks

Lecture 109 11-07-Create Portfolio HTML Markup and CSS Style

Lecture 110 11-08-Create and Style the Portfolio analysis section

Lecture 111 11-09-Utility functions showAlert and formatNumbers

Lecture 112 11-10-Add Stocks to LocalStorage

Lecture 113 11-11-Display Stock Portfolio

Lecture 114 11-12-Edit and Delete Stocks from the Portfolio

Lecture 115 11-13-Add investment to list and dinsplay list

Lecture 116 11-14-Edit and Delete investments from the list

Lecture 117 11-15-Analyse Gain Loss Retunr

Lecture 118 11-16-Create and Show Custom Pie Chart

Lecture 119 11-17-Save Investment data to a CSV file

Section 11: Income and Expense tracker app

Lecture 120 12-01-App presentation

Lecture 121 12-02-General setup and folder structure (HTML, CSS, JS)

Lecture 122 12-03-HTML section structure and gerenal CSS style for the app

Lecture 123 12-04-Entries form HTML Markup and CSS Style

Lecture 124 12-05-Summary table HTML Markup and CSS Style

Lecture 125 12-06-Entries List HTML Markup and CSS Style

Lecture 126 12-07-Get DOM Elements and add event-listeners

Lecture 127 12-08-Change the input color when the user selects a type.mp4

Lecture 128 12-09- Add, delete and display antries in the list

Lecture 129 12-10-Display chart entries with colors and percentages

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

Lecture 131 E12-12-Display only icons on Mobile devices

Lecture 132 12-13-Export to HTML and PDF

Section 12: ES6 Modules Explained - Optional

Lecture 133 ES6 Crash course with project

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

Lecture 134 Section overview

Lecture 135 Setup your code space

Lecture 136 Create index.html file and add basic HTML tags

Lecture 137 Add id's classes and props to HTML Tags

Lecture 138 Create style.css

Lecture 139 Create CSS variables

Lecture 140 Style the form

Lecture 141 Style Table Buttons and input

Lecture 142 Create a JavaScript file

Lecture 143 Add event listeners to the input

Lecture 144 Add event listeners to the form

Lecture 145 Create variables and calc the discount

Lecture 146 Change the quant using the buttons

Lecture 147 Handle the form submit

Lecture 148 Calculate the final including the discount

Lecture 149 Out the result to the DOM

Lecture 150 Style the output and result

Lecture 151 Refactor the code

Section 14: Credit score checker app

Lecture 152 App presentation

Lecture 153 General setup and folder structure

Lecture 154 Create the HTML markup

Lecture 155 Create the CSS styles `credit-score` form

Lecture 156 DOM elements module and global variables

Lecture 157 Form submission & validation parameters

Lecture 158 Create a validation module

Lecture 159 Validate input value & type

Lecture 160 Create the alert component module

Lecture 161 Style and add the alert component to the DOM

Lecture 162 Check validation & Show the result (html only)

Lecture 163 Style the result

Lecture 164 Create the `checkCreditScore` function

Lecture 165 Remove the result and recheck the credit score

Lecture 166 Create the responsive design for mobile, tablet and desktop devices

Beginner web developers,Junior web developers