Javascript Programming Course Build 100 Projects in 100 Days

Develop a newsletter pop-up application triggered by a subscribers button, featuring a close cross, and learn to integrate a Font Awesome icon by linking its CSS in the HTML portion.

Create a newsletter pop-up in HTML with a subscribe button, hidden modal, and a cross icon powered by fontawesome. Link index.html, style.css, and script.js and integrate fontawesome via cdnjs.

Create a newsletter pop-up by implementing the ToggleNewsletter function in script.js, using document.getElementById('newsletter') and classList.toggle('active') to show and hide the popup.

Build a css changer app by linking style.css and script.js to index.html, run via go live server, and control color, width, border radius, padding, and blur on image with sliders.

Configure the CSS part of the project by editing style.css, resetting browser defaults, defining variables, building a centered layout, and styling color inputs and range sliders with gradients and shadows.

Build a css changer app with JavaScript by selecting inputs, listening for changes, and updating CSS variables on the root to adjust width, border radius, padding, and blur.

Preview a counter application where the circular display turns green on the increase button and red when negative, shows a shadow at zero, with a black theme and white text.

Create a counter web application by structuring HTML with a container, card, heading, counter display, and a button group for decrease and increase, starting from zero.

Style the counter web app with a gradient, centered card, and rounded counter display, and apply button styles with positive and negative color cues for later JavaScript logic.

Implement a JavaScript counter web app using an IIFE in script.js, select buttons with querySelectorAll, and update the counter displayed in a counter machine element with dynamic border color feedback.

Build a live character count app in html and javascript, counting spaces as you type. Implement layout, textarea sizing, and a functional length calculation in the update flow.

Create a container with an h2 and a textarea with a write your text here placeholder; set up a keyup event to update the characters typed, shown in a span.

Learn to style a live character count app with css, linking style.css and script.js in index.html, centering content and styling the container, text area, placeholder, and a blue counter.

Build a live character count feature in JavaScript by updating a counter element as you type in a text area using a function, querySelector, and innerText.

Demonstrates building a JavaScript random number generator, updating a paragraph on button click, with hover transitions and a zero reset on refresh, starting from the HTML part.

Build a web based random number generator using html, css. Create a container with a heading, a generate button, and a result display in index.html with linked style.css and script.js.

Style the random number generator project with CSS by centering content, building a white rounded container, adding shadows, hover effects, transitions, and a fade-in paragraph.

Learn to build a JavaScript random number generator by linking script.js to index.html, creating a generate random number function using Math.random and Math.floor, and updating the result.

Build the write a message application and implement a submit button that shows 'please enter a message' and 'your message is delivered', appending input to a paragraph.

Build a write a message HTML project by creating a container, heading, form with input and submit button, and two paragraphs for invalid and message content.

Learn to style a write a message app with CSS, including reset and flex centering, a white container, colored heading, and visible invalid and success messages.

Build a write-a-message app in JavaScript by creating showMessageContent and showInvalidMessage, validating input, and handling form submission with DOM updates and timed message display.

Build the code editor project as the module’s version with HTML, CSS, and JavaScript panels and a live output area, including a love calculator demo and CDNJS Font Awesome icons.

Create a code editor HTML project by establishing index.html, slide.css, and script.js, wiring font awesome icons, and implementing left panes for HTML, CSS, and JavaScript with a right output pane.

We'll style a code editor project UI in CSS: reset defaults, apply a gradient background, build a two-pane container, and style text areas and an iframe.

Build a JavaScript code editor project that links script.js to index.html, captures HTML, CSS, and JS inputs, and live-updates an iframe output using contentDocument and eval.

Preview of the day of the week project in JavaScript, using the date function to display Sunday and a simple message.

Build the day-of-week HTML project by creating a hidden container, an h1 for today's message, and spans with IDs to display weekday and quote updated by JavaScript.

Reset browser defaults, center content with flex, and style h1, weekday, and quote in the day of the week project using specified colors, font family, and sizes.

Create a day of the week project in JavaScript using the date object, switch-case, and DOM updates to display the weekday and a quote.

Build a stopwatch app with a card-like interface and hover animation on the start button; update seconds display after 100 ms, and support stop, reset, and resume, starting with HTML.

Build HTML for a stopwatch by linking style.css and script.js to index.html, create a container with a stopwatch heading, seconds and milliseconds spans, and start, stop, reset buttons.

Style the stopwatch css with a centered flex layout, gradient background, and capsule timer design. Prepare the start, stop, and reset button styles for JavaScript functionality next.

Build a JavaScript stopwatch timer by wiring DOM elements, starting with onload setup, querying elements, and using setInterval to update milliseconds and seconds with start, stop, and reset controls.