100 Days of JavaScript

set up your JavaScript environment with visual studio code, node, and essential tools, and verify installations to get started in 100 days of JavaScript.

Learn to use the project template to scaffold all projects, with a skeleton index.html, css variables, fonts, and a reusable container, opened via code and tested with live server.

Copy and rename the template folder to create a new project, such as a quiz app, then open it in Visual Studio Code while preserving the original template.

In 100 days of JavaScript, build a simple counter with add and subtract buttons; negative turns orange, zero becomes white, and positive numbers turn yellow.

Build a JavaScript counter app by wiring up DOM elements, handling add, subtract, and reset actions, and using event delegation to manage clicks with a single listener.

Add the add, subtract, and reset classes to the icon buttons in index.html so clicking icons updates the counter. Save to see the icons work as the count updates.

Stay consistent in the 100 days of JavaScript by sharing your progress with the community. Posting updates on Twitter and receiving feedback keeps you motivated while building projects.

Duplicate the counter up templates to build a random number generator, adjust the heading to generate, remove add and subtract buttons, and keep the existing styles.

Learn to generate random numbers in JavaScript with Math.random, explain zero-to-one behavior, scale to one-to-ten with Math.floor and plus one, and update the DOM on a click event.

Develop a random hex color generator by adapting the previous random number logic, update the user interface with a generate button and color display, and apply basic css styling.

Generate a random hex color in JavaScript by converting a random number to base 16, taking six digits, applying it as the background on button click, and show the code.

Create a simple modal popup using JavaScript with a slide-down animation, closable by clicking outside or the X, and triggered by a button.

Use JavaScript to control a modal popup by selecting elements, wiring click events for open and close actions, preventing default form submission, and toggling display with a slide animation.

Learn to implement a slide-up animation for closing a modal in JavaScript by defining a slide-up keyframes class, applying it to modal content, and hiding after the animation.

Learn to build a palindrome checker using markup; define palindrome and test words like madam, set up an input, a check button, and a results area, with JavaScript next.

Build a JavaScript palindrome checker by reading input, computing the word length, extracting start and end substrings, converting to lowercase, and reversing the end to compare.

Learn to build a vowel counter app by modifying the palindrome project, counting vowels in words or sentences after lowercasing, using a loop and regex, with results via template literals.

Build a simple click-to-copy input with a bootstrap form, a copy button that copies the input value and reverts after three seconds.

Learn how to implement a click-to-copy feature in JavaScript by selecting text with setSelectionRange, preventing form submission, wiring an event listener, and giving user feedback via button text and timeout.

update the project by replacing deprecated execCommand with the Clipboard API to copy text via navigator.clipboard.writeText, handling its asynchronous promise, and updating the button label after 3 seconds.

Learn how to build a Google Drive direct download link generator using HTML markup, with a tabbed interface, embed codes, and direct links for Drive files.

Build a Google Drive download link generator in JavaScript using replace logic and embed techniques. Validate Google Drive links, enable copying to clipboard, and wire interactive UI with event listeners.

Update the project to replace the deprecated execCommand with the clipboard API, using navigator.clipboard.writeText on target.value, handling the promise and confirming the link is copied.