A Better Way to Learn JS: Useful Snippets

Name: A Better Way to Learn JS: Useful Snippets
Rating: 5.0 (1 reviews)

Dozens of exercises to build up your JS strength

Created byAjdin Imsirovic

Last updated 3/2024

English

English [Auto],

What you'll learn

Understand and Implement Randomness in JavaScript
Master JavaScript Number Manipulation
Advanced String Handling and Manipulation
Practical Problem-Solving with JavaScript

Course content

4 sections • 57 lectures • 5h 5m total length

Emulate a six-sided dice in JavaScript7:39
Emulate a six-sided dice in JavaScript using Math.random, floor, ceil, and plus one for 1-6, with the quokka tool in VS Code for instant results.
Pick a random array item in JavaScript2:58
Learn to pick a random item from a zero-indexed array in JavaScript by implementing a randomize function using Math.floor and Math.random, tested with a numeric array.
Fun with booleans: Randomly returning true or false in JS3:11
Explore booleans in js by using math.random() > 0.5 to yield true or false, then use a ternary to return letters T or F, tested in vscode with quack and coderunner.
Pick a random number from a range of numbers in JavaScript13:13
learn to pick a random integer in a JavaScript range using Math.random and Math.floor, with min and max, and adjust the function to slide the range start.
Code a biased random number picker in JavaScript6:15
Pick a float from a range of nums or floats in JavaScript2:33
Make a random hex color in JavaScript2:14
Six ways to convert a string to an array in JS3:48
Learn six JavaScript techniques to convert a string into an array, including split, the spread operator, array.from, object.assign, string.prototype.slice.call, and array.prototype.slice.call.
Check if a Number is Even in JavaScript2:14
Learn to validate a number is even in JavaScript, using the Kwok extension and both a traditional function and an ES6 expression that checks num % 2 === 0.
Shuffle an Array in JavaScript8:31
shuffle a javascript array by randomizing its order, start with a simple map-and-sort approach, then use a down-counting loop with splice and math.floor, and finally flatten to a single array.
Generate a Random Password in JavaScript9:08
Create a random password by using Math.random and base-36 conversion, slice initial chars, and combine lower and uppercase segments with spread and splice, then join for final output.
Random Dice in JavaScript using toString() and Array.pop()2:33
Generate random dice in JavaScript by using Math.random, convert to base 7 with toString, spread the string into an array, then pop the last digit to yield 1–6.
Never Repeat Dice Throw Twice in a Row in JS8:50
Learn how to implement a JS snippet that guarantees the dice never repeats the previous throw, using a throws log, a random item picker, and a browser confirm dialog.
Generate a Pseudo Random UUID in JS6:03
Generate a pseudo random uuid in JavaScript using a time-based seed and hex fragments to form the eight four four four twelve pattern, without RFC 4122 conformity or cryptographic security.
Random Number From -10 to 10 in JS2:13
Add Random CSS Classes to a Paragraph in JS4:24
Learn to apply random Bootstrap classes to a paragraph using JavaScript, including setting up an HTML page, a classes array, a random selector, and a setInterval to refresh every second.
Get a Palette of Three Shades of a Random Color in JS10:11
Learn to generate a palette of three shades from a random color in JavaScript by using a color picker, DOM updates, and simple CSS brightness filters.
Get a random sub array from an array in JavaScript6:40
Learn to generate a random subarray from an array in JavaScript by selecting three items from a fruits array using Math.random and Math.floor, with optional splice and flatten for uniqueness.

Print All Odd Numbers in Range in JS1:16
Learn to log odd numbers in a range using a for loop and modulo check, with a ternary filter, and preview the approach using the Quokka extension for VS Code.
Print All Even Numbers in a Range in JavaScript1:28
Discover two ways to print all even numbers in a range in JavaScript: flipping the ternary condition and negating the condition while keeping console.log, with identical results.
Format a number with a comma as a thousands separator in JS3:08
Learn how to format numbers with thousands separators in JavaScript using Number.toLocaleString and the Intl.NumberFormat API. Explore locale effects, decimals, and cross-locale formatting (en-US, nl, de).
Format a number as currency in JS3:34
Format a number as currency in JS using Intl.NumberFormat with locale en-GB and currency EUR, then log the result to the console.
Convert an array of numbers to an array of ordinal numbers in JavaScript15:48
Learn to convert an array of numbers to ordinal strings in JavaScript using a lookup array, number-to-array technique, and the built-in Intl object, with proper suffix rules and edge-case handling.
Count all elements with background set to a specific color7:47
Count elements with a specific background color on a page by selecting all elements with document.querySelectorAll, converting the collection to a results array, and filtering by getComputedStyle(element).backgroundColor.
Count the number of times a sub-string appears in a string9:15
Learn multiple JavaScript techniques to count substring occurrences in a string, using split, length, regex with global flag, and loop-based approaches including map and filter.
Add leading zeros in front of a number4:21
Learn how to add leading zeros to a number by padding and concatenating, using a function with number and length parameters and the built-in string repeat method.
Add up all the arguments passed to a function in JavaScript1:28
Sum all arguments passed to a function in JavaScript by using Array.prototype.reduce with a spread of args and an arrow function.
Calculate a Fibonacci sequence in JavaScript6:11
Explore computing a Fibonacci sequence in JavaScript by iterating with a while loop, pushing values into an array, and updating first and second numbers each step.
Calculate a factorial in JavaScript6:15
Compute factorials in JavaScript with a factorial function, looping from num down to 1 and multiplying into a result accumulator. Note that the factorial of five is 120.
Convert a number to an array of its digits2:28
Convert a number into an array of its digits using the string prototype split method. Map each character back to a number to form the digits array.
Round a number to a set number of decimals in JavaScript8:13
Learn to round a number to a set of decimals with a two-parameter function, decimal num and decimals, and apply a clever exponential notation technique to handle floating point quirks.
Check if a number is an integer or a float in JavaScript2:07
Learn how to tell integers from floats in JavaScript using the modulus operator and the native Number.isInteger method, with examples of 5.43 and 5.

Convert an Array to a String in JavaScript6:13
Learn six methods to convert an array to a string in JavaScript, including coercion, Array.prototype.join with and without a separator, Array.prototype.toString, and JSON.stringify, demonstrated with practical examples.
Capitalize the First Letter of a String in JavaScript6:06
Learn two practical methods to capitalize the first letter of a string in JavaScript, using charAt with slice, or replace with a regex, applied to sample text like Lorem ipsum.
Convert a string to a number in JavaScript3:23
Explore four methods to convert a string to a number in JavaScript, including the plus operator, parse int, parse float, and the Number constructor, demonstrated with a string value.
Find all vowels in a piece of text in JavaScript2:56
Learn to find all vowels in text with JavaScript using a simple regex pattern, global and case-insensitive flags, and log the matches.
Capitalize a string in JavaScript2:20
Capitalize strings in JavaScript by using toUpperCase and toLocaleUpperCase, compare their outputs, and explore locale effects, like Turkish, on Unicode case mappings.
Capitalize the first letter of a string in JavaScript5:41
Capitalize or lowercase the first letter of a string in JavaScript6:37
Learn to lowercase the first letter of a string in JavaScript with concise one‑liner functions and arrow syntax, plus simple upper/lower toggle logic using slice and toLowerCase.
Capitalize the first letter of each word in a given string in JavaScript14:45
Learn to capitalize the first letter of each word in a string using JavaScript, regex, and string.replace with a global match, including arrow functions.
Replace the 1st occurence of a substring with another string in JavaScript1:14
Replace the first occurrence of a substring in JavaScript using the string prototype replace method, specifying the search and replace values, and logging the result to the console.
Replace all instances of a substring with another string2:59
Learn how to replace all occurrences of a substring in a string using replace all, split and join, or a global regex, with JavaScript examples.
Convert kebab case to camel case in JavaScript8:20
Learn to convert kebab case to camel case in JavaScript by using string match and replace with regular expressions, handling g flag and capturing groups for first or all occurrences.
Convert camel case to kebab case in JavaScript9:01
Learn to convert camel case to kebab case in JavaScript using a regex-based approach: insert dashes before capitals, capture groups, and convert to lowercase.
Convert snake case to camel case in JavaScript2:43
Turn snake_case strings into camel case in JavaScript using a global underscore regex and an arrow function to uppercase the following letter, demonstrated with one_two_three becoming oneTwoThree.
Convert a string to snake_case4:51
Learn to convert a regular string to snake_case using a global regex replacement, capturing surrounding characters and replacing spaces with underscores, then lowercase the result.
Convert a string to camelCase8:16
Convert strings to camel case in JavaScript using the replace method and regex to capitalize after underscores or spaces. Build and reuse snake-to-camel and final camel case helpers.
Convert a string to Pascal Case3:06
Learn how to convert a string to PascalCase in JavaScript by adjusting a camelCase function, forcing a leading space, and using string replacement to capitalize the first letter.
Convert a string to kebab-case3:16
Learn how to convert a string to kebab case in JavaScript by adapting a string-to-snake-case approach, replacing spaces with dashes, applying lowercase, and trimming extra spaces.
Repeat a string in JavaScript0:32
Learn to repeat a string in JavaScript with the built-in repeat method. Pass a number to specify how many times the string repeats, producing concise repetition in code.
Code a palindrome checker in JavaScript9:32
Learn to code a palindrome checker in JavaScript by normalizing input (lowercasing, removing spaces), splitting into characters, reversing, and rejoining to compare with the original.

Fun with loops in JavaScript, part 15:26
Explore a JavaScript snippet that uses a for loop and a random starting number to output values and update the page using the DOM.
Fun with loops in JavaScript, part 2_ Mastering the Continue Statement3:25
Explore how JavaScript loops behave with modulus to update values and log results, and see how a continue-like condition can skip the number 80, guiding the loop’s flow.
Fun with loops in JavaScript, part 3: loops and the modulus operator5:57
Learn to implement fizzbuzz with a for loop and the modulus operator, using continue for optimization and outputting fizz, buzz, or fizzbuzz when divisible by 3 and 5.
Fun with loops in JavaScript, part 4: AN attempt at FizzBuzz (with errors)1:56
Discover converting if statements into a ternary ladder in a fizzbuzz example for JavaScript, with code transformation and verification. Discuss readability tradeoffs as ternary complexity grows.
Fun with loops in JavaScript, part 5: A FizzBuzz implementation (without errors)3:59
Reorganize the fizzbuzz checks and use continue to skip further tests. Fix the fizzbuzz bug for 15 and show fizz, buzz outputs for 3 and 5.
Code a Lazy Caterer's Sequence in JS6:35
Learn to code the lazy caterer's sequence in JavaScript by building a function, iterating with a for loop, tracking results with arrays, and validating differences.

Requirements

Basic Understanding of JavaScript: Students should have a basic knowledge of JavaScript syntax and concepts such as variables, data types, loops, and functions. This ensures they can follow along with the course material and engage with the exercises effectively.
Familiarity with HTML & CSS: A basic understanding of HTML and CSS is recommended. While the course focuses on JavaScript, knowing how to integrate JavaScript with web pages (HTML) and style them (CSS) will help students understand the full context of the examples and exercises.
Web Browser and Code Editor: Learners will need access to a modern web browser (like Google Chrome, Firefox, Safari, or Edge) and a code editor (such as Visual Studio Code) for writing and testing their JavaScript code.
Desire to Learn and Experiment: Most importantly, students should have a curiosity about JavaScript and a willingness to experiment with code. The course is designed to encourage trial and error and learning from doing.

Description

Embark on a unique journey with "A Better Way To Learn JS: Useful Snippets," where you'll delve into the core of JavaScript through the lens of practical, real-world code snippets. This course is meticulously designed to enhance your understanding of JavaScript's powerful capabilities, enabling you to create dynamic web applications and solve a myriad of programming challenges.

What You Will Learn:

Randomness: Discover how to generate random numbers and apply randomness effectively in simulations, games, and decision-making tools, all through concise and powerful snippets.
Numerical Operations: Learn to navigate the world of numerical data, performing calculations and leveraging the Math object for advanced functions, guided by practical examples.
String Manipulation: Gain mastery over strings with snippets that teach you to concatenate, slice, and manipulate text using regular expressions, making complex tasks seem surprisingly simple.

Course Features:

Practical Exercises: Dive into a collection of coding exercises, each designed to reinforce your learning with real-world applicability.
Step-by-Step Solutions: Access detailed explanations and solutions for every exercise, shedding light on the underlying logic and best practices.
Interactive Learning: Enjoy an immersive learning experience with interactive environments that encourage experimentation and real-time coding.
Community Support: Become part of a vibrant community of learners, sharing insights, asking questions, and tackling coding challenges together.

Who Should Enroll:

Aspiring and novice programmers looking for an engaging, practical approach to learning JavaScript.
Experienced developers aiming to refine their skills through focused exercises on specific JavaScript aspects.
Students and professionals seeking to deepen their web development expertise with a hands-on, snippets-based learning method.
Curious minds eager to explore programming and create dynamic web content through actionable insights.

Prerequisites:

While a basic understanding of programming concepts and familiarity with HTML/CSS will be beneficial, they are not strictly required. "A Better Way To Learn JS: Useful Snippets" is designed to be accessible and rewarding for learners at various levels of experience.

"A Better Way To Learn JS: Useful Snippets" is not just a course; it's a novel approach to mastering JavaScript. By the end of this adventure, you'll be equipped with the confidence and skills to navigate a wide range of programming tasks and projects. Enroll now and embark on a journey where your ideas leap off the page and into the realm of code!

Who this course is for:

Aspiring Web Developers: If you're at the beginning of your journey into web development, this course will help you gain a solid understanding of essential JavaScript concepts, significantly contributing to your growth as a full-stack or front-end developer.
Experienced Programmers New to JavaScript: Seasoned developers familiar with other programming languages but new to JavaScript will find this course beneficial for quickly getting up to speed with JavaScript-specific features and best practices.
Computer Science Students: For students pursuing a degree in computer science or related fields, this course offers a practical, hands-on supplement to theoretical studies, enhancing problem-solving skills in JavaScript.
Self-Taught Coders Seeking to Formalize Their Skills: If you've learned JavaScript informally through various resources and are looking to fill gaps in your knowledge and tackle structured exercises, this course is for you.
Professionals Looking to Switch to a Tech Role: Individuals aiming to transition into technical roles or add programming to their skillset will find this course an effective way to learn practical JavaScript coding applicable in real-world projects.
Hobbyists and Enthusiasts: Even if you're exploring programming as a hobby or personal interest, this course offers an engaging way to understand how to manipulate data and strings, solve problems, and create interactive web elements using JavaScript.

A Better Way to Learn JS: Useful Snippets

What you'll learn

Explore related topics

Course content

Useful snippets focused on randomness18 lectures • 1hr 43min

Useful Snippets focused on numbers14 lectures • 1hr 13min

Useful Snippets Focused on Strings19 lectures • 1hr 42min

Fun With Loops in JavaScript6 lectures • 27min

Requirements

Description

Who this course is for: