Project-Based JavaScript: Build 10 Professional Applications

Learn to craft the language translator app interface by building complete css styling with Google fonts, responsive containers, text inputs, text areas, icons, and Chrome scrollbar customization.

Master the HTML SVG symbol element and the use element to build reusable graphics, using viewbox and path commands to render icons like pause, play, and volume.

Master css styling for a video player, including buttons, hover effects, and a full screen control. Learn range slider customization, focus handling, svg sizing, and preparation for javascript integration.

Build an interactive video player progress bar with a hover tooltip showing the timestamp, and a skip ahead function that jumps to the chosen time.

Add a toggle mute function to mute and unmute the video via the volume icon, use an event listener for clicks, and store the previous volume for restoration.

Style the currency exchange app with CSS, setting a root primary color and a centered flex column layout, and implement currency inputs, swap button, and rate display with focus-ready controls.

Explore the calculate function in the currency exchange app, fetch rate data from an API, and compute the amount in currency two by applying the retrieved rate to currency one.

Build the expense tracker UI in JavaScript by structuring HTML with a balance display, income and expense sections, a history list with delete buttons, and a form to add transactions.

Code the update values function to compute balance, income, and expenses from the transactions array using map, filter, and reduce, then update the user interface with innerHTML.

Build a simple drawing app with HTML, CSS, and JavaScript, featuring an 800 by 400 canvas and a toolbox for pen size, color, and clear screen.

Implement canvas drawing with mouse down, move, and up listeners, track x and y coordinates, and draw circles and lines using dedicated draw circle and draw line functions.

Draw a circle on the canvas by coding a function that uses x and y, a radius, an arc from 0 to 2π, and fill color using the drawing context.

Build a JavaScript drawing app that starts with a 25 px brush in black, supports drawing, tools (circle, line, rectangle), brush size 5 to 50, and CLS to clear.

Learn to build a scientific calculator app by incrementally creating HTML rows, adding exponential, square root, cosine, tangent, and other operators, validating input, and wiring with script.js.

Develop a working scientific calculator in javascript by wiring input handling and implementing cosine, sine, tangent, sqrt, log, and exp functions, with backspace, clear, and enter to evaluate.

Set up a three-file music player project (layout.html, style.css, logic.js), build the now playing layout with track art, track name, and track artist, and apply flex CSS and font awesome.

Generate a random background color for the HTML document using JavaScript, computing RGB values with Math.random and Math.floor in the 64–256 range, and apply it to the page background.

Build a text to speech converter in JavaScript by creating the HTML structure, including a text area, voice selector, and convert to speech button, for a responsive user interface.

Style a text to speech converter in JavaScript by building a polished style.css with a responsive wrapper, header, form, text area, select, and button using the Poppins font.

Learn to build a text-to-speech converter in JavaScript by entering text, selecting a voice from a list of English options, and clicking convert to speech.