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

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 تومان
    بیش از یک محصول به صورت دانلودی میخواهید؟ محصول را به سبد خرید اضافه کنید.
    افزودن به سبد خرید
    خرید دانلودی فوری

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

    ایمیل شما:
    تولید کننده:
    شناسه: 37113
    حجم: 9780 مگابایت
    مدت زمان: 926 دقیقه
    تاریخ انتشار: ۲۶ اردیبهشت ۱۴۰۳
    طراحی سایت و خدمات سئو

    139,000 تومان
    افزودن به سبد خرید