Coding Cups
I am just learning...


Error message I received when starting another create-react-app project: A template was not provided. This is likely because you’re using...

Check out this code: function correctSentence(text) { // returns a corrected sentence which starts with capital letter // and ends...

Use + to look for one or more characters Use * to look for zero or more characters. You can...

You are given two arrays and an index. Use the array methods slice and splice to copy each element of...

In the previous challenge, you learned about import and how it can be leveraged to import small amounts of code...

Ok, so we’ve learned how to remove elements from the beginning and end of arrays using shift() and pop(), but...

An array’s length, like the data types it can contain, is not fixed. Arrays can be defined with a length...

At their most basic, objects are just collections of key-value pairs, or in other words, pieces of data mapped to...

Awesome! You have just learned a ton about arrays! This has been a fairly high level overview, and there is...

Now let’s take a look at a slightly more complex object. Object properties can be nested to an arbitrary depth,...

Since arrays can be changed, or mutated, at any time, there’s no guarantee about where a particular piece of data...

In the past, the function require() would be used to import the functions and code in external files and modules....

Sometimes when working with arrays, it is very handy to be able to iterate through each item to find one...

A new feature of ES6 is the template literal. This is a special type of string that makes creating complex...

ES6 adds some nice support for easily defining object literals. Consider the following code: const getMousePosition = (x, y) =>...

You can obtain values from an object, and set a value of a property within an object. These are classically...

Theory In some cases, you can destructure the object in a function argument itself. Check out this code: const profileUpdate...

When defining functions within objects in ES5, we have to use the keyword function as follows: const person = {...

ES6 provides a new syntax to help create objects, using the keyword class. This is to be noted, that the...

It’s time we see how powerful arrow functions are when processing data. Arrow functions work really well with higher order...

Theory In order to help us create more flexible functions, ES6 introduces the rest operator for function parameters. With the...

Theory ES6 introduces the spread operator, which allows us to expand arrays and other expressions in places where multiple parameters...

Theory We saw earlier how spread operator can effectively spread, or unpack, the contents of the array. We can do...

We can similarly destructure nested objects into variables. Consider the following code: const a = { start: { x: 5,...

In some situations involving array destructuring, we might want to collect the rest of the elements into a separate array....

Theory ES6 makes destructuring arrays as easy as destructuring objects. One key difference between the spread operator and array destructuring...

Terminal Commands touch ‘filename’ - creates a new file mv ‘oldfilename’ ‘newfilename’ - renames file mkdir - creates a directory...

Return true if the passed string is a valid US phone number. The user may fill out the form field...

You are given a JSON object representing a part of your musical album collection. Each album has several properties and...

Check if the predicate (second argument) is truthy on all elements of a collection (first argument). Remember, you can access...

Find the missing letter in the passed letter range and return it. If all letters are present in the range,...

The DNA strand is missing the pairing element. Take each character, get its pair, and return the results as a...

Translate the provided string to pig latin. Pig Latin takes the first consonant (or consonant cluster) of an English word,...

Perform a search and replace on the sentence using the arguments provided and return the new sentence. First argument is...

Compare two arrays and return a new array with any items only found in one of the two given arrays,...

We’ll pass you an array of two numbers. Return the sum of those two numbers and all numbers between them....

We’ll pass you an array of two numbers. Return the sum of those two numbers and all numbers between them....

box-sizing: border-box; That will just make sure that any time we add padding or a border to an element, it...

a == b ? console.log("Match!") : console.log("No match!"); if condition a equals b is true, then do one thing, else...

With ECMAScript 2015, or ES6, we have two new types of variables you can use in addition to var. They...

AJAX uses JavaScript to make changes to the current document through something called the DOM. This is the Document Object...

Although AJAX was designed to work with files in the XML format, it will read the contents of any text...

Reading XML data into JavaScript is super simple. As a matter of fact, the XHR object comes with a special...

jQuery is a framework that fixes compatibility issues that happen with JavaScript in older browsers. The library also gives you...

To modify a group of elements use getElementsByTagName: var request; if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else {...

()[https://www.w3schools.com/tags/ref_eventattributes.asp] So right now this script is executing whenever it gets to it in the index.html file, which is at...

The first step in working with AJAX is to learn about the API browsers provide for sending and retrieving information....

Although usage of early versions of Internet Explorer have dropped dramatically in the last few years, it’s still important to...

So AJAX requests are supposed to be asynchronous by nature, which means that they should run in the background independently...

It’s key to understand the main and cross axes in flexbox. Switch the layout from row to column with flex-direction....

To help structure our code and make common operations reusable, we create functions and objects. Functions are mini programs inside...

Arrays are objects. In JavaScript, objects have properties and methods. Properties are pieces of meta information about the object we...

Return the lowest index at which a value (second argument) should be inserted into an array (first argument) once it...

One of the simplest and most widely known ciphers is a Caesar cipher, also known as a shift cipher. In...

function destroyer(arr) { var args = Array.from(arguments).slice(1); // console.log(args); return arr.filter(function(arrEl) { // console.log(arrEl); //evaluates to true if the array...

Remove all falsy values from an array. Falsy values in JavaScript are false, null, 0, “”, undefined, and NaN. Here...

Return the remaining elements of an array after chopping off n elements from the head. The head means the beginning...

String.prototype.indexOf() The indexOf() method returns the index within the calling String object of the first occurrence of the specified value,...

Write a function that splits an array (first argument) into groups the length of size (second argument) and returns them...

Truncate a string (first argument) if it is longer than the given maximum string length (second argument). Return the truncated...

Repeat a given string (first argument) num times (second argument). Return an empty string if num is not a positive...

Check if a string (first argument, str) ends with the given target string (second argument, target). This challenge can be...

Return an array consisting of the largest number from each provided sub-array. For simplicity, the provided array will contain exactly...

jQuery(document).ready(function($) { $('[data-toggle="ajaxModal"]').on('click', function(e) { $('#ajaxModal').remove(); e.preventDefault(); var $this = $(this) , $remote = $this.data('remote') || $this.attr('href') , $modal =...

A handy soluition for adding modal popups to your website. <body> <p><a name="Test" href="test2.html">Click Here!</a></p> <div id="modal"></div> <!-- jQuery -->...

returns an object where the keys are the duplicate entries and the values are an array with their indices Array.prototype.getDuplicates...