Skip to content

itsjordanmuller/2023-javascript-sandbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

1,071 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

JavaScript Sandbox

Self-Paced Learning Sandbox for JavaScript with Node.js, Jest, Webpack, JSON, HTML & CSS

JavaScript HTML CSS Node.js npm Express Jest Axios Bootstrap MongoDB Mongoose Tailwind CSS Webpack .env

More Technologies ๐Ÿ“€

Babel Bash CORS ESLint JSON Nodemon Prettier Swiper.js Kubuntu KDE Ubuntu Debian Linux GitHub Git Markdown VS Code Font Awesome

Glossary - Overview of Tools & Tech ๐Ÿ’ป

Overview of Technologies

Technology Overview Release Year
.env
.env
Environment variables are determined values to provide the ability that can affect the way programs, applications and services will behave. We can use environment variables to affect and change the way our applications run. An environment variable is made up of a name/value pair, like this: API_KEY=1234567890. 1979
Axios
Axios
Axios is a promise-based HTTP library that lets developers make requests to either their own or a third-party server to fetch data. It offers different ways of making requests such as GET , POST , PUT/PATCH , and DELETE . 2016
Babel
Babel
Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ (ES6+) code into backwards-compatible JavaScript code that can be run by older JavaScript engines. It allows web developers to take advantage of the newest features of the language. 2014
Bash
Bash
Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. First released in 1989, it has been used as the default login shell for most Linux distributions and it was one of the first programs Linus Torvalds ported to Linux, alongside GCC. 1989
Bootstrap
Bootstrap
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. 2011
CORS
CORS
CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options. 2013
CSS
CSS
Cascading Style Sheets is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. 1996
Debian
Debian
Debian, also known as Debian GNU/Linux, is a Linux distribution composed of free and open-source software and proprietary software developed by the community-supported Debian Project, which was established by Ian Murdock on August 16, 1993. 1993
ESLint
ESLint
ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. It was created by Nicholas C. Zakas in 2013. Rules in ESLint are configurable, and customized rules can be defined and loaded. ESLint covers both code quality and coding style issues. 2013
Express
Express
Express.js, or simply Express, is a back end web application framework for building RESTful APIs with Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js. 2010
Figma
Figma
Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows. 2016
Font Awesome
Font Awesome
Font Awesome is a font and icon toolkit based on CSS and Less. As of 2023, Font Awesome was used by 30% of sites that use third-party font scripts, placing Font Awesome in second place after Google Fonts. 2012
Git
Git
Git is a distributed version control system that tracks changes in any set of computer files, usually used for coordinating work among programmers who are collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows. 2005
GitHub
GitHub
GitHub is a developer platform that allows developers to create, store, and manage their code. It uses Git software, providing the distributed version control of Git plus access control, bug tracking, software feature requests, task management, continuous integration, and wikis for every project. 2008
HTML
HTML
HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. 1993
JavaScript
JavaScript
JavaScript frameworks, such as React Native, Ionic, NativeScript, and Apache Cordova, enable developers to build native and hybrid mobile apps for Android and iOS. Facebook, Google, Uber, and Instagram all use JavaScript to build their mobile apps. JS is fast, efficient, and straightforward. 1995
Jest
Jest
Jest is a JavaScript testing framework designed to ensure correctness of any JavaScript codebase. It allows you to write tests with an approachable, familiar and feature-rich API that gives you results quickly. Jest is well-documented, requires little configuration and can be extended to match your requirements. 2014
JSON
JSON
JSON is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of attributeโ€“value pairs and arrays. It is a common data format with diverse uses in electronic data interchange, including that of web applications with servers. 2001
KDE
KDE
KDE is an international free software community that develops free and open-source software. As a central development hub, it provides tools and resources that allow collaborative work on this kind of software. 1996
Kubuntu
Kubuntu
Kubuntu is an official flavor of the Ubuntu operating system that uses the KDE Plasma Desktop instead of the GNOME desktop environment. As part of the Ubuntu project, Kubuntu uses the same underlying systems. Kubuntu shares the same repositories as Ubuntu and is released regularly on the same schedule as Ubuntu. 2006
Linux
Linux
Linux is a family of open-source Unix-like operating systems based on the Linux kernel, an operating system kernel first released on September 17, 1991, by Linus Torvalds. 1991
Markdown
Markdown
Markdown is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber created Markdown in 2004 as a markup language that is easy to read in its source code form. 2004
MongoDB
MongoDB
MongoDB is a source-available, cross-platform, document-oriented database program. Classified as a NoSQL database product, MongoDB utilizes JSON-like documents with optional schemas. MongoDB is developed by MongoDB Inc. and current versions are licensed under the Server Side Public License. 2009
Mongoose
Mongoose
Mongoose is a Node. js-based Object Data Modeling (ODM) library for MongoDB. It is akin to an Object Relational Mapper (ORM) such as SQLAlchemy for traditional SQL databases. The problem that Mongoose aims to solve is allowing developers to enforce a specific schema at the application layer. 2013
Node.js
Node.js
Node.js is a cross-platform, open-source JavaScript runtime environment that can run on Windows, Linux, Unix, macOS, and more. Node.js runs on the V8 JavaScript engine, and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting. 2009
Nodemon
Nodemon
Simple monitor script for use during development of a Node.js based applications by automatically restarting the node application when file changes in the directory are detected. 2011
npm
npm
npm is the world's largest software registry. Open source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well. npm consists of three distinct components: the website. the Command Line Interface (CLI) 2010
Prettier
Prettier
Prettier, known for its strong formatting opinions, supports a broad range of programming languages. It seamlessly integrates with the majority of code editors and offers a streamlined set of configuration options. 2017
Swiper.js
Swiper.js
Swiper is a modern & free and open source mobile touch slider with hardware accelerated transitions and amazing native behavior. 2015
Tailwind CSS
Tailwind CSS
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. 2017
Ubuntu
Ubuntu
Ubuntu is a Linux distribution based on Debian and composed mostly of free and open-source software. Ubuntu is officially released in multiple editions: Desktop, Server, and Core for Internet of things devices and robots. 2004
VS Code
VS Code
Visual Studio Code is a streamlined code editor with support for development operations like debugging, task running, and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs, such as Visual Studio IDE. 2015
Webpack
Webpack
Webpack is a free and open-source module bundler for JavaScript. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. Webpack takes modules with dependencies and generates static assets representing those modules. 2014

Main Sections & Projects

Sections Projects

Variables & Data Types Arrays & Objects Functions & Scope Logic & Control Flow Iteration & Array Methods Document Object Model Events in JavaScript Shopping List Project Asynchronous JavaScript Fetch & Async Await Flixx App Project Web Browser APIs Constructors & Prototypes Classes & Private Properties Tracalorie Project Modules & Tooling Iterators & Data Structures Unit Testing Algorithms Node.js Core Modules Random Ideas Project

Table of Contents ๐Ÿ—ƒ๏ธ

๐Ÿ“– About The Project

๐Ÿ’ก Usage Guide

๐Ÿ› ๏ธ Setup Instructions

๐Ÿ” Pages & Sections

๐Ÿ“ฌ Contact Information

๐ŸŒŸ Acknowledgements

๐Ÿ”— Links & Citations

๐Ÿ“œ License Details


๐Ÿ“– About The Project

๐Ÿ“‚ Project Introduction

I recently completed the Modern JavaScript From The Beginning 2.0 - 2023 Revamp course. This program was all about diving deep into JavaScript without relying on frameworks or libraries. It was a practical, project-based journey to solidify my JavaScript skills, covering everything from the basics to more advanced topics like asynchronous programming and API integration. The course was designed to build a strong foundation in JavaScript, essential for any aspiring web developer.

โ›ณ Learning Objectives & Goals

My goal with this course was to get a firm grip on JavaScript in its pure form. I wanted to understand how JavaScript works under the hood, how to manipulate the DOM, handle events, and work with web APIs. The course also focused on newer ES6+ features, which are crucial for writing cleaner and more efficient code. I aimed to move beyond just syntax and learn how to solve real-world problems with JavaScript, preparing myself for advanced front-end development and beyond.

๐Ÿ—“๏ธ Project Timeline

I kicked off this course on October 2nd, 2023, and followed a structured path that took me from basic concepts to complex JavaScript applications. The early phases were about grasping the fundamentals - variables, functions, conditionals, and loops. As the weeks progressed, I delved into more complex topics like object-oriented programming, asynchronous JavaScript, and working with APIs. The course's layout allowed me to steadily build my skills, culminating in a comprehensive understanding of JavaScript by the end of the program.


๐Ÿ’ก Usage Guide

๐Ÿš€ Getting Started

Looking for Live Demos? ๐ŸŒ

If you're eager to simply see the results of this project, most, if not all of the projects have a Live Demo associated with them. I have linked them all in the overview for each specific project/section. To view these live demos, simply follow the links provided with each project. You'll see them alongside buttons that look like this:

Click the button/link and you should be taken to the Live Demo for that specific project. Please note that some projects don't have a Live Demo, and if that's the case there will not be a button/link. I'm hoping to get all of the projects on the internet at some point in the near future, so check back soon and you might find a link!

Want to View the Projects on Your Local Machine? ๐Ÿ’ป

I have provided detailed instructions for how to clone/download this repository to your local machine in the Setup Instructions section. In that section, you should find everything you need to be able to get these projects running and working on your own machine. Please note that a few of the projects use external APIs that include verification, so you will need to setup your own accounts/API keys for those services.

If you plan on running the code on your local machine, be sure to check the specific project you're trying to run to see if it needs any additional information or setup for the connections to the API to work. In most cases, I will try to include a `.env.example` file. You will need to open this file, and read the instructions inside to obtain your own API key. Once that's done, you'll need to make sure you've renamed the file from `.env.example` to `.env` only.

If you want to avoid setting up environment variables, check to see if the project has a Live Demo associated with it. For all of the projects that I have hosted on the internet, you'll be able to use them without any API configuration required. This is often a simpler way of viewing more complicated projects, since everything will already be running for you to view, use & explore.


Just Hoping to Learn More About Programming? ๐Ÿ“š

I have provided a variety of resources and guides throughout this README for new developers. From the absolute basics, to specific videos and guides that helped me get unstuck in certain situations, I tried to include every single resource I ended up utilizing over the course of my journey.

We are so lucky to live in a time where almost all of this information is available for free on the internet. The only thing I paid for was the course itself, which can be purchased for about $20 on sale at Udemy. Besides that, I was able to complete the project with a low-spec Lenovo Thinkpad T480 I purchased for just under $300. It's proven to be a perfect machine for development & running Kubuntu Linux.


A full list of tech, tools, and other links & resources can be found towards the bottom of this README in the Links & Citations section.

๐Ÿ’พ Installation

For detailed installation instructions, please refer to the Setup Instructions section below.

๐Ÿ› ๏ธ Setup Instructions

๐Ÿ“‹ Prerequisites

Required Software ๐Ÿ’ฝ

To be able to clone/download & view these projects, or to start learning HTML, CSS, and JavaScript as well as web development in general, you'll need a few essential tools. At a minimum, you should have a basic text editor/integrated development environment, a web browser, and an internet connection.

I used the following:

  • Text Editor/IDE: I use Visual Studio Code as my main integrated development environment. VS Code can be customized to work with just about any technology, making it a great choice for a general all-purpose IDE, it also has a large and helpful community for support.
  • Web Browser: I prefer to use Google Chrome for their comprehensive set of Chrome DevTools. While most if not all of the tools are available in other browsers/Developer Tools such as Firefox DevTools, Safari Web Inspector, and Edge DevTools, I am most familiar & comfortable with the layout of Chrome.
  • Internet Connection: Aim to have at least 2-3 Mbps or more to speed up development, especially if you'll be downloading large files or loading video/image based resources. Most libraries and a variety of public places can have high-speed Wi-Fi available for visitors free-of-charge.

Based on the fact that you're reading this right now, you probably already have a browser & internet connection!

Windows, macOS, and most Linux distributions should include a text editor by default, which in this case should be more than enough to view and edit HTML, CSS & JavaScript files.

For those using mobile devices, I advise switching to a laptop or desktop for a more streamlined experience. While mobile development is feasible on Android or iOS, the ease of a full-sized computer, keyboard, and mouse is unmatched. Visual Studio Code is accessible via most browsers on any device, however, you would still need to serve/host it from another machine. For optimal functionality, a personal computer remains the best choice.

System Requirements ๐Ÿ–ฅ๏ธ

System requirements for these projects can vary due to the fact that they use different amounts of client-side processing power and resources. In general, a recent operating system like Windows, macOS, or a popular Linux distribution usually suffices. Modern computers, especially those purchased in the last few years, should meet these needs adequately.

Performance will heavily rely on your specific hardware setup, including processor speed, RAM capacity, storage type, and graphics card quality. The operating system choice and its configuration also play a significant role in speed.

To give you a practical example, I personally used a Lenovo Thinkpad T480 for the entirety of my recent projects. This laptop, has been great for a variety of daily tasks, including programming.

The computer I used for the entire project features the following specifications:

  • Operating System: Kubuntu Linux 22.04
  • Processor: 8th Gen Intel Core Duo i5-8350U
  • RAM: 16GB DDR4 RAM
  • Storage: 512GB SSD of data
  • Graphics: Intel UHD Graphics 620
  • Display: 14.0" Screen with FHD 1920x1080 resolution.

This configuration was more than sufficient for both my project and other tasks. Interestingly, working on a less powerful laptop has its advantages, such as highlighting inefficient code that consumes excessive resources.

If you're unsure, I recommend testing your setup with the intended software. Should you encounter any errors, feel free to reach out for assistance. Your feedback can also help in making projects more adaptable to diverse hardware, operating systems, and browsers.

๐Ÿ“ฆ Installation Guide

Download/Clone This Repo โฌ‡๏ธ

Below you will find various methods that are available to download/clone this repository.

Feel free to use whichever option you are most comfortable & familiar with. You can also read GitHub's guide on downloading source code archives & cloning repositories.

๐Ÿ’ก Download Method Details
Clone with SSH โ˜…
  1. Ensure SSH Key Setup: Before you can clone with SSH, make sure you have an SSH key set up and added to your GitHub account. If you haven't done this, refer to GitHub's documentation on setting up a new SSH key.
  2. Copy SSH URL: Navigate to the repository on GitHub. Click the 'Code' button and switch to the 'SSH' tab in the dropdown menu. Click the clipboard icon to copy the SSH URL.
  3. Open Terminal or Command Prompt: Open your terminal or command prompt. Navigate to the directory where you want the cloned repository to be placed.
  4. Run Clone Command: Type git clone followed by the copied SSH URL. For this project, that's:
    git clone git@github.com:itsjordanmuller/2023-javascript-sandbox.git
    
  5. Access Cloned Repository: Once the cloning process is complete, you will have a local copy of the repository. Navigate into the newly created directory to access the repository files.

Note: Cloning with SSH is secure and allows for easy repository updates without repeatedly entering credentials.

Download ZIP File
  1. Navigate to the Repository: Open your web browser and go to the main page of the repository.
  2. Find the 'Code' Button: On the repository's main page, locate the 'Code' button. This is usually found near the top right, just above the file list.
  3. Download ZIP Option: Click on the 'Code' button. A dropdown menu will appear. Select the 'Download ZIP' option from this menu.
  4. Save the ZIP File: Choose a location on your computer where you want to save the ZIP file and confirm the download.
  5. Extract Files: Once the download is complete, navigate to the downloaded file. Right-click on the ZIP file and select 'Extract All...' or use your preferred extraction tool. Choose where you want the extracted folder to be placed.
  6. Access Repository Contents: Open the extracted folder to access the contents of the repository. Note: Downloading a ZIP file is a great way to get a copy of the repository without using Git commands.
Clone with HTTPS
  1. Copy HTTPS URL: Go to the GitHub page of the repository. Click on the 'Code' button. Under the dropdown menu, select the 'HTTPS' tab and click the clipboard icon to copy the HTTPS URL.
  2. Open Terminal or Command Prompt: Access your terminal (Linux/Mac) or command prompt (Windows). Navigate to the directory where you want the repository to be cloned.
  3. Execute Clone Command: Type git clone followed by the copied HTTPS URL. In this case:
    git clone https://github.com/itsjordanmuller/2023-javascript-sandbox.git
    
  4. Enter GitHub Credentials: If prompted, enter your GitHub username and password. This step is usually required the first time you use HTTPS to clone a repository.
  5. Access Cloned Repository: After the cloning process completes, a local copy of the repository will be created. Navigate into the directory that was just created to start working with the files. Note: HTTPS cloning is straightforward but may require you to enter your GitHub credentials more frequently compared to SSH.
Clone with GitHub CLI

The GitHub CLI (gh) provides a convenient way to interact with GitHub from your command line. Hereโ€™s how to use gh to clone the repository itsjordanmuller/2023-javascript-sandbox:

  1. Install GitHub CLI: If you haven't already, you need to install the GitHub CLI. You can find installation instructions on the official GitHub CLI page.

  2. Authenticate GitHub CLI: Open your terminal and authenticate the GitHub CLI using the command gh auth login. Follow the prompts to complete the authentication process.

  3. Clone the Repository: To clone this repository, use the following command:

    gh repo clone itsjordanmuller/2023-javascript-sandbox
    

    This command will clone the repository into a new directory named 2023-javascript-sandbox in your current working directory.

  4. Navigate to the Repository: Once the cloning process is complete, navigate into the repository directory with:

    cd 2023-javascript-sandbox
    
  5. Start Working: You now have a local copy of the repository and can begin working on it.

Note: The GitHub CLI streamlines various GitHub operations and is particularly useful for those who prefer command-line tools.


โ˜… When I have the option, I personally prefer to use the Clone with SSH method. Alternatively, Download ZIP File can be a quick and easy way to simply download the files without a terminal or Git.

โš™๏ธ Configuration

API Keys/Environment Variables ๐Ÿ”


๐Ÿ” Sections & Projects

Introduction to console operations in JavaScript

Covers basic JavaScript code in a HTML context, utilizing various console methods (log, error, warn, table, group) to display different data types and understand the basics of JavaScript variables and output formatting.

Utilizing comments in JavaScript

Demonstrates the use of single-line and multi-line comments to explain or disable code, along with advanced console methods and CSS styled console messages. Emphasizes the importance of comments for code clarity.

Understanding variable declaration and naming conventions

Introduces variable declaration using var, let, const, and explores naming conventions and formats (camelCase, underscore, etc.). Also covers variable re-assignment, scope, and multiple variable declarations.

Exploring JavaScript data types

Elaborates on JavaScript's primitive (String, Number, Boolean, Null, Undefined, Symbol, BigInt) and reference (Object, Function) data types, demonstrating the usage and properties of each.

Stack and heap memory in JavaScript

Explains the storage of primitive and reference types in memory (stack and heap respectively), highlighting how value and reference copying works in JavaScript.

Conversion between different data types

Teaches methods for converting between strings, numbers, booleans, and decimals, using functions like parseInt, parseFloat, and Boolean, and also demonstrates the nuances of these conversions.

Using various JavaScript operators

Delves into arithmetic, assignment, and comparison operators, explaining their usage and function in JavaScript operations and comparisons.

Understanding type coercion in JavaScript

Focuses on how JavaScript handles implicit type conversion in different contexts, particularly with numeric and string types, and includes examples with null, true, false, and undefined.

Handling and manipulating strings

Covers string concatenation, template literals, and various string methods and properties for accessing and modifying string data. Also touches on the object-oriented nature of JavaScript strings.

String manipulation challenge

Presents a practical challenge of capitalizing the first letter of a string using string methods like toUpperCase and slice, demonstrating string manipulation techniques.

Exploring the Number object in JavaScript

Explores methods and properties of the Number object, including number conversion, formatting, and understanding the limits of JavaScript number values.

Utilizing JavaScript's Math object

Demonstrates the use of the Math object for various mathematical functions and properties, including square roots, absolute values, rounding, and generating random numbers.

Challenge involving math operations and string interpolation

A practical challenge that combines random number generation with arithmetic operations and string interpolation to reinforce understanding of basic math functions in JavaScript.

Handling dates and times in JavaScript

Covers creating and formatting Date objects, including the use of different constructors and methods to manipulate date and time values.

Detailed exploration of Date object methods

Focuses on methods of the Date object for retrieving and formatting various components of dates and times, and demonstrates custom formatting using locale settings.


Introduction to Arrays in JavaScript

Guides through the basics of array creation using both literals and constructor methods. Discusses how to access and modify array elements, showcasing fundamental operations like adding, removing, or altering elements within arrays.

Mastering Array Manipulation Techniques

Delves into various array methods, including adding, removing, and reversing elements. Explains the concepts of array slicing and splicing, and techniques for checking the presence of values within arrays.

Advanced Techniques in Array Handling

Focuses on more complex array manipulation, such as nesting arrays within each other, using .concat() and the spread operator for concatenation, and employing .flat() for array flattening.

Practical Challenges to Reinforce Array Concepts

Presents two engaging challenges that apply various array manipulation methods, including unshift, push, reverse, as well as slicing and flattening, for hands-on learning.

Exploring Object Literals

Introduces the concept of object literals in JavaScript, covering how to create, access, modify, and delete object properties. Includes using functions as properties and handling unconventional property names.

Advanced Object Handling and Spread Syntax

Explores advanced concepts in object handling, including creating objects, accessing nested properties, merging objects using the spread syntax, and techniques involving Object.keys and Object.entries.

Destructuring and Renaming Techniques in ES6

Highlights modern JavaScript techniques such as property shorthand in objects, destructuring in both objects and arrays, and renaming variables during the destructuring process.

Understanding JSON in JavaScript

Discusses the integration of JavaScript objects with JSON, including converting objects to JSON strings and parsing JSON. Provides examples with arrays and handling external JSON data.

Object Manipulation and JSON Conversion Challenge

Presents a practical challenge involving the manipulation of object properties, use of destructuring, and the conversion of an array of objects into JSON format, for applied learning in a real-world context.


Introduction to JavaScript Functions

Introduces the basics of function creation and invocation, including the use of parameters and return values. Demonstrates the syntax of functions and how to store returned values in variables for further use.

Deep Dive into Function Parameters and Arguments

Explores the intricacies of function parameters and arguments, such as default and rest parameters. Discusses the use of objects and arrays as arguments and emphasizes the concept of function scope.

Global Scope Interaction with Functions

Focuses on the concept of global scope in JavaScript, including variable shadowing and the behavior of the window object. Examines the interaction between global variables and function/block scopes.

Understanding Block Scope in JavaScript

Delves into block scope, particularly how const, let, and var are scoped differently within blocks and functions, highlighting key differences in their behaviors.

Nested Scopes in Functions and Blocks

Explores the concept of nested scopes within functions and block statements, explaining how inner scope variables can access outer scope variables but not the other way around.

Function Declarations vs. Expressions

Clarifies the distinction between function declarations and expressions, focusing on the concept of hoisting in declarations and the temporal dead zone in expressions.

Introduction to ES6 Arrow Functions

Covers the syntax of arrow functions, including single-parameter functions, implicit returns, and returning object literals. Demonstrates the application of arrow functions in array methods for more concise coding.

Using Immediately Invoked Function Expressions (IIFEs)

Discusses the concept and practical application of IIFEs in JavaScript, focusing on their use for scope management and immediate function execution, including passing arguments to IIFEs.

Practical Function Challenges for Applied Learning

Presents practical challenges that incorporate various function concepts, including temperature conversion, finding minimum and maximum values in arrays, and an IIFE challenge for calculating rectangle area.

Exploring Execution Context in JavaScript

Demonstrates the concept of execution context through examples involving variable declarations and function calls, showing how different contexts interact within the JavaScript engine.

Understanding the JavaScript Call Stack

Investigates the workings of the JavaScript call stack, illustrating the Last In, First Out (LIFO) principle through examples of nested function calls and their execution order.


Mastering Basic if Statements

Provides a comprehensive introduction to if statements in JavaScript. Covers the use of true and false conditions, relational operators for variable comparison, and demonstrates how to execute code blocks based on specific conditions. Also introduces shorthand syntax for if statements.

Nested else if Statements and Complex Conditional Flows

Discusses the implementation of else if and nested if statements for creating complex conditional flows. Uses examples such as time-based greetings and incorporates logical operators (&&, ||) to handle multiple conditions.

Utilizing switch Statements in JavaScript

Focuses on switch statements as an efficient alternative to multiple if statements. Demonstrates their application with different variable types and boolean expressions for dynamic condition checking.

Building a Simple Calculator with switch Statement

Implements a basic calculator function using a switch statement. Showcases handling different arithmetic operations based on the provided operator, demonstrating the versatility and necessity of error handling in programming.

Exploring Truthy and Falsy Values in JavaScript

Explores the concepts of truthy and falsy values in JavaScript, including special cases and differences between loose and strict equality. Highlights their significant impact on conditional logic.

Understanding Logical Operators in JavaScript

Delves into AND, OR, and Nullish Coalescing operators, explaining their behavior in various contexts. Demonstrates their practical applications in conditional rendering and value assignment.

Logical Assignment Operators in JavaScript

Covers the logical assignment operators (||=, &&=, ??=), providing a concise way of writing conditional assignments. Compares these operators with traditional methods to highlight their efficiency and use cases.

Using the Ternary Operator for Conditional Logic

Explores the ternary operator for streamlined conditional operations. Compares it with traditional if-else statements and demonstrates its use in various scenarios, including variable assignment, executing multiple statements, and browser interactions with alert().



๐ŸŒŸ Acknowledgements

๐Ÿ’Œ Special Thanks

Dear Brad Traversy,

I want to express my deep gratitude for your comprehensive and enlightening course, "Modern JavaScript From the Beginning 2.0 - 2023 Revamp." Your detailed overview of modern JavaScript has been incredibly valuable to my learning journey. The depth of knowledge you shared, combined with your clear and engaging teaching style, made complex concepts accessible and easy to understand.

This course has significantly enhanced my understanding of JavaScript, providing me with the skills and confidence to tackle more advanced programming challenges. Your dedication to covering every aspect of modern JavaScript is evident, and your passion for teaching shines through in every lesson.

Thank you for your commitment to educating and empowering aspiring developers like myself. Your work has had a profound impact on my development skills, and I am truly grateful for the knowledge and expertise you've shared.

Sincerely,
- Jordan Muller


๐Ÿ“ฌ Contact Information


If you have questions/feedback, I would love to hear from you. Thanks for stopping by!
- Jordan Muller

LinkedIn Email Address Portfolio Website

Please feel free to reach out if you have any suggestions or run into any issues with viewing this project.

I am always looking for feedback from other people! I'd be more than happy to answer any questions you may have as well as assist with getting the project working on your machine.

Be sure to view the Setup Instructions in the README, as well as any specific README files for that specific project as they contain more details and may already have the answer to your question(s)!


๐Ÿ”— Links & Citations

๐Ÿ““ Course & Instructor Details

Course - Modern JavaScript From the Beginning 2.0 - 2023 Revamp

Modern JavaScript From the Beginning 2.0 Course Cover
udemy.com/course/modern-javascript-from-the-beginning/
View Course on Udemy - Udemy Badge

Instructor Information ๐Ÿ‘ฅ

Instructor Name Profile Link
Brad Traversy Brad's Udemy Profile

๐Ÿ“€ Core Technologies

Languages ๐Ÿ” 

HTML
1993
HTML Badge
HTML GitHub Topic
Home html.spec.whatwg.org/
Topic

View HTML Resources & Information
MDN Guides
Wikipedia Article
en.wikipedia.org/wiki/HTML

View HTML Support & Communities
Forums & Discussion Boards
Stack Overflow Help
stackoverflow.com/questions/tagged/html

CSS
1996
CSS Badge
CSS GitHub Topic
Home w3.org/TR/CSS/#css
Topic

View CSS Resources & Information
MDN Guides
Interactive Learning Games
Wikipedia Article
en.wikipedia.org/wiki/CSS

View CSS Support & Communities
Forums & Discussion Boards
Stack Overflow Help
stackoverflow.com/questions/tagged/css

JavaScript
1995
JavaScript Badge
JavaScript GitHub Topic
Home ecma-international.org/
Topic

View JavaScript Resources & Information
MDN Guides
Simplified JavaScript Jargon Guide
jargon.js.org/
Wikipedia Article
en.wikipedia.org/wiki/JavaScript

View JavaScript Support & Communities
Forums & Discussion Boards
Stack Overflow Help
stackoverflow.com/questions/tagged/javascript

Markdown
2004
Markdown Badge
Markdown GitHub Topic
Home daringfireball.net/projects/markdown/
Topic github.com/topics/markdown

View Markdown Resources & Information
Additional Guides
GitHub Flavored Markdown
github.github.com/gfm/
Wikipedia Article
en.wikipedia.org/wiki/Markdown

View Markdown Support & Communities
Forums & Discussion Boards
reddit.com/r/Markdown/
Stack Overflow Help
stackoverflow.com/questions/tagged/markdown


Frameworks ๐Ÿ—๏ธ

Tailwind CSS
2017
Tailwind CSS Badge
Tailwind CSS Home Page
Home tailwindcss.com
Docs tailwindcss.com/docs/installation
Repo github.com/tailwindlabs/tailwindcss
Topic github.com/topics/tailwind

View Tailwind CSS Resources & Information
Tailwind CSS Blog
tailwindcss.com/blog
Wikipedia Article
en.wikipedia.org/wiki/Tailwind_CSS

View Tailwind CSS Support & Communities
Forums & Discussion Boards
reddit.com/r/tailwindcss/
Stack Overflow Help
stackoverflow.com/questions/tagged/tailwind-css


Libraries ๐Ÿ“™

Axios
2016
Axios Badge
Axios Home Page
Home axios-http.com
Docs axios-http.com/docs/intro
Repo github.com/axios/axios
Topic github.com/topics/axios

View Axios Resources & Information
Axios API Reference
axios-http.com/docs/api_intro
Axios Code of Conduct
github.com/axios/axios/blob/master/CODE_OF_CONDUCT.md

View Axios Support & Communities
Axios Issues on GitHub
github.com/axios/axios/issues
Stack Overflow Help
stackoverflow.com/questions/tagged/axios



๐Ÿงฐ Developer Tools

Git
2005
Git Badge
Git Home Page
Home git-scm.com/
Docs git-scm.com/doc
Repo github.com/git/git
Topic github.com/topics/git

View Git Resources & Information
Visual Git Cheatsheet
ndpsoftware.com/git-cheatsheet.html
Videos
Git and GitHub Tutorial for Beginners by Kevin Stratvert
Wikipedia Article
en.wikipedia.org/wiki/Git

View Git Support & Communities
Community Links
Forums & Discussion Boards
reddit.com/r/git/
Stack Overflow Help
stackoverflow.com/questions/tagged/git

GitHub
2008
GitHub Badge
GitHub Home Page
Home github.com/
My Profile github.com/itsjordanmuller
Topic github.com/topics/github

View GitHub Resources & Information
Guides
docs.github.com/en/get-started/quickstart/hello-world
Videos
Git and GitHub Tutorial for Beginners by Kevin Stratvert
Wikipedia Article
en.wikipedia.org/wiki/GitHub

View GitHub Support & Communities
GitHub Support
support.github.com/
Forums & Discussion Boards
reddit.com/r/github/
Stack Overflow Help
stackoverflow.com/questions/tagged/github

VS Code
2015
VS Code Badge
Visual Studio Code Home Page
Home code.visualstudio.com/
Repo github.com/microsoft/vscode
Topic github.com/topics/vscode

View VS Code Resources & Information
VS Code Blog
code.visualstudio.com/blogs
Wikipedia Article
en.wikipedia.org/wiki/Visual_Studio_Code

View VS Code Support & Communities
Forums & Discussion Boards
reddit.com/r/vscode/
Stack Overflow Help
stackoverflow.com/questions/tagged/visual-studio-code

Bash
1989
Bash Badge
Bash Home Page
Home gnu.org/software/bash/
Topic

View Bash Resources & Information
About GNU
www.gnu.org/gnu/gnu.html
Wikipedia Article
en.wikipedia.org/wiki/Bash_(Unix_shell)

View Bash Support & Communities
Forums & Discussion Boards
reddit.com/r/bash/
Stack Overflow Help
stackoverflow.com/questions/tagged/bash

Prettier
2017
Prettier Badge
Prettier Home Page
Home prettier.io
Docs prettier.io/docs/en
Repo github.com/prettier/prettier
Topic github.com/topics/prettier

View Prettier Resources & Information
Prettier Playground
prettier.io/playground
Prettier Blog
prettier.io/blog

View Prettier Support & Communities
Stack Overflow Help
stackoverflow.com/questions/tagged/prettier

ESLint
2013
ESLint Badge
ESLint Home Page
Home eslint.org
Docs eslint.org/docs/latest
Repo github.com/eslint/eslint
Topic github.com/topics/eslint

View ESLint Resources & Information
Playground
eslint.org/play
Blog
eslint.org/blog

View ESLint Support & Communities
Stack Overflow Help
stackoverflow.com/questions/tagged/eslint

Kubuntu
2006
Kubuntu Badge
Kubuntu Home Page
Home kubuntu.org/
Topic github.com/topics/kubuntu

View Kubuntu Resources & Information
Features
kubuntu.org/feature-tour/
About Kubuntu
kubuntu.org/about-us/
Wikipedia Article
en.wikipedia.org/wiki/Kubuntu

View Kubuntu Support & Communities
Kubuntu Community
kubuntu.org/community/
Forums & Discussion Boards
reddit.com/r/kubuntu/
Stack Overflow Help
unix.stackexchange.com/questions/tagged/kubuntu

KDE
1996
KDE Badge
KDE Home Page
Home kde.org/
Topic github.com/topics/kde

View KDE Resources & Information
What is KDE?
kde.org/community/whatiskde/
KDE Apps
apps.kde.org
Wikipedia Article
en.wikipedia.org/wiki/KDE

View KDE Support & Communities
Forums & Discussion Boards
reddit.com/r/kde/
Stack Overflow Help
unix.stackexchange.com/questions/tagged/kde

Ubuntu
2004
Ubuntu Badge
Ubuntu Home Page
Home ubuntu.com/
Topic github.com/topics/ubuntu

View Ubuntu Resources & Information
Ubuntu Blog
ubuntu.com/blog
Ubuntu Resources
ubuntu.com/engage
Wikipedia Article
en.wikipedia.org/wiki/Ubuntu

View Ubuntu Support & Communities
Ubuntu Community
ubuntu.com/#community
Forums & Discussion Boards
reddit.com/r/Ubuntu/
Stack Overflow Help
stackoverflow.com/questions/tagged/ubuntu

Debian
1993
Debian Badge
Debian Home Page
Home debian.org
Topic github.com/topics/debian

View Debian Resources & Information
Debian Blog
bits.debian.org
Wikipedia Article
en.wikipedia.org/wiki/Debian

View Debian Support & Communities
Debian Support
debian.org/support
Forums & Discussion Boards
reddit.com/r/debian/
Stack Overflow Help
stackoverflow.com/questions/tagged/Debian

Linux
1991
Linux Badge
Linux Home Page
Home kernel.org
Topic github.com/topics/linux

View Linux Resources & Information
About Linux
kernel.org/category/about.html
Frequently Asked Questions
kernel.org/category/faq.html
Wikipedia Article
en.wikipedia.org/wiki/Linux

View Linux Support & Communities
Linux Support
kernel.org/category/contact-us.html
Forums & Discussion Boards
reddit.com/r/linux/
Stack Overflow Help
stackoverflow.com/questions/tagged/linux



๐Ÿ—‚๏ธ Additional & External Resources

Font Awesome
2012
Font Awesome Badge
Font Awesome Home Page
Home fontawesome.com
Docs fontawesome.com/docs
Repo github.com/FortAwesome/Font-Awesome
Topic github.com/topics/font-awesome

View Font Awesome Resources & Information
Icons
fontawesome.com/icons

View Font Awesome Support & Community
Stack Overflow Help
stackoverflow.com/questions/tagged/font-awesome
Support
fontawesome.com/support


๐Ÿ–‡๏ธ Additional Resources & Learning Materials

Resource Title Resource Description Link Type Link to Resource
Git and GitHub Tutorial for Beginners Beginner's Introduction to Git and GitHub by Kevin Stratvert on YouTube Video https://youtu.be/tRZGeaHPoaw?si=RnK9nCUEVb-aWjDb
Git for Everybody: How to Clone a Repository from GitHub Example on How to Clone a GitHub Repository by Coding For Everybody on YouTube Video https://www.youtube.com/watch?v=CKcqniGu3tA&feature=youtu.be

๐Ÿ“œ License Details

LICENSE.md

The content within this repository was created as part of a personal educational project, following the Modern JavaScript From the Beginning 2.0 - 2023 Revamp course by Brad Traversy on Udemy. This repository is intended for personal use only and serves as a record of my learning progress. This repository & the content within it are not intended for commercial use, distribution, or replication. All rights to the original course content and methodologies belong to the respective copyright holders.

THE SOFTWARE IS PROVIDED โ€œAS ISโ€, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.

Copyright ยฉ 2024 Jordan Muller. All Rights Reserved.


About

Self-Paced Learning Sandbox for JavaScript with Node.js, Jest, Webpack, HTML & CSS

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors