Mini Lessons

Sign in Subscribe

Naresh Devineni

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

The need for defining custom functions in Javascript

The need for defining custom functions in Javascript

Before you start reading this lesson, I want you to read the Function 101 lesson as a refresher. Anyway, from the beginning of this course, we performed a lot of small tasks. And while performing these small tasks using javascript, we learned: 1. How to change an image by changing

How to change CSS styles using javascript

How to change CSS styles using javascript

When we start working with real-world projects, sometimes, we need to change the CSS styles using Javascript. The most common task is hiding or revealing some HTML elements. So, in this lesson, we will learn: 1. How to reveal the modal using Javascript. 2. How to change the background color

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

It is time to build some simple components

It is time to build some simple components

There is still a long way to go in terms of gaining rock-solid Javascript foundations. We need to still learn foundational Javascript concepts like: 1. Event listeners and event handling 2. Custom functions 3. If/Else conditional statement 4. Loops 5. Math operations 6. Advanced Arrays 7. Timer functions 8.

One task, multiple solutions

One task, multiple solutions

In Javascript, it is very common to achieve a task in multiple ways. For example, in the last lesson, on the body tag, we have replaced the no-js class with js class by using the add and remove methods of the classList object. <body class="no-js page-template-home-page"