Mini Lessons

Sign in Subscribe

Building Simple components

Exercise: Close the modal

Exercise: Close the modal

In the last lesson, we were able to successfully reveal the modal when the "Unlock your surprise" button is clicked. But there is one problem with this modal functionality. If you notice the modal, there is a "close" button. But when we click on it, the

Event Listeners and event handlers in Javascript

Event Listeners and event handlers in Javascript

In programming, event listening simply means waiting for something to happen so that we can do something. For example, we want to listen to the "click" events on the "Unlock your surprise" button so that we can reveal the modal with a discount coupon. And a

Introducing events in Javascript

Introducing events in Javascript

Here is our progress so far with the "Discount modal" project. When we click on the "Unlock your surprise" button, nothing happens. Ideally, when we click on it, the modal should pop up: 0:00/1× To get closer to our goal, in the last lesson,

How to create a custom function in javascript

How to create a custom function in javascript

Come on, open up the Project: Discount Modal folder from the last lesson in the code editor. Currently, the index.js file contains individual lines of code that reveal the modal: //Step 1: Select the Discount Modal element let discountModal = document.querySelector("#surprise-discount-modal"); //Step 2: Change the display

Project: Discount Modal

Project: Discount Modal

Starting from this lesson, we will learn how to create a modal component in Javascript from scratch. 0:00 /0:06 1× This project will span several lessons and along the way, you'll learn essential concepts of Javascript such as: 1. How javascript depends on HTML and CSS