Hands-On JavaScript, Crafting 10 Projects from Scratch

Build a calculator app using HTML, CSS, and JavaScript with inputs for principal amount, interest rate, and tenure to compute and display the maturity amount.

Build a dynamic password generator using HTML, CSS, and JavaScript, with configurable length and checkboxes for lowercase, uppercase, numbers, and symbols, plus a live preview.

Style the password generator css in style.css by configuring the body font, white card container, centered h1, and a password field with a styled generate button and hover state.

This lecture demonstrates building a JavaScript password generator by selecting character sets (lowercase, uppercase, numbers, symbols), wiring the generate button, and creating a random password of a chosen length.

Build a vowel checker in HTML with a text area, heading, button, and a result paragraph to count vowels in a given string; set up index.html, style.css, and script.js.

Learn to style a vowel checker app with CSS. Set body font to Arial and center content with flex; style the header, textarea, button, and result with hover effects.

Build a JavaScript vowel checker in the verbal checker app by wiring script.js to read input, define is-vowel, lowercase text, count vowels with a loop, and show the result.

Create an age calculator web app using HTML and a date input to select birth date, then click calculate to view the age result with CSS styling.

Learn styling the age calculator with CSS, centering the calculator, applying rgb colors, sizing and typography, adding input date and button hover effects, and introducing JavaScript code.

Build a JavaScript age calculator by reading the date of birth from inputs, computing age with a date object and getTime, and displaying the result on button click.

Build a browser-based tip calculator using HTML, CSS, and JavaScript in a web project, wiring inputs for bill amount and tip percent to compute tip and total amounts.

Style the tip calculator CSS by building a centered white card, applying Aria font, shadows, borders, and responsive spacing for inputs, button, and results.

Create a JavaScript tip calculator by accessing inputs with getElementById, computing tip and total amounts, and displaying results in spans with toFixed two decimals.

Build a from-scratch to-do list app in HTML with a container, input for new tasks, and an add button controlled by JavaScript. Structure the project with index.html, script.js, and style.css.

Apply css to the todo list app using style.css, styling body with Arial and a light gray background and the container with white background, with h1, input, and button styling.

Build a simple todo list with JavaScript by fetching DOM IDs, creating todo items and a delete button, validating input, and styling the list with CSS.

Build a digital clock app with JavaScript using HTML and CSS, creating a card layout, a clock container with five time spans and colons, and styling from scratch.

Master CSS styling for a digital clock UI by configuring the container, body, card, and clock elements with flex, centering, colors, borders, and typography.

Implement a digital clock in JavaScript by updating hours, minutes, and seconds every second via setInterval, retrieving time from a date object, and rendering two-digit values in the DOM.

Build an expense tracker app in html, css, and javascript featuring an expense header, add expense button, dynamic expense list, and a live total expense display.

Style the expense tracker with a light gray body and chosen fonts. Use flex to align the header, style the add button, and align the total expenses.

Explore building an expense tracker in JavaScript by binding the UI with query selectors, rendering expenses, updating the total, and handling add and delete actions via event listeners.

Build a popover in an HTML project by wiring a button to show and hide a popover with a title and text, and apply shared CSS styles.

Center the content with flex on the body, then style a popover with absolute positioning, 250px width, 10px padding, 10px border radius, white background, and a shadow.

Wire up the popover project with script.js by using getElementById to fetch the button and popover, then add click listeners and toggle the popover’s active class to show and hide.