diff --git a/Challenge-Adjusting-the-Padding-of-an-Element.md b/Challenge-Adjusting-The-Padding-Of-An-Element.md similarity index 87% rename from Challenge-Adjusting-the-Padding-of-an-Element.md rename to Challenge-Adjusting-The-Padding-Of-An-Element.md index d7623f7..dd9677e 100644 --- a/Challenge-Adjusting-the-Padding-of-an-Element.md +++ b/Challenge-Adjusting-The-Padding-Of-An-Element.md @@ -1,8 +1,10 @@ -HTML elements are essentially little rectangles. Three important attributes control the space that surrounds each HTML element: `padding`, `margin`, and `border`. An element's padding controls the amount of space between the element and its border. - -```css -.green-box { - background-color: green; - padding: 20px; -} -``` +# Challenge Adjust the Padding of an Element + +HTML elements are essentially little rectangles. Three important attributes control the space that surrounds each HTML element: `padding`, `margin`, and `border`. An element's padding controls the amount of space between the element and its border. + +```css +.green-box { + background-color: green; + padding: 20px; +} +``` diff --git a/Challenge-Appending-Variables-to-Strings.md b/Challenge-Appending-Variables-To-Strings.md similarity index 81% rename from Challenge-Appending-Variables-to-Strings.md rename to Challenge-Appending-Variables-To-Strings.md index c4b9610..85a4667 100644 --- a/Challenge-Appending-Variables-to-Strings.md +++ b/Challenge-Appending-Variables-To-Strings.md @@ -1,9 +1,10 @@ -# Appending Variables to Strings +# Challenge Appending Variables to Strings + Just as we can build a string over multiple lines out of string literals, we can also append variables to a string using the plus equals `+=` operator. ## Example -```js +```javascript var anAdjective = "awesome!"; var ourStr = "Free Code Camp is "; ourStr += anAdjective; diff --git a/Challenge-Apply-the-Default-Bootstrap-Button-Style.md b/Challenge-Apply-The-Default-Bootstrap-Button-Style.md similarity index 90% rename from Challenge-Apply-the-Default-Bootstrap-Button-Style.md rename to Challenge-Apply-The-Default-Bootstrap-Button-Style.md index 7e582bc..b9bae6e 100644 --- a/Challenge-Apply-the-Default-Bootstrap-Button-Style.md +++ b/Challenge-Apply-The-Default-Bootstrap-Button-Style.md @@ -1,23 +1,25 @@ -# Apply the Default Bootstrap Button Style -Bootstrap has a button class called `btn-default` - -```html -
-

jQuery Playground

-
-
-
- - - -
-
-
-
- - - -
-
-
-
+# Challenge Apply the Default Bootstrap Button Style + +Bootstrap has a button class called `btn-default` + +```html +
+

jQuery Playground

+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+``` diff --git a/Challenge-Assignment-With-A-Returned-Value.md b/Challenge-Assignment-With-A-Returned-Value.md index 1305e5e..2e4e402 100644 --- a/Challenge-Assignment-With-A-Returned-Value.md +++ b/Challenge-Assignment-With-A-Returned-Value.md @@ -1,11 +1,11 @@ -#Challenge: Assignment with a Returned Value +# Challenge Assignment with a Returned Value If you'll recall from our discussion of Storing Values with the Equal Operator, everything to the right of the equal sign is resolved before the value is assigned. This means we can take the return value of a function and assign it to a variable. Assume we have pre-defined a function `sum` which adds two numbers together, then: -```js +```javascript var ourSum = sum(5, 12); ``` -will call `sum` function, which returns a value of `17` and assigns it to `ourSum` variable. \ No newline at end of file +will call `sum` function, which returns a value of `17` and assigns it to `ourSum` variable. diff --git a/Challenge-Assignment-with-Divided-by-Equals.md b/Challenge-Assignment-With-Divided-By-Equals.md similarity index 79% rename from Challenge-Assignment-with-Divided-by-Equals.md rename to Challenge-Assignment-With-Divided-By-Equals.md index c6fb614..bcc7e63 100644 --- a/Challenge-Assignment-with-Divided-by-Equals.md +++ b/Challenge-Assignment-With-Divided-By-Equals.md @@ -1,4 +1,5 @@ -# Assignment with Divided by Equals +# Challenge Assignment with Divided by Equals + The `/= operator` divides a variable by another number. ```javascript diff --git a/Challenge-Assignment-with-Minus-Equals.md b/Challenge-Assignment-With-Minus-Equals.md similarity index 82% rename from Challenge-Assignment-with-Minus-Equals.md rename to Challenge-Assignment-With-Minus-Equals.md index 7e6a04f..c621791 100644 --- a/Challenge-Assignment-with-Minus-Equals.md +++ b/Challenge-Assignment-With-Minus-Equals.md @@ -1,4 +1,5 @@ -# Assignment with Minus Equals +# Challenge Assignment with Minus Equals + Like the `+= operator`, `-=` subtracts a number from a variable. ```javascript diff --git a/Challenge-Assignment-with-Plus-Equals.md b/Challenge-Assignment-With-Plus-Equals.md similarity index 87% rename from Challenge-Assignment-with-Plus-Equals.md rename to Challenge-Assignment-With-Plus-Equals.md index 8cf37ec..9c21770 100644 --- a/Challenge-Assignment-with-Plus-Equals.md +++ b/Challenge-Assignment-With-Plus-Equals.md @@ -1,11 +1,12 @@ -# Assignment with Plus Equals +# Challenge Assignment with Plus Equals + Everything to the right of the equals sign is evaluated first, so we can say `myVar = myVar + 5;` to add `5` to `myVar`. Since this is such a common pattern, there are operators which do both a mathematical operation and assignment in one step. One such operator is the `+= operator`. `myVar += 5;` will add 5 to myVar instead of using any of the follwoing: -```js +```javascript myVar = 5 + myVar; myVar = myvar + 5; ``` diff --git a/Challenge-Assignment-with-Times-Equals.md b/Challenge-Assignment-With-Times-Equals.md similarity index 80% rename from Challenge-Assignment-with-Times-Equals.md rename to Challenge-Assignment-With-Times-Equals.md index da2efda..cb935db 100644 --- a/Challenge-Assignment-with-Times-Equals.md +++ b/Challenge-Assignment-With-Times-Equals.md @@ -1,4 +1,5 @@ -# Assignment with Times Equals +# Challenge Assignment with Times Equals + The `*= operator` multiplies a variable by a number. ```javascript diff --git a/Challenge-Bring-your-JavaScript-Slot-Machine-to-Life.md b/Challenge-Bring-Your-JavaScript-Slot-Machine-To-Life.md similarity index 83% rename from Challenge-Bring-your-JavaScript-Slot-Machine-to-Life.md rename to Challenge-Bring-Your-JavaScript-Slot-Machine-To-Life.md index c4462b7..e78a92f 100644 --- a/Challenge-Bring-your-JavaScript-Slot-Machine-to-Life.md +++ b/Challenge-Bring-Your-JavaScript-Slot-Machine-To-Life.md @@ -1,10 +1,11 @@ -# Bring your JavaScript Slot Machine to Life -Let's use the jQuery selector `$(".slot")` to select all of the slots. - -Once they are all selected, we can use bracket notation to access each individual slot: - -```javascript -$($(".slot")[0]).html(slotOne); -$($(".slot")[1]).html(slotTwo); -$($(".slot")[2]).html(slotThree); -``` +# Challenge Bring your JavaScript Slot Machine to Life + +Let's use the jQuery selector `$(".slot")` to select all of the slots. + +Once they are all selected, we can use bracket notation to access each individual slot: + +```javascript +$($(".slot")[0]).html(slotOne); +$($(".slot")[1]).html(slotTwo); +$($(".slot")[2]).html(slotThree); +``` diff --git a/Challenge-Build-JavaScript-Objects.md b/Challenge-Build-JavaScript-Objects.md index bb27df5..01bf63d 100644 --- a/Challenge-Build-JavaScript-Objects.md +++ b/Challenge-Build-JavaScript-Objects.md @@ -1,15 +1,16 @@ -# Build JavaScript Objects -Objects are similar to arrays, except that instead of using indexes to access and modify their data, you access the data in objects through what are called properties. - -Here's a sample object: - -```javascript -var cat = { - "name": "Whiskers", - "legs": 4, - "tails": 1, - "enemies": ["Water", "Dogs"] -}; -``` - -Objects are useful for storing data in a structured way, and can represents real world objects, like a cats. +# Challenge Build JavaScript Objects + +Objects are similar to arrays, except that instead of using indexes to access and modify their data, you access the data in objects through what are called properties. + +Here's a sample object: + +```javascript +var cat = { + "name": "Whiskers", + "legs": 4, + "tails": 1, + "enemies": ["Water", "Dogs"] +}; +``` + +Objects are useful for storing data in a structured way, and can represents real world objects, like a cats. diff --git a/Challenge-Call-out-Optional-Actions-with-Button-Info.md b/Challenge-Call-Out-Optional-Actions-With-Button-Info.md similarity index 83% rename from Challenge-Call-out-Optional-Actions-with-Button-Info.md rename to Challenge-Call-Out-Optional-Actions-With-Button-Info.md index 0f0eecb..360bc9d 100644 --- a/Challenge-Call-out-Optional-Actions-with-Button-Info.md +++ b/Challenge-Call-Out-Optional-Actions-With-Button-Info.md @@ -1,6 +1,7 @@ -# Call out Optional Actions with Button Info -Bootstrap comes with several pre-defined colors for buttons. The `btn-info` class is used to call attention to optional actions that the user can take. Note that these buttons still need the `btn` and`btn-block` classes. - -```html - -``` +# Challenge Call out Optional Actions with Button Info + +Bootstrap comes with several pre-defined colors for buttons. The `btn-info` class is used to call attention to optional actions that the user can take. Note that these buttons still need the `btn` and`btn-block` classes. + +```html + +``` diff --git a/Challenge-Center-Text-with-Bootstrap.md b/Challenge-Center-Text-With-Bootstrap.md similarity index 60% rename from Challenge-Center-Text-with-Bootstrap.md rename to Challenge-Center-Text-With-Bootstrap.md index 2773247..214ce93 100644 --- a/Challenge-Center-Text-with-Bootstrap.md +++ b/Challenge-Center-Text-With-Bootstrap.md @@ -1,4 +1,9 @@ -# Center Text with Bootstrap -Now that we're using Bootstrap, we can center our heading elements to make them look better. All we need to do is add the class text-center to our h1 and h2 elements. - -Remember that you can add several classes to the same element by separating each of them with a space, like this: `

your text

`. +# Challenge Center Text with Bootstrap + +Now that we're using Bootstrap, we can center our heading elements to make them look better. All we need to do is add the class text-center to our h1 and h2 elements. + +Remember that you can add several classes to the same element by separating each of them with a space, like this: + +```html +

your text

+``` diff --git a/Challenge-Chaining-If-Else-Statements.md b/Challenge-Chaining-If-Else-Statements.md index 09d8755..f340b48 100644 --- a/Challenge-Chaining-If-Else-Statements.md +++ b/Challenge-Chaining-If-Else-Statements.md @@ -1,8 +1,8 @@ -#Challenge: Chaining If Else Statements +# Challenge Chaining If Else Statements `if/else` statements can be chained together for complex logic. Here is `pseudocode` of multiple chained `if` / `else if` statements: -```js +```javascript if(condition1) { statement1 } else if (condition2) { diff --git a/Challenge-Change-Text-Inside-an-Element-Using-jQuery.md b/Challenge-Change-Text-Inside-An-Element-Using-JQuery.md similarity index 99% rename from Challenge-Change-Text-Inside-an-Element-Using-jQuery.md rename to Challenge-Change-Text-Inside-An-Element-Using-JQuery.md index 6d3ac75..11ecfdd 100644 --- a/Challenge-Change-Text-Inside-an-Element-Using-jQuery.md +++ b/Challenge-Change-Text-Inside-An-Element-Using-JQuery.md @@ -1,4 +1,5 @@ # Change Text Inside an Element Using jQuery + Using jQuery, you can change the text between the start and end tags of an element. You can even change HTML markup. jQuery has a function called `.html()` that lets you add HTML tags and text within an element. Any content previously within the element will be completely replaced with the content you provide using this function. diff --git a/Challenge-Change-Text-with-Click-Events.md b/Challenge-Change-Text-With-Click-Events.md similarity index 74% rename from Challenge-Change-Text-with-Click-Events.md rename to Challenge-Change-Text-With-Click-Events.md index 4d851ef..8c5dca7 100644 --- a/Challenge-Change-Text-with-Click-Events.md +++ b/Challenge-Change-Text-With-Click-Events.md @@ -1,4 +1,9 @@ # Change Text with Click Events -When a click event happens, we can use Ajax to update an HTML element with the following code `$(".message").html("Here is the message");` + +When a click event happens, we can use Ajax to update an HTML element with the following code: + +```javascript +$(".message").html("Here is the message"); +``` This tells jQuery to use the class `message` as the selector and to that, change the HTML to have the string provide, we can also add custom html elements wrapped in quotation marks. diff --git a/Challenge-Change-the-CSS-of-an-Element-Using-jQuery.md b/Challenge-Change-The-CSS-Of-An-Element-Using-JQuery.md similarity index 95% rename from Challenge-Change-the-CSS-of-an-Element-Using-jQuery.md rename to Challenge-Change-The-CSS-Of-An-Element-Using-JQuery.md index 6cbb380..bf6e5ae 100644 --- a/Challenge-Change-the-CSS-of-an-Element-Using-jQuery.md +++ b/Challenge-Change-The-CSS-Of-An-Element-Using-JQuery.md @@ -1,13 +1,14 @@ -# Change the CSS of an Element Using jQuery -We can also change the CSS of an HTML element directly with jQuery. - -Query has a function called `.css()` that allows you to change the CSS of an element. - -```html - -``` +# Change the CSS of an Element Using jQuery + +We can also change the CSS of an HTML element directly with jQuery. + +Query has a function called `.css()` that allows you to change the CSS of an element. + +```html + +``` diff --git a/Challenge-Change-The-Color-Of-Text.md b/Challenge-Change-The-Color-Of-Text.md new file mode 100644 index 0000000..9698593 --- /dev/null +++ b/Challenge-Change-The-Color-Of-Text.md @@ -0,0 +1,9 @@ +# Challenge Change the color of a Text + +CSS allows us to change many styles. To change the color of an element we use `color`. + +Here's how you would set your h2 element's text color to blue: + +```html +

CatPhotoApp

+``` diff --git a/Challenge-Change-the-Font-Size-of-an-Element.md b/Challenge-Change-The-Font-Size-Of-An-Element.md similarity index 81% rename from Challenge-Change-the-Font-Size-of-an-Element.md rename to Challenge-Change-The-Font-Size-Of-An-Element.md index 4c6f052..ee2f537 100644 --- a/Challenge-Change-the-Font-Size-of-an-Element.md +++ b/Challenge-Change-The-Font-Size-Of-An-Element.md @@ -1,5 +1,7 @@ +# Challenge Change the Font Size of an Element + Font size is controlled by the `font-size` CSS attribute, like this: `h1 { font-size: 30px; }`. px is a unit that stands for [pixels](https://en.wikipedia.org/wiki/Pixel) -Although this Challenge requires the use of px, there are [other units of size measurements used](http://www.w3.org/Style/Examples/007/units.en.html) \ No newline at end of file +Although this Challenge requires the use of px, there are [other units of size measurements used](http://www.w3.org/Style/Examples/007/units.en.html) diff --git a/Challenge-Change-the-Color-of-Text.md b/Challenge-Change-the-Color-of-Text.md deleted file mode 100644 index 6ab7609..0000000 --- a/Challenge-Change-the-Color-of-Text.md +++ /dev/null @@ -1,3 +0,0 @@ -CSS allows us to change many styles. To change the color of an element we use `color`. - -Here's how you would set your h2 element's text color to blue: `

CatPhotoApp

`. \ No newline at end of file diff --git a/Challenge-Check-Radio-Buttons-and-Checkboxes-by-Default.md b/Challenge-Check-Radio-Buttons-And-Checkboxes-By-Default.md similarity index 52% rename from Challenge-Check-Radio-Buttons-and-Checkboxes-by-Default.md rename to Challenge-Check-Radio-Buttons-And-Checkboxes-By-Default.md index 145bee2..c344400 100644 --- a/Challenge-Check-Radio-Buttons-and-Checkboxes-by-Default.md +++ b/Challenge-Check-Radio-Buttons-And-Checkboxes-By-Default.md @@ -1,3 +1,9 @@ -You can set a checkbox or radio button to be checked by default using the checked attribute. - -To do this, just add the word "checked" to the inside of an input element. For example, ``. \ No newline at end of file +# Challenge Check Radio Buttons and Checkboxes by Default + +You can set a checkbox or radio button to be checked by default using the checked attribute. + +To do this, just add the word "checked" to the inside of an input element. For example, + +```html + +``` diff --git a/Challenge-Check-the-Length-Property-of-a-String-Variable.md b/Challenge-Check-The-Length-Property-Of-A-String-Variable.md similarity index 78% rename from Challenge-Check-the-Length-Property-of-a-String-Variable.md rename to Challenge-Check-The-Length-Property-Of-A-String-Variable.md index 0e964f5..384fe4b 100644 --- a/Challenge-Check-the-Length-Property-of-a-String-Variable.md +++ b/Challenge-Check-The-Length-Property-Of-A-String-Variable.md @@ -1,4 +1,7 @@ -# Check the Length Property of a String Variable -Data structures have properties. For example, strings have a property called `.length` that will tell you how many characters are in the string. - -`lastNameLength = lastName.length;` +# Check the Length Property of a String Variable + +Data structures have properties. For example, strings have a property called `.length` that will tell you how many characters are in the string. + +```javascript +lastNameLength = lastName.length; +``` diff --git a/Challenge-Clone-an-Element-Using-jQuery.md b/Challenge-Clone-An-Element-Using-JQuery.md similarity index 83% rename from Challenge-Clone-an-Element-Using-jQuery.md rename to Challenge-Clone-An-Element-Using-JQuery.md index ffdecbb..ec3b3a0 100644 --- a/Challenge-Clone-an-Element-Using-jQuery.md +++ b/Challenge-Clone-An-Element-Using-JQuery.md @@ -1,7 +1,9 @@ -# Clone an Element Using jQuery -jQuery has a function called`clone()` that makes a copy of an element. - -For example, if we wanted to copy target2 from our left-well to our right-well, we would use -```javascript -$("#target2").clone().appendTo("#right-well"); -``` +# Challenge Clone an Element Using jQuery + +jQuery has a function called`clone()` that makes a copy of an element. + +For example, if we wanted to copy target2 from our left-well to our right-well, we would use + +```javascript +$("#target2").clone().appendTo("#right-well"); +``` diff --git a/Challenge-Comment-out-HTML.md b/Challenge-Comment-Out-HTML.md similarity index 91% rename from Challenge-Comment-out-HTML.md rename to Challenge-Comment-Out-HTML.md index 412b421..75f0ffb 100644 --- a/Challenge-Comment-out-HTML.md +++ b/Challenge-Comment-Out-HTML.md @@ -1,15 +1,17 @@ -Commenting is a way that you can leave comments within your code without affecting the code itself. - -It is also a convenient way to make code inactive without having to delete it entirely. - -You can start a comment with ``. - -```html - -``` +# Challenge Comment out HTML + +Commenting is a way that you can leave comments within your code without affecting the code itself. + +It is also a convenient way to make code inactive without having to delete it entirely. + +You can start a comment with ``. + +```html + +``` diff --git a/Challenge-Comment-your-JavaScript-Code.md b/Challenge-Comment-Your-JavaScript-Code.md similarity index 80% rename from Challenge-Comment-your-JavaScript-Code.md rename to Challenge-Comment-Your-JavaScript-Code.md index d799f5e..98ab48c 100644 --- a/Challenge-Comment-your-JavaScript-Code.md +++ b/Challenge-Comment-Your-JavaScript-Code.md @@ -1,10 +1,13 @@ -# Comment your JavaScript Code -Comments are a great way to leave notes to yourself and to other people who will later need to figure out what it does. Any code in it will be ignored. - -Let's take a look at the two ways you can write comments in JavaScript. -- The double-slash comment will comment out the remainder of the text on the current line: - -`// This is a comment.` -- The slash-star-star-slash comment will comment out everything between the `/*` and the `*/` characters: - -`/* This is also a comment */` +# Challenge Comment your JavaScript Code + +Comments are a great way to leave notes to yourself and to other people who will later need to figure out what it does. Any code in it will be ignored. + +Let's take a look at the two ways you can write comments in JavaScript. + +- The double-slash comment will comment out the remainder of the text on the current line: + + `// This is a comment.` + +- The slash-star-star-slash comment will comment out everything between the `/*` and the `*/` characters: + + `/* This is also a comment */` diff --git a/Challenge-Comparison-With-The-Equality-Operator.md b/Challenge-Comparison-With-The-Equality-Operator.md index f3897ae..9d561fd 100644 --- a/Challenge-Comparison-With-The-Equality-Operator.md +++ b/Challenge-Comparison-With-The-Equality-Operator.md @@ -1,10 +1,10 @@ -##Challenge: Comparison with the Equality Operator +# Challenge Comparison with the Equality Operator There are many `Comparison Operators` in JavaScript. All of these operators return a boolean `true` or `false` value. The most basic operator is the equality operator `==`. The equality operator compares two values and returns `true` if they're equivalent or `false` if they are not. Note that equality is different from assignment (=), which assigns the value at the right of the operator to a variable in the left. -```js +```javascript function testEqual(myVal) { if (myVal == 10) { return "Equal"; @@ -17,7 +17,7 @@ If `myVal` is equal to `10`, the function will return "Equal". If it is not, the The equality operator will do its best to convert values for comparison, for example: -```js +```javascript 1 == 1 // true "1" == 1 // true 1 == '1' // true @@ -25,4 +25,4 @@ The equality operator will do its best to convert values for comparison, for exa 0 == null // false 0 == undefined // false null == undefined // true -``` \ No newline at end of file +``` diff --git a/Challenge-Comparison-With-The-Greater-Than-Equal-To-Operator.md b/Challenge-Comparison-With-The-Greater-Than-Equal-To-Operator.md index 71d0c11..6356075 100644 --- a/Challenge-Comparison-With-The-Greater-Than-Equal-To-Operator.md +++ b/Challenge-Comparison-With-The-Greater-Than-Equal-To-Operator.md @@ -1,12 +1,12 @@ -#Challenge: Comparison with the Greater Than Equal To Operator +# Challenge Comparison with the Greater Than Equal To Operator The greater than equal to operator (`>=`) compares the values of two numbers. If the number to the left is greater than or equal to the number to the right, it returns `true`. Otherwise, it returns `false`. Like the equality operator, greater than equal to operator will convert data types while comparing. -##Examples +## Examples -```js +```javascript 6 >= 6 // true 7 >= '3' // true 2 >= 3 // false diff --git a/Challenge-Comparison-With-The-Greater-Than-Operator.md b/Challenge-Comparison-With-The-Greater-Than-Operator.md index e9ed420..2340a06 100644 --- a/Challenge-Comparison-With-The-Greater-Than-Operator.md +++ b/Challenge-Comparison-With-The-Greater-Than-Operator.md @@ -1,12 +1,12 @@ -#Challenge: Comparison with the Greater Than Operator +# Challenge Comparison with the Greater Than Operator The greater than operator (`>`) compares the values of two numbers. If the number to the left is greater than the number to the right, it returns `true`. Otherwise, it returns `false`. Like the equality operator, greater than operator will convert data types of values while comparing. -##Examples +## Examples -```js +```javascript 5 > 3 // true 7 > '3' // true 2 > 3 // false diff --git a/Challenge-Comparison-With-The-Inequality-Operator.md b/Challenge-Comparison-With-The-Inequality-Operator.md index adce682..df30476 100644 --- a/Challenge-Comparison-With-The-Inequality-Operator.md +++ b/Challenge-Comparison-With-The-Inequality-Operator.md @@ -1,13 +1,13 @@ -#Challenge: Comparison with the Inequality Operator +# Challenge Comparison with the Inequality Operator The inequality operator (`!=`) is the opposite of the equality operator. It means "Not Equal" and returns `false` where equality would return `true` and vice versa. Like the equality operator, the inequality operator will convert data types of values while comparing. -##Examples +## Examples -```js +```javascript 1 != 2 // true 1 != "1" // false 1 != '1' // false 1 != true // false 0 != false // false -``` \ No newline at end of file +``` diff --git a/Challenge-Comparison-With-The-Less-Than-Equal-To-Operator.md b/Challenge-Comparison-With-The-Less-Than-Equal-To-Operator.md index 14f1dda..ae1f5f0 100644 --- a/Challenge-Comparison-With-The-Less-Than-Equal-To-Operator.md +++ b/Challenge-Comparison-With-The-Less-Than-Equal-To-Operator.md @@ -1,13 +1,13 @@ -#Challenge: Comparison with the Less Than Equal To Operator +# Challenge Comparison with the Less Than Equal To Operator The less than equal to operator (`<=`) compares the values of two numbers. If the number to the left is less than or equal the number to the right, it returns `true`. If the number on the left is greater than the number on the right, it returns `false`. Like the equality operator, `less than equal to` converts data types. -##Examples +## Examples -```js +```javascript 4 <= 5 // true '7' <= 7 // true 5 <= 5 // true 3 <= 2 // false '8' <= 4 // false -``` \ No newline at end of file +``` diff --git a/Challenge-Comparison-With-The-Less-Than-Operator.md b/Challenge-Comparison-With-The-Less-Than-Operator.md index e4c163d..ede049a 100644 --- a/Challenge-Comparison-With-The-Less-Than-Operator.md +++ b/Challenge-Comparison-With-The-Less-Than-Operator.md @@ -1,10 +1,10 @@ -#Challenge: Comparison with the Less Than Operator +# Challenge Comparison with the Less Than Operator The less than operator (`<`) compares the values of two numbers. If the number to the left is less than the number to the right, it returns `true`. Otherwise, it returns `false`. Like the equality operator, less than operator converts data types while comparing. -##Examples +## Examples -```js +```javascript 2 < 5 // true '3' < 7 // true 5 < 5 // false diff --git a/Challenge-Comparison-With-The-Strict-Equality-Operator.md b/Challenge-Comparison-With-The-Strict-Equality-Operator.md index c21e150..7962298 100644 --- a/Challenge-Comparison-With-The-Strict-Equality-Operator.md +++ b/Challenge-Comparison-With-The-Strict-Equality-Operator.md @@ -1,12 +1,12 @@ -#Challenge: Comparison with the Strict Equality Operator +# Challenge Comparison with the Strict Equality Operator Strict equality (`===`) is the counterpart to the equality operator (`==`). Unlike the equality operator, strict equality tests both the `type` and `value` of the compared elements. -##Examples +## Examples -```js +```javascript 3 === 3 // true 3 === '3' // false ``` -*In the second example, `3` is a `Number` type and `'3'` is a `String` type.* \ No newline at end of file +_In the second example, `3` is a `Number` type and `'3'` is a `String` type._ diff --git a/Challenge-Comparison-With-The-Strict-Inequality-Operator.md b/Challenge-Comparison-With-The-Strict-Inequality-Operator.md index f96628f..c1575b2 100644 --- a/Challenge-Comparison-With-The-Strict-Inequality-Operator.md +++ b/Challenge-Comparison-With-The-Strict-Inequality-Operator.md @@ -1,10 +1,10 @@ -#Challenge: Comparison with the Strict Inequality Operator +# Challenge Comparison with the Strict Inequality Operator The strict inequality operator (`!==`) is the opposite of the strict equality operator. It means "Strictly Not Equal" and returns `false` where strict equality would return `true` and vice versa. Strict inequality will not convert data types. -##Examples +## Examples -```js +```javascript 3 !== 3 // false 3 !== '3' // true 4 !== 3 // true diff --git a/Challenge-Comparisons-With-The-Logical-And-Operator.md b/Challenge-Comparisons-With-The-Logical-And-Operator.md index e712f16..f643990 100644 --- a/Challenge-Comparisons-With-The-Logical-And-Operator.md +++ b/Challenge-Comparisons-With-The-Logical-And-Operator.md @@ -1,10 +1,10 @@ -#Challenge: Comparisons with the Logical And Operator +# Challenge Comparisons with the Logical And Operator Sometimes you will need to test more than one thing at a time. The `logical and` operator (`&&`) returns `true` if and only if the `operands` to the left and right of it are true. The same effect could be achieved by nesting an if statement inside another if: -```js +```javascript if (num > 5) { if (num < 10) { return "Yes"; @@ -15,9 +15,9 @@ return "No"; will only return "Yes" if `num` is between `6` and `9` (6 and 9 included). The same logic can be written as: -```js +```javascript if (num > 5 && num < 10) { return "Yes"; } return "No"; -``` \ No newline at end of file +``` diff --git a/Challenge-Comparisons-With-The-Logical-Or-Operator.md b/Challenge-Comparisons-With-The-Logical-Or-Operator.md index 7cb6dc0..dc00920 100644 --- a/Challenge-Comparisons-With-The-Logical-Or-Operator.md +++ b/Challenge-Comparisons-With-The-Logical-Or-Operator.md @@ -1,10 +1,10 @@ -#Challenge: Comparisons with the Logical Or Operator +# Challenge Comparisons with the Logical Or Operator The `logical or` operator (`||`) returns `true` if either of the `operands` is `true`. Otherwise, it returns `false`. The pattern below should look familiar from prior Challenges: -```js +```javascript if (num > 10) { return "No"; } @@ -16,9 +16,9 @@ return "Yes"; will return "Yes" only if `num` is between `5` and `10` (5 and 10 included). The same logic can be written as: -```js +```javascript if (num > 10 || num < 5) { return "No"; } return "Yes"; -``` \ No newline at end of file +``` diff --git a/Challenge-Concatenate-Strings-With-Concat.md b/Challenge-Concatenate-Strings-With-Concat.md new file mode 100644 index 0000000..924a6a8 --- /dev/null +++ b/Challenge-Concatenate-Strings-With-Concat.md @@ -0,0 +1,7 @@ +# Challenge Concatenate Strings with `.concat` + +`.concat()` can be used to merge the contents of two arrays into one. + +```javascript +array = array.concat(otherArray); +``` diff --git a/Challenge-Concatenate-Strings-with-.concat.md b/Challenge-Concatenate-Strings-with-.concat.md deleted file mode 100644 index 6470124..0000000 --- a/Challenge-Concatenate-Strings-with-.concat.md +++ /dev/null @@ -1,3 +0,0 @@ -`.concat()` can be used to merge the contents of two arrays into one. - -`array = array.concat(otherArray);` diff --git a/Challenge-Concatenating-Strings-with-Plus-Operator.md b/Challenge-Concatenating-Strings-With-Plus-Operator.md similarity index 74% rename from Challenge-Concatenating-Strings-with-Plus-Operator.md rename to Challenge-Concatenating-Strings-With-Plus-Operator.md index a1c6178..6c4d91f 100644 --- a/Challenge-Concatenating-Strings-with-Plus-Operator.md +++ b/Challenge-Concatenating-Strings-With-Plus-Operator.md @@ -1,8 +1,13 @@ -# Concatenating Strings with Plus Operator +# Challenge Concatenating Strings with Plus Operator + In JavaScript, when the `+` operator is used with a String value, it is called the `concatenation` operator. You can build a new string out of other strings by concatenating them together. ## Example -`'My name is Alan,' + ' I concatenate.'` + +```javascript +'My name is Alan,' + ' I concatenate.' +``` ## Note + Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself. diff --git a/Challenge-Concatenating-Strings-with-the-Plus-Equals-Operator.md b/Challenge-Concatenating-Strings-With-The-Plus-Equals-Operator.md similarity index 82% rename from Challenge-Concatenating-Strings-with-the-Plus-Equals-Operator.md rename to Challenge-Concatenating-Strings-With-The-Plus-Equals-Operator.md index 380c352..6a93cf8 100644 --- a/Challenge-Concatenating-Strings-with-the-Plus-Equals-Operator.md +++ b/Challenge-Concatenating-Strings-With-The-Plus-Equals-Operator.md @@ -1,12 +1,14 @@ -# Concatenating Strings with the Plus Equals Operator +# Challenge Concatenating Strings with the Plus Equals Operator + We can use the `+=` operator to concatenate a string onto the end of an existing string variable. This can be very helpful to break a long string over several lines. ## Note + Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself. ## Example -```js +```javascript var ourStr = "I come first. "; ourStr += "I come second."; ``` diff --git a/Challenge-Condense-arrays-with-reduce.md b/Challenge-Condense-Arrays-With-Reduce.md similarity index 87% rename from Challenge-Condense-arrays-with-reduce.md rename to Challenge-Condense-Arrays-With-Reduce.md index 8f159ff..3d5aa71 100644 --- a/Challenge-Condense-arrays-with-reduce.md +++ b/Challenge-Condense-Arrays-With-Reduce.md @@ -1,13 +1,15 @@ -Reduce can be useful for condensing an array of numbers into one value. - -```javascript -var array = [4,5,6,7,8]; -var singleVal = 0; -// Only change code below this line. - -var singleVal = array.reduce(function(previousVal, currentVal){ - -  return previousVal+currentVal; - -}); -``` +# Challenge Condense Arrays with Reduce + +Reduce can be useful for condensing an array of numbers into one value. + +```javascript +var array = [4,5,6,7,8]; +var singleVal = 0; +// Only change code below this line. + +var singleVal = array.reduce(function(previousVal, currentVal){ + +  return previousVal+currentVal; + +}); +``` diff --git a/Challenge-Construct-JavaScript-Objects-with-Functions.md b/Challenge-Construct-JavaScript-Objects-With-Functions.md similarity index 87% rename from Challenge-Construct-JavaScript-Objects-with-Functions.md rename to Challenge-Construct-JavaScript-Objects-With-Functions.md index ede4e32..b6332e3 100644 --- a/Challenge-Construct-JavaScript-Objects-with-Functions.md +++ b/Challenge-Construct-JavaScript-Objects-With-Functions.md @@ -1,13 +1,14 @@ -## Construct JavaScript Objects with Functions -Using constructors it is easy to create new objects using a blueprint or constructor. The declaration syntax is a little different but still easy to remember. - -```javascript -// Let's add the properties engines and seats to the car in the same way that the property wheels has been added below. They should both be numbers. -var Car = function() { - this.wheels = 4; - this.engines = 1; - this.seats = 1; -}; - -var myCar = new Car(); -``` +# Challenge Construct JavaScript Objects with Functions + +Using constructors it is easy to create new objects using a blueprint or constructor. The declaration syntax is a little different but still easy to remember. + +```javascript +// Let's add the properties engines and seats to the car in the same way that the property wheels has been added below. They should both be numbers. +var Car = function() { + this.wheels = 4; + this.engines = 1; + this.seats = 1; +}; + +var myCar = new Car(); +``` diff --git a/Challenge-Constructing-Strings-with-Variables.md b/Challenge-Constructing-Strings-With-Variables.md similarity index 83% rename from Challenge-Constructing-Strings-with-Variables.md rename to Challenge-Constructing-Strings-With-Variables.md index dbc92be..bbb8f68 100644 --- a/Challenge-Constructing-Strings-with-Variables.md +++ b/Challenge-Constructing-Strings-With-Variables.md @@ -1,9 +1,10 @@ -# Constructing Strings with Variables +# Challenge Constructing Strings with Variables + Sometimes you will need to build a string, [Mad Libs](https://en.wikipedia.org/wiki/Mad_Libs) style. By using the concatenation operator `+`, you can insert one or more variables into a string you're building. ## Example -```js +```javascript var ourName = "Free Code Camp"; var ourStr = "Hello, our name is " + ourName + ", how are you?"; ``` diff --git a/Challenge-Convert-Celsius-To-Fahrenheit.md b/Challenge-Convert-Celsius-To-Fahrenheit.md index 38a3c77..c034769 100644 --- a/Challenge-Convert-Celsius-To-Fahrenheit.md +++ b/Challenge-Convert-Celsius-To-Fahrenheit.md @@ -1,31 +1,37 @@ -# Details +# Challenge Convert Celsius to Fahrenheit + The algorithm to convert from Celsius to Fahrenheit is the temperature in Celsius times 9/5, plus 32. You are given a variable `celsius` representing a temperature in Celsius. Create a variable `fahrenheit` and apply the algorithm to assign it the corresponding temperature in Fahrenheit. -Remember to use [ Read-Search-Ask](FreeCodeCamp-Get-Help) if you get stuck. Try to pair program. Write your own code. +Remember to use [Read-Search-Ask](FreeCodeCamp-Get-Help) if you get stuck. Try to pair program. Write your own code. ## Useful Links + - [The Order of Operations: PEMDAS](http://www.purplemath.com/modules/orderops.htm) - [Order of Operation: Video](https://www.khanacademy.org/math/pre-algebra/order-of-operations/order_of_operations/v/order-of-operations) ## Problem Explanation: + - Explain what is asked in an easy to understand way. ## Hint: 1 + - Take a look at the code, there is an area that you're not supposed to edit, from there ask yourself, what is used there that I don't see before? ## Hint: 2 + - Keep in mind the `order of operation` check the link in the _link_ section for more information. ## Spoiler Alert! + [![687474703a2f2f7777772e796f75726472756d2e636f6d2f796f75726472756d2f696d616765732f323030372f31302f31302f7265645f7761726e696e675f7369676e5f322e676966.gif](https://files.gitter.im/FreeCodeCamp/Wiki/nlOm/thumb/687474703a2f2f7777772e796f75726472756d2e636f6d2f796f75726472756d2f696d616765732f323030372f31302f31302f7265645f7761726e696e675f7369676e5f322e676966.gif)](https://files.gitter.im/FreeCodeCamp/Wiki/nlOm/687474703a2f2f7777772e796f75726472756d2e636f6d2f796f75726472756d2f696d616765732f323030372f31302f31302f7265645f7761726e696e675f7369676e5f322e676966.gif) **Solution ahead!** ## Code Solution: -```js +```javascript function convertToF(celsius) { // Only change code below this line var fahrenheit = (celsius * (9/5)) + 32; @@ -42,11 +48,13 @@ function convertToF(celsius) { convertToF(30); ``` -# Code Explanation: +### Code Explanation: + - Make sure the proper order is followed with arithmetic using `()` when needed. - Declare the `fahrenheit` variable. -# Credits: -If you found this page useful, you can give thanks by copying and pasting this on the main chat: **`thanks @Rafase282 for your help with Checkpoint: Convert Celsius to Fahrenheit`** +### Credits: + +If you found this page useful, you can give thanks by copying and pasting this on the main chat: **`thanks @Rafase282 for your help with Checkpoint: Convert Celsius to Fahrenheit`** > **NOTE:** Please add your username only if you have added any **relevant main contents** to the wiki page. (Please don't remove any existing usernames.) diff --git a/Challenge-Convert-JSON-Data-to-HTML.md b/Challenge-Convert-JSON-Data-To-HTML.md similarity index 91% rename from Challenge-Convert-JSON-Data-to-HTML.md rename to Challenge-Convert-JSON-Data-To-HTML.md index b8ff62a..dd3adea 100644 --- a/Challenge-Convert-JSON-Data-to-HTML.md +++ b/Challenge-Convert-JSON-Data-To-HTML.md @@ -1,9 +1,10 @@ -# Convert JSON Data to HTML +# Challenge Convert JSON Data to HTML + Once you know how to get data from the JSON call then is time to learn how to iterate through it. We can use the .map() method to loop through our data and modify our HTML elements. Here is a code that does that: -```js +```javascript // calling map on the json variable and using a custom callback function. json.map(function(val) { diff --git a/Challenge-Count-Backwards-With-a-For-Loop.md b/Challenge-Count-Backwards-With-A-For-Loop.md similarity index 87% rename from Challenge-Count-Backwards-With-a-For-Loop.md rename to Challenge-Count-Backwards-With-A-For-Loop.md index 2c219b0..b6391d9 100644 --- a/Challenge-Count-Backwards-With-a-For-Loop.md +++ b/Challenge-Count-Backwards-With-A-For-Loop.md @@ -1,11 +1,12 @@ -# Count Backwards With a For Loop +# Challenge Count Backwards With a For Loop + A for loop can also count backwards, so long as we can define the right conditions. In order to count backwards by twos, we'll need to change our `initialization`, `condition`, and `final-expression`. We'll start at `i = 10` and loop while `i > 0`. We'll decrement `i` by `2` each loop with `i -= 2`. -```js +```javascript var ourArray = []; for(var i = 10; i > 0; i -= 2) { diff --git a/Challenge-Counting-Cards.md b/Challenge-Counting-Cards.md index a7cfd81..c576146 100644 --- a/Challenge-Counting-Cards.md +++ b/Challenge-Counting-Cards.md @@ -1,18 +1,18 @@ -# Checkpoint: Counting Cards +# Challenge Counting Cards -***About Blackjack*** +**_About Blackjack_** In the casino game Blackjack, a player can gain an advantage over the house by keeping track of the relative number of high and low cards remaining in the deck. This is called [Card Counting](https://en.wikipedia.org/wiki/Card_counting "Wikipedia entry on Card Counting"). Having more high cards remaining in the deck favors the player. Each card is assigned a value according to the table below. When the count is positive, the player should bet high. When the count is zero or negative, the player should bet low. -| Value | Cards | -| ------ |:----------------------:| -| +1 | 2, 3, 4, 5, 6 | -| 0 | 7, 8, 9 | -| -1 | 10, 'J', 'Q', 'K','A' | +Value | Cards +----- | :-------------------: ++1 | 2, 3, 4, 5, 6 +0 | 7, 8, 9 +-1 | 10, 'J', 'Q', 'K','A' -***Instructions*** +**_Instructions_** You will write a card counting function. It will receive a **card** parameter and increment or decrement the global **count** variable according to the card's value (see table). The function will then return the current count and the string **"Bet"** if the count is positive, or **"Hold"** if the count is zero or negative. @@ -21,14 +21,16 @@ You will write a card counting function. It will receive a **card** parameter an - -3 Hold - 5 Bet -Remember to use [ Read-Search-Ask](FreeCodeCamp-Get-Help) if you get stuck. Try to pair program. Write your own code. +Remember to use [Read-Search-Ask](FreeCodeCamp-Get-Help) if you get stuck. Try to pair program. Write your own code. ## Useful Links + - [Challenge: Selecting from many options with Switch Statements](http://www.freecodecamp.com/challenges/selecting-from-many-options-with-switch-statements) - [Challenge: Chaining If Else Statements](http://www.freecodecamp.com/challenges/chaining-if-else-statements) - [Challenge: Increment a Number with Javascript](http://www.freecodecamp.com/challenges/increment-a-number-with-javascript) ## Problem Explanation: + - Change the code below `// Only change code below this line` and up to `// Only change code above this line` - Take note that you are editing the inside of the `cc` function - Use what you've learned to check the value of each `card` parameter passed into the function @@ -37,15 +39,19 @@ Remember to use [ Read-Search-Ask](FreeCodeCamp-Get-Help) if you get stuck. Try - If the final count is 0 or less, return **# Bet** ## Hint: 1 + - Use a `switch` (or `else if`) statement to count the value of each card. ## Hint: 2 + - Add/subtract the value of each card to variable `count`. If the card is worth 0, don't do anything! ## Hint: 3 + - After you've counted the cards, use an `if` statement to check the value of `count`. Also, make sure your return has a space between the number and the string. ## Spoiler Alert! + [![687474703a2f2f7777772e796f75726472756d2e636f6d2f796f75726472756d2f696d616765732f323030372f31302f31302f7265645f7761726e696e675f7369676e5f322e676966.gif](https://files.gitter.im/FreeCodeCamp/Wiki/nlOm/thumb/687474703a2f2f7777772e796f75726472756d2e636f6d2f796f75726472756d2f696d616765732f323030372f31302f31302f7265645f7761726e696e675f7369676e5f322e676966.gif)](https://files.gitter.im/FreeCodeCamp/Wiki/nlOm/687474703a2f2f7777772e796f75726472756d2e636f6d2f796f75726472756d2f696d616765732f323030372f31302f31302f7265645f7761726e696e675f7369676e5f322e676966.gif) **Solution ahead!** @@ -78,18 +84,20 @@ function cc(card) { } // Only change code above this line } - ``` -# Code Explanation: +### Code Explanation: + - Checks the value of each card via a `switch` statement - The variable `count`: + - Increases by 1 if the card is a 2, 3, 4, 5, or 6 - Since 7, 8, and 9 aren't worth anything, we ignore those cards in our `switch` statement. - Decreases by 1 if the card is a 10, 'J', 'Q', 'K', or 'A' + - Checks the value of `count` and returns the appropriate response -***Example Run*** +**_Example Run_** - `cc(2);` runs - The `switch` statement hits `case 2`, jumps down and adds 1 to the variable `count` @@ -98,10 +106,10 @@ function cc(card) { - After the `switch` statement, the `if` statement checks `count`, which is now 0 - This then drops down to the `else` statement, which will return **0 Hold** -***Note*** -As mentioned earlier, the `switch` statement could have also been an `else if` statement +**_Note_** As mentioned earlier, the `switch` statement could have also been an `else if` statement -# Credits: -If you found this page useful, you can give thanks by copying and pasting this on the main chat: **`thanks @leftynaut for your help with Checkpoint: Counting Cards`** +### Credits: + +If you found this page useful, you can give thanks by copying and pasting this on the main chat: **`thanks @leftynaut for your help with Checkpoint: Counting Cards`** > **NOTE:** Please add your username only if you have added any **relevant main contents** to the wiki page. (Please don't remove any existing usernames.) diff --git a/Challenge-Create-a-Block-Element-Bootstrap-Button.md b/Challenge-Create-A-Block-Element-Bootstrap-Button.md similarity index 84% rename from Challenge-Create-a-Block-Element-Bootstrap-Button.md rename to Challenge-Create-A-Block-Element-Bootstrap-Button.md index e87f4b2..85cd5b7 100644 --- a/Challenge-Create-a-Block-Element-Bootstrap-Button.md +++ b/Challenge-Create-A-Block-Element-Bootstrap-Button.md @@ -1,6 +1,7 @@ -# Create a Block Element Bootstrap Button -Normally, your button elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space. Note that these buttons still need the `btn` class. - -```html - -``` +# Challenge Create a Block Element Bootstrap Button + +Normally, your button elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space. Note that these buttons still need the `btn` class. + +```html + +``` diff --git a/Challenge-Create-a-Bootstrap-Button.md b/Challenge-Create-A-Bootstrap-Button.md similarity index 80% rename from Challenge-Create-a-Bootstrap-Button.md rename to Challenge-Create-A-Bootstrap-Button.md index ddeda14..dffa311 100644 --- a/Challenge-Create-a-Bootstrap-Button.md +++ b/Challenge-Create-A-Bootstrap-Button.md @@ -1,6 +1,7 @@ -# Create a Bootstrap Button -Bootstrap has its own styles for button elements, which look much better than the plain HTML ones. - -```html - -``` +# Challenge Create a Bootstrap Button + +Bootstrap has its own styles for button elements, which look much better than the plain HTML ones. + +```html + +``` diff --git a/Challenge-Create-A-Bootstrap-Headline.md b/Challenge-Create-A-Bootstrap-Headline.md new file mode 100644 index 0000000..da0b74e --- /dev/null +++ b/Challenge-Create-A-Bootstrap-Headline.md @@ -0,0 +1,7 @@ +# Challenge Create a Bootstrap Headline + +To create a headline in boostrap you will need to add the class `.text-primary`. + +```html +

jQuery Playground

+``` diff --git a/Challenge-Create-A-Bootstrap-Row.md b/Challenge-Create-A-Bootstrap-Row.md new file mode 100644 index 0000000..37609ca --- /dev/null +++ b/Challenge-Create-A-Bootstrap-Row.md @@ -0,0 +1,7 @@ +# Challenge Create a Bootstrap Row + +Create a div element with the class row. + +```html +
+``` diff --git a/Challenge-Create-a-Bulleted-Unordered-List.md b/Challenge-Create-A-Bulleted-Unordered-List.md similarity index 87% rename from Challenge-Create-a-Bulleted-Unordered-List.md rename to Challenge-Create-A-Bulleted-Unordered-List.md index f039ffb..a279e72 100644 --- a/Challenge-Create-a-Bulleted-Unordered-List.md +++ b/Challenge-Create-A-Bulleted-Unordered-List.md @@ -1,14 +1,16 @@ -HTML has a special element for creating unordered lists, or bullet point-style lists. - -Unordered lists start with a `