Solution 1 (Click to Show/Hide)
+ There are 3 things to do in this challenge. You can click each item to see the code. -
-
See the [Mongoose docs](https://mongoosejs.com/docs/guide.html) first where is a lot of useful stuff.
When you are building schema you can use either of three options for name validation
-```js
+```
+
name: String
name: {type: String}
name: {type: String, required: true} //preferred
```
-Assign Mongoose Schema to a variable. This is not necessary but will make your code easier to read.
+**Assign Mongoose Schema to a variable** +This is not necessary but will make your code easier to read. ```javascript const Schema = mongoose.Schema; ``` -
-
-Create Person schema.
+**Create Person schema.** ```javascript const personSchema = new Schema({ name: { type: String, required: true }, age: Number, - favoriteFoods: [String] + favoriteFoods: [String] }); ``` **Note**: If you choose to skip the first step, you have to use `mongoose.Schema` instead of `Schema`. -
-
+
diff --git a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/create-and-save-a-record-of-a-model/index.md b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/create-and-save-a-record-of-a-model/index.md
index 02b33361b9..70e5b992fe 100644
--- a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/create-and-save-a-record-of-a-model/index.md
+++ b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/create-and-save-a-record-of-a-model/index.md
@@ -3,9 +3,11 @@ title: Create and Save a Record of a Model
---
# Create and Save a Record of a Model
+
+---
## Hints
-### Hint #1
+### Hint 1
You need to do the following:
1. Create a model of a person, using the schema from exercise 2
@@ -13,9 +15,11 @@ You need to do the following:
3. Save the new person you created
4. Put your new person inside the `createAndSavePerson` function
+
+---
## Solutions
-Create Person model from the schema.
+ +**Create Person model from the schema.** ```javascript -const Person = mongoose.model('Person', personSchema); +const Person = mongoose.model("Person", personSchema); ```Solution #1 (Click to Show/Hide)
+Solution 1 (Click to Show/Hide)
Code for `myApp.js` diff --git a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/create-many-records-with-model.create/index.md b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/create-many-records-with-model.create/index.md index 3659aa0c4b..ba4e7934cb 100644 --- a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/create-many-records-with-model.create/index.md +++ b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/create-many-records-with-model.create/index.md @@ -3,23 +3,27 @@ title: Create Many Records with model.create() --- # Create Many Records with model.create() + +--- ## Hints -### Hint #1 +### Hint 1 Create an array of objects. Each object has a name, age and an array of favorite foods. Use the variable name `arrayOfPeople`. -### Hint #2 +### Hint 2 Create your many records (ie. create your people) inside the callback for `createManyPeople`. -### Hint #3 +### Hint 3 Use `Model.create()` to create many records. You should replace `Model` with the name of the model you defined in the previous section. Most likely you called your model `Person`. -### Hint #4 +### Hint 4 The `Model.create` function requires a callback, similar to the `person.save` function you used in the previous section. + +--- ## Solutions -Solution #1 (Click to Show/Hide)
+Solution 1 (Click to Show/Hide)
Code for `myApp.js` diff --git a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/delete-many-documents-with-model.remove/index.md b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/delete-many-documents-with-model.remove/index.md index 5457d435e5..6df867c4ab 100644 --- a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/delete-many-documents-with-model.remove/index.md +++ b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/delete-many-documents-with-model.remove/index.md @@ -1,7 +1,7 @@ --- title: Delete Many Documents with model.remove() --- -## Delete Many Documents with model.remove() +# Delete Many Documents with model.remove() This is a stub. Help our community expand it. diff --git a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove/index.md b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove/index.md index 5e2ad39e83..9dbbf3e05a 100644 --- a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove/index.md +++ b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove/index.md @@ -1,7 +1,7 @@ --- title: Delete One Document Using model.findByIdAndRemove --- -## Delete One Document Using model.findByIdAndRemove +# Delete One Document Using model.findByIdAndRemove This is a stub. Help our community expand it. diff --git a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/index.md b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/index.md index e2c7caf6b5..bef06722a1 100644 --- a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/index.md +++ b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/index.md @@ -1,7 +1,7 @@ --- title: MongoDB and Mongoose --- -## MongoDB and Mongoose +# MongoDB and Mongoose This is a stub. Help our community expand it. diff --git a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/install-and-set-up-mongoose/index.md b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/install-and-set-up-mongoose/index.md index 4d014daef5..ef4cca19d0 100644 --- a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/install-and-set-up-mongoose/index.md +++ b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/install-and-set-up-mongoose/index.md @@ -3,6 +3,8 @@ title: Install and Set Up Mongoose --- # Install and Set Up Mongoose +--- +## Problem Explanation You might want to check both the [MongoDB](https://www.npmjs.com/package/mongodb) and the [Mongoose](https://www.npmjs.com/package/mongoose) NPM Repositories for the manual configuration if you are not using Giltch. OR @@ -10,11 +12,13 @@ OR 1. You can use the glitch feature of search packages, install them and update package.json all by itself. (You should use fresh Glitch project from the url given in MongoDb and Mongoose first intro page). 2. Once done add the MONGO_URL in .env file and save your path as -```` mongodb://Solution #1 (Click to Show/Hide)
+Solution 1 (Click to Show/Hide)
**.env** diff --git a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save/index.md b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save/index.md index 9ccf8f00ac..35b9b2e3f6 100644 --- a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save/index.md +++ b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save/index.md @@ -1,7 +1,7 @@ --- title: Perform Classic Updates by Running Find, Edit, then Save --- -## Perform Classic Updates by Running Find, Edit, then Save +# Perform Classic Updates by Running Find, Edit, then Save This is a stub. Help our community expand it. diff --git a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate/index.md b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate/index.md index 1dfb826898..9b1fc2eb69 100644 --- a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate/index.md +++ b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate/index.md @@ -1,7 +1,7 @@ --- title: Perform New Updates on a Document Using model.findOneAndUpdate() --- -## Perform New Updates on a Document Using model.findOneAndUpdate() +# Perform New Updates on a Document Using model.findOneAndUpdate() This is a stub. Help our community expand it. diff --git a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/use-model.find-to-search-your-database/index.md b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/use-model.find-to-search-your-database/index.md index 22cd7aabe7..28333be40f 100644 --- a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/use-model.find-to-search-your-database/index.md +++ b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/use-model.find-to-search-your-database/index.md @@ -3,17 +3,21 @@ title: Use model.find() to Search Your Database --- # Use model.find() to Search Your Database + +--- ## Hints -### Hint #1 +### Hint 1 Replace `Model` with the name of your model from the previous sections. Most likely this is `Person`. -### Hint #2 +### Hint 2 Use `{name: personName}` for the first argument in `Model.find()`. + +--- ## Solutions -Solution #1 (Click to Show/Hide)
+Solution 1 (Click to Show/Hide)
Code for `myApp.js` diff --git a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id/index.md b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id/index.md index 3080ffd407..1f4d30e265 100644 --- a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id/index.md +++ b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id/index.md @@ -3,9 +3,11 @@ title: Use model.findById() to Search Your Database By _id --- # Use model.findById() to Search Your Database By _id + +--- ## Solutions -Solution #1 (Click to Show/Hide)
+Solution 1 (Click to Show/Hide)
Code for `myApp.js` diff --git a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database/index.md b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database/index.md index 53ea83d600..c1f96ceb04 100644 --- a/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database/index.md +++ b/guide/english/certifications/apis-and-microservices/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database/index.md @@ -3,9 +3,11 @@ title: Use model.findOne() to Return a Single Matching Document from Your Databa --- # Use model.findOne() to Return a Single Matching Document from Your Database + +--- ## Solutions -Solution #1 (Click to Show/Hide)
+Solution 1 (Click to Show/Hide)
Code for `myApp.js` diff --git a/guide/english/certifications/coding-interview-prep/algorithms/find-the-symmetric-difference/index.md b/guide/english/certifications/coding-interview-prep/algorithms/find-the-symmetric-difference/index.md index 2b215ad46e..5fa695918d 100644 --- a/guide/english/certifications/coding-interview-prep/algorithms/find-the-symmetric-difference/index.md +++ b/guide/english/certifications/coding-interview-prep/algorithms/find-the-symmetric-difference/index.md @@ -2,36 +2,35 @@ title: Find the Symmetric Difference --- - Remember to use **`Read-Search-Ask`** if you get stuck. Try to pair program and write your own code - -###  Problem Explanation: ### +# Find the Symmetric Difference +--- +## Problem Explanation Symmetric difference (commonly denoted by Δ) of two sets is the set of elements which are in either of the two sets, but not in both. For example, `sym([1, 2, 3], [5, 2, 1, 4])` should yield `[3, 4, 5]`. Following above definition, symmetric difference of three sets *A*, *B*, and *C* can be expressed as `(A Δ B) Δ C`. -#### Relevant Links #### +#### Relevant Links * [Symmetric difference - Wikipedia](https://en.wikipedia.org/wiki/Symmetric_difference) * [Symmetric difference - YouTube](https://www.youtube.com/watch?v=PxffSUQRkG4) * [Array.reduce()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) -##  Hint: 1 ## +--- +## Hints + +### Hint 1 The *arguments* object is *Array*-like object that only inherits `Array.length` property. Hence consider converting it to an actual *Array*. -> _try to solve the problem now_ - -##  Hint: 2 ## +### Hint 2 Deem writing a helper function that returns the symmetric difference of two arrays on each call instead of attempting to difference all sets simultaneously. -> _try to solve the problem now_ - -##  Hint: 3 ## +### Hint 3 Apply helper function against the created arguments array reducing its elements pairwise recursively to form the expected output. **Note** @@ -44,103 +43,95 @@ In the event of *odd number of sets* the symmetric difference will include ident (A ⋂ B) ⋂ C = {1, 4} &Intersection {3, 4, 5} A ⋂ B = {1, 3, 5} -> _try to solve the problem now_ -## Spoiler Alert! ## +--- +## Solutions - - -**Solution Ahead!** - -##  Basic Code Solution: ## +Solution 1 (Click to Show/Hide)
```javascript - function sym() { - var args = []; - for (var i = 0; i < arguments.length; i++) { - args.push(arguments[i]); +function sym() { + var args = []; + for (var i = 0; i < arguments.length; i++) { + args.push(arguments[i]); + } + + function symDiff(arrayOne, arrayTwo) { + var result = []; + + arrayOne.forEach(function(item) { + if (arrayTwo.indexOf(item) < 0 && result.indexOf(item) < 0) { + result.push(item); } + }); - function symDiff(arrayOne, arrayTwo) { - var result = []; - - arrayOne.forEach(function(item) { - if (arrayTwo.indexOf(item) < 0 && result.indexOf(item) < 0) { - result.push(item); - } - }); - - arrayTwo.forEach(function(item) { - if (arrayOne.indexOf(item) < 0 && result.indexOf(item) < 0) { - result.push(item); - } - }); - - return result; + arrayTwo.forEach(function(item) { + if (arrayOne.indexOf(item) < 0 && result.indexOf(item) < 0) { + result.push(item); } + }); - // Apply reduce method to args array, using the symDiff function - return args.reduce(symDiff); - } + return result; + } + + // Apply reduce method to args array, using the symDiff function + return args.reduce(symDiff); +} ``` -### Code Explanation: ### - +#### Code Explanation * `push()` is used to break down the *arguments* object to an array, *args*. * The `symDiff` function finds the symmetric difference between two sets. It is used as a callback function for the `reduce()` method called on *args*. * `arrayOne.forEach()` pushes the elements to *result* which are present only in *arrayOne* as well as not already a part of *result*. * `arrayTwo.forEach()` pushes the elements to *result* which are present only in *arrayTwo* as well as not already a part of *result*. * The *result*, which is the symmetric difference is returned. This solution works for any number of sets. -#### Relevant Links #### +#### Relevant Links * [Statement for](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/statements/for) * [Array.length](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/length) * [Array.push()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) * [Array.forEach()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) * [Array.indexOf()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) +Solution 2 (Click to Show/Hide)
```javascript - function sym() { +function sym() { + // Convert the argument object into a proper array + var args = Array.prototype.slice.call(arguments); - // Convert the argument object into a proper array - var args = Array.prototype.slice.call(arguments); - - // Return the symmetric difference of 2 arrays - var getDiff = function(arr1, arr2) { - - // Returns items in arr1 that don't exist in arr2 - function filterFunction(arr1, arr2) { - return arr1.filter(function(item) { - return arr2.indexOf(item) === -1; - }); - } - - // Run filter function on each array against the other - return filterFunction(arr1, arr2) - .concat(filterFunction(arr2, arr1)); - }; - - // Reduce all arguments getting the difference of them - var summary = args.reduce(getDiff, []); - - // Run filter function to get the unique values - var unique = summary.filter(function(elem, index, self) { - return index === self.indexOf(elem); - }); - return unique; + // Return the symmetric difference of 2 arrays + var getDiff = function(arr1, arr2) { + // Returns items in arr1 that don't exist in arr2 + function filterFunction(arr1, arr2) { + return arr1.filter(function(item) { + return arr2.indexOf(item) === -1; + }); } - // test here - sym([1, 2, 3], [5, 2, 1, 4]); + // Run filter function on each array against the other + return filterFunction(arr1, arr2).concat(filterFunction(arr2, arr1)); + }; + + // Reduce all arguments getting the difference of them + var summary = args.reduce(getDiff, []); + + // Run filter function to get the unique values + var unique = summary.filter(function(elem, index, self) { + return index === self.indexOf(elem); + }); + return unique; +} + +// test here +sym([1, 2, 3], [5, 2, 1, 4]); ``` -### Code Explanation: ### - +#### Code Explanation * The `slice()` method is used to break down the *arguments* object to an array, *args*. * The `getDiff` function finds the symmetric difference between two sets, *arr1* and *arr2*. It is used as a callback function for the `reduce()` method called on *args*. * The first `filterFunction()` returns elements in *arr1* that don't exist in *arr2*. @@ -148,41 +139,36 @@ In the event of *odd number of sets* the symmetric difference will include ident * *summary* consists of the reduced arguments. * `filter()` is used on *summary* to keep only the unique values and *unique* is returned. -#### Relevant Links #### +#### Relevant Links * [Array.slice()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) * [Array.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) * [Array.concat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) +Solution 3 (Click to Show/Hide)
```javascript - const diff = (arr1, arr2) => ( - [ - ...arr1.filter(e => !arr2.includes(e)), - ...arr2.filter(e => !arr1.includes(e)), - ] - ); +const diff = (arr1, arr2) => [ + ...arr1.filter(e => !arr2.includes(e)), + ...arr2.filter(e => !arr1.includes(e)) +]; - const sym = (...args) => [...new Set(args.reduce(diff))]; +const sym = (...args) => [...new Set(args.reduce(diff))]; - // test here - sym([1, 2, 3], [5, 2, 1, 4]); +// test here +sym([1, 2, 3], [5, 2, 1, 4]); ``` -### Code Explanation: ### +#### Code Explanation * The main function *sym()* reduces given arrays utilising helper function *diff()* to a single array. Also, it temporary converts the result to *Set* to remove duplicates. * The function *diff()* returns the symmetric difference of two arrays by picking out elements in parameterised arrays; *arr1* and *arr2*. -#### Relevant Links #### +#### Relevant Links * [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) * [Array.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) -##  NOTES FOR CONTRIBUTIONS: ## - -*  **DO NOT** add solutions that are similar to any existing solutions. If you think it is **_similar but better_**, then try to merge (or replace) the existing similar solution. -* Add an explanation of your solution. -* Categorize the solution in one of the following categories — **Basic**, **Intermediate** and **Advanced**.  +Solution 1 (Click to Show/Hide)
+ ```js -function swap(a, b, arr){ +function swap(a, b, arr) { let tmp = arr[a]; arr[a] = arr[b]; arr[b] = tmp; } function bubbleSort(array) { - for (let i = 0; i < array.length; i++){ - for (let j = 0; j < array.length-1-i; j++){ // -i because the largest element will be bubbled at the end so we don't have to compare. - if (array[j] > array[j+1]){ - swap(j, j+1, array); + for (let i = 0; i < array.length; i++) { + for (let j = 0; j < array.length - 1 - i; j++) { + // -i because the largest element will be bubbled at the end so we don't have to compare. + if (array[j] > array[j + 1]) { + swap(j, j + 1, array); } } } return array; } ``` -#### Solution 2: Advanced +Solution 2 (Click to Show/Hide)
+ ```js function bubbleSort(array) { - for (let i = 0; i < array.length; i++){ - for (let j = 0; j < array.length-1-i; j++){ - if (array[j] > array[j+1]) [array[j], array[j+1]] = [array[j+1], array[j]]; // Using ES6 array destructuring to swap + for (let i = 0; i < array.length; i++) { + for (let j = 0; j < array.length - 1 - i; j++) { + if (array[j] > array[j + 1]) + [array[j], array[j + 1]] = [array[j + 1], array[j]]; // Using ES6 array destructuring to swap } } return array; } - ``` +``` - ### References: + #### Relevant Links - [GeeksForGeeks](https://www.geeksforgeeks.org/bubble-sort/) - [Wikipedia](https://en.wikipedia.org/wiki/Bubble_sort) - Video by [HackerRank](https://www.youtube.com/watch?v=6Gv8vg0kcHc) +Solution 1 (Click to Show/Hide)
+ ```js function insertionSort(array) { - for (let i = 1; i < array.length; i++){ + for (let i = 1; i < array.length; i++) { let curr = array[i]; - for (var j = i-1; j >= 0 && array[j] > curr; j--){ - array[j+1] = array[j]; + for (var j = i - 1; j >= 0 && array[j] > curr; j--) { + array[j + 1] = array[j]; } - array[j+1] = curr; + array[j + 1] = curr; } return array; } ``` -### References: +#### Relevant Links - [Wikipedia](https://en.wikipedia.org/wiki/Insertion_sort) - [Khan Academy](https://www.youtube.com/watch?v=lCzQvQr8Utw) +Solution 1 (Click to Show/Hide)
+ ```js //Merger function, which merges 2 sorted array into 1 sorted array -function merger(arr1, arr2){ - let i = 0, j = 0, mergedArr = []; - while (i < arr1.length && j < arr2.length){ +function merger(arr1, arr2) { + let i = 0, + j = 0, + mergedArr = []; + while (i < arr1.length && j < arr2.length) { if (arr1[i] > arr2[j]) mergedArr.push(arr2[j++]); else mergedArr.push(arr1[i++]); } - while (i < arr1.length){ + while (i < arr1.length) { mergedArr.push(arr1[i++]); } - while (j < arr2.length){ + while (j < arr2.length) { mergedArr.push(arr2[j++]); } return mergedArr; @@ -34,17 +42,18 @@ function merger(arr1, arr2){ function mergeSort(array) { //Array of length 1 is sorted so we return the same array back if (array.length == 1) return array; - + //Break down the array to half from middle into left and right - let middle = Math.floor(array.length/2); + let middle = Math.floor(array.length / 2); let left = mergeSort(array.slice(0, middle)); - let right = mergeSort(array.slice(middle)); - + let right = mergeSort(array.slice(middle)); + //Return the merged sorted array return merger(left, right); } ``` -### References: +#### Relevant Links - [Wikipedia](https://en.wikipedia.org/wiki/Merge_sort) - Video by [Hackerrank](https://www.youtube.com/watch?v=KF2j-9iSf4Q) +Solution 1 (Click to Show/Hide)
+ ```js -//Swapping array elements via ES6 array destructuring -function swap(arr, x, y){ +//Swapping array elements via ES6 array destructuring +function swap(arr, x, y) { [arr[x], arr[y]] = [arr[y], arr[x]]; } //Pivot function returns the fixed pivot point -function pivot(arr, left = 0, right = arr.length-1){ +function pivot(arr, left = 0, right = arr.length - 1) { let shift = left; - for (let i = left+1; i <= right; i++){ - + for (let i = left + 1; i <= right; i++) { //Move all the small elements on the left side if (arr[i] < arr[left]) swap(arr, i, ++shift); } - + //Finally swapping the last element with the left swap(arr, left, shift); return shift; } -function quickSort(array, left = 0, right = array.length-1) { - if (left < right){ +function quickSort(array, left = 0, right = array.length - 1) { + if (left < right) { let pivotIndex = pivot(array, left, right); - + //Recusrively calling the function to the left of the pivot and to the right of the pivot - quickSort(array, left, pivotIndex-1); - quickSort(array, pivotIndex+1, right); + quickSort(array, left, pivotIndex - 1); + quickSort(array, pivotIndex + 1, right); } return array; } ``` -### Reference: +#### Relevant Links - [Wikipedia](https://en.wikipedia.org/wiki/Quicksort) - [Khan Academy](https://www.khanacademy.org/computing/computer-science/algorithms/quick-sort/a/overview-of-quicksort) +Solution 1 (Click to Show/Hide)
+ ```js -function swap(a, b, arr){ +function swap(a, b, arr) { let tmp = arr[a]; arr[a] = arr[b]; arr[b] = tmp; } function selectionSort(array) { - for (let i = 0; i < array.length-1; i++){ + for (let i = 0; i < array.length - 1; i++) { let min = i; - for (let j = i+1; j < array.length; j++){ + for (let j = i + 1; j < array.length; j++) { if (array[min] > array[j]) min = j; } swap(i, min, array); @@ -31,6 +36,8 @@ function selectionSort(array) { } ``` -### References: +#### Relevant Links - Read about Selection Sort at [Wikipedia](https://en.wikipedia.org/wiki/Selection_sort) + +Solution 1 (Click to Show/Hide)
```javascript - function updateInventory(arr1, arr2) { +function updateInventory(arr1, arr2) { + // Variable for location of product + var index; - // Variable for location of product - var index; - - // A helper method to return the index of a specified product (undefined if not found) - var getProductIndex = function (name) { - for (var i = 0; i < this.length; i++) { - if (this[i][1] === name) { - return i; - } - } - return undefined; - } - - // For each item of the new Inventory - for (var i = 0; i < arr2.length; i++) { - - // Invoke our helper function using arr1 as this - index = getProductIndex.call(arr1, arr2[i][1]); - - // If the item doesn't exist - if (index === undefined) { - // Push the entire item - arr1.push(arr2[i]); - } else { - // Add the new quantity of the current item - arr1[index][0] += arr2[i][0]; - } - - } - - // Sort alphabetically, by the product name of each item - arr1.sort(function (a, b) { - if (a[1] > b[1]) { - return 1; - } - if (a[1] < b[1]) { - return -1; - } - return 0; - }); - - return arr1; + // A helper method to return the index of a specified product (undefined if not found) + var getProductIndex = function(name) { + for (var i = 0; i < this.length; i++) { + if (this[i][1] === name) { + return i; + } } + return undefined; + }; - // test here - // Example inventory lists - var curInv = [ - [21, "Bowling Ball"], - [2, "Dirty Sock"], - [1, "Hair Pin"], - [5, "Microphone"] - ]; + // For each item of the new Inventory + for (var i = 0; i < arr2.length; i++) { + // Invoke our helper function using arr1 as this + index = getProductIndex.call(arr1, arr2[i][1]); - var newInv = [ - [2, "Hair Pin"], - [3, "Half-Eaten Apple"], - [67, "Bowling Ball"], - [7, "Toothpaste"] - ]; + // If the item doesn't exist + if (index === undefined) { + // Push the entire item + arr1.push(arr2[i]); + } else { + // Add the new quantity of the current item + arr1[index][0] += arr2[i][0]; + } + } - updateInventory(curInv, newInv); + // Sort alphabetically, by the product name of each item + arr1.sort(function(a, b) { + if (a[1] > b[1]) { + return 1; + } + if (a[1] < b[1]) { + return -1; + } + return 0; + }); + + return arr1; +} + +// test here +// Example inventory lists +var curInv = [ + [21, "Bowling Ball"], + [2, "Dirty Sock"], + [1, "Hair Pin"], + [5, "Microphone"] +]; + +var newInv = [ + [2, "Hair Pin"], + [3, "Half-Eaten Apple"], + [67, "Bowling Ball"], + [7, "Toothpaste"] +]; + +updateInventory(curInv, newInv); ``` -### Code Explanation: +#### Code Explanation * The variable **index** stores the location (index) of a product. * The helper function `getProductIndex()` returns the index of a specified product. It iterates through each element of the array that it is called on until it can find the name parameter. If the product is not found in the inventory, `undefined` is returned. @@ -124,74 +118,75 @@ Return the completed inventory in alphabetical order. * JS Array.prototype.push() * JS Array.prototype.sort() -##  Intermediate Code Solution: +Solution 2 (Click to Show/Hide)
+ ```javascript - function updateInventory(arr1, arr2) { - // All inventory must be accounted for or you're fired! +function updateInventory(arr1, arr2) { + // All inventory must be accounted for or you're fired! - var index; - var arrCurInvName = []; // Names of arr1's items - var arrNeInvName = []; // Names of arr2's items + var index; + var arrCurInvName = []; // Names of arr1's items + var arrNeInvName = []; // Names of arr2's items - // Same as using two for loops, this takes care of increasing the number of stock quantity. - arr1.map(function(item1) { - return arr2.map(function(item2) { - if (item1[1] === item2[1]) { - item1[0] = item1[0] + item2[0]; //Increase number of stock - } - }); - }); + // Same as using two for loops, this takes care of increasing the number of stock quantity. + arr1.map(function(item1) { + return arr2.map(function(item2) { + if (item1[1] === item2[1]) { + item1[0] = item1[0] + item2[0]; //Increase number of stock + } + }); + }); - // Get item's name for new Inventory - arr2.map(function(item) { - arrNeInvName.push(item[1]); - }); + // Get item's name for new Inventory + arr2.map(function(item) { + arrNeInvName.push(item[1]); + }); - // Get item's name for Current Inventory - arr1.map(function(item) { - arrCurInvName.push(item[1]); - }); + // Get item's name for Current Inventory + arr1.map(function(item) { + arrCurInvName.push(item[1]); + }); - // Add new inventory items to current inventory. - arrNeInvName.map(function(item) { - if (arrCurInvName.indexOf(item) === -1) { - index = arrNeInvName.indexOf(item); - arr1.push(arr2[index]); - } - }); - - // Sort the array alphabetically using the second element of the array as base. - arr1.sort(function(currItem, nextItem) { - - //Ternary function to avoid using if else - return currItem[1] > nextItem[1] ? 1 : -1; - }); - - return arr1; + // Add new inventory items to current inventory. + arrNeInvName.map(function(item) { + if (arrCurInvName.indexOf(item) === -1) { + index = arrNeInvName.indexOf(item); + arr1.push(arr2[index]); } + }); - // test here - // Example inventory lists - var curInv = [ - [21, "Bowling Ball"], - [2, "Dirty Sock"], - [1, "Hair Pin"], - [5, "Microphone"] - ]; + // Sort the array alphabetically using the second element of the array as base. + arr1.sort(function(currItem, nextItem) { + //Ternary function to avoid using if else + return currItem[1] > nextItem[1] ? 1 : -1; + }); - var newInv = [ - [2, "Hair Pin"], - [3, "Half-Eaten Apple"], - [67, "Bowling Ball"], - [7, "Toothpaste"] - ]; + return arr1; +} - updateInventory(curInv, newInv); +// test here +// Example inventory lists +var curInv = [ + [21, "Bowling Ball"], + [2, "Dirty Sock"], + [1, "Hair Pin"], + [5, "Microphone"] +]; + +var newInv = [ + [2, "Hair Pin"], + [3, "Half-Eaten Apple"], + [67, "Bowling Ball"], + [7, "Toothpaste"] +]; + +updateInventory(curInv, newInv); ``` -### Code Explanation: +#### Code Explanation * The variable **index** stores the location (index) of a product. * **arrCurInvName** has the names of **arr1**'s items. @@ -207,66 +202,64 @@ Return the completed inventory in alphabetical order. * JS Array.prototype.indexOf() * JS Ternary Operator -##  Advanced Code Solution: +Solution 3 (Click to Show/Hide)
```javascript - function updateInventory(arr1, arr2) { - // All inventory must be accounted for or you're fired! +function updateInventory(arr1, arr2) { + // All inventory must be accounted for or you're fired! - // convert current inventory (arr1) to an one-dimensional array - const inventory = Array.prototype.concat.apply([], arr1); + // convert current inventory (arr1) to an one-dimensional array + const inventory = Array.prototype.concat.apply([], arr1); - // loop through new delivery (arr2) - for (let i = 0; i < arr2.length; i++) { + // loop through new delivery (arr2) + for (let i = 0; i < arr2.length; i++) { + // extract item properties for easy reference + const item = arr2[i][1]; + const quantity = arr2[i][0]; - // extract item properties for easy reference - const item = arr2[i][1]; - const quantity = arr2[i][0]; - - // check if item already exists in inventory - const position = inventory.indexOf(item); - - // exsisting item: update quantity - if (position !== -1) { - const row = Math.floor(position / 2); - arr1[row][0] += quantity; - continue; - } - - // alien item: add to inventory - arr1.push([quantity, item]); - - } - - // sort inventory in alphabetical order - arr1.sort((previous, next) => (previous[1] > [next[1]]) ? 1 : -1); - - return arr1; + // check if item already exists in inventory + const position = inventory.indexOf(item); + // exsisting item: update quantity + if (position !== -1) { + const row = Math.floor(position / 2); + arr1[row][0] += quantity; + continue; } + // alien item: add to inventory + arr1.push([quantity, item]); + } - // test here - // Example inventory lists - var curInv = [ - [21, "Bowling Ball"], - [2, "Dirty Sock"], - [1, "Hair Pin"], - [5, "Microphone"] - ]; + // sort inventory in alphabetical order + arr1.sort((previous, next) => (previous[1] > [next[1]] ? 1 : -1)); - var newInv = [ - [2, "Hair Pin"], - [3, "Half-Eaten Apple"], - [67, "Bowling Ball"], - [7, "Toothpaste"] - ]; + return arr1; +} - updateInventory(curInv, newInv); +// test here +// Example inventory lists +var curInv = [ + [21, "Bowling Ball"], + [2, "Dirty Sock"], + [1, "Hair Pin"], + [5, "Microphone"] +]; + +var newInv = [ + [2, "Hair Pin"], + [3, "Half-Eaten Apple"], + [67, "Bowling Ball"], + [7, "Toothpaste"] +]; + +updateInventory(curInv, newInv); ``` -### Code Explanation: +#### Code Explanation * Convert current inventory array **arr1** to an one-dimensional array in order that `indexOf()` method could be used to check existance of new delivery items in current inventory. * Check if item already exists in current inventory using `indexOf()`. @@ -279,9 +272,5 @@ Return the completed inventory in alphabetical order. * JS Function.prototype.apply() * JS continue * JS Array.prototype.sort() +Solution 1 (Click to Show/Hide)
- +```js +function permAlone(str) { + // Create a regex to match repeated consecutive characters. + var regex = /(.)\1+/; -**Solution ahead!** + // Split the string into an array of characters. + var arr = str.split(""); + var permutations = []; + var tmp; -##  Basic Code Solution: + // Return 0 if str contains same character. + if (str.match(regex) !== null && str.match(regex)[0] === str) return 0; - function permAlone(str) { + // Function to swap variables' content. + function swap(index1, index2) { + tmp = arr[index1]; + arr[index1] = arr[index2]; + arr[index2] = tmp; + } - // Create a regex to match repeated consecutive characters. - var regex = /(.)\1+/; - - // Split the string into an array of characters. - var arr = str.split(''); - var permutations = []; - var tmp; - - // Return 0 if str contains same character. - if (str.match(regex) !== null && str.match(regex)[0] === str) return 0; - - // Function to swap variables' content. - function swap(index1, index2) { - tmp = arr[index1]; - arr[index1] = arr[index2]; - arr[index2] = tmp; + // Generate arrays of permutations using the algorithm. + function generate(int) { + if (int === 1) { + // Make sure to join the characters as we create the permutation arrays + permutations.push(arr.join("")); + } else { + for (var i = 0; i != int; ++i) { + generate(int - 1); + swap(int % 2 ? 0 : i, int - 1); } - - // Generate arrays of permutations using the algorithm. - function generate(int) { - if (int === 1) { - // Make sure to join the characters as we create the permutation arrays - permutations.push(arr.join('')); - } else { - for (var i = 0; i != int; ++i) { - generate(int - 1); - swap(int % 2 ? 0 : i, int - 1); - } - } - } - - generate(arr.length); - - // Filter the array of repeated permutations. - var filtered = permutations.filter(function(string) { - return !string.match(regex); - }); - - // Return how many have no repetitions. - return filtered.length; } + } - // Test here. - permAlone('aab'); + generate(arr.length); + // Filter the array of repeated permutations. + var filtered = permutations.filter(function(string) { + return !string.match(regex); + }); -### Code Explanation: + // Return how many have no repetitions. + return filtered.length; +} + +// Test here. +permAlone("aab"); +``` + +#### Code Explanation * **regex** contains the regular expression to match repeated consecutive characters. * The string **str** is split into an array of characters, **arr**. @@ -162,8 +163,5 @@ A way to visualize this is by considering a tree that starts with the first char * array.length * JS Array Prototype Filter -##  NOTES FOR CONTRIBUTIONS: -*  **DO NOT** add solutions that are similar to any existing solutions. If you think it is **_similar but better_**, then try to merge (or replace) the existing similar solution. -* Add an explanation of your solution. -* Categorize the solution in one of the following categories — **Basic**, **Intermediate** and **Advanced**.  +Solution 1 (Click to Show/Hide)
+ +```js +var undirectedAdjList = { + James: ["Jeff"], + Jill: ["Jenny"], + Jenny: ["Jill", "Jeff"], + Jeff: ["Jenny", "James"] +}; +``` - -## Spoiler Alert! - - - -**Solution ahead!** - -##  Basic Code Solution: - - var undirectedAdjList = { - James: ["Jeff"], - Jill: ["Jenny"], - Jenny: ["Jill", "Jeff"], - Jeff: ["Jenny", "James"] - }; - - -### Code Explanation: +#### Code Explanation * The undirected graph is created using a Javascript Object. Each unique name is a key and the each person who has a relationship with the name is in the unique name's array value. e.g. if James and Jeff have a relationship, Jeff will be in James's array value and James will be in Jeff's array value. -##  NOTES FOR CONTRIBUTIONS: - -*  **DO NOT** add solutions that are similar to any existing solutions. If you think it is **_similar but better_**, then try to merge (or replace) the existing similar solution. -* Add an explanation of your solution. -* Categorize the solution in one of the following categories — **Basic**, **Intermediate** and **Advanced**.  +Solution 1 (Click to Show/Hide)
+ +```js +function bfs(graph, root) { + // Distance object returned + var nodesLen = {}; + // Set all distances to infinity + for (var i = 0; i < graph.length; i++) { + nodesLen[i] = Infinity; + } + nodesLen[root] = 0; // ...except root node + var queue = [root]; // Keep track of nodes to visit + var current; // Current node traversing + // Keep on going until no more nodes to traverse + while (queue.length !== 0) { + current = queue.shift(); + // Get adjacent nodes from current node + var curConnected = graph[current]; // Get layer of edges from current + var neighborIdx = []; // List of nodes with edges + var idx = curConnected.indexOf(1); // Get first edge connection + while (idx !== -1) { + neighborIdx.push(idx); // Add to list of neighbors + idx = curConnected.indexOf(1, idx + 1); // Keep on searching + } + // Loop through neighbors and get lengths + for (var j = 0; j < neighborIdx.length; j++) { + // Increment distance for nodes traversed + if (nodesLen[neighborIdx[j]] === Infinity) { + nodesLen[neighborIdx[j]] = nodesLen[current] + 1; + queue.push(neighborIdx[j]); // Add new neighbors to queue + } + } + } + return nodesLen; +} ``` - -The breadth first search algorithm moves from one level to another starting from the root of the tree. We will make use of a `queue` for this. - -```python - -def bfs(root_node): - queue = [root_node] - - while queue: - top_element = queue.pop() - print("Node processed: ",top_element) - - if top_element.left: - queue.append(top_element.left) - - if top_element.right: - queue.append(top_element.right) -``` - -We can easily modify the above code to print the level of each node as well. - -```python - -def bfs(root_node): - queue = [(root_node, 0)] - - while queue: - top_element, level = queue.pop() - print("Node processed: {} at level {}".format(top_element, level)) - - if top_element.left: - queue.append((top_element.left, level + 1)) - - if top_element.right: - queue.append((top_element.right, level + 1)) -``` - - -| Complexity | Time | Space | -| ----- | ------ | ------ | -| BFS | n | n | - +Solution 1 (Click to Show/Hide)
+ ```js class CircularQueue { - constructor(size) { - - this.queue = []; - this.read = 0; - this.write = 0; - this.max = size - 1; - - while (size > 0) { - this.queue.push(null); - size--; - } - + constructor(size) { + this.queue = []; + this.read = 0; + this.write = 0; + this.max = size - 1; + + while (size > 0) { + this.queue.push(null); + size--; } - - print() { - return this.queue; + } + + print() { + return this.queue; + } + + enqueue(item) { + if (this.queue[this.write] === null) { + this.queue[this.write++] = item; + + if (this.write > this.max) this.write = 0; + return item; } - - - enqueue(item) { - if (this.queue[this.write] === null){ - this.queue[this.write++] = item; - - if (this.write > this.max) this.write = 0; - return item; - } - return null; + return null; + } + + dequeue() { + if (this.queue[this.read] != null) { + let item = this.queue[this.read]; + this.queue[this.read++] = null; + if (this.read > this.max) this.read = 0; + return item; } - - dequeue() { - if (this.queue[this.read] != null){ - let item = this.queue[this.read]; - this.queue[this.read++] = null; - if (this.read > this.max) this.read = 0; - return item; - } - return null; - } - } - ``` -### References: + return null; + } +} +``` +#### Relevant Links - [Wikipedia](https://en.wikipedia.org/wiki/Circular_buffer) + +Solution 1 (Click to Show/Hide)
+ ```js //function which swaps elements in array, using ES6 syntax function swap(arr, i, j) { @@ -121,5 +126,7 @@ class PriorityQueue { } ``` -### References: +#### Relevant Links - [Wikipedia](https://en.wikipedia.org/wiki/Priority_queue) + +Solution 1 (Click to Show/Hide)
+ +**Note:** This solution is not exactly a queue, the shift() method used in the dequeue() method is of complexity `O(n)` and not `O(1)`. However, the advanced solution rectifies this and uses Object(HashTables) instead of Array to implement Queue. + ```js -function Queue () { - var collection = []; - this.print = function() { - console.log(collection); - }; - this.enqueue = function(val){ - collection.push(val); - }; - this.dequeue = function(){ - return collection.shift(); - } - this.front = function(){ - return collection[0]; - } - this.size = function(){ - return collection.length; - } - this.isEmpty = function(){ - return collection.length === 0; - } +function Queue() { + var collection = []; + this.print = function() { + console.log(collection); + }; + this.enqueue = function(val) { + collection.push(val); + }; + this.dequeue = function() { + return collection.shift(); + }; + this.front = function() { + return collection[0]; + }; + this.size = function() { + return collection.length; + }; + this.isEmpty = function() { + return collection.length === 0; + }; } ``` -#### Advanced - ES6 class syntax: +Solution 2 (Click to Show/Hide)
+ ```js class Queue { - constructor(){ - this.collection = {}; - this.start = 0; - this.end = 0; - } - print(){ - console.log(this.collection); - } - enqueue(val){ - this.collection[this.end++] = val; - } - dequeue(){ - return this.collection[this.start++]; - } - front(){ - return this.collection[this.start]; - } - size(){ - return this.end - this.start; - } - isEmpty(){ - return this.size() === 0; - } + constructor() { + this.collection = {}; + this.start = 0; + this.end = 0; + } + print() { + console.log(this.collection); + } + enqueue(val) { + this.collection[this.end++] = val; + } + dequeue() { + return this.collection[this.start++]; + } + front() { + return this.collection[this.start]; + } + size() { + return this.end - this.start; + } + isEmpty() { + return this.size() === 0; + } } ``` -### References: +#### Relevant Links - [Wikipedia](https://en.wikipedia.org/wiki/Queue_(abstract_data_type)) +Solution 1 (Click to Show/Hide)
+ ```js function Set() { - // the var collection will hold our set - var collection = []; - // this method will check for the presence of an element and return true or false - this.has = function(element) { - return (collection.indexOf(element) !== -1); - }; - // this method will return all the values in the set - this.values = function() { - return collection; - }; - this.add = function(el) { - return this.has(el) ? false : Boolean(collection.push(el)); - } + // the var collection will hold our set + var collection = []; + // this method will check for the presence of an element and return true or false + this.has = function(element) { + return collection.indexOf(element) !== -1; + }; + // this method will return all the values in the set + this.values = function() { + return collection; + }; + this.add = function(el) { + return this.has(el) ? false : Boolean(collection.push(el)); + }; } ``` -### Resources: +#### Relevant Links - [Wikipedia](https://en.wikipedia.org/wiki/Set_(abstract_data_type)) + +Solution 1 (Click to Show/Hide)
+ +```js +function Stack() { + var collection = []; + this.print = function() { + console.log(collection); + }; + this.push = function(val) { + return collection.push(val); + }; + this.pop = function() { + return collection.pop(); + }; + this.peek = function() { + return collection[collection.length - 1]; + }; + this.isEmpty = function() { + return collection.length === 0; + }; + this.clear = function() { + collection.length = 0; + }; } ``` - ### Resources: +Solution 2 (Click to Show/Hide)
+ +```js +class Stack { + constructor() { + this.collection = []; + } + print() { + console.log(this.collection); + } + push(val) { + return this.collection.push(val); + } + pop() { + return this.collection.pop(); + } + peek() { + return this.collection[this.collection.length - 1]; + } + isEmpty() { + return this.collection.length === 0; + } + clear() { + return (this.collection.length = 0); + } +} +``` + #### Relevant Links - [Wikipedia](https://en.wikipedia.org/wiki/Stack_(abstract_data_type)) +Solution 1 (Click to Show/Hide)
```js function checkSet() { @@ -46,13 +40,10 @@ function checkSet() { checkSet(); ``` -### Code Explanation: +#### Code Explanation * Creating a set object as shown in pre-written code will create the set without duplicate objects. * Therefore, by using the add function, we can add items to the set and they will not be duplicated, and will still be represented in the array. -##  NOTES FOR CONTRIBUTIONS: -*  **DO NOT** add solutions that are similar to any existing solutions. If you think it is **_similar but better_**, then try to merge (or replace) the existing similar solution. -* Add an explanation of your solution. -* Categorize the solution in one of the following categories — **Basic**, **Intermediate** and **Advanced**.  +Solution 1 (Click to Show/Hide)
```js -var displayTree = (tree) => console.log(JSON.stringify(tree, null, 2)); +var displayTree = tree => console.log(JSON.stringify(tree, null, 2)); function Node(value) { - this.value = value; - this.left = null; - this.right = null; + this.value = value; + this.left = null; + this.right = null; } function BinarySearchTree() { - this.root = null; - // change code below this line - // change code above this line - this.findMinHeight = function(root = this.root) { - // empty tree. - if(root === null) { - return -1; - } - // leaf node. - if(root.left === null && root.right === null) { - return 0; - } - if(root.left === null){ - return this.findMinHeight(root.right) + 1; - } - if(root.right === null){ - return this.findMinHeight(root.left) + 1; - } - const lHeight = this.findMinHeight(root.left); - const rHeight = this.findMinHeight(root.right); - return Math.min(lHeight, rHeight) + 1; - }; - this.findMaxHeight = function(root = this.root) { - // empty tree. - if(root === null) { - return -1; - } - // leaf node. - if(root.left === null && root.right === null) { - return 0; - } - if(root.left === null){ - return this.findMaxHeight(root.right) + 1; - } - if(root.right === null){ - return this.findMaxHeight(root.left) + 1; - } - const lHeight = this.findMaxHeight(root.left); - const rHeight = this.findMaxHeight(root.right); - return Math.max(lHeight, rHeight) + 1; - }; - this.isBalanced = function(root = this.root) { + this.root = null; + // change code below this line + // change code above this line + this.findMinHeight = function(root = this.root) { + // empty tree. + if (root === null) { + return -1; + } + // leaf node. + if (root.left === null && root.right === null) { + return 0; + } + if (root.left === null) { + return this.findMinHeight(root.right) + 1; + } + if (root.right === null) { + return this.findMinHeight(root.left) + 1; + } + const lHeight = this.findMinHeight(root.left); + const rHeight = this.findMinHeight(root.right); + return Math.min(lHeight, rHeight) + 1; + }; + this.findMaxHeight = function(root = this.root) { + // empty tree. + if (root === null) { + return -1; + } + // leaf node. + if (root.left === null && root.right === null) { + return 0; + } + if (root.left === null) { + return this.findMaxHeight(root.right) + 1; + } + if (root.right === null) { + return this.findMaxHeight(root.left) + 1; + } + const lHeight = this.findMaxHeight(root.left); + const rHeight = this.findMaxHeight(root.right); + return Math.max(lHeight, rHeight) + 1; + }; + this.isBalanced = function(root = this.root) { + if (root === null) { + return true; + } - if(root === null) { - return true; - } + if (root.left === null && root.right === null) { + return true; + } - if(root.left === null && root.right === null){ - return true; - } + if (root.left === null) { + return this.findMaxHeight(root.right) <= 0; + } - if(root.left === null) { - return this.findMaxHeight(root.right) <= 0; - } + if (root.right === null) { + return this.findMaxHeight(root.left) <= 0; + } - if(root.right === null) { - return this.findMaxHeight(root.left) <= 0; - } - - const lHeight = this.findMaxHeight(root.left); - const rHeight = this.findMaxHeight(root.right); - if(Math.abs(lHeight - rHeight) > 1){ - return false; - } - return this.isBalanced(root.left) && this.isBalanced(root.right); - }; + const lHeight = this.findMaxHeight(root.left); + const rHeight = this.findMaxHeight(root.right); + if (Math.abs(lHeight - rHeight) > 1) { + return false; + } + return this.isBalanced(root.left) && this.isBalanced(root.right); + }; } ``` - - - +Solution 1 (Click to Show/Hide)
```js -var displayTree = (tree) => console.log(JSON.stringify(tree, null, 2)); +var displayTree = tree => console.log(JSON.stringify(tree, null, 2)); function Node(value) { this.value = value; this.left = null; @@ -45,15 +40,13 @@ function BinarySearchTree() { this.invert(node.right); } return node; - } - // change code above this line + }; + // change code above this line } ``` Run Code -### Code Explanation: +#### Code Explanation * Using recursion will allow you to traverse each node once and the only extra memory used is the auxiliary temp variable that enables you to swap. You keep swapping the left and right pointers of a node until you reach the leaves which will not do anything as the left and right of them are null references. -## NOTES FOR CONTRIBUTIONS: -**DO NOT** add solutions that are similar to any existing solutions. If you think it is **_similar but better_**, then try to merge (or replace) the existing similar solution. -* Add an explanation of your solution. -* Categorize the solution in one of the following categories — **Basic**, **Intermediate** and **Advanced**. +Solution 1 (Click to Show/Hide)
+ ```js -var homeworkStack = ["BIO12","HIS80","MAT122","PSY44"]; +var homeworkStack = ["BIO12", "HIS80", "MAT122", "PSY44"]; homeworkStack.pop(); homeworkStack.push("CS50"); ``` -### Reference: +#### Relevant Links - [Wikipedia](https://en.wikipedia.org/wiki/Stack_(abstract_data_type)) - Video by [Hackerrank](https://www.youtube.com/watch?v=wjI1WNcIntg) + +Solution 1 (Click to Show/Hide)
```js var Node = function(data, prev) { @@ -31,32 +36,32 @@ var DoublyLinkedList = function() { this.head = node; this.tail = node; } else { - while (currentNode.next) { - previousNode = currentNode; + while (currentNode.next) { + previousNode = currentNode; currentNode = currentNode.next; } node.prev = currentNode; currentNode.next = node; this.tail = node; } - }; + }; this.reverse = function() { let temp = null; let currentNode = this.head; - + if (this.head === null) { return null; } - + this.tail = currentNode; - + while (currentNode) { - temp = currentNode.prev; + temp = currentNode.prev; currentNode.prev = currentNode.next; currentNode.next = temp; currentNode = currentNode.prev; } - + if (temp != null) { this.head = temp.prev; } @@ -65,5 +70,7 @@ var DoublyLinkedList = function() { }; ``` -### Reference: +#### Relevant Links - [Wikipedia](https://en.wikipedia.org/wiki/Doubly_linked_list) + +Solution 1 (Click to Show/Hide)
+ ```js //Create a buffer of 64 bytes var buffer = new ArrayBuffer(64); @@ -16,6 +22,8 @@ var buffer = new ArrayBuffer(64); var i32View = new Int32Array(buffer); ``` -### References: +#### Relevant Links - [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) - [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays) + +Solution 1 (Click to Show/Hide)
+ ```js function multiplesOf3and5(number) { - let sum = 0, i = 3; - while (i < number){ + let sum = 0, + i = 3; + while (i < number) { if (i % 3 == 0 || i % 5 == 0) sum += i; i++; } @@ -22,5 +29,7 @@ function multiplesOf3and5(number) { ``` -### Reference: +#### Relevant Links - [Modulo operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_()) + +Solution 1 (Click to Show/Hide)
+ ```js function primeSummation(n) { @@ -50,5 +55,6 @@ function primeSummation(n) { ``` -### References: +#### Relevant Links - Sieve of Eratosthenes [Wikipedia](https://en.wikipedia.org/wiki/Sieve_of_Eratosthenes) +Solution 1 (Click to Show/Hide)
+ +Iterative ```js function fiboEvenSum(n) { - let first = 1, second = 2, sum = 2, fibNum; // declaring and initializing variables + let first = 1, + second = 2, + sum = 2, + fibNum; // declaring and initializing variables if (n <= 1) return sum; // edge case - for (let i = 3; i <= n; i++){ // looping till n - fibNum = first + second; // getting the ith fibonacci number + for (let i = 3; i <= n; i++) { + // looping till n + fibNum = first + second; // getting the ith fibonacci number first = second; second = fibNum; - if (fibNum%2 == 0) sum+=fibNum; // If even add to the sum variable + if (fibNum % 2 == 0) sum += fibNum; // If even add to the sum variable } return sum; } ``` -#### Advanced Solution - Recursive: +Solution 2 (Click to Show/Hide)
+ +Recursive ```js -// We use memoization technique to save ith fibonacci number to the fib array -function fiboEvenSum(n){ - const fib = [1, 1, 2]; +// We use memoization technique to save ith fibonacci number to the fib array +function fiboEvenSum(n) { + const fib = [1, 1, 2]; let sumEven = fib[2]; - function fibonacci(n){ - if (n <= 1) return fib[n]; // base condition - else if (fib[n]) return fib[n]; // if the number exists in the array we cache it and return + function fibonacci(n) { + if (n <= 1) return fib[n]; + // base condition + else if (fib[n]) return fib[n]; + // if the number exists in the array we cache it and return else { - fib[n] = fibonacci(n-1) + fibonacci(n-2); // otherwise calculcate and save it to the array - if (fib[n]%2 == 0) sumEven+=fib[n]; //if the number is even, add it to the sumEven variable + fib[n] = fibonacci(n - 1) + fibonacci(n - 2); // otherwise calculcate and save it to the array + if (fib[n] % 2 == 0) sumEven += fib[n]; //if the number is even, add it to the sumEven variable return fib[n]; } } @@ -48,6 +66,6 @@ function fiboEvenSum(n){ return sumEven; } ``` +Solution 1 (Click to Show/Hide)
+ ```js function largestPrimeFactor(number) { - let prime = 2, max = 1; - while (prime <= number){ + let prime = 2, + max = 1; + while (prime <= number) { if (number % prime == 0) { max = prime; - number = number/prime; - } - else prime++; //Only increment the prime number if the number isn't divisible by it + number = number / prime; + } else prime++; //Only increment the prime number if the number isn't divisible by it } return max; } ``` -### Resources: +#### Relevant Links - [Wikipedia](https://en.wikipedia.org/wiki/Prime_number) +Solution 1 (Click to Show/Hide)
+ ```js function largestPalindromeProduct(n) { - //To get the maximum n digit number, + operator type castes String to Number type - let max = +[...Array(n)].reduce((a, c) => a+=9, ""); - + let max = +[...Array(n)].reduce((a, c) => (a += 9), ""); + //Next we get minimum n digit number from the max - let min = (max+1)/10; - + let min = (max + 1) / 10; + //To store the result let res = []; - + //Starting the loop from max to min - for (let i = max; i >= min; i--){ - - //Another loop - for (let j = max; j >= min; j--){ - + for (let i = max; i >= min; i--) { + //Another loop + for (let j = max; j >= min; j--) { //Getting the product - let num = i*j; - + let num = i * j; + //Reversing the number - let numReverse = [...String(num)].reverse().join(''); - + let numReverse = [...String(num)].reverse().join(""); + //Checking for palindromic number if (num == numReverse) { - //Pushing the number into array and breaking the loop for efficiency res.push(num); break; } } } - + // Returning the maximum of the result array return Math.max(...res); } ``` -### References: +#### Relevant Links - [Wikipedia](https://en.wikipedia.org/wiki/Palindromic_number) +Solution 1 (Click to Show/Hide)
+ ```js //LCM of two numbers -function lcm(a, b){ - return (a*b)/gcd(a, b); +function lcm(a, b) { + return (a * b) / gcd(a, b); } -//Euclidean recursive algorithm -function gcd(a, b){ +//Euclidean recursive algorithm +function gcd(a, b) { if (b === 0) return a; - return gcd(b, a%b); + return gcd(b, a % b); } -function smallestMult(n){ +function smallestMult(n) { let maxLCM = 1; - + //Getting the LCM in the range - for (let i = 2; i <= n; i++){ + for (let i = 2; i <= n; i++) { maxLCM = lcm(maxLCM, i); } return maxLCM; } ``` -### References: +#### Relevant Links - [Euclidean algorithm](https://en.wikipedia.org/wiki/Euclidean_algorithm) - [LCM](https://en.wikipedia.org/wiki/Least_common_multiple) +Solution 1 (Click to Show/Hide)
+ ```js function sumSquareDifference(n) { const sumOfN = (n*(n+1))/2; @@ -23,7 +28,9 @@ function sumSquareDifference(n) { } ``` -### References: +#### Relevant Links - [Sum of n numbers - Wikipedia](https://en.wikipedia.org/wiki/1_%2B_2_%2B_3_%2B_4_%2B_%E2%8B%AF) - [Sum of n square numbers - Wikipedia](https://en.wikipedia.org/wiki/Square_pyramidal_number) + +Solution 1 (Click to Show/Hide)
+ ```js function nthPrime(n) { - //Primes array which will store all the prime numbers const primes = [2]; - + //Num is the number we want to check - let num = 3, isPrime = true; - + let num = 3, + isPrime = true; + //Looping until primes array is equal to n - while (primes.length < n){ - + while (primes.length < n) { //All the primes numbers of a number is always <= its square root let max = Math.ceil(Math.sqrt(num)); - - for (let i = 0; primes[i] <= max; i++){ + + for (let i = 0; primes[i] <= max; i++) { if (num % primes[i] == 0) { - //Looping till we find the prime isPrime = false; break; } } - + //if Prime found, push it to the array if (isPrime) primes.push(num); isPrime = true; - - //An optimization technique, since we know of all even numbers only 2 is a prime number, we can skip the rest - num+=2; - } - - //Returning the last number - return primes[primes.length-1]; + //An optimization technique, since we know of all even numbers only 2 is a prime number, we can skip the rest + num += 2; + } + + //Returning the last number + return primes[primes.length - 1]; } ``` -### References: +#### Relevant Links - [Wikipedia](https://en.wikipedia.org/wiki/Prime_number) + +Solution 1 (Click to Show/Hide)
+ ```js function largestProductinaSeries(n) { - let thousandDigits = [7,3,1,6,7,1,7,6,5,3,1,3,3,0,6,2,4,9,1,9,2,2,5,1,1,9,6,7,4,4,2,6,5,7,4,7,4,2,3,5,5,3,4,9,1,9,4,9,3,4,9,6,9,8,3,5,2,0,3,1,2,7,7,4,5,0,6,3,2,6,2,3,9,5,7,8,3,1,8,0,1,6,9,8,4,8,0,1,8,6,9,4,7,8,8,5,1,8,4,3,8,5,8,6,1,5,6,0,7,8,9,1,1,2,9,4,9,4,9,5,4,5,9,5,0,1,7,3,7,9,5,8,3,3,1,9,5,2,8,5,3,2,0,8,8,0,5,5,1,1,1,2,5,4,0,6,9,8,7,4,7,1,5,8,5,2,3,8,6,3,0,5,0,7,1,5,6,9,3,2,9,0,9,6,3,2,9,5,2,2,7,4,4,3,0,4,3,5,5,7,6,6,8,9,6,6,4,8,9,5,0,4,4,5,2,4,4,5,2,3,1,6,1,7,3,1,8,5,6,4,0,3,0,9,8,7,1,1,1,2,1,7,2,2,3,8,3,1,1,3,6,2,2,2,9,8,9,3,4,2,3,3,8,0,3,0,8,1,3,5,3,3,6,2,7,6,6,1,4,2,8,2,8,0,6,4,4,4,4,8,6,6,4,5,2,3,8,7,4,9,3,0,3,5,8,9,0,7,2,9,6,2,9,0,4,9,1,5,6,0,4,4,0,7,7,2,3,9,0,7,1,3,8,1,0,5,1,5,8,5,9,3,0,7,9,6,0,8,6,6,7,0,1,7,2,4,2,7,1,2,1,8,8,3,9,9,8,7,9,7,9,0,8,7,9,2,2,7,4,9,2,1,9,0,1,6,9,9,7,2,0,8,8,8,0,9,3,7,7,6,6,5,7,2,7,3,3,3,0,0,1,0,5,3,3,6,7,8,8,1,2,2,0,2,3,5,4,2,1,8,0,9,7,5,1,2,5,4,5,4,0,5,9,4,7,5,2,2,4,3,5,2,5,8,4,9,0,7,7,1,1,6,7,0,5,5,6,0,1,3,6,0,4,8,3,9,5,8,6,4,4,6,7,0,6,3,2,4,4,1,5,7,2,2,1,5,5,3,9,7,5,3,6,9,7,8,1,7,9,7,7,8,4,6,1,7,4,0,6,4,9,5,5,1,4,9,2,9,0,8,6,2,5,6,9,3,2,1,9,7,8,4,6,8,6,2,2,4,8,2,8,3,9,7,2,2,4,1,3,7,5,6,5,7,0,5,6,0,5,7,4,9,0,2,6,1,4,0,7,9,7,2,9,6,8,6,5,2,4,1,4,5,3,5,1,0,0,4,7,4,8,2,1,6,6,3,7,0,4,8,4,4,0,3,1,9,9,8,9,0,0,0,8,8,9,5,2,4,3,4,5,0,6,5,8,5,4,1,2,2,7,5,8,8,6,6,6,8,8,1,1,6,4,2,7,1,7,1,4,7,9,9,2,4,4,4,2,9,2,8,2,3,0,8,6,3,4,6,5,6,7,4,8,1,3,9,1,9,1,2,3,1,6,2,8,2,4,5,8,6,1,7,8,6,6,4,5,8,3,5,9,1,2,4,5,6,6,5,2,9,4,7,6,5,4,5,6,8,2,8,4,8,9,1,2,8,8,3,1,4,2,6,0,7,6,9,0,0,4,2,2,4,2,1,9,0,2,2,6,7,1,0,5,5,6,2,6,3,2,1,1,1,1,1,0,9,3,7,0,5,4,4,2,1,7,5,0,6,9,4,1,6,5,8,9,6,0,4,0,8,0,7,1,9,8,4,0,3,8,5,0,9,6,2,4,5,5,4,4,4,3,6,2,9,8,1,2,3,0,9,8,7,8,7,9,9,2,7,2,4,4,2,8,4,9,0,9,1,8,8,8,4,5,8,0,1,5,6,1,6,6,0,9,7,9,1,9,1,3,3,8,7,5,4,9,9,2,0,0,5,2,4,0,6,3,6,8,9,9,1,2,5,6,0,7,1,7,6,0,6,0,5,8,8,6,1,1,6,4,6,7,1,0,9,4,0,5,0,7,7,5,4,1,0,0,2,2,5,6,9,8,3,1,5,5,2,0,0,0,5,5,9,3,5,7,2,9,7,2,5,7,1,6,3,6,2,6,9,5,6,1,8,8,2,6,7,0,4,2,8,2,5,2,4,8,3,6,0,0,8,2,3,2,5,7,5,3,0,4,2,0,7,5,2,9,6,3,4,5,0]; - + let thousandDigits = [ + 7, + 3, + 1, + 6, + 7, + 1, + 7, + 6, + 5, + 3, + 1, + 3, + 3, + 0, + 6, + 2, + 4, + 9, + 1, + 9, + 2, + 2, + 5, + 1, + 1, + 9, + 6, + 7, + 4, + 4, + 2, + 6, + 5, + 7, + 4, + 7, + 4, + 2, + 3, + 5, + 5, + 3, + 4, + 9, + 1, + 9, + 4, + 9, + 3, + 4, + 9, + 6, + 9, + 8, + 3, + 5, + 2, + 0, + 3, + 1, + 2, + 7, + 7, + 4, + 5, + 0, + 6, + 3, + 2, + 6, + 2, + 3, + 9, + 5, + 7, + 8, + 3, + 1, + 8, + 0, + 1, + 6, + 9, + 8, + 4, + 8, + 0, + 1, + 8, + 6, + 9, + 4, + 7, + 8, + 8, + 5, + 1, + 8, + 4, + 3, + 8, + 5, + 8, + 6, + 1, + 5, + 6, + 0, + 7, + 8, + 9, + 1, + 1, + 2, + 9, + 4, + 9, + 4, + 9, + 5, + 4, + 5, + 9, + 5, + 0, + 1, + 7, + 3, + 7, + 9, + 5, + 8, + 3, + 3, + 1, + 9, + 5, + 2, + 8, + 5, + 3, + 2, + 0, + 8, + 8, + 0, + 5, + 5, + 1, + 1, + 1, + 2, + 5, + 4, + 0, + 6, + 9, + 8, + 7, + 4, + 7, + 1, + 5, + 8, + 5, + 2, + 3, + 8, + 6, + 3, + 0, + 5, + 0, + 7, + 1, + 5, + 6, + 9, + 3, + 2, + 9, + 0, + 9, + 6, + 3, + 2, + 9, + 5, + 2, + 2, + 7, + 4, + 4, + 3, + 0, + 4, + 3, + 5, + 5, + 7, + 6, + 6, + 8, + 9, + 6, + 6, + 4, + 8, + 9, + 5, + 0, + 4, + 4, + 5, + 2, + 4, + 4, + 5, + 2, + 3, + 1, + 6, + 1, + 7, + 3, + 1, + 8, + 5, + 6, + 4, + 0, + 3, + 0, + 9, + 8, + 7, + 1, + 1, + 1, + 2, + 1, + 7, + 2, + 2, + 3, + 8, + 3, + 1, + 1, + 3, + 6, + 2, + 2, + 2, + 9, + 8, + 9, + 3, + 4, + 2, + 3, + 3, + 8, + 0, + 3, + 0, + 8, + 1, + 3, + 5, + 3, + 3, + 6, + 2, + 7, + 6, + 6, + 1, + 4, + 2, + 8, + 2, + 8, + 0, + 6, + 4, + 4, + 4, + 4, + 8, + 6, + 6, + 4, + 5, + 2, + 3, + 8, + 7, + 4, + 9, + 3, + 0, + 3, + 5, + 8, + 9, + 0, + 7, + 2, + 9, + 6, + 2, + 9, + 0, + 4, + 9, + 1, + 5, + 6, + 0, + 4, + 4, + 0, + 7, + 7, + 2, + 3, + 9, + 0, + 7, + 1, + 3, + 8, + 1, + 0, + 5, + 1, + 5, + 8, + 5, + 9, + 3, + 0, + 7, + 9, + 6, + 0, + 8, + 6, + 6, + 7, + 0, + 1, + 7, + 2, + 4, + 2, + 7, + 1, + 2, + 1, + 8, + 8, + 3, + 9, + 9, + 8, + 7, + 9, + 7, + 9, + 0, + 8, + 7, + 9, + 2, + 2, + 7, + 4, + 9, + 2, + 1, + 9, + 0, + 1, + 6, + 9, + 9, + 7, + 2, + 0, + 8, + 8, + 8, + 0, + 9, + 3, + 7, + 7, + 6, + 6, + 5, + 7, + 2, + 7, + 3, + 3, + 3, + 0, + 0, + 1, + 0, + 5, + 3, + 3, + 6, + 7, + 8, + 8, + 1, + 2, + 2, + 0, + 2, + 3, + 5, + 4, + 2, + 1, + 8, + 0, + 9, + 7, + 5, + 1, + 2, + 5, + 4, + 5, + 4, + 0, + 5, + 9, + 4, + 7, + 5, + 2, + 2, + 4, + 3, + 5, + 2, + 5, + 8, + 4, + 9, + 0, + 7, + 7, + 1, + 1, + 6, + 7, + 0, + 5, + 5, + 6, + 0, + 1, + 3, + 6, + 0, + 4, + 8, + 3, + 9, + 5, + 8, + 6, + 4, + 4, + 6, + 7, + 0, + 6, + 3, + 2, + 4, + 4, + 1, + 5, + 7, + 2, + 2, + 1, + 5, + 5, + 3, + 9, + 7, + 5, + 3, + 6, + 9, + 7, + 8, + 1, + 7, + 9, + 7, + 7, + 8, + 4, + 6, + 1, + 7, + 4, + 0, + 6, + 4, + 9, + 5, + 5, + 1, + 4, + 9, + 2, + 9, + 0, + 8, + 6, + 2, + 5, + 6, + 9, + 3, + 2, + 1, + 9, + 7, + 8, + 4, + 6, + 8, + 6, + 2, + 2, + 4, + 8, + 2, + 8, + 3, + 9, + 7, + 2, + 2, + 4, + 1, + 3, + 7, + 5, + 6, + 5, + 7, + 0, + 5, + 6, + 0, + 5, + 7, + 4, + 9, + 0, + 2, + 6, + 1, + 4, + 0, + 7, + 9, + 7, + 2, + 9, + 6, + 8, + 6, + 5, + 2, + 4, + 1, + 4, + 5, + 3, + 5, + 1, + 0, + 0, + 4, + 7, + 4, + 8, + 2, + 1, + 6, + 6, + 3, + 7, + 0, + 4, + 8, + 4, + 4, + 0, + 3, + 1, + 9, + 9, + 8, + 9, + 0, + 0, + 0, + 8, + 8, + 9, + 5, + 2, + 4, + 3, + 4, + 5, + 0, + 6, + 5, + 8, + 5, + 4, + 1, + 2, + 2, + 7, + 5, + 8, + 8, + 6, + 6, + 6, + 8, + 8, + 1, + 1, + 6, + 4, + 2, + 7, + 1, + 7, + 1, + 4, + 7, + 9, + 9, + 2, + 4, + 4, + 4, + 2, + 9, + 2, + 8, + 2, + 3, + 0, + 8, + 6, + 3, + 4, + 6, + 5, + 6, + 7, + 4, + 8, + 1, + 3, + 9, + 1, + 9, + 1, + 2, + 3, + 1, + 6, + 2, + 8, + 2, + 4, + 5, + 8, + 6, + 1, + 7, + 8, + 6, + 6, + 4, + 5, + 8, + 3, + 5, + 9, + 1, + 2, + 4, + 5, + 6, + 6, + 5, + 2, + 9, + 4, + 7, + 6, + 5, + 4, + 5, + 6, + 8, + 2, + 8, + 4, + 8, + 9, + 1, + 2, + 8, + 8, + 3, + 1, + 4, + 2, + 6, + 0, + 7, + 6, + 9, + 0, + 0, + 4, + 2, + 2, + 4, + 2, + 1, + 9, + 0, + 2, + 2, + 6, + 7, + 1, + 0, + 5, + 5, + 6, + 2, + 6, + 3, + 2, + 1, + 1, + 1, + 1, + 1, + 0, + 9, + 3, + 7, + 0, + 5, + 4, + 4, + 2, + 1, + 7, + 5, + 0, + 6, + 9, + 4, + 1, + 6, + 5, + 8, + 9, + 6, + 0, + 4, + 0, + 8, + 0, + 7, + 1, + 9, + 8, + 4, + 0, + 3, + 8, + 5, + 0, + 9, + 6, + 2, + 4, + 5, + 5, + 4, + 4, + 4, + 3, + 6, + 2, + 9, + 8, + 1, + 2, + 3, + 0, + 9, + 8, + 7, + 8, + 7, + 9, + 9, + 2, + 7, + 2, + 4, + 4, + 2, + 8, + 4, + 9, + 0, + 9, + 1, + 8, + 8, + 8, + 4, + 5, + 8, + 0, + 1, + 5, + 6, + 1, + 6, + 6, + 0, + 9, + 7, + 9, + 1, + 9, + 1, + 3, + 3, + 8, + 7, + 5, + 4, + 9, + 9, + 2, + 0, + 0, + 5, + 2, + 4, + 0, + 6, + 3, + 6, + 8, + 9, + 9, + 1, + 2, + 5, + 6, + 0, + 7, + 1, + 7, + 6, + 0, + 6, + 0, + 5, + 8, + 8, + 6, + 1, + 1, + 6, + 4, + 6, + 7, + 1, + 0, + 9, + 4, + 0, + 5, + 0, + 7, + 7, + 5, + 4, + 1, + 0, + 0, + 2, + 2, + 5, + 6, + 9, + 8, + 3, + 1, + 5, + 5, + 2, + 0, + 0, + 0, + 5, + 5, + 9, + 3, + 5, + 7, + 2, + 9, + 7, + 2, + 5, + 7, + 1, + 6, + 3, + 6, + 2, + 6, + 9, + 5, + 6, + 1, + 8, + 8, + 2, + 6, + 7, + 0, + 4, + 2, + 8, + 2, + 5, + 2, + 4, + 8, + 3, + 6, + 0, + 0, + 8, + 2, + 3, + 2, + 5, + 7, + 5, + 3, + 0, + 4, + 2, + 0, + 7, + 5, + 2, + 9, + 6, + 3, + 4, + 5, + 0 + ]; + let len = n; - let prod = 1, max = 1; - while (len < thousandDigits.length){ + let prod = 1, + max = 1; + while (len < thousandDigits.length) { prod = 1; - + //Looping and computing products of n numbers - for (let i = len-n; i < len; i++){ - prod*= thousandDigits[i]; + for (let i = len - n; i < len; i++) { + prod *= thousandDigits[i]; } if (prod > max) max = prod; len++; @@ -37,6 +1045,8 @@ function largestProductinaSeries(n) { console.log(largestProductinaSeries(13)); ``` -### References: +#### Relevant Links - [Sliding Window Technique](https://www.geeksforgeeks.org/window-sliding-technique/) + +Solution 1 (Click to Show/Hide)
+ ```js function specialPythagoreanTriplet(n) { let sumOfabc = n; - for (let a = 1; a < n; a++){ - for (let b = a; b < n; b++){ - let c = n - a- b; - if (c > 0){ - if (c**2 == a**2 + b**2){ - return a*b*c; + for (let a = 1; a < n; a++) { + for (let b = a; b < n; b++) { + let c = n - a - b; + if (c > 0) { + if (c ** 2 == a ** 2 + b ** 2) { + return a * b * c; } } } - } + } } specialPythagoreanTriplet(1000); ``` -### References: +#### Relevant Links - [Wikipedia](https://en.wikipedia.org/wiki/Pythagorean_triple) + +### Solution #1 (Click to Show/Hide)
-### Basic Solution ```js function isBalanced(str) { - if (str === '') return true; + if (str === "") return true; - str = str.split(''); + str = str.split(""); let stack = []; for (let i = 0; i < str.length; i++) { - if (str[i] === '[') { - stack.push('['); - } else if (str[i] === ']' && stack[stack.length - 1] === '[') { + if (str[i] === "[") { + stack.push("["); + } else if (str[i] === "]" && stack[stack.length - 1] === "[") { stack.pop(); } } @@ -32,3 +31,5 @@ function isBalanced(str) { - Push every `[` into a stack. - Check if the item stored on the stack is `[` when a `]` occurs. This makes it a pair & `[` can be removed from the stack. - The brackets are balanced if there is no item present in the stack. + +Solution 1 (Click to Show/Hide)
Add the following line of code to the end of your ` rect ` methods chain: ```javascript .attr("class","bar"); ``` + +Solution 1 (Click to Show/Hide)
Chain the following lines of code with your ` svg.selectAll("rect") ` method. @@ -27,3 +35,4 @@ Chain the following lines of code with your ` svg.selectAll("rect") ` method. .append("title") .text(d=>d); ``` +Solution 1 (Click to Show/Hide)
+ ```html ``` +Solution 1 (Click to Show/Hide)
-**Solution ahead!** - -##  Basic Code Solution: ```javascript ``` + +Solution 1 (Click to Show/Hide)
To solve this challenge, the `scale` variable has to be re-initialized with a D3 scale ans the scaling factor in the output has to be set to `50`, to do this, change you code to look like this: -```javascript + +```html ``` +Solution 1 (Click to Show/Hide)
Chain the following lines of code in the ` svg.selectAll("circle") ` chain: @@ -30,5 +38,5 @@ The ` svg.selectAll("circle") ` chain should look like: .append("circle") ``` -##### Note -The circles won't be visible because we haven't set their attributes yet. We'll do that in the next challenge. +**Note:** The circles won't be visible because we haven't set their attributes yet. We'll do that in the next challenge. +Solution 1 (Click to Show/Hide)
+ +```html ``` +Solution 1 (Click to Show/Hide)
+ +```html ``` +Solution 1 (Click to Show/Hide)
Use `@import` to import `_variables.scss` like: + ```sass @import 'variables' ``` +Solution 1 (Click to Show/Hide)
+ +```html -``` + + +Solution 1 (Click to Show/Hide)
```html ``` + +Solution 1 (Click to Show/Hide)
-The following lines of code solves the challenge: ```html ` new class `thick-green-border` with properties: @@ -42,3 +48,5 @@ The final stage is adding this class to image: src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."> ``` + +Solution 1 (Click to Show/Hide)
+ ```js .penguin-bottom { top: 40%; @@ -37,3 +42,5 @@ Add a fallback value of ```black``` to the ```background``` property of the ```. border-radius: 70% 70% 60% 60%; } ``` + +Solution 1 (Click to Show/Hide)
+ In the ```:root``` selector we need to declare the ```--penguin-belly``` variable and give it the value of ```pink```: @@ -42,7 +49,8 @@ In the ```:root``` selector we need to declare the ```--penguin-belly``` variabl } ``` -### Sources +#### Relevant Links 1. [Visit MDN's Cascading CSS Variables page for more information.](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) 2. [Perna, Maria Antonietta. "A Practical Guide to CSS Variables (Custom Properties)" *sitepoint*. August 01, 2018. Accessed: October 5, 2018](https://www.sitepoint.com/practical-guide-css-variables-custom-properties/) +Solution 1 (Click to Show/Hide)
We need to reassign the ```--penguin-belly``` variable to ```white``` in the ```penguin``` class: @@ -39,6 +44,7 @@ We need to reassign the ```--penguin-belly``` variable to ```white``` in the ``` } ``` -### Sources +#### Relevant Links 1. [Visit MDN's Cascading CSS Variables page for more information.](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) 2. [Perna, Maria Antonietta. "A Practical Guide to CSS Variables (Custom Properties)" *sitepoint*. August 01, 2018. Accessed: October 5, 2018](https://www.sitepoint.com/practical-guide-css-variables-custom-properties/) +Solution 1 (Click to Show/Hide)
```htmlCatPhotoApp
@@ -51,3 +51,5 @@ The color of text can be changed using the CSS `color` property. ``` + +Hello World
``` -#### 2. Give all elements on your page the color of ```green``` and font-family of ```monospace``` in our ```body``` element's style declaration: +**Give all elements on your page the color of ```green``` and font-family of ```monospace``` in our ```body``` element's style declaration:** add between ``````: - ```css +```css color: green; font-family: monospace; ``` -#### Full solution +**Full solution** ```css ```:Hello World
``` + +Solution 1 (Click to Show/Hide)
In class ```smaller-image``` add a ```border-radius``` of ```50%```: @@ -18,3 +23,5 @@ In class ```smaller-image``` add a ```border-radius``` of ```50%```: ``` This class already assigned to our ```img``` element and making it perfectly circular. + +
```
-### Solution
+**NOTE:** An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.
+
+
+---
+## Solutions
+
+Solution 1 (Click to Show/Hide)
In this line:
@@ -27,5 +34,4 @@ In opening tag `````` we need to add ```inline style``` to make our ```h1```
Hello World!
```
-#### Tip:
-An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.
+
\ No newline at end of file
diff --git a/guide/english/certifications/responsive-web-design/basic-css/override-styles-in-subsequent-css/index.md b/guide/english/certifications/responsive-web-design/basic-css/override-styles-in-subsequent-css/index.md
index f5ed172ddd..faf0e597fa 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/override-styles-in-subsequent-css/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/override-styles-in-subsequent-css/index.md
@@ -1,8 +1,10 @@
---
title: Override Styles in Subsequent CSS
---
-## Override Styles in Subsequent CSS
+# Override Styles in Subsequent CSS
+---
+## Problem Explanation
The most important bit to remember when wanting to Override Styles in Subsequent CSS is the order the classes are created.
The last updated style will take precedent over the previously written classes.
diff --git a/guide/english/certifications/responsive-web-design/basic-css/prioritize-one-style-over-another/index.md b/guide/english/certifications/responsive-web-design/basic-css/prioritize-one-style-over-another/index.md
index 20852813dc..1f9770b775 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/prioritize-one-style-over-another/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/prioritize-one-style-over-another/index.md
@@ -1,14 +1,19 @@
---
title: Prioritize One Style Over Another
---
-## Prioritize One Style Over Another
+# Prioritize One Style Over Another
-
+---
+## Problem Explanation
We need to create a CSS class called ```pink-text``` that gives an our ```h1``` element the color pink.
-### Solution
- Between `````` create a class called ```pink-text```:
+---
+## Solutions
+
+Solution 1 (Click to Show/Hide)
+
+Between `````` create a class called ```pink-text```:
```css
- ```
- And add in this class ```color``` with value of ```pink```:
+```
+And add in this class ```color``` with value of ```pink```:
- ```css
+```css
.pink-text {
color: pink;
}
- ```
+```
After, add this class to our ```h1``` element:
```css
Hello World!
```
-### Full solution
+**Full solution**
```css
Hello World!
```
+
diff --git a/guide/english/certifications/responsive-web-design/basic-css/set-the-font-family-of-an-element/index.md b/guide/english/certifications/responsive-web-design/basic-css/set-the-font-family-of-an-element/index.md
index 0ce16aa59a..d26154f9b5 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/set-the-font-family-of-an-element/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/set-the-font-family-of-an-element/index.md
@@ -1,8 +1,10 @@
---
title: Set the Font Family of an Element
---
-## Set the Font Family of an Element
+# Set the Font Family of an Element
+---
+## Problem Explanation
In CSS, you can define the type of font used as part of a Font Family. It's recommended to include a set of font types, mostly used for fallback mechanism such that when one Font is not available, the system will fallback to render text using the next available font, and so on.
As a rule of thumb, start by providing font family of your choice and end with commonly available fonts such that if the browser is not able to render text using user specified font, then it will use the generic font type as last resort.
diff --git a/guide/english/certifications/responsive-web-design/basic-css/set-the-id-of-an-element/index.md b/guide/english/certifications/responsive-web-design/basic-css/set-the-id-of-an-element/index.md
index 898356e565..09409fcae5 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/set-the-id-of-an-element/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/set-the-id-of-an-element/index.md
@@ -1,7 +1,7 @@
---
title: Set the id of an Element
---
-## Set the id of an Element
+# Set the id of an Element
This is a stub. Help our community expand it.
diff --git a/guide/english/certifications/responsive-web-design/basic-css/size-your-images/index.md b/guide/english/certifications/responsive-web-design/basic-css/size-your-images/index.md
index 44f54cf3a0..a4ac547bba 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/size-your-images/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/size-your-images/index.md
@@ -2,7 +2,10 @@
title: Size Your Images
---
-## Size Your Images
+# Size Your Images
+
+---
+## Problem Explanation
For sizing your images, first create your class in your style tag.
An example:
@@ -12,9 +15,9 @@ An example:
width: 500px;
height: auto;
}
- ```
+```
- You can then add the class to your image:
- ```css
+You can then add the class to your image:
+```css
- ```
+```
diff --git a/guide/english/certifications/responsive-web-design/basic-css/specify-how-fonts-should-degrade/index.md b/guide/english/certifications/responsive-web-design/basic-css/specify-how-fonts-should-degrade/index.md
index 299d049925..33ea7f3147 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/specify-how-fonts-should-degrade/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/specify-how-fonts-should-degrade/index.md
@@ -1,12 +1,17 @@
---
title: Specify How Fonts Should Degrade
---
-## Specify How Fonts Should Degrade
+# Specify How Fonts Should Degrade
-
+---
+## Problem Explanation
We need to apply the ```monospace``` font to the ```h2``` element, so that it now has two fonts - ```Lobster``` and ```monospace```. After, we need to comment out that import of the ```Lobster``` font(using the HTML comments you learned before) from Google Fonts so that it isn't available anymore.
-### Solution
+
+---
+## Solutions
+
+Solution 1 (Click to Show/Hide)
To the property ```font-family``` in selector ```h2```, in addition to ```Lobster``` font we need to add ```monospace```:
@@ -27,3 +32,5 @@ select all import and ```ctrl+/```:
```css
```
+
+
\ No newline at end of file
diff --git a/guide/english/certifications/responsive-web-design/basic-css/style-multiple-elements-with-a-css-class/index.md b/guide/english/certifications/responsive-web-design/basic-css/style-multiple-elements-with-a-css-class/index.md
index b0c7833bae..924b65510c 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/style-multiple-elements-with-a-css-class/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/style-multiple-elements-with-a-css-class/index.md
@@ -1,11 +1,17 @@
---
title: Style Multiple Elements with a CSS Class
---
-## Style Multiple Elements with a CSS Class
+# Style Multiple Elements with a CSS Class
+---
+## Problem Explanation
We need to applying our ```red-text``` class to the first ```p``` element.
-### Solution
+
+---
+## Solutions
+
+Solution 1 (Click to Show/Hide)
In the opening tag of element ```p``` we need to add ```red-text``` class:
@@ -49,6 +55,7 @@ In the opening tag of element ```p``` we need to add ```red-text``` class:
```
-### More information
+#### Relevant Links
-- [Class selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors)
\ No newline at end of file
+- [Class selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors)
+
\ No newline at end of file
diff --git a/guide/english/certifications/responsive-web-design/basic-css/style-the-html-body-element/index.md b/guide/english/certifications/responsive-web-design/basic-css/style-the-html-body-element/index.md
index 3d9ce32e6e..518e2343e7 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/style-the-html-body-element/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/style-the-html-body-element/index.md
@@ -1,7 +1,7 @@
---
title: Style the HTML Body Element
---
-## Style the HTML Body Element
+# Style the HTML Body Element
This is a stub. Help our community expand it.
diff --git a/guide/english/certifications/responsive-web-design/basic-css/understand-absolute-versus-relative-units/index.md b/guide/english/certifications/responsive-web-design/basic-css/understand-absolute-versus-relative-units/index.md
index 78db960eea..2099ccf04f 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/understand-absolute-versus-relative-units/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/understand-absolute-versus-relative-units/index.md
@@ -1,7 +1,7 @@
---
title: Understand Absolute versus Relative Units
---
-## Understand Absolute versus Relative Units
+# Understand Absolute versus Relative Units
This is a stub. Help our community expand it.
diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-a-css-class-to-style-an-element/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-a-css-class-to-style-an-element/index.md
index a311cb0a80..81506d93ee 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/use-a-css-class-to-style-an-element/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/use-a-css-class-to-style-an-element/index.md
@@ -1,9 +1,10 @@
---
title: Use a CSS Class to Style an Element
---
-## Use a CSS Class to Style an Element
+# Use a CSS Class to Style an Element
-
+---
+## Problem Explanation
In CSS, we can target the styling of specific elements that match the specified class attribute.
diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-a-custom-css-variable/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-a-custom-css-variable/index.md
index 9e71ab843a..ad10e9a645 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/use-a-custom-css-variable/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/use-a-custom-css-variable/index.md
@@ -1,7 +1,7 @@
---
title: Use a custom CSS Variable
---
-## Use a custom CSS Variable
+# Use a custom CSS Variable
This is a stub. Help our community expand it.
diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-a-media-query-to-change-a-variable/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-a-media-query-to-change-a-variable/index.md
index c71e13ed83..b59d989bd8 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/use-a-media-query-to-change-a-variable/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/use-a-media-query-to-change-a-variable/index.md
@@ -1,7 +1,7 @@
---
title: Use a media query to change a variable
---
-## Use a media query to change a variable
+# Use a media query to change a variable
This is a stub. Help our community expand it.
diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-abbreviated-hex-code/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-abbreviated-hex-code/index.md
index 210166de8e..3eba651765 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/use-abbreviated-hex-code/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/use-abbreviated-hex-code/index.md
@@ -1,7 +1,7 @@
---
title: Use Abbreviated Hex Code
---
-## Use Abbreviated Hex Code
+# Use Abbreviated Hex Code
This is a stub. Help our community expand it.
diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element/index.md
index 66ca604119..82de6da7d3 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element/index.md
@@ -1,7 +1,7 @@
---
title: Use an id Attribute to Style an Element
---
-## Use an id Attribute to Style an Element
+# Use an id Attribute to Style an Element
This is a stub. Help our community expand it.
diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-attribute-selectors-to-style-elements/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-attribute-selectors-to-style-elements/index.md
index 685c85bbc5..ce2d3bc6ba 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/use-attribute-selectors-to-style-elements/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/use-attribute-selectors-to-style-elements/index.md
@@ -1,28 +1,31 @@
---
title: Use Attribute Selectors to Style Elements
---
-## Use Attribute Selectors to Style Elements
+# Use Attribute Selectors to Style Elements
+---
+## Problem Explanation
You can also apply styling to elements by their attribute values.
-### For Example
+**For Example:**
+
1. If you want to style all the checkboxes on the page, you can do.
- ```
+```
[type='checkbox'] {
// CSS styling
}
- ```
+```
2. This also works with custom attribute, lets say you have two elements with attribute named `foo`.
- ```
+```
Solution 1 (Click to Show/Hide)
In this line: @@ -27,5 +34,4 @@ In opening tag `````` we need to add ```inline style``` to make our ```h1```
Hello World!
```
-#### Tip:
-An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.
+
Solution 1 (Click to Show/Hide)
+ +Between `````` create a class called ```pink-text```: ```css - ``` - And add in this class ```color``` with value of ```pink```: +``` +And add in this class ```color``` with value of ```pink```: - ```css +```css .pink-text { color: pink; } - ``` +``` After, add this class to our ```h1``` element: ```cssHello World!
``` -### Full solution +**Full solution** ```cssHello World!
``` +Solution 1 (Click to Show/Hide)
To the property ```font-family``` in selector ```h2```, in addition to ```Lobster``` font we need to add ```monospace```: @@ -27,3 +32,5 @@ select all import and ```ctrl+/```: ```css ``` + +Solution 1 (Click to Show/Hide)
In the opening tag of element ```p``` we need to add ```red-text``` class: @@ -49,6 +55,7 @@ In the opening tag of element ```p``` we need to add ```red-text``` class: ``` -### More information +#### Relevant Links -- [Class selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) \ No newline at end of file +- [Class selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) +foo bar
foo baz
- ``` +``` You can use attribute to style them differently. - ``` +``` [foo='bar'] { color: red; } [foo='baz'] { color: purple; } - ``` +``` diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element/index.md index 0dce4647f0..83d52f86b9 100644 --- a/guide/english/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element/index.md +++ b/guide/english/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element/index.md @@ -1,7 +1,7 @@ --- title: Use Clockwise Notation to Specify the Margin of an Element --- -## Use Clockwise Notation to Specify the Margin of an Element +# Use Clockwise Notation to Specify the Margin of an Element This is a stub. Help our community expand it. diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element/index.md index 5dbda5515b..39788f365b 100644 --- a/guide/english/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element/index.md +++ b/guide/english/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element/index.md @@ -1,7 +1,7 @@ --- title: Use Clockwise Notation to Specify the Padding of an Element --- -## Use Clockwise Notation to Specify the Padding of an Element +# Use Clockwise Notation to Specify the Padding of an Element This is a stub. Help our community expand it. diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-css-selectors-to-style-elements/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-css-selectors-to-style-elements/index.md index dea0e23df8..0bc8c5fabf 100644 --- a/guide/english/certifications/responsive-web-design/basic-css/use-css-selectors-to-style-elements/index.md +++ b/guide/english/certifications/responsive-web-design/basic-css/use-css-selectors-to-style-elements/index.md @@ -1,8 +1,10 @@ --- title: Use CSS Selectors to Style Elements --- -## Use CSS Selectors to Style Elements +# Use CSS Selectors to Style Elements +--- +## Problem Explanation CSS selectors are widely used to apply styling to all instances of a particular element. To apply the color `purple` to all the `h2`s on the page, you can define the following CSS inside a `` block. diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once/index.md index 47ff213aa1..a79c849db9 100644 --- a/guide/english/certifications/responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once/index.md +++ b/guide/english/certifications/responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once/index.md @@ -1,7 +1,7 @@ --- title: Use CSS Variables to change several elements at once --- -## Use CSS Variables to change several elements at once +# Use CSS Variables to change several elements at once This is a stub. Help our community expand it. diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-hex-code-for-specific-colors/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-hex-code-for-specific-colors/index.md index 49358be223..96b0bf08df 100644 --- a/guide/english/certifications/responsive-web-design/basic-css/use-hex-code-for-specific-colors/index.md +++ b/guide/english/certifications/responsive-web-design/basic-css/use-hex-code-for-specific-colors/index.md @@ -1,7 +1,7 @@ --- title: Use Hex Code for Specific Colors --- -## Use Hex Code for Specific Colors +# Use Hex Code for Specific Colors This is a stub. Help our community expand it. diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-hex-code-to-mix-colors/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-hex-code-to-mix-colors/index.md index f2b71328f4..582a924775 100644 --- a/guide/english/certifications/responsive-web-design/basic-css/use-hex-code-to-mix-colors/index.md +++ b/guide/english/certifications/responsive-web-design/basic-css/use-hex-code-to-mix-colors/index.md @@ -1,12 +1,16 @@ --- title: Use Hex Code to Mix Colors --- -## Use Hex Code to Mix Colors +# Use Hex Code to Mix Colors -## Hint + +--- +## Hints + +### Hint 1 In order to change the color of a class within the style element, we simply replace the color itself with the hexcode shown below. -### Before +**Before** ```html ``` -### After +**After** ```html ``` -### Final Solution +**Final Solution** After changing `color` of other classes, the final solution reveals that we have changed the `color` element of these text classes with hex codes shown below: ```html +``` +
+
+
+
+```
+Solution 1 (Click to Show/Hide)
Since the challenge requires you to create three columns of 100px each, declare the following in your .container CSS codeblock: -````css +```css grid-template-columns: 100px 100px 100px; -```` +``` + +Solution 1 (Click to Show/Hide)
Since the challenge requires you to create a 10px gap between the rows and a 20px gap between the columns, add the following code to the .container CSS codeblock: -````css +```css grid-gap: 10px 20px; -```` +``` + +`.
-### Hint
+
+---
+## Hints
+
+### Hint 1
You can define rows by using the `grid-template-rows` CSS property.
-### Solution
+
+---
+## Solutions
+
+
\ No newline at end of file
diff --git a/guide/english/certifications/responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items/index.md b/guide/english/certifications/responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items/index.md
index f7aafa4c16..ac37fd6dc6 100644
--- a/guide/english/certifications/responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items/index.md
+++ b/guide/english/certifications/responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items/index.md
@@ -1,24 +1,35 @@
---
title: Align All Items Horizontally using justify-items
---
-## Align All Items Horizontally using justify-items
+# Align All Items Horizontally using justify-items
+---
+## Problem Explanation
In this challenge you are required to use the "justify-items" property to horizontally align all the items in the grid.
-### Hint
+
+---
+## Hints
+
+### Hint 1
You can horizontally align the items by declaring the following in your CSS codeblock:
-````css
+```css
justify-items: value;
-````
+```
where value is how you would like to horizontally align the items.
-### Solution
+
+---
+## Solutions
+
+
diff --git a/guide/english/certifications/responsive-web-design/css-grid/align-all-items-vertically-using-align-items/index.md b/guide/english/certifications/responsive-web-design/css-grid/align-all-items-vertically-using-align-items/index.md
index 48ffb43c8a..df108c8ca8 100644
--- a/guide/english/certifications/responsive-web-design/css-grid/align-all-items-vertically-using-align-items/index.md
+++ b/guide/english/certifications/responsive-web-design/css-grid/align-all-items-vertically-using-align-items/index.md
@@ -1,24 +1,36 @@
---
title: Align All Items Vertically using align-items
---
-## Align All Items Vertically using align-items
+# Align All Items Vertically using align-items
+---
+## Problem Explanation
In this challenge you are required to use the "align-items" property to vertically align all the items in the grid.
+
+---
+## Hints
+
### Hint
You can vertically align the items by declaring the following in your CSS codeblock:
-````css
+```css
align-items: value;
-````
+```
where value is how you could like to vertically align the items.
-### Solution
+
+---
+## Solutions
+
+
\ No newline at end of file
diff --git a/guide/english/certifications/responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self/index.md b/guide/english/certifications/responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self/index.md
index 65bcca721d..fc003a5a6f 100644
--- a/guide/english/certifications/responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self/index.md
+++ b/guide/english/certifications/responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self/index.md
@@ -1,24 +1,36 @@
---
title: Align an Item Horizontally using justify-self
---
-## Align an Item Horizontally using justify-self
+# Align an Item Horizontally using justify-self
+---
+## Problem Explanation
In this challenge you are required to use the "justify-self" property to horizontally align a grid item.
-### Hint
+
+---
+## Hints
+
+### Hint 1
You can horizontally align an item by declaring the following in your CSS codeblock:
-````css
+```css
justify-self: value;
-````
+```
where value is how you would like to horizontally align the item.
-### Solution
+
+---
+## Solutions
+
+
\ No newline at end of file
diff --git a/guide/english/certifications/responsive-web-design/css-grid/align-an-item-vertically-using-align-self/index.md b/guide/english/certifications/responsive-web-design/css-grid/align-an-item-vertically-using-align-self/index.md
index c70505c386..96549d230e 100644
--- a/guide/english/certifications/responsive-web-design/css-grid/align-an-item-vertically-using-align-self/index.md
+++ b/guide/english/certifications/responsive-web-design/css-grid/align-an-item-vertically-using-align-self/index.md
@@ -1,24 +1,35 @@
---
title: Align an Item Vertically using align-self
---
-## Align an Item Vertically using align-self
+# Align an Item Vertically using align-self
+---
+## Problem Explanation
In this challenge you are required to use the "align-self" property to vertically align a grid item.
-### Hint
+
+---
+## Hints
+
+### Hint 1
You can vertically align an item by declaring the following in your CSS codeblock:
-````css
+```css
align-self: value;
-````
+```
where value is how you would like to vertically align the item.
-### Solution
+
+---
+## Solutions
+
+
diff --git a/guide/english/certifications/responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap/index.md b/guide/english/certifications/responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap/index.md
index 11a34bba13..a02d83ba90 100644
--- a/guide/english/certifications/responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap/index.md
+++ b/guide/english/certifications/responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap/index.md
@@ -1,24 +1,36 @@
---
title: Create a Column Gap Using grid-column-gap
---
-## Create a Column Gap Using grid-column-gap
+# Create a Column Gap Using grid-column-gap
+---
+## Problem Explanation
This challenge requires you to add a gap of 20px between all the columns of the CSS Grid in .container.
-### Hint
+
+---
+## Hints
+
+### Hint 1
To add the gap between the columns of a grid, we use:
-````css
+```css
grid-column-gap: parameter;
-````
+```
where parameter is the required gap.
-### Solution
+
+---
+## Solutions
+
+
\ No newline at end of file
diff --git a/guide/english/certifications/responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap/index.md b/guide/english/certifications/responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap/index.md
index f5ea864402..9ad1f13bbc 100644
--- a/guide/english/certifications/responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap/index.md
+++ b/guide/english/certifications/responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap/index.md
@@ -1,18 +1,30 @@
---
title: Create a Row Gap using grid-row-gap
---
-## Create a Row Gap using grid-row-gap
+# Create a Row Gap using grid-row-gap
+---
+## Problem Explanation
This challenge requires you to add a gap of `20px` between all the rows of the CSS Grid in .container.
-### Hint
+
+---
+## Hints
+
+### Hint 1
To add a gap between the rows in a CSS grid, we use the `grid-row-gap` CSS property.
-### Solution
+
+---
+## Solutions
+
+
\ No newline at end of file
diff --git a/guide/english/certifications/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill/index.md b/guide/english/certifications/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill/index.md
index 88606aea67..2538fa7379 100644
--- a/guide/english/certifications/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill/index.md
+++ b/guide/english/certifications/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill/index.md
@@ -1,23 +1,27 @@
---
title: Create Flexible Layouts Using auto-fill
---
-## Create Flexible Layouts Using auto-fill ##
+# Create Flexible Layouts Using auto-fill
+
+---
+## Problem Explanation
This challenge will expound upon the previous challenge by adding the **auto-fill** value to the *repeat* function. This will cause the number of divs to expand based on the viewport's size rather than the previously specified column value. In the **Before** section below, the **grid-template-column** value "3" is specified.
*Keep in mind that the following code snippets are only examples and not the exact challege from freeCodeCamp's curriculum.*
-### Before ###
+**Before**
+
```css
- grid-template-columns: repeat(3, minmax(50px, 2fr));
+grid-template-columns: repeat(3, minmax(50px, 2fr));
```
-### After ###
+**After**
+
```css
- grid-template-columns: repeat(auto-fill, minmax(50px, 2fr));
+grid-template-columns: repeat(auto-fill, minmax(50px, 2fr));
```
----
-### Resources ###
+#### Relevant Links
You may refer to the **Syntax** portion of the following page to see the **auto-fill** value:
[Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat)
\ No newline at end of file
diff --git a/guide/english/certifications/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit/index.md b/guide/english/certifications/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit/index.md
index e07319dd94..bdb682d744 100644
--- a/guide/english/certifications/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit/index.md
+++ b/guide/english/certifications/responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit/index.md
@@ -1,7 +1,7 @@
---
title: Create Flexible Layouts Using auto-fit
---
-## Create Flexible Layouts Using auto-fit
+# Create Flexible Layouts Using auto-fit
This is a stub. Help our community expand it.
diff --git a/guide/english/certifications/responsive-web-design/css-grid/create-grids-within-grids/index.md b/guide/english/certifications/responsive-web-design/css-grid/create-grids-within-grids/index.md
index 4f3236ac8a..4d07171847 100644
--- a/guide/english/certifications/responsive-web-design/css-grid/create-grids-within-grids/index.md
+++ b/guide/english/certifications/responsive-web-design/css-grid/create-grids-within-grids/index.md
@@ -1,20 +1,24 @@
---
title: Create Grids within Grids
---
-## Create Grids within Grids
+# Create Grids within Grids
+---
+## Problem Explanation
A grid within a grid is made the same as any other grid.
1. Just nest one element inside another,
2. set them *both* to grids,
3. and *POOF*! You have a grid-within-a-grid.
-### Nesting an element
+**Nesting an element**
+
For any refreshers, nesting an element looks like this:
`
\ No newline at end of file
diff --git a/guide/english/certifications/responsive-web-design/css-grid/divide-the-grid-into-an-area-template/index.md b/guide/english/certifications/responsive-web-design/css-grid/divide-the-grid-into-an-area-template/index.md
index a6af333257..8b3f9f50e6 100644
--- a/guide/english/certifications/responsive-web-design/css-grid/divide-the-grid-into-an-area-template/index.md
+++ b/guide/english/certifications/responsive-web-design/css-grid/divide-the-grid-into-an-area-template/index.md
@@ -1,21 +1,33 @@
---
title: Divide the Grid Into an Area Template
---
-## Divide the Grid Into an Area Template
+# Divide the Grid Into an Area Template
+---
+## Problem Explanation
In this challenge you are required to use the "grid-template-areas" property to group cells of a grid together into areas and give the areas a custom name.
-### Hint
+
+---
+## Hints
+
+### Hint 1
A period (`.`) designates an empty cell in a grid.
-### Solution
+
+---
+## Solutions
+
+
\ No newline at end of file
diff --git a/guide/english/certifications/responsive-web-design/css-grid/index.md b/guide/english/certifications/responsive-web-design/css-grid/index.md
index 170d30132b..0a85286415 100644
--- a/guide/english/certifications/responsive-web-design/css-grid/index.md
+++ b/guide/english/certifications/responsive-web-design/css-grid/index.md
@@ -1,7 +1,7 @@
---
title: CSS Grid
---
-## CSS Grid
+# CSS Grid
This is a stub. Help our community expand it.
@@ -9,6 +9,6 @@ This is a stub. Help our community expand it.
diff --git a/guide/english/certifications/responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows/index.md b/guide/english/certifications/responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows/index.md
index 706f4a3b2f..6439686952 100644
--- a/guide/english/certifications/responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows/index.md
+++ b/guide/english/certifications/responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows/index.md
@@ -1,22 +1,33 @@
---
title: Use CSS Grid Units to Change the Size of Columns and Rows
---
-## Use CSS Grid units to Change the Size of Columns and Rows
+# Use CSS Grid Units to Change the Size of Columns and Rows
+---
+## Problem Explanation
This challenge requires you to set the width of the columns of the container to the ones as specified in the challenge description.
-### Hint
+
+---
+## Hints
+
+### Hint 1
Change the `grid-template-columns` property.
-### Solution
+
+---
+## Solutions
+
+
diff --git a/guide/english/certifications/responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template/index.md b/guide/english/certifications/responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template/index.md
index c9913f8d31..cc7083ab48 100644
--- a/guide/english/certifications/responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template/index.md
+++ b/guide/english/certifications/responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template/index.md
@@ -1,13 +1,21 @@
---
title: Use grid-area Without Creating an Areas Template
---
-## Use grid-area Without Creating an Areas Template
+# Use grid-area Without Creating an Areas Template
-### Hint
+
+---
+## Hints
+
+### Hint 1
The `grid-area` takes values in the following format `horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at`.
-### Solution
+
+---
+## Solutions
+
+
\ No newline at end of file
diff --git a/guide/english/certifications/responsive-web-design/responsive-web-design-principles/make-typography-responsive/index.md b/guide/english/certifications/responsive-web-design/responsive-web-design-principles/make-typography-responsive/index.md
index 8d76c33ae9..1d7f7561fa 100644
--- a/guide/english/certifications/responsive-web-design/responsive-web-design-principles/make-typography-responsive/index.md
+++ b/guide/english/certifications/responsive-web-design/responsive-web-design-principles/make-typography-responsive/index.md
@@ -2,27 +2,22 @@
title: Make Typography Responsive
---
- Remember to use **`Read-Search-Ask`** if you get stuck. Try to pair program  and write your own code 
+# Make Typography Responsive
-## Make Typography Responsive
-##  Hint: 1
+---
+## Hints
+
+### Hint 1
For viewport width use the `vw` unit.
-> _try to solve the problem now_
-##  Hint: 2
+### Hint 2
For the smaller viewport measurement use the `vmin` unit.
-> _try to solve the problem now_
-
-## Spoiler Alert!
-
-
-
-**Solution ahead!**
+
\ No newline at end of file
diff --git a/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage/index.md b/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage/index.md
index bc2ba509b4..29c44b3a0a 100644
--- a/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage/index.md
+++ b/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage/index.md
@@ -1,7 +1,7 @@
---
title: Build a Personal Portfolio Webpage
---
-## Build a Personal Portfolio Webpage
+# Build a Personal Portfolio Webpage
This is a stub. Help our community expand it.
diff --git a/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page/index.md b/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page/index.md
index eacfb8087b..370bc8898b 100644
--- a/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page/index.md
+++ b/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page/index.md
@@ -1,7 +1,7 @@
---
title: Build a Product Landing Page
---
-## Build a Product Landing Page
+# Build a Product Landing Page
This is a stub. Help our community expand it.
diff --git a/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-survey-form/index.md b/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-survey-form/index.md
index c002b0703e..5fe3c1d1b5 100644
--- a/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-survey-form/index.md
+++ b/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-survey-form/index.md
@@ -1,7 +1,7 @@
---
title: Build a Survey Form
---
-## Build a Survey Form
+# Build a Survey Form
This is a stub. Help our community expand it.
diff --git a/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page/index.md b/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page/index.md
index 7fd287d94b..64d1c57c35 100644
--- a/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page/index.md
+++ b/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page/index.md
@@ -1,7 +1,7 @@
---
title: Build a Technical Documentation Page
---
-## Build a Technical Documentation Page
+# Build a Technical Documentation Page
This is a stub. Help our community expand it.
diff --git a/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-tribute-page/index.md b/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-tribute-page/index.md
index 3a3dfff446..db3d98fb98 100644
--- a/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-tribute-page/index.md
+++ b/guide/english/certifications/responsive-web-design/responsive-web-design-projects/build-a-tribute-page/index.md
@@ -1,7 +1,7 @@
---
title: Build a Tribute Page
---
-## Build a Tribute Page
+# Build a Tribute Page
This is a stub. Help our community expand it.
diff --git a/guide/english/certifications/responsive-web-design/responsive-web-design-projects/index.md b/guide/english/certifications/responsive-web-design/responsive-web-design-projects/index.md
index 84f2c5fe24..736e4021bc 100644
--- a/guide/english/certifications/responsive-web-design/responsive-web-design-projects/index.md
+++ b/guide/english/certifications/responsive-web-design/responsive-web-design-projects/index.md
@@ -1,7 +1,7 @@
---
title: Responsive Web Design Projects
---
-## Responsive Web Design Projects
+# Responsive Web Design Projects
This is a stub. Help our community expand it.
@@ -9,5 +9,5 @@ This is a stub.
Solution 1 (Click to Show/Hide)
Since the challenge requires you to create two rows of `50px` each, declare the following in your `.container` CSS code block: -````css +```css grid-template-rows: 50px 50px; -```` +``` + +Solution 1 (Click to Show/Hide)
Since the challenge requires you to horizontally center all the items, declare the following in your .container CSS codeblock: -````css +```css justify-items: center; -```` +``` +Solution 1 (Click to Show/Hide)
Since the challenge requires you to move all the items to the end of each cell (vertically), declare the following in your .container CSS codeblock: -````css +```css align-items: end; -```` +``` + +Solution 1 (Click to Show/Hide)
Since this challenge requires you to (horizontally) center the item with the class `item2`, declare the following in your `.item2` CSS codeblock: -````css +```css justify-self: center; -```` +``` + +Solution 1 (Click to Show/Hide)
Since this challenge requires you to vertically align the item with the class `item3` at the end, declare the following in your `.item3` CSS codeblock: -````css +```css align-self: end; -```` +``` +Solution 1 (Click to Show/Hide)
Since the challenge has you adding a gap of 20px, you would add the following line to the .container CSS codeblock. -````css +```css grid-column-gap: 20px; -```` +``` + +Solution 1 (Click to Show/Hide)
Since the challenge has you adding a gap of `5px`, you would add the following line to the `.container` CSS code block. -````css +```css grid-row-gap: 5px; -```` +``` + + Here is your grid
`
-### Setting your elements to grids
+**Setting your elements to grids**
+
After that, adjust the following CSS properties:
`.gridElement{
/* this gives you a grid */
@@ -26,6 +30,6 @@ After that, adjust the following CSS properties:
display: grid;
}`
-### Additional Information
+** Notes:**
After that, feel free to customize your grids however you like.
i.e. `grid-template-columns: auto 1fr;` might look good in that nested grid.
diff --git a/guide/english/certifications/responsive-web-design/css-grid/create-your-first-css-grid/index.md b/guide/english/certifications/responsive-web-design/css-grid/create-your-first-css-grid/index.md
index 1b6f9f3086..9e0129f948 100644
--- a/guide/english/certifications/responsive-web-design/css-grid/create-your-first-css-grid/index.md
+++ b/guide/english/certifications/responsive-web-design/css-grid/create-your-first-css-grid/index.md
@@ -1,15 +1,19 @@
---
title: Create Your First CSS Grid
---
-## Create Your First CSS Grid
+# Create Your First CSS Grid
+
+
+---
+## Hints
### Hint 1
To change display of any element, the following syntax is used:
-````css
+```css
display: propertyName;
-````
+```
### Hint 2
@@ -19,10 +23,16 @@ Change the display property of the .container element
Set the display of the .container element to grid
-### Solution
+
+---
+## Solutions
+
+Here is your nested grid