Skip to content
This repository has been archived by the owner on Apr 1, 2021. It is now read-only.

Commit

Permalink
Merge pull request #1027 from FreeCodeCamp/erictleung-change-eol-to-lf
Browse files Browse the repository at this point in the history 
Change EOL to LF
  • Loading branch information
@Rafase282
Rafase282 committed May 24, 2016
2 parents 1dd0836 + 5e57d4c commit 21d3e10
Show file tree
Hide file tree
Showing 42 changed files with 713 additions and 713 deletions.
116 changes: 58 additions & 58 deletions Algorithm-Reverse-A-String.md
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,58 @@
# Algorithm Reverse a String

:triangular_flag_on_post: Remember to use [**`Read-Search-Ask`**](FreeCodeCamp-Get-Help) if you get stuck. Try to pair program :busts_in_silhouette: and write your own code :pencil:

### :checkered_flag: Problem Explanation:
We need to take the string and reverse it, so if it originally reads 'hello', it will now read 'olleh'. We will need to split the string, and therefore we will be working with Arrays as well.

## :speech_balloon: Hint: 1
Start by splitting the string by characters.

> *try to solve the problem now*
## :speech_balloon: Hint: 2
Look up the built in function to reverse a string.

> *try to solve the problem now*
## :speech_balloon: Hint: 3
Do not forget to join the characters back together after you reverse them.

> *try to solve the problem now*
## Spoiler Alert!
![687474703a2f2f7777772e796f75726472756d2e636f6d2f796f75726472756d2f696d616765732f323030372f31302f31302f7265645f7761726e696e675f7369676e5f322e676966.gif](https://files.gitter.im/FreeCodeCamp/Wiki/nlOm/thumb/687474703a2f2f7777772e796f75726472756d2e636f6d2f796f75726472756d2f696d616765732f323030372f31302f31302f7265645f7761726e696e675f7369676e5f322e676966.gif)

**Solution ahead!**

## :beginner: Basic Code Solution:

```js
function reverseString(str) {
return str.split('').reverse().join('');
}
```

:rocket: [Run Code](https://repl.it/CLjU)

### Code Explanation:
- Our goal is to take the input, `str`, and return it in reverse. Our first step is to split the string by characters using `split('')`. Notice that we don't leave anything in between the single quotes, this tells the function to split the string by each character.

- Using the `split()` function will turn our string into an array of characters, keep that in mind as we move forward.

- Next we *chain* the `reverse()` function, which takes our array of characters and reverses them.

- Finally, we *chain* `join('')` to put our characters back together into a string. Notice once again that we left no spaces in the argument for join, this makes sure that the array of characters is joined back together by each character.

### :trophy: Credits:
If you found this page useful, you may say thanks to the contributors by copying and pasting the following line in the main chat:

**`Thanks @Rafase282 for your help with Algorithm: Reverse a String`**

## :clipboard: NOTE TO CONTRIBUTORS:
- :warning: **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**. :traffic_light:
- Please add your username only if you have added any **relevant main contents**. (:warning: ***DO NOT*** *remove any existing usernames*)

> See :point_right: [**`Wiki Challenge Solution Template`**](Wiki-Template-Challenge-Solution) for reference.
# Algorithm Reverse a String

:triangular_flag_on_post: Remember to use [**`Read-Search-Ask`**](FreeCodeCamp-Get-Help) if you get stuck. Try to pair program :busts_in_silhouette: and write your own code :pencil:

### :checkered_flag: Problem Explanation:
We need to take the string and reverse it, so if it originally reads 'hello', it will now read 'olleh'. We will need to split the string, and therefore we will be working with Arrays as well.

## :speech_balloon: Hint: 1
Start by splitting the string by characters.

> *try to solve the problem now*
## :speech_balloon: Hint: 2
Look up the built in function to reverse a string.

> *try to solve the problem now*
## :speech_balloon: Hint: 3
Do not forget to join the characters back together after you reverse them.

> *try to solve the problem now*
## Spoiler Alert!
![687474703a2f2f7777772e796f75726472756d2e636f6d2f796f75726472756d2f696d616765732f323030372f31302f31302f7265645f7761726e696e675f7369676e5f322e676966.gif](https://files.gitter.im/FreeCodeCamp/Wiki/nlOm/thumb/687474703a2f2f7777772e796f75726472756d2e636f6d2f796f75726472756d2f696d616765732f323030372f31302f31302f7265645f7761726e696e675f7369676e5f322e676966.gif)

**Solution ahead!**

## :beginner: Basic Code Solution:

```js
function reverseString(str) {
return str.split('').reverse().join('');
}
```

:rocket: [Run Code](https://repl.it/CLjU)

### Code Explanation:
- Our goal is to take the input, `str`, and return it in reverse. Our first step is to split the string by characters using `split('')`. Notice that we don't leave anything in between the single quotes, this tells the function to split the string by each character.

- Using the `split()` function will turn our string into an array of characters, keep that in mind as we move forward.

- Next we *chain* the `reverse()` function, which takes our array of characters and reverses them.

- Finally, we *chain* `join('')` to put our characters back together into a string. Notice once again that we left no spaces in the argument for join, this makes sure that the array of characters is joined back together by each character.

### :trophy: Credits:
If you found this page useful, you may say thanks to the contributors by copying and pasting the following line in the main chat:

**`Thanks @Rafase282 for your help with Algorithm: Reverse a String`**

## :clipboard: NOTE TO CONTRIBUTORS:
- :warning: **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**. :traffic_light:
- Please add your username only if you have added any **relevant main contents**. (:warning: ***DO NOT*** *remove any existing usernames*)

> See :point_right: [**`Wiki Challenge Solution Template`**](Wiki-Template-Challenge-Solution) for reference.
8 changes: 4 additions & 4 deletions Bobby-Tables.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Bobby Tables

![Her daughter is named Help I'm trapped in a driver's license factory](https://imgs.xkcd.com/comics/exploits_of_a_mom.png)
*Source:[xkcd](https://xkcd.com/327/)*
# Bobby Tables

![Her daughter is named Help I'm trapped in a driver's license factory](https://imgs.xkcd.com/comics/exploits_of_a_mom.png)
*Source:[xkcd](https://xkcd.com/327/)*
130 changes: 65 additions & 65 deletions CSS-Selectors.md
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,65 @@
# CSS Selector

In CSS, selectors are patterns used to select DOM elements.

Here is an example of using selectors. In the following code, `a` and `h1` are selectors:

```css
a {
color: black;
}
h1 {
font-size 24px;
}
```

## Cheat list of selectors

| Selector | Selects |
|---|---|---|
| `head` | selects the element with the 'head' tag |
| `.red` | selects all elements with the 'red' class |
| `#nav` | selects the elements with the 'nav' Id |
| `div.row` | selects all elements with the div tag and the 'row' class |
| `*` | Wildcard selector. Selects all DOM elements. See bellow for using it with other selectors |

We can combine selectors in interesting ways. Some examples:

| Selectors | Select |
|---|---|---|
| `li a` | DOM descendant combinator. All aa's tags that are child of li tags |
| `div.row *` | selects all elements that are descendant (or child) of the elements with div tag and 'row' class |
| `li > a` | Difference combinator. Select direct descendants, instead of all descendants like the descendant selectors |
| `li + a` | The adjacent combinator. It selects the element that is immediately preceded by the former element. In this case, only the first `a` after each `li`. |
| `li, a` | Selects all `a` elements and all `li` elements. |
| `li ~ a` | The sibling combinator. Selects `a` element following a `li` element. |

Pseudo-selectors or pseudo structural classes are also useful for selecting structural elements from the DOM. Here are some of them:

| Selectors | Select |
|---|---|---|
| `:first-child` | Target the first element immediately inside (or child of) another element |
| `:last-child` | Target the last element immediately inside (or child of) another element |
| `:nth-child()` | Target the nth element immediately inside (or child of) another element. Admits integers, `even`, odd` or formulas |
| `a:not(.name)` | Selects all `a` elements that are not of the `.name` class |
| `::after` | Allows inserting content onto a page from CSS, instead of HTML. While the end result is not actually in the DOM, it appears on the page as if it is. This content loads after HTML elements. |
| `::before` | Allows inserting content onto a page from CSS, instead of HTML. While the end result is not actually in the DOM, it appears on the page as if it is. This content loads before HTML elements. |

We can use pseudo-elements to define a special state of an element of the DOM but don't point to an element by themselves . Some examples:

| Pseudo-elements | Selects |
|---|---|---|
| `:link` | `link` pseudo-class selects all links that have not been clicked yet |
| `:hover` | `hover` pseudo-class selects a link that is being hovered by a mouse pointer |
| `:active` | `active` pseudo-class selects a link that is being clicked by a mouse pointer |
| `:visited` | `visited` pseudo-class selects a link that has already been clicked |

## Games

[CSS Diner](http://flukeout.github.io) is a web game that teaches almost everything there is to know about combining selectors.

## Additional reference

There are many more CSS selectors! Learn about them at [CodeTuts](http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048), [CSS-tricks.com](https://css-tricks.com/almanac/selectors/), [w3schools.com](http://www.w3schools.com/cssref/css_selectors.asp) or at [Mozilla Developer Network](https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors).

Feel free to add to this document! Just look cheat sheets up and edit/complete this document!
# CSS Selector

In CSS, selectors are patterns used to select DOM elements.

Here is an example of using selectors. In the following code, `a` and `h1` are selectors:

```css
a {
color: black;
}
h1 {
font-size 24px;
}
```

## Cheat list of selectors

| Selector | Selects |
|---|---|---|
| `head` | selects the element with the 'head' tag |
| `.red` | selects all elements with the 'red' class |
| `#nav` | selects the elements with the 'nav' Id |
| `div.row` | selects all elements with the div tag and the 'row' class |
| `*` | Wildcard selector. Selects all DOM elements. See bellow for using it with other selectors |

We can combine selectors in interesting ways. Some examples:

| Selectors | Select |
|---|---|---|
| `li a` | DOM descendant combinator. All aa's tags that are child of li tags |
| `div.row *` | selects all elements that are descendant (or child) of the elements with div tag and 'row' class |
| `li > a` | Difference combinator. Select direct descendants, instead of all descendants like the descendant selectors |
| `li + a` | The adjacent combinator. It selects the element that is immediately preceded by the former element. In this case, only the first `a` after each `li`. |
| `li, a` | Selects all `a` elements and all `li` elements. |
| `li ~ a` | The sibling combinator. Selects `a` element following a `li` element. |

Pseudo-selectors or pseudo structural classes are also useful for selecting structural elements from the DOM. Here are some of them:

| Selectors | Select |
|---|---|---|
| `:first-child` | Target the first element immediately inside (or child of) another element |
| `:last-child` | Target the last element immediately inside (or child of) another element |
| `:nth-child()` | Target the nth element immediately inside (or child of) another element. Admits integers, `even`, odd` or formulas |
| `a:not(.name)` | Selects all `a` elements that are not of the `.name` class |
| `::after` | Allows inserting content onto a page from CSS, instead of HTML. While the end result is not actually in the DOM, it appears on the page as if it is. This content loads after HTML elements. |
| `::before` | Allows inserting content onto a page from CSS, instead of HTML. While the end result is not actually in the DOM, it appears on the page as if it is. This content loads before HTML elements. |

We can use pseudo-elements to define a special state of an element of the DOM but don't point to an element by themselves . Some examples:

| Pseudo-elements | Selects |
|---|---|---|
| `:link` | `link` pseudo-class selects all links that have not been clicked yet |
| `:hover` | `hover` pseudo-class selects a link that is being hovered by a mouse pointer |
| `:active` | `active` pseudo-class selects a link that is being clicked by a mouse pointer |
| `:visited` | `visited` pseudo-class selects a link that has already been clicked |

## Games

[CSS Diner](http://flukeout.github.io) is a web game that teaches almost everything there is to know about combining selectors.

## Additional reference

There are many more CSS selectors! Learn about them at [CodeTuts](http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048), [CSS-tricks.com](https://css-tricks.com/almanac/selectors/), [w3schools.com](http://www.w3schools.com/cssref/css_selectors.asp) or at [Mozilla Developer Network](https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors).

Feel free to add to this document! Just look cheat sheets up and edit/complete this document!
26 changes: 13 additions & 13 deletions Challenge-Add-Font-Awesome-Icons-To-All-Of-Our-Buttons.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# Add Font Awesome Icons to all of our Buttons

```html
<i class="fa fa-trash"></i>
```

Will add a trash can icon.

```html
<i class="fa fa-info-circle"></i>
```

Will add an info icon.
# Add Font Awesome Icons to all of our Buttons

```html
<i class="fa fa-trash"></i>
```

Will add a trash can icon.

```html
<i class="fa fa-info-circle"></i>
```

Will add an info icon.
18 changes: 9 additions & 9 deletions Challenge-Generate-Random-Whole-Numbers-With-JavaScript.md
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
# Challenge Generate Random Whole Numbers with JavaScript

It's great that we can create random decimal numbers, but it's even more useful if we lot more useful to generate a random whole number.

To achieve this we can multiply the random number by ten and use the `Math.floor()` to convert the decimal number to a whole number

```javascript
Math.floor(Math.random()*10)
```
# Challenge Generate Random Whole Numbers with JavaScript

It's great that we can create random decimal numbers, but it's even more useful if we lot more useful to generate a random whole number.

To achieve this we can multiply the random number by ten and use the `Math.floor()` to convert the decimal number to a whole number

```javascript
Math.floor(Math.random()*10)
```
24 changes: 12 additions & 12 deletions Challenge-Make-Circular-Images-With-A-Border-Radius.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# Challenge Make Circular Images with a Border Radius

You can also use percentage to `border-radius` to make things round.

```css
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
```
# Challenge Make Circular Images with a Border Radius

You can also use percentage to `border-radius` to make things round.

```css
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
```
26 changes: 13 additions & 13 deletions Challenge-Uncomment-HTML.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# Challenge Uncomment HTML

Comments allow code to be ignored. In the HTML language, comments are done by wrapping the code you wish to ignore with `<!-- and -->`

```html
<!-- This text would not show up as it is a comment -->
```

You can easily uncomment by just removing the comment elements.

***Note:*** Be careful when uncommenting HTML to remove both the beginning and end portions of the comment!

***Note:*** Comments might be done differently in other languages such as JavaScript, but the general concept of removing whatever marks a comment applies.
# Challenge Uncomment HTML

Comments allow code to be ignored. In the HTML language, comments are done by wrapping the code you wish to ignore with `<!-- and -->`

```html
<!-- This text would not show up as it is a comment -->
```

You can easily uncomment by just removing the comment elements.

***Note:*** Be careful when uncommenting HTML to remove both the beginning and end portions of the comment!

***Note:*** Comments might be done differently in other languages such as JavaScript, but the general concept of removing whatever marks a comment applies.
26 changes: 13 additions & 13 deletions Challenge-Use-The-Javascript-Console.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# Challenge Use the JavaScript Console

Both Chrome and Firefox have excellent JavaScript consoles, also known as DevTools, for debugging your JavaScript.

You can find Developer tools in your Chrome's menu or Web Console in FireFox's menu. If you're using a different browser, or a mobile phone, we strongly recommend switching to desktop Firefox or Chrome.

You can also use [https://repl.it/](https://repl.it/) to run code online.

This is how you print to the console:

```javascript
console.log('Hello world!')
```
# Challenge Use the JavaScript Console

Both Chrome and Firefox have excellent JavaScript consoles, also known as DevTools, for debugging your JavaScript.

You can find Developer tools in your Chrome's menu or Web Console in FireFox's menu. If you're using a different browser, or a mobile phone, we strongly recommend switching to desktop Firefox or Chrome.

You can also use [https://repl.it/](https://repl.it/) to run code online.

This is how you print to the console:

```javascript
console.log('Hello world!')
```
Loading

0 comments on commit 21d3e10

Please sign in to comment.