Learn JavaScript Lessons

Welcome to the course! (old)

Welcome to the course

Let's build a passenger counter app!

Setting up our JavaScript file

Write your first JavaScript variable

Basic mathematical operations

Frontend Career Path

Reassigning and incrementing

Adding a button

The onclick event listener

Using functions to write less code

Write your first function

Write a function that logs the sum

Write a function that increments

Increment on clicks

Display the count

The Document Object Model

Display the count with innerText

Create the save button

What is a string?

Write your first string variable

Log a greeting to the console

Strings vs. Numbers

Render a welcome message

Improve the message with string concatenation

Use plus equal for count

Create the save feature

Debugging online

Set the count to 0

Personalize and Download Your App

Deploy with Netlify

Congrats & recap

Learning in public

AI challenges - beta launch

Variables practice

Concatenate two strings in a function

Incrementing and decrementing

Strings and numbers

Rendering an error message

Calculator challenge

Why are Solo Projects important?

Solo Project (PRO) - Basketball Scoreboard

Get a code review!

Want to become a Scrimbassador?

Setting Up a Local Dev Environment

Getting Started with GitHub Desktop

Edit with VS Code and Push to GitHub

Deploy and Share Your Solo Project

Let's build a Blackjack game!

Add the firstCard, secondCard, and sum

If...else conditionals

Your first if...else statement

if/else...if/else statement

The if...else statement for our game

Aside: Booleans

Add the hasBlackJack variable

Add the isAlive variable

Let's practice boolean conditions

Add the message variable

Link to stylesheet

Add basic styling

Make the start button work

Display the message

Display the sum

Display the cards

New card button

Add to the sum when newCard is clicked

Rename the startGame function

Solving our cards problem with an array

Aside: Intro to arrays

Aside: Array indexes

Arrays with multiple data types

Aside: Array.push() and .pop()

Creating the cards array

Push a new card to the array

Aside: Loops

Write your first loop

Aside: For loops and arrays

Write your first array-based for loop

For loops, arrays, and DOM

Use a loop to render cards

How can we avoid to hard-code card values?

Aside: Returning values in functions

Use a function to set the card values

Aside: Math.random()

Math.random() * 6

Flooring the number with Math.floor()

Using Math.random() and Math.floor() to create a dice

Completing our dice function

Make getRandomCard() work

Complete getRandomNumber function

Assign values in the startGame function

Our new card feature is broken

Aside: The AND operator (&&)

Write your first logical operator

Aside: The OR operator (||)

Only trigger newCard() if you're allowed to

Object sneak peek

Aside: Intro to objects

Create your first object

Use an object to store player data

Methods on object

Congrats & recap

Objects and functions

if else

Loops and arrays

push, pop, unshift, shift challenge

Logical operators

Rock papers scissors

EmojiFighter

Sorting fruits

Solo Project (PRO) - Password Generator

Build exclusive Solo Projects

Let's build a Chrome Extension!

Add button and input tag

Style the button and input tag

Make the input button work with onclick

Refactor to addEventListener

Write your first addEventListener()

Your turn to refactor

Create the myLeads array and inputEl

When to use let and const

Push to the myLeads array

Push the value from the input field

Use a for loop to log out leads

Create the unordered list

Render the leads in the unordered list

How to render <li> elements with innerHTML

Write your first innerHTML

More innerHTML practice

Render the <li> elements with innerHTML

Use createElement() and append() instead of innerHTML

Improving the performance of our app

Create the render function

Clear the input field

Add the <a> tag

Template strings

Write your first template string

Make the template string even more dynamic

Template strings on multiple lines

Refactor the app to use a template string

Style the list

Preparing the deployment

Deploying the Chrome Extension

What is localStorage?

Your first localStorage

Storing arrays in localStorage

Save the leads to localStorage

Get the leads from localStorage

Truthy and falsy values

Guess the expression - truthy or falsy?

Checking localStorage before rendering

Style the delete button

Make the delete button work

How function parameters can improve our code

Write your first function parameter

Functions with multiple parameters

Numbers as function parameters

Aside: Arguments vs Parameters

Arrays as parameters

Refactor renderLeads() to use a parameter

Create the tabBtn

Save the tab url

How to get the current tab?

Use the Chrome API to get the tab

Deploy the final version

Congrats & recap

let & const

Log out items in an array

save to localStorage

addEventListener and object in array

Generate sentence

Render images

Rounding numbers

Convert string to number challenge

Solo Project (PRO) - Unit converter

Let's Build a Mobile App!

Create new Firebase Project

Create new Firebase Realtime Database

Set up Database Environment Variable

Delete unneeded code

Aside: Push data to Firebase Realtime Database

Push a lead to Firebase Realtime Database

Aside: Get a snapshot of data using onValue

Console log data inside of onValue

Aside: Turn an Object into an Array

Render all items using onValue

Aside: Delete all data using remove

Delete all leads using remove

Add label, placeholder and max-width

Aside: Setting the viewport

Adding viewport with meta tag

Aside: Favicon

Adding favicon and phone icons

Aside: Web Application Manifest

Turning the web app into "mobile" app

Deploy to Netlify

Add app to home screen

Recap

Aside: Setting the viewport

Let's Build a Mobile App with Firebase

Setting up app skeleton

Adding CSS

Aside: Firebase Realtime Database

Adding Firebase to project

Security Rules

innerHTML to append li to ul

Refactoring

Aside: Turning an Object into an Array

Aside: Fetching database items in realtime using onValue

Updating items in realtime

For loop to render database items

Let's smash the bug

Aside: Flexbox flex-wrap

Aside: Flexbox gap

Adding CSS for <li> to wrap items

Getting ID of item in database

Replacing innerHTML with createElement

Aside: Removing items from Firebase

Removing an item when clicked

Only fetching items from database if snapshot exists

Adding hover styles to buttons

Accessibility fix

Aside: user-select

Don't over-use user-select!

Making the app more mobile-friendly

Aside: Favicon

Adding favicon and phone icons

Aside: Web Application Manifest

Turning web app into "mobile" app

Personalise your app

Deploy to Netlify

Add app to home screen

Share your creation

Recap

Solo Project (PRO) - We are the Champions

Congrats on completing the Learn JavaScript course!

How to Utilize Your Certificate