Видео 162
Просмотров 25 801

Creating an Image Slider with Auto-Slide, Dots, and Manual Keyboard Navigation [Project 9]

57:03

Typewriter Effect and Challenge in JavaScript: Expanding Text with Pause Delays [Project 8]

47:55

Rock-Paper-Scissors Game: Final Touches and Debugging in JavaScript [Project 7]

41:57

JavaScript Rock-Paper-Scissors Game: Handling Player Choices and AI Logic [Project 6]

46:45

JavaScript Password Validation: Handling Inputs with Event Listeners [Project 5]

1:02:19

Mouse Move Event and Dynamic Background Color Change - JavaScript Tutorial [Project 4]

39:42

Building a Click Counter, Age Verification, and Timer Using JavaScript Closures [Project 10]

In this video, the project is designed to explain the concept of closures in JavaScript through several practical examples. The project includes the following components:
Click Counter: The first part of the project involves building a simple click counter that increments every time the user clicks on the webpage. Initially, the counter variable is placed in the global scope, and later it’s moved inside a function, demonstrating how closures can solve the problem of variable scope and persistence.
"Beer Permission" Function: This part demonstrates a more complex use of closures by creating a function that checks whether a person is old enough to buy beer. The project showcases how closures ...

Видео

Creating an Image Slider with Auto-Slide, Dots, and Manual Keyboard Navigation [Project 9]

57:03

Creating an Image Slider with Auto-Slide, Dots, and Manual Keyboard Navigation [Project 9]

Просмотров 64День назад

In this project, you're tasked with creating a slider that automatically changes images, text, and indicators, with added functionality allowing users to navigate the slides manually using the arrow keys. Part 1: Setting Up the Automatic Slider You started by defining the slide data, which includes both the image paths and captions. The image paths are dynamically changed in the HTML structure,...

Typewriter Effect and Challenge in JavaScript: Expanding Text with Pause Delays [Project 8]

47:55

Typewriter Effect and Challenge in JavaScript: Expanding Text with Pause Delays [Project 8]

Просмотров 6721 день назад

In Project #8, we dive into creating a typewriter effect using JavaScript that progressively expands text letter by letter, with each word appearing after a slight pause. This tutorial is split into three parts: Part 1: We cover the fundamental setup, building the typewriter effect where the text grows letter by letter. We use setInterval and manage how to stop the process once all text is disp...

Rock-Paper-Scissors Game: Final Touches and Debugging in JavaScript [Project 7]

41:57

Rock-Paper-Scissors Game: Final Touches and Debugging in JavaScript [Project 7]

Просмотров 134Месяц назад

In this tutorial, we finalize our Rock-Paper-Scissors game by adding key finishing touches and resolving minor bugs. We will learn how to reset the game state after each round, ensuring the player's and AI's selections are cleared. This lesson covers how to remove the visual box shadow around the selected choice and reset the internal game variables. We'll also explore how to clean up invisible...

JavaScript Rock-Paper-Scissors Game: Handling Player Choices and AI Logic [Project 6]

46:45

JavaScript Rock-Paper-Scissors Game: Handling Player Choices and AI Logic [Project 6]

Просмотров 90Месяц назад

In this detailed tutorial, we dive into creating a Rock-Paper-Scissors game using JavaScript. You will learn how to manage player choices, handle random selections by the computer (AI), and build the logic for determining game outcomes. We also explore key JavaScript concepts such as addEventListener, handling events with this, random number generation with Math.random(), and the importance of ...

JavaScript Password Validation: Handling Inputs with Event Listeners [Project 5]

1:02:19

JavaScript Password Validation: Handling Inputs with Event Listeners [Project 5]

Просмотров 86Месяц назад

In this video, we dive deep into creating a password validation form using JavaScript. Learn how to handle user input, validate passwords dynamically, and display messages based on correct or incorrect inputs. We'll explore essential concepts like the addEventListener method, event objects, and forEach loops to iterate over arrays. Plus, we’ll explore case insensitivity in password comparisons ...

Mouse Move Event and Dynamic Background Color Change - JavaScript Tutorial [Project 4]

39:42

Mouse Move Event and Dynamic Background Color Change - JavaScript Tutorial [Project 4]

Просмотров 54Месяц назад

In this video, we dive deep into using JavaScript's addEventListener method, specifically focusing on the mouse movement event. We'll learn how to track the mouse position in real-time and dynamically change the background color of the page based on mouse coordinates. Additionally, we introduce the concept of event objects, explaining how to utilize properties like clientX and clientY to create...

JavaScript Dynamic List with Increasing Font Size on Click - Challenge [Project 3]

53:24

JavaScript Dynamic List with Increasing Font Size on Click - Challenge [Project 3]

Просмотров 116Месяц назад

In this video, we tackle a new and exciting challenge where we dynamically create and manipulate list items in JavaScript. Each time we click the "Add 10 List Items" button, 10 new elements are added to the list, with each item having a unique number and an incrementally increasing font size. We explore key concepts like DOM manipulation, event listeners, loops, and more. This is a perfect exer...

JavaScript Scroll Animation Project: Growing and Shrinking Element [Project 2]

56:22

JavaScript Scroll Animation Project: Growing and Shrinking Element [Project 2]

Просмотров 218Месяц назад

In this video, we tackle a unique JavaScript project where a single square dynamically grows and shrinks as you scroll. Watch as we walk through creating an interactive square that expands to half the height of the browser window and then shrinks back to nothing-cycling between growing and shrinking with each scroll. Along the way, you'll learn how to handle scroll events, manipulate DOM elemen...

JavaScript DOM Project: Creating Dynamic Elements with Conditional Styling [Project 1]

1:21:04

JavaScript DOM Project: Creating Dynamic Elements with Conditional Styling [Project 1]

Просмотров 507Месяц назад

The project in the video involves creating a button in HTML that, when clicked, generates new square elements on the screen. Each square has a number displayed inside it, indicating its position. Every fifth square is styled differently, appearing as a white square instead of black. The project focuses on using JavaScript to handle event listeners, dynamically creating elements, and applying co...

JavaScript Course - DOM (10/20) #javascript

1:46:27

JavaScript Course - DOM (10/20) #javascript

Просмотров 4153 месяца назад

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document as a tree of objects, allowing developers to interact with and manipulate the content, structure, and style of web pages dynamically. Key Features of the DOM Tree Structure: The DOM represents an HTML or XML document as a tree structure, where each node is an object representi...

JavaScript Course - hoisting and objects (9/20) #javascript

1:21:31

JavaScript Course - hoisting and objects (9/20) #javascript

Просмотров 403 месяца назад

Objects are a fundamental part of JavaScript, providing a way to group related data and functions together. They are collections of properties, where each property is defined by a key-value pair. Objects are used to model real-world entities, manage data, and structure code in a more organized and modular way. Characteristics of Objects Key-Value Pairs: Objects are made up of properties, which ...

JavaScript Course - functions (8/20) #javascript

2:04:26

JavaScript Course - functions (8/20) #javascript

Просмотров 323 месяца назад

Functions are one of the core components of JavaScript, enabling developers to write reusable, organized, and modular code. A function is a block of code designed to perform a specific task, which can be invoked or called whenever necessary. Understanding functions is essential for mastering JavaScript and building efficient and effective applications. Types of Functions Function Declarations: ...

JavaScript Course - loops (7/20) #javascript

1:14:20

JavaScript Course - loops (7/20) #javascript

Просмотров 613 месяца назад

Loops are fundamental control structures in programming that allow you to execute a block of code multiple times. In JavaScript, loops are essential for tasks such as iterating over arrays, performing repetitive operations, and managing asynchronous processes. Here, we’ll explore the different types of loops available in JavaScript and their common use cases. 1. for Loop The for loop is the mos...

JavaScript Course - arrays (6/20) #javascript

1:58:14

JavaScript Course - arrays (6/20) #javascript

Просмотров 954 месяца назад

Arrays in JavaScript are a type of data structure that allows you to store multiple values in a single variable. These values can be of any type, including numbers, strings, objects, or even other arrays. Arrays are particularly useful for managing lists of items and performing operations on collections of data. Key Features of Arrays: Indexed Collection: Each element in an array is assigned a ...