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

Set up the course by installing required software, creating the repository with boilerplate, and outlining the structure and folder layout for your first HTML CSS and JS financial web apps.

Describe the course structure, with 11 sections and ten apps, plus optional ES6 and crash course modules. Access GitHub source code and boilerplate starter files for every app.

install Visual Studio Code as the required editor, download the correct OS version, and set up the workspace. use essential extensions, live server, and optional git and node tools.

Learn folder structure and boilerplate setup for HTML, CSS, and JS apps by building apps/ boilerplate with index.html, style.css, script.js, and src folders; include readme and git ignore basics.

Access the course resources by cloning or downloading the dedicated GitHub repository, explore the boilerplate and markdown notes, and learn git basics like add, commit, and push.

Explore a currency converter app built with html, css, and javascript. Uses a live api for real-time conversions and country selections showing euro, usd, and cad rates.

Create a currency converter UI in index.html with an amount input, from and to currency selects, and a result area. Add a world map placeholder and basic flex styling.

Inject a world map SVG into your app with a JavaScript file that uses a template literal and innerHTML, loaded from a scripts folder.

Build a simple currency converter in JavaScript using an exchange rate API, wiring up the UI with DOM elements, a convert button, input validation, and numeric conversion to display results.

Learn to pull all countries from a world map SVG, select a country on click, and map it to its currency for display in a live currency converter.

Display the selected country's currency and all conversion rates by fetching data from an exchange rate API, handling the currency code, and rendering a dynamic list.

Create a modular css structure by adding a variables file and component css files (currency converter, currency header, world map) and importing them into a main style file.

Learn to define and use CSS variables, naming conventions, and color presets like primary and secondary colors, with practical examples using var(--name) for app containers and opacity with rgba.

Style the app container by using a responsive grid with 1fr and 2fr columns, adjust colors and borders, and apply input styling, nesting, and a 768px media query.

Style the world map paths by setting height, colors, margins, padding, and text alignment; implement hover states and a selected class with currency color before styling the currency converter.

Learn to style the simple currency converter with flex layouts, themed colors, and accessible controls; implement a full-width action button, responsive form groups, and a scale-up show animation for results.

Style the world currencies convertor demonstrates flex header layout, margins and colors, a scrollable conversion list with webkit scrollbar, and hover plus fade animations for currency items.

learn to build a responsive income tax calculator with HTML, CSS, and JavaScript that computes tax by income and filing status, updates standard deductions automatically, and animates results.

Copy the boilerplate, rename and organize folders for the income tax calculator, and set the title and index. Rename the script folder to modules and create the app module.

Create the HTML markup for a tax calculator in index.html. Build a div-based form with an income input, status select, and a calculate button that updates a result area.

Create a variables.css with primary, secondary, light colors, a results background, and an alert color, then import it into style.css for global styles, a border radius, and box shadow.

Create a global.css file and import it to style a centered, responsive single-page app. Apply variables, body flex layout, app container, and button defaults.

Create and style the form by adding a dedicated form.css, applying flex column layout, color variables, borders, shadows, input and label styling, and focus interactions.

Create the main app.js and a get dom elements module using destructuring to export and import global dom references like income, status, calculate button, text amount, results, and standard deduction.

Learn to validate user input with an if-else check for numeric values and display a reusable alert component with Font Awesome icons, using DOM manipulation, timeouts, and modular JS.

Learn to compute and display the standard deduction for filing statuses (single, married, head of household) using a JS object, template literals, and dynamic status updates.

Style the alert by creating alert.css, import it, and apply a show class to display it in the DOM, then add a shake animation via animations.css with defined keyframes.

Create a standard deduction object for single, married, and head of household, and display the amount using template literals with the selected status.

Calculate income tax using tax brackets (single, married, head of household) in a front-end web app by loading brackets from data.json, applying standard deductions, and computing tax with bracket rates.

Style the results component by importing result.css and configuring the result class with background color, border radius, sizing, text shadows, and slide and grow animations, plus a right-aligned reset button.

Create a close results button component in JavaScript that clears inputs, resets status to single, updates standard deduction and text amount displays, hides results, and refocuses the input.

Learn how to start a new project by importing boilerplate, renaming folders to utilities, organizing scripts, configuring the index file, and launching a live server for a retirement calculator app.

Define global styles with variables.css and global.css, set up color tokens (accept, success, danger), imports, responsive flex layouts, and basic UI tweaks for desktop and mobile.

Create and import calculator-container.css, style four form groups with labels and inputs, and implement a column-reverse layout, focus-based label color, and responsive sizing for the calculator container and results.

Create a global btn.css for all buttons and a specific style for the calculate button, importing it and applying inherited fonts, white text, padding, hover transitions, and two-column grid.

Validate each individual input in a financial web app by validating age, retirement age, monthly savings (0-10,000), and annual interest rate (0-100) with alerts and dynamic label focus.

Create and style an alert component with alert.css and showAlert.js, including danger and success variants with color variables. Integrate the alert into the retirement calculation path to display timed messages.

Export and use two functions from handle labels.js to show error and success states on form labels, changing colors from blue to cyan, red, and green as validation occurs.

Calculate and display retirement savings by computing years until retirement, monthly interest, total months, and future value, then render the result with dollar formatting on the page.

Wire the add button to an addRow function to insert a new row with input values and the retirement result into the table body. Validate fields are complete before calculating.

Validate all fields before calculation, display results by toggling the show-results class, and log outcomes to the console. Then clear inputs and show the table with CSS animation.

Learn how to display and style the table component by toggling the table body, wiring the add button with validation, and applying animations and responsive CSS for a polished UI.

Create and insert a new table row from input values (age, retirement, monthly savings, interest rate, result) into the table body, with delete controls and row styling.

Learn to reset the form after adding rows by clearing all inputs, clearing results, and resetting labels, while removing error and success states to prepare for a new calculation.

Delete a row from a dynamic table by wiring a delete button to a delete row function, confirming the action, and updating the table body and ui states.

Build a feature-packed stock market watch list app with heat maps, sectors, stocks, crypto, and forex data. Analyze with configurable charts, RSI indicators, and analytics across markets.

Set up a boilerplate and folder structure for a stock market watcher HTML web app, consolidating to one script and one style file while integrating free widgets from grading viewer.

Create and structure the HTML markup with semantic sections, a navigation system, and two main views—maps and chart and detailed-chart—using a sticky header and Font Awesome icons.

Create a sticky top short news section using a ticker tape widget, customize symbols and theme, and configure embedded code to display financial data in a front-end web app.

Learn to build a three-map section for stocks, crypto, and forex by embedding TradingView widgets in HTML, styling with CSS, and toggling display with a show class.

Build a detailed analytics section in a financial web app by configuring widgets, indicators, charts, time zones, and navigation with customizable stocks and snapshots.

Style the side navigator with fixed position, left zero, and top offset, using 120px grid layout; add a toggle with show class, hover and active states, and JavaScript tab control.

Plan your finances with a budget planner by adding income and category-based expenses, viewing totals, and editing items, while saving and loading data from local storage.

Begin with a boilerplate, define a two-section layout (header and budget list), use a single script file, and plan future module refactoring with local storage and alerts.

Construct the HTML markup for the app container, header, and inputs container, including a category select, load and save actions, name and amount inputs, add button, and a total display.

Create a variables.css with color tokens, import them into main.css, and style app-container.css to center the layout, apply main and secondary colors, and design the title and total badge.

Create and style the btn.css components by defining a main btn class that inherits the font, sets colors, borders, and hover and active effects, including clear, edit, and delete variants.

Learn to style the header and inputs sections by building header-container.css and inputs-container.css, using grid and flex layouts, typography, spacing, and cross-browser input enhancements for a polished front-end UI.

Create and style the budget list in HTML, including a header with a title and clear button, and a nested unordered list for income categories.

Create and style budget-list-header.css and budget-list-container.css to build a responsive budget list with header styling, 100% width, scrollable data area, and hover interactions using CSS variables.

Select DOM elements using document.querySelector and element IDs, then establish global variables for budget data and total. Create an alert component with document.createElement and initialize the budget array and total.

Learn to manage the add button click by reading name, amount, and category, validating inputs, creating a budget item, updating the budget list, calculating the total, and resetting the form.

Create a calculate total per category function that uses a switch to sum each budget category, including income and expenses, and update the dom with the totals.

Create and style alert components to show validation messages in a front-end web app, wiring up show alert functionality and color variants for success, warning, danger, and more.

Update the budget list and add items to categories using front-end JavaScript. Build rendering functions with document.createElement and innerHTML, and enable edit or remove actions.

Implement a remove item function for the budget list that uses the index, confirms deletion, splices the item, then recalculates total and updates the list.

Edit items in the budget list by selecting an item, updating its name, amount, and category, and re-calculating totals, with alerts, button updates, focus management, and local storage later.

Save and load budget data in local storage using JSON.stringify and JSON.parse, triggered on page load and via save and load buttons, updating the budget list and displaying success alerts.

Learn to implement a clear budget list feature with a confirmation prompt, reset the budget list array, recalculate the total, and show a success alert via a button click.

Add auto save and export options for the budget planner app, including save as excel, csv, and json. Implement interval auto save and load functionality with HTML, CSS, and JavaScript.

Learn to save budget data as json by stringifying data and downloading a json file, then load new json files to update totals.

Track savings goals with real-time updates on current savings, monthly contributions, and time to reach the goal, while learning how disabled fields guide user input and recalculate with interest.

Set up a front-end project from boilerplate, switch scripts to modules, and scaffold a savings tracker app with a main module, form groups, and live server testing.

Create the html markup for the app container and parameters form, with labeled number inputs for goal amount, current savings, monthly contribution, interest rate, and disabled fields.

Create and import a variables.css with main color schemes, style the app-container.css with a centered 450px column layout, and implement a form group and disabled input behavior for alerts.

Create and style a parameters form using form.css, center a 400px panel with main color background, white text, padding, and border radius. Style form groups, labels, and number inputs.

Create a ul with class goal-list containing four list items for financial goals, then import goal-list.css to style the container and enable bar visuals with JavaScript.

Learn to build a dom elements module that exports a Dom elements function to grab key elements by ID and via querySelector, then import and destructure them in app.js.

Export a calc goal function that takes goal amount and current savings, triggering updates on input changes. Display the calculated amount in a styled bar and auto-focus the next input.

Compute the current savings against the goal amount, calculate the remaining balance, and render dynamic progress bars with grid-based columns that update on input changes.

Calculate monthly contributions toward a savings goal, considering current savings and goal amount, by computing months to reach the goal, updating on input changes, and integrating an interest rate field.

Create animated CSS bars for a financial UI by building bars.css, importing it, and styling bar elements for full width and centered content with a 0–100% width animation.

Develop form group validation in JavaScript by iterating form groups, showing a 'previous input is required' message in a small tag for disabled inputs, and clearing it after 3 seconds.

Build a loan calculator web app using HTML, CSS, and JavaScript to track savings, calculate monthly payments and total interest, and visualize results with an API-powered pie chart.

Set up a module-based loan calculator project by organizing the folder structure, configuring app.js and index as modules, and building a form with number inputs, sliders, and a two-value chart.

Create the HTML markup for a loan conditions form inside .app-container, including number and range inputs, IDs, placeholders, a results section, and a chart canvas for real-time updates.

Create and import CSS variables in variables.css to define main, background, and accent colors, then style the app container with a responsive grid, borders, and shadows in app-container.css.

Create and style a form using form.css, customizing range inputs and sliders with CSS variables, borders, padding, and placeholder color; implement flex layout and form groups before adding JavaScript.

Learn to grab dom elements and select all number and range inputs with querySelectorAll, attach input listeners, and synchronize their values for dynamic range and numeric inputs.

Develop a calculateLoan.js module that reads loan amount, interest rate, and term from the document object model, computes monthly payment, total payment, and total interest, and formats results.

Create and style a results panel with results.css, using flex layout, borders, padding, and box shadows; customize monthly payment and interest rate blocks with css variables and cascading colors.

Create and style a pie chart (donut) using Chart.js in a front-end web app. Extract loan amount and total interest, then configure labeled data and CSS styling.

Explore building a web investment portfolio app with HTML, CSS, and JavaScript that lets you add, track, edit, and delete investments, view returns and value, and export data to CSV.

Copy the boilerplate, rename the folder for the investment portfolio and tracker, and set up html, css, and js for a form, list, and table with a chart without chart.js.

Learn to build an investment container markup with a form for amount and date, a results section with csv export, and a list of investments including edit and delete actions.

Create a variables.css with root color values for primary, secondary, accept, background, and text, plus a box shadow, then apply them to the main app container, inputs, and buttons.

Apply css styling to the investment container using grid and flex, configuring responsive two-column to single-column layouts with a 20px gap, header alignment, and scrollable results list with hover effects.

Create the add stock form markup and css to capture stock symbol, name, shares, buy-in price, and current price, with a full-width submit button and grid styling in add-stock.css.

Build a portfolio section with a nine-column stocks table (symbol, name, shares, buy-in, current price, value, return, gain/loss, actions) and responsive, scrollable styling for the portfolio container.

Create and style a portfolio analysis section that tracks investments and cash, provides gain/loss and returns report, and renders a pie chart with a legend using HTML, CSS, and JavaScript.

Develop and use utility functions showAlert and formatNumbers to create alerts of various types and format numbers with separators, including auto dismissal and fade animations.

Add stocks to a portfolio using a form, store and update data in localStorage, handle validations, and show alerts for stock addition or existing entries.

Display the stock portfolio by rendering added stocks in a dynamic table, support multiple stocks, compute current value and gain or loss, and persist data in local storage.

Implement edit and delete stock functions for the portfolio, match by symbol, update fields from the DOM, filter the portfolio, save to local storage, and refresh the display.

Create a dynamic investment list stored in local storage and displayed on page load. Add investments, update the total invested, and render each item with edit and delete controls.

Learn to edit and delete investments in a list with confirmations, index tracking, and local storage updates, including updating the display and handling edit and delete actions.

Analyze portfolio performance with a pie chart, computing free cash, total invested, portfolio value, gain/loss, and total return, then update the UI on button click.

Create and render a pie chart in JavaScript from total investment and portfolio value, with color-coded slices, a legend, and canvas arcs.

Save investment data from local storage to a csv file by mapping each investment's date and amount into csv lines, creating a blob, and triggering a download named best months.csv.