gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of http://github.com/FreeCodeCamp/freecodecamp

Browse Source
This commit is contained in:
terakilobyte
2015-06-03 01:12:25 -04:00
parent 73de78bbad 3a3d296847
commit 8008997fbb
19 changed files with 248 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -14,7 +14,7 @@ Our campers (students) start by working through our free, self-paced, browser-ba
80% of our campers are over 25, and nearly a fifth of our campers are women. 80% of our campers are over 25, and nearly a fifth of our campers are women.
This code is running live at [FreeCodeCamp.com](http://www.FreeCodeCamp.com). We also have [Slack](http://freecode.slack.com), a [blog](http://blog.freecodecamp.com), and even a [Twitch.tv channel](http://twitch.tv/freecodecamp). This code is running live at [FreeCodeCamp.com](http://www.FreeCodeCamp.com). We also have [Slack](http://freecodecamp.slack.com), a [blog](http://blog.freecodecamp.com), and even a [Twitch.tv channel](http://twitch.tv/freecodecamp).
[Join our community](http://www.freecodecamp.com/signin)! [Join our community](http://www.freecodecamp.com/signin)!
@ -24,7 +24,7 @@ Contributing
We welcome pull requests from Free Code Camp campers (our students) and seasoned JavaScript developers alike! Follow these steps to contribute: We welcome pull requests from Free Code Camp campers (our students) and seasoned JavaScript developers alike! Follow these steps to contribute:
1. Check our [public Waffle Board](https://waffle.io/freecodecamp/freecodecamp). 1. Check our [public Waffle Board](https://waffle.io/freecodecamp/freecodecamp).
2. Pick an issue that nobody has claimed and start working on it. If your issue isn't on the board, open an issue. If you think you can fix it yourself, start working on it. Feel free to ask for help in our [Slack](http://freecode.slack.com). 2. Pick an issue that nobody has claimed and start working on it. If your issue isn't on the board, open an issue. If you think you can fix it yourself, start working on it. Feel free to ask for help in our [Slack](http://freecodecamp.slack.com).
3. Fork the project ([Need help with forking a project?](https://help.github.com/articles/fork-a-repo/)). You'll do all of your work on your forked copy. 3. Fork the project ([Need help with forking a project?](https://help.github.com/articles/fork-a-repo/)). You'll do all of your work on your forked copy.
4. Create a branch specific to the issue or feature you are working on. Push your work to that branch. ([Need help with branching?](https://github.com/Kunena/Kunena-Forum/wiki/Create-a-new-branch-with-git-and-manage-branches)) 4. Create a branch specific to the issue or feature you are working on. Push your work to that branch. ([Need help with branching?](https://github.com/Kunena/Kunena-Forum/wiki/Create-a-new-branch-with-git-and-manage-branches))
5. Name the branch something like `user-xxx` where user is your username and xxx is the issue number you are addressing. 5. Name the branch something like `user-xxx` where user is your username and xxx is the issue number you are addressing.

2
app.js
View File

@ -381,7 +381,7 @@ app.get('/api/slack', function(req, res) {
}; };
var options = { var options = {
url: 'https://freecode.slack.com/api/users.admin.invite', url: 'https://freecodecamp.slack.com/api/users.admin.invite',
method: 'POST', method: 'POST',
headers: headers, headers: headers,
form: invite form: invite

8
config/passport.js
View File

@ -114,7 +114,7 @@ passport.use(new FacebookStrategy(secrets.facebook, function(req, accessToken, r
'Feel free to email us at this address if you have any questions about Free Code Camp.\n', 'Feel free to email us at this address if you have any questions about Free Code Camp.\n',
"And if you have a moment, check out our blog: blog.freecodecamp.com.\n", "And if you have a moment, check out our blog: blog.freecodecamp.com.\n",
'Good luck with the challenges!\n\n', 'Good luck with the challenges!\n\n',
'- Our All-Volunteer Team' '- the Free Code Camp Volunteer Team'
].join('') ].join('')
}; };
transporter.sendMail(mailOptions, function(err) { transporter.sendMail(mailOptions, function(err) {
@ -189,7 +189,7 @@ passport.use(new GitHubStrategy(secrets.github, function(req, accessToken, refre
'Feel free to email us at this address if you have any questions about Free Code Camp.\n', 'Feel free to email us at this address if you have any questions about Free Code Camp.\n',
"And if you have a moment, check out our blog: blog.freecodecamp.com.\n", "And if you have a moment, check out our blog: blog.freecodecamp.com.\n",
'Good luck with the challenges!\n\n', 'Good luck with the challenges!\n\n',
'- the Volunteer Camp Counselor Team' '- the Free Code Camp Volunteer Team'
].join('') ].join('')
}; };
transporter.sendMail(mailOptions, function(err) { transporter.sendMail(mailOptions, function(err) {
@ -311,7 +311,7 @@ passport.use(new GoogleStrategy(secrets.google, function(req, accessToken, refre
'Feel free to email us at this address if you have any questions about Free Code Camp.\n', 'Feel free to email us at this address if you have any questions about Free Code Camp.\n',
"And if you have a moment, check out our blog: blog.freecodecamp.com.\n", "And if you have a moment, check out our blog: blog.freecodecamp.com.\n",
'Good luck with the challenges!\n\n', 'Good luck with the challenges!\n\n',
'- the Volunteer Camp Counselor Team' '- the Free Code Camp Volunteer Team'
].join('') ].join('')
}; };
transporter.sendMail(mailOptions, function(err) { transporter.sendMail(mailOptions, function(err) {
@ -387,7 +387,7 @@ passport.use(new LinkedInStrategy(secrets.linkedin, function(req, accessToken, r
'Feel free to email us at this address if you have any questions about Free Code Camp.\n', 'Feel free to email us at this address if you have any questions about Free Code Camp.\n',
"And if you have a moment, check out our blog: blog.freecodecamp.com.\n", "And if you have a moment, check out our blog: blog.freecodecamp.com.\n",
'Good luck with the challenges!\n\n', 'Good luck with the challenges!\n\n',
'- the Volunteer Camp Counselor Team' '- the Free Code Camp Volunteer Team'
].join('') ].join('')
}; };
transporter.sendMail(mailOptions, function(err) { transporter.sendMail(mailOptions, function(err) {

2
controllers/resources.js
View File

@ -232,7 +232,7 @@ module.exports = {
chat: function chat(req, res) { chat: function chat(req, res) {
if (req.user && req.user.progressTimestamps.length > 5) { if (req.user && req.user.progressTimestamps.length > 5) {
res.redirect('http://freecode.slack.com'); res.redirect('http://freecodecamp.slack.com');
} else { } else {
res.render('resources/chat', { res.render('resources/chat', {
title: 'Watch us code live on Twitch.tv' title: 'Watch us code live on Twitch.tv'

2
controllers/user.js
View File

@ -229,7 +229,7 @@ exports.postEmailSignup = function(req, res, next) {
'And if you have a moment, check out our blog: ', 'And if you have a moment, check out our blog: ',
'blog.freecodecamp.com.\n', 'blog.freecodecamp.com.\n',
'Good luck with the challenges!\n\n', 'Good luck with the challenges!\n\n',
'- the Volunteer Camp Counselor Team' '- the Free Code Camp Volunteer Team'
].join('') ].join('')
}; };
transporter.sendMail(mailOptions, function(err) { transporter.sendMail(mailOptions, function(err) {

1
public/css/main.less
View File

@ -1092,6 +1092,7 @@ hr {
.iframe-scroll { .iframe-scroll {
position: fixed !important; position: fixed !important;
margin-top: 75px; margin-top: 75px;
z-index: 9999;
} }
} }
@media only screen and (max-width: 992px) { @media only screen and (max-width: 992px) {

6
public/js/main_0.0.2.js
View File

@ -30,7 +30,7 @@ $(document).ready(function() {
}, },
function(res) { function(res) {
if (res) { if (res) {
window.open('https://freecode.slack.com/messages/help/', '_blank') window.open('https://freecodecamp.slack.com/messages/help/', '_blank')
} }
} }
); );
@ -48,7 +48,7 @@ $(document).ready(function() {
}, },
function(res) { function(res) {
if (res) { if (res) {
window.open('https://freecode.slack.com/messages/help/', '_blank') window.open('https://freecodecamp.slack.com/messages/help/', '_blank')
} }
} }
); );
@ -71,7 +71,7 @@ $(document).ready(function() {
}, },
function(res) { function(res) {
if (res) { if (res) {
window.open('https://freecode.slack.com/messages/letspair/', '_blank') window.open('https://freecodecamp.slack.com/messages/letspair/', '_blank')
} }
} }
); );

254
seed_data/challenges/basic-html5-and-css.json
View File

@ -16,7 +16,7 @@
"To enable the \"Go to my next challenge\" button on this exercise, change your <code>h1</code> tag's text to say \"Hello World\" instead of \"Hello\"." "To enable the \"Go to my next challenge\" button on this exercise, change your <code>h1</code> tag's text to say \"Hello World\" instead of \"Hello\"."
], ],
"tests": [ "tests": [
"assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\"')" "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\".')"
], ],
"challengeSeed": [ "challengeSeed": [
"<h1>Hello</h1>" "<h1>Hello</h1>"
@ -37,7 +37,7 @@
"La mayoría de los elementos HTML tienen una <code>etiqueta de apertura</code> y una <code>etiqueta de cierre</code>. Las etiquetas de apertura se ven como: <code>&#60;h1&#62;</code>. Las etiquetas de cierre se ven como: <code>&#60;/h1&#62;</code>. Fíjate que la única diferencia entre las etiquetas de apertura y de cierre es que estas últimas tienen un / después de su signo de apertura (<).", "La mayoría de los elementos HTML tienen una <code>etiqueta de apertura</code> y una <code>etiqueta de cierre</code>. Las etiquetas de apertura se ven como: <code>&#60;h1&#62;</code>. Las etiquetas de cierre se ven como: <code>&#60;/h1&#62;</code>. Fíjate que la única diferencia entre las etiquetas de apertura y de cierre es que estas últimas tienen un / después de su signo de apertura (<).",
"Una vez que hayas completado cada desafío, y que hayas pasado todas sus pruebas, el botón \"Ir a mi siguiente desafío\" se activará. Haz click en él - o presiona control y enter al mismo tiempo - para avanzar al siguiente desafío.", "Una vez que hayas completado cada desafío, y que hayas pasado todas sus pruebas, el botón \"Ir a mi siguiente desafío\" se activará. Haz click en él - o presiona control y enter al mismo tiempo - para avanzar al siguiente desafío.",
"Para activar el botón \"Ir a mi siguiente desafío\" de este ejercicio, cambia tu texto de la etiqueta <code>h1</code> para que diga \"Hello World\" en lugar de \"Hello\"." "Para activar el botón \"Ir a mi siguiente desafío\" de este ejercicio, cambia tu texto de la etiqueta <code>h1</code> para que diga \"Hello World\" en lugar de \"Hello\"."
], ],
"namePt": "", "namePt": "",
"descriptionPt": [] "descriptionPt": []
}, },
@ -53,9 +53,9 @@
], ],
"tests": [ "tests": [
"assert(($('h2').length > 0), 'Create an <code>h2</code> element.')", "assert(($('h2').length > 0), 'Create an <code>h2</code> element.')",
"assert(editor.match(/<\\/h2>/g) && editor.match(/<\\/h2>/g).length === editor.match(/<h2>/g).length, 'Make sureyour <code>h2</code> element has a closing tag.')", "assert(editor.match(/<\\/h2>/g) && editor.match(/<\\/h2>/g).length === editor.match(/<h2>/g).length, 'Make sure your <code>h2</code> element has a closing tag.')",
"assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($('h2').text()), 'Your <code>h2</code> element should have the text \"CatPhotoApp\"')", "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($('h2').text()), 'Your <code>h2</code> element should have the text \"CatPhotoApp\".')",
"assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\"')" "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\".')"
], ],
"challengeSeed": [ "challengeSeed": [
"<h1>Hello World</h1>" "<h1>Hello World</h1>"
@ -73,7 +73,7 @@
"El elemento h2 que ingreses creará un elemento h2 en el sitio web.", "El elemento h2 que ingreses creará un elemento h2 en el sitio web.",
"Este elemento le dice al navegador cómo mostrar el texto que contiene.", "Este elemento le dice al navegador cómo mostrar el texto que contiene.",
"Los elementos <code>h2</code> son ligeramente más pequeños que los elementos <code>h1</code>. También hay elementos <code>h3</code>, <code>h4</code>, <code>h5</code> y <code>h6</code>." "Los elementos <code>h2</code> son ligeramente más pequeños que los elementos <code>h1</code>. También hay elementos <code>h3</code>, <code>h4</code>, <code>h5</code> y <code>h6</code>."
], ],
"namePt": "", "namePt": "",
"descriptionPt": [] "descriptionPt": []
}, },
@ -84,12 +84,12 @@
"description": [ "description": [
"Create a <code>p</code> element below your <code>h2</code> element, and give it the text \"Hello Paragraph\".", "Create a <code>p</code> element below your <code>h2</code> element, and give it the text \"Hello Paragraph\".",
"<code>p</code> elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".", "<code>p</code> elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".",
"You can create a <code>p</code> element like so: <code>&#60;p&#62;I'm a p tag!&#60;/p&#62;</code>" "You can create a <code>p</code> element like so: <code>&#60;p&#62;I'm a p tag!&#60;/p&#62;</code>."
], ],
"tests": [ "tests": [
"assert(($('p').length > 0), 'Create a <code>p</code> element.')", "assert(($('p').length > 0), 'Create a <code>p</code> element.')",
"assert.isTrue((/hello(\\s)+paragraph/gi).test($('p').text()), 'Your <code>p</code> element should have the text \"Hello Paragraph\".')", "assert.isTrue((/hello(\\s)+paragraph/gi).test($('p').text()), 'Your <code>p</code> element should have the text \"Hello Paragraph\".')",
"assert(editor.match(/<\\/p>/g) && editor.match(/<\\/p>/g).length === editor.match(/<p>/g).length, 'Make sureyour <code>p</code> element has a closing tag.')" "assert(editor.match(/<\\/p>/g) && editor.match(/<\\/p>/g).length === editor.match(/<p/g).length, 'Make sure your <code>p</code> element has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<h1>Hello World</h1>", "<h1>Hello World</h1>",
@ -106,8 +106,8 @@
"descriptionEs": [ "descriptionEs": [
"Crea un elemento párrafo debajo de tu elemento h2, y dale el texto \"Hello Paragraph\". Apenas escribas la etiqueta de apertura <code>&#60;p&#62;</code>, una de nuestras pruebas pasarán (ya que ésta es HTML válido). Asegúrate de cerrar el elemento agregando la etiqueta de cierre <code>&#60;/p&#62;</code>.", "Crea un elemento párrafo debajo de tu elemento h2, y dale el texto \"Hello Paragraph\". Apenas escribas la etiqueta de apertura <code>&#60;p&#62;</code>, una de nuestras pruebas pasarán (ya que ésta es HTML válido). Asegúrate de cerrar el elemento agregando la etiqueta de cierre <code>&#60;/p&#62;</code>.",
"Los elementos párrafo son los principales elementos para los párrafos de texto en tamaño normal en sitios web.", "Los elementos párrafo son los principales elementos para los párrafos de texto en tamaño normal en sitios web.",
"Tú puedes crear un elemento párrafo como éste: <code>&#60;p&#62;I'm a p tag!&#60;/p&#62;</code>" "Tú puedes crear un elemento párrafo como éste: <code>&#60;p&#62;I'm a p tag!&#60;/p&#62;</code>."
], ],
"namePt": "", "namePt": "",
"descriptionPt": [] "descriptionPt": []
}, },
@ -122,7 +122,7 @@
"You'll encounter other self-closing element tags soon." "You'll encounter other self-closing element tags soon."
], ],
"tests": [ "tests": [
"assert(($('br').length > 0), 'Add a <code>br</code> element to your page, preferably between two of your elements.')" "assert(($('br').length > 0), 'Add a <code>br</code> element to your page preferably between two of your elements.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<h1>Hello World</h1>", "<h1>Hello World</h1>",
@ -202,7 +202,8 @@
"tests": [ "tests": [
"assert(($('h1').length === 0), 'Comment out your <code>h1</code> element so that it is not visible on your page.')", "assert(($('h1').length === 0), 'Comment out your <code>h1</code> element so that it is not visible on your page.')",
"assert(($('h2').length > 0), 'Leave your <code>h2</code> element uncommented so that is not visible on your page.')", "assert(($('h2').length > 0), 'Leave your <code>h2</code> element uncommented so that is not visible on your page.')",
"assert(($('p').length === 0), 'Comment out your <code>p</code> element so that it is not visible on your page.')" "assert(($('p').length === 0), 'Comment out your <code>p</code> element so that it is not visible on your page.')",
"assert(editor.match(/-->/g).length > 0, 'Be sure to close each of your comments with <code>--&#62;</code>.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<!--", "<!--",
@ -236,7 +237,7 @@
"name": "Waypoint: Fill in the Blank with Placeholder Text", "name": "Waypoint: Fill in the Blank with Placeholder Text",
"difficulty": 0.015, "difficulty": 0.015,
"description": [ "description": [
"Replace the text inside your <code>p</code> element with the first few words of the provided \"Ktty Ipsum\" text.", "Replace the text inside your <code>p</code> element with the first few words of the provided \"Kitty Ipsum\" text.",
"Web developers traditionally use \"Lorem Ipsum\" text as placeholder text. It's called \"Lorem Ipsum\" text because those are the first two words of a famous passage by Cicero of Ancient Rome.", "Web developers traditionally use \"Lorem Ipsum\" text as placeholder text. It's called \"Lorem Ipsum\" text because those are the first two words of a famous passage by Cicero of Ancient Rome.",
"\"Lorem Ipsum\" text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.", "\"Lorem Ipsum\" text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
"Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called \"Kitty Ipsum\"!", "Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called \"Kitty Ipsum\"!",
@ -342,7 +343,7 @@
"Cambia el estilo del elemento <code>h2</code> de manera que el color de su texto sea rojo.", "Cambia el estilo del elemento <code>h2</code> de manera que el color de su texto sea rojo.",
"Podemos hacer esto por medio de cambiar el <code>estilo</code> del elemento <code>h2</code>.", "Podemos hacer esto por medio de cambiar el <code>estilo</code> del elemento <code>h2</code>.",
"El estilo responsable del color de texto de un elemento es el estilo \"color\".", "El estilo responsable del color de texto de un elemento es el estilo \"color\".",
"Así es como podrías volver el color de texto de tu elemento <code>h2</code> en azul: <code>&#60;h2 style=\"color: blue\"&#62;CatPhotoApp&#60;/h2&#62;</code>" "Así es como podrías volver el color de texto de tu elemento <code>h2</code> en azul: <code>&#60;h2 style=\"color: blue\"&#62;CatPhotoApp&#60;/h2&#62;</code>."
], ],
"namePt": "", "namePt": "",
"descriptionPt": [] "descriptionPt": []
@ -356,13 +357,15 @@
"With CSS, there are hundreds of CSS \"attributes\" that you can use to change the way an element looks on your page.", "With CSS, there are hundreds of CSS \"attributes\" that you can use to change the way an element looks on your page.",
"When you entered <code>&#60;h2 style=\"color: red\"&#62;CatPhotoApp&#60;/h2&#62;</code>, you were giving that individual <code>h2</code> element an \"inline style\".", "When you entered <code>&#60;h2 style=\"color: red\"&#62;CatPhotoApp&#60;/h2&#62;</code>, you were giving that individual <code>h2</code> element an \"inline style\".",
"That's one way to add style to an element, but a better way is by using Cascading Style Sheets (CSS).", "That's one way to add style to an element, but a better way is by using Cascading Style Sheets (CSS).",
"At the top of your code, create a <code>style</code> element like this: <code>&#60;style&#62;&#60;/style&#62;</code>", "At the top of your code, create a <code>style</code> element like this: <code>&#60;style&#62;&#60;/style&#62;</code>.",
"Inside that style element, you can create a \"CSS selector\" for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, your style element would look like this: <code>&#60;style&#62;h2 {color: red;}&#60;/style&#62;</code>", "Inside that style element, you can create a \"CSS selector\" for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, your style element would look like this: <code>&#60;style&#62;h2 {color: red;}&#60;/style&#62;</code>.",
"Note that it's important to have both opening and closing curly braces (<code>{</code> and <code>}</code>) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles." "Note that it's important to have both opening and closing curly braces (<code>{</code> and <code>}</code>) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles."
], ],
"tests": [ "tests": [
"assert($('h2').css('color') === 'rgb(0, 0, 255)', 'Your <code>h2</code> element should be blue.')", "assert($('h2').css('color') === 'rgb(0, 0, 255)', 'Your <code>h2</code> element should be blue.')",
"assert(!$('h2').attr('style'), 'Remove the style attribute from your <code>h2</code> element.')" "assert(!$('h2').attr('style'), 'Remove the style attribute from your <code>h2</code> element.')",
"assert(($('style').length > 1), 'Create a <code>style</code> element.')",
"assert(editor.match(/<\\/style>/g) && editor.match(/<\\/style>/g).length === editor.match(/<style>/g).length, 'Make sure each of your <code>style</code> elements has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<h2 style='color: red'>CatPhotoApp</h2>", "<h2 style='color: red'>CatPhotoApp</h2>",
@ -380,10 +383,10 @@
"descriptionEs": [ "descriptionEs": [
"Borra el atributo <code>style</code> de tu elemento <code>h2</code> y escribe el CSS para hacer todos los elementos <code>h2</code> de color azul.", "Borra el atributo <code>style</code> de tu elemento <code>h2</code> y escribe el CSS para hacer todos los elementos <code>h2</code> de color azul.",
"Con CSS, hay cientos de <code>atributos CSS</code> que puedes usar para cambiar como un elemento se ve en una página web.", "Con CSS, hay cientos de <code>atributos CSS</code> que puedes usar para cambiar como un elemento se ve en una página web.",
"Cuando entraste <code>&#60;h2 style=\"color: red\"&#62;CatPhotoApp&#60;h2&#62;</code>, le estuviste dando a ese elemento h2 en particular un <code>estilo en línea</code>", "Cuando entraste <code>&#60;h2 style=\"color: red\"&#62;CatPhotoApp&#60;h2&#62;</code>, le estuviste dando a ese elemento h2 en particular un <code>estilo en línea</code>.",
"Esa es una forma de agregar estilo a un elemento, pero una manera mejor es usando <code>Hojas de Estilo en Cascada (Cascading Style Sheets, CSS)</code>.", "Esa es una forma de agregar estilo a un elemento, pero una manera mejor es usando <code>Hojas de Estilo en Cascada (Cascading Style Sheets, CSS)</code>.",
"Al principio de tu código, crea una <code>etiqueta style</code> como ésta: <code>&#60;style&#62;&#60;/style&#62;</code>", "Al principio de tu código, crea una <code>etiqueta style</code> como ésta: <code>&#60;style&#62;&#60;/style&#62;</code>.",
"Dentro de ese elemento style, puedes crear un <code>selector css</code> para todos los elementos <code>h2</code>. Por ejemplo, si querías que todos los elementos <code>h2</code> sean rojos, tu elemento style se vería así: <code>&#60;style&#62;h2 {color: red;}&#60;/style&#62;</code>", "Dentro de ese elemento style, puedes crear un <code>selector css</code> para todos los elementos <code>h2</code>. Por ejemplo, si querías que todos los elementos <code>h2</code> sean rojos, tu elemento style se vería así: <code>&#60;style&#62;h2 {color: red;}&#60;/style&#62;</code>.",
"Fíjate que es importante tener <code>llaves de apertura y de cierre</code> (<code>{</code> y <code>}</code>) alrededor del estilo para cada elemento. También necesitas asegurarte que el estilo para tu elemento está entre las etiquetas style de apertura y cierre. Finalmente, asegúrate de agregar el punto y coma al final de cada uno de los estilos de tu elemento." "Fíjate que es importante tener <code>llaves de apertura y de cierre</code> (<code>{</code> y <code>}</code>) alrededor del estilo para cada elemento. También necesitas asegurarte que el estilo para tu elemento está entre las etiquetas style de apertura y cierre. Finalmente, asegúrate de agregar el punto y coma al final de cada uno de los estilos de tu elemento."
], ],
"namePt": "", "namePt": "",
@ -399,7 +402,7 @@
"Here's the anatomy of a CSS class:", "Here's the anatomy of a CSS class:",
"<img class='img-responsive' alt='a diagram of how style tags are composed, which is also described in detail on the following lines.' src='https://www.evernote.com/l/AHSCzZV0l_dDLrqD8r9JsHaBWfEzdN0OpRwB/image.png'/>", "<img class='img-responsive' alt='a diagram of how style tags are composed, which is also described in detail on the following lines.' src='https://www.evernote.com/l/AHSCzZV0l_dDLrqD8r9JsHaBWfEzdN0OpRwB/image.png'/>",
"You can see that we've created a CSS class called \"blue-text\" within the <code>&#60;style&#62;</code> tag.", "You can see that we've created a CSS class called \"blue-text\" within the <code>&#60;style&#62;</code> tag.",
"You can apply a class to an HTML element like this: <code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;/h2&#62;</code>", "You can apply a class to an HTML element like this: <code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;/h2&#62;</code>.",
"Note that in your CSS <code>style</code> element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.", "Note that in your CSS <code>style</code> element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.",
"Instead of creating a new <code>style</code> element, try removing the <code>h2</code> style declaration from your existing style element, then replace it with the class declaration for \".red-text\"." "Instead of creating a new <code>style</code> element, try removing the <code>h2</code> style declaration from your existing style element, then replace it with the class declaration for \".red-text\"."
], ],
@ -480,7 +483,8 @@
], ],
"tests": [ "tests": [
"assert($('p').length > 1, 'You need 2 <code>p</code> elements with Kitty Ipsum text.')", "assert($('p').length > 1, 'You need 2 <code>p</code> elements with Kitty Ipsum text.')",
"assert(editor.match(/<\\/p>/g).length > 1, 'Make sureeach of your <code>p</code> elements has a closing tag.')", "assert(editor.match(/<\\/p>/g) && editor.match(/<\\/p>/g).length === editor.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.')",
"assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($('p').text()), 'Your <code>p</code> element should contain the first few words of the provided additional \"Kitty Ipsum\" text.')",
"assert($('p').css('font-size') === '16px', 'Give your <code>p</code> elements the font-size of 16px.')" "assert($('p').css('font-size') === '16px', 'Give your <code>p</code> elements the font-size of 16px.')"
], ],
"challengeSeed": [ "challengeSeed": [
@ -513,7 +517,7 @@
"description": [ "description": [
"Make all of your <code>p</code> elements use the \"Monospace\" font.", "Make all of your <code>p</code> elements use the \"Monospace\" font.",
"You can set an element's font by using the \"font-family\" attribute.", "You can set an element's font by using the \"font-family\" attribute.",
"For example, if you wanted to set your <code>h2</code> element's font to \"Sans-serif\", you would use the following CSS: <code>h2 { font-family: Sans-serif; }</code>" "For example, if you wanted to set your <code>h2</code> element's font to \"Sans-serif\", you would use the following CSS: <code>h2 { font-family: Sans-serif; }</code>."
], ],
"tests": [ "tests": [
"assert($('p').css('font-family').match(/monospace/i), 'Your <code>p</code> elements should use the font \"Monospace\".')" "assert($('p').css('font-family').match(/monospace/i), 'Your <code>p</code> elements should use the font \"Monospace\".')"
@ -553,8 +557,8 @@
"description": [ "description": [
"Apply the <code>font-family</code> of \"Lobster\" to your <code>h2</code> element.", "Apply the <code>font-family</code> of \"Lobster\" to your <code>h2</code> element.",
"First, you'll need to make a \"call\" to Google to grab the \"Lobster\" font and load it into your HTML.", "First, you'll need to make a \"call\" to Google to grab the \"Lobster\" font and load it into your HTML.",
"Copy the following code snippet and paste it into your code editor above your <code>style</code> element:", "Copy the following code snippet and paste it into your code editor:",
"<code>&#60;link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'&#62;</code>", "<code>&#60;link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'&#62;</code>.",
"Now you can set \"Lobster\" as a font-family attribute on your <code>h2</code> element." "Now you can set \"Lobster\" as a font-family attribute on your <code>h2</code> element."
], ],
"tests": [ "tests": [
@ -598,8 +602,8 @@
"description": [ "description": [
"Make all your <code>h2</code> elements use \"Lobster\" as their font family, but degrade to the \"Monospace\" font when the \"Lobster\" font isn't available.", "Make all your <code>h2</code> elements use \"Lobster\" as their font family, but degrade to the \"Monospace\" font when the \"Lobster\" font isn't available.",
"You can leave \"Lobster\" your <code>h2</code> element's font-family, and have it \"degrade\" to a different font when \"Lobster\" isn't available.", "You can leave \"Lobster\" your <code>h2</code> element's font-family, and have it \"degrade\" to a different font when \"Lobster\" isn't available.",
"For example, if you wanted an element to use the \"Helvetica\" font, but also degrade to the \"Sans-Serif\" font when \"Helvetica\" wasn't available, you could do use this CSS style: <code>p { font-family: \"Helvetica\", \"Sans-Serif\"; }</code>.", "For example, if you wanted an element to use the \"Helvetica\" font, but also degrade to the \"Sans-Serif\" font when \"Helvetica\" wasn't available, you could do use this CSS style: <code>p { font-family: Helvetica, Sans-Serif; }</code>.",
"There are several default fonts that are available in all browsers. These include \"Monospace\", \"Serif\" and \"Sans-Serif\". See if you can set your h2 elements to use \"Lobster\" and degrade to \"Monospace\".", "There are several default fonts that are available in all browsers. These include \"Monospace\", \"Serif\" and \"Sans-Serif\". See if you can set your <code>h2</code> elements to use \"Lobster\" and degrade to \"Monospace\".",
"Now try commenting out your call to Google Fonts, so that the \"Lobster\" font isn't available. Notice how it degrades to the \"Monospace\" font." "Now try commenting out your call to Google Fonts, so that the \"Lobster\" font isn't available. Notice how it degrades to the \"Monospace\" font."
], ],
"tests": [ "tests": [
@ -650,9 +654,9 @@
"Sometimes HTML elements will receive conflicting information from CSS classes as to how they should be styled.", "Sometimes HTML elements will receive conflicting information from CSS classes as to how they should be styled.",
"If there's a conflict in the CSS, the browser will use whichever style declaration is closest to the bottom of the CSS document (whichever declaration comes last). Note that in-line style declarations are the final authority in how an HTML element will be rendered.", "If there's a conflict in the CSS, the browser will use whichever style declaration is closest to the bottom of the CSS document (whichever declaration comes last). Note that in-line style declarations are the final authority in how an HTML element will be rendered.",
"There's one way to ensure that an element is rendered with a certain style, regardless of where that declaration is located. That one way is to use <code>!important</code>.", "There's one way to ensure that an element is rendered with a certain style, regardless of where that declaration is located. That one way is to use <code>!important</code>.",
"In case you're curious, this is the priority hierarchy for element styles: !important > inline style > css class selector > css selector. That is, !important trumps all other styles, and inline styles trump style tag declarations.", "In case you're curious, this is the priority hierarchy for element styles: <code>!important</code> beats inline styles, which beats CSS class selectors, which beats CSS selector. That is, <code>!important</code> trumps all other styles, and inline styles trump style tag declarations.",
"Here's an example of a CSS style that uses <code>!important</code>: <code>&#60;style&#62; .urgently-blue { color: blue !important; } &#60;/style&#62;</code>.", "Here's an example of a CSS style that uses <code>!important</code>: <code>&#60;style&#62; .urgently-blue { color: blue !important; } &#60;/style&#62;</code>.",
"Now see if you can make sure the h2 element is rendered in the color red without removing the \"blue-text\" class, doing an in-line styling, or changing the sequence of CSS class declarations." "Now see if you can make sure the <code>h2</code> element is rendered in the color red without removing the \"blue-text\" class, doing an in-line styling, and without changing the sequence of CSS class declarations."
], ],
"tests": [ "tests": [
"assert(new RegExp('.blue-text', 'gi').test(editor), 'Create the CSS class \"blue-text\"')", "assert(new RegExp('.blue-text', 'gi').test(editor), 'Create the CSS class \"blue-text\"')",
@ -707,8 +711,8 @@
"Try it with this image: <code>http://bit.ly/fcc-kittens</code>." "Try it with this image: <code>http://bit.ly/fcc-kittens</code>."
], ],
"tests": [ "tests": [
"assert($('img').length > 0, 'Your webpage should have an image element.')", "assert($('img').length > 0, 'Your page should have an image element.')",
"assert(!!$('img').filter(function(index) { return /kittens/gi.test($('img').attr('src')); }).length > 0, 'Your image should have have a <code>src</code> attribute that points to the kitten image.')" "assert($('img').filter(function(index) { return /http:\\/\\/bit\\.ly\\/fcc-kittens/gi.test($('img').attr('src')); }).length > 0, 'Your image should have have a <code>src</code> attribute that points to the kitten image.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -750,7 +754,7 @@
"difficulty": 0.027, "difficulty": 0.027,
"description": [ "description": [
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide.", "Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide.",
"CSS has an attribute called <code>width</code> that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the images width.", "CSS has an attribute called <code>width</code> that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the image's width.",
"For example, if we wanted to create a CSS class called \"larger-image\" that gave HTML elements a width of 500 pixels, we'd use: <code>&#60;style&#62; .larger-image { width: 500px; } &#60;/style&#62;</code>." "For example, if we wanted to create a CSS class called \"larger-image\" that gave HTML elements a width of 500 pixels, we'd use: <code>&#60;style&#62; .larger-image { width: 500px; } &#60;/style&#62;</code>."
], ],
"tests": [ "tests": [
@ -806,7 +810,8 @@
"assert($('img').hasClass('smaller-image'), 'Your <code>img</code> element should have the class \"smaller-image\".')", "assert($('img').hasClass('smaller-image'), 'Your <code>img</code> element should have the class \"smaller-image\".')",
"assert($('img').hasClass('thick-green-border'), 'Your <code>img</code> element should have the class \"thick-green-border\".')", "assert($('img').hasClass('thick-green-border'), 'Your <code>img</code> element should have the class \"thick-green-border\".')",
"assert($('img').hasClass('thick-green-border') && parseInt($('img').css('border-top-width')), 'Give your image a border width of 10px.')", "assert($('img').hasClass('thick-green-border') && parseInt($('img').css('border-top-width')), 'Give your image a border width of 10px.')",
"assert(new RegExp('solid', 'gi').test(editor), 'Give your image a border style of \"solid\".')" "assert(new RegExp('solid', 'gi').test(editor), 'Give your image a border style of \"solid\".')",
"assert($('img').css('border-left-color') === 'rgb(0, 128, 0)', 'Your <code>img</code> element should be green.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -853,7 +858,7 @@
"name": "Waypoint: Add Rounded Corners with a Border Radius", "name": "Waypoint: Add Rounded Corners with a Border Radius",
"difficulty": 0.029, "difficulty": 0.029,
"description": [ "description": [
"Give your cat photo a border radius of 10 pixels.", "Give your cat photo a <code>border-radius</code> of 10 pixels.",
"Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called <code>border-radius</code>.", "Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called <code>border-radius</code>.",
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to 10 pixels." "You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to 10 pixels."
], ],
@ -970,14 +975,15 @@
"name": "Waypoint: Link to External Pages with Anchor Elements", "name": "Waypoint: Link to External Pages with Anchor Elements",
"difficulty": 0.031, "difficulty": 0.031,
"description": [ "description": [
"Create an <code>anchor</code> element that links to http://catphotoapp.com and has \"cat photos\" as its anchor text (link text).", "Create an <code>a</code> element, or \"anchor element\", that links to http://catphotoapp.com and has \"cat photos\" as its link text, or \"anchor text\".",
"Here's a diagram of an <code>anchor tag</code>. In this case, it's used in the middle of a paragraph element, which means your link will appear in the middle of your sentence.", "Here's a diagram of an <code>a</code> element. In this case, it's used in the middle of a paragraph element, which means your link will appear in the middle of your sentence.",
"<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>", "<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>",
"Here's an example: <code>&#60;p&#62;Here's a &#60;a href='http://freecodecamp.com'&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>" "Here's an example: <code>&#60;p&#62;Here's a &#60;a href='http://freecodecamp.com'&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>."
], ],
"tests": [ "tests": [
"assert((/cat photos/gi).test($('a').text()), 'Your <code>anchor</code> element should have the anchor text of \"cat photos\"')", "assert((/cat photos/gi).test($('a').text()), 'Your <code>a</code> element should have the anchor text of \"cat photos\"')",
"assert($('a').filter(function(index) { return /com/gi.test($('a').attr('href')); }).length > 0, 'You need an <code>anchor</code> element that links to <code>http&#58;//catphotoapp.com<code>.')" "assert($('a').filter(function(index) { return /com/gi.test($('a').attr('href')); }).length > 0, 'You need an <code>a</code> element that links to <code>http&#58;//catphotoapp.com<code>.')",
"assert(editor.match(/<\\/a>/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure your <code>a</code> element has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1031,17 +1037,18 @@
"name": "Waypoint: Wrap an Anchor Element within a Paragraph", "name": "Waypoint: Wrap an Anchor Element within a Paragraph",
"difficulty": 0.032, "difficulty": 0.032,
"description": [ "description": [
"Now wrap your anchor element within a <code>p</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link - the rest is plain text.", "Now wrap your <code>a</code> element within a <code>p</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link - the rest is plain text.",
"Again, here's a diagram of an <code>a</code> element for your reference:", "Again, here's a diagram of an <code>a</code> element for your reference:",
"<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>", "<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>",
"Here's an example: <code>&#60;p&#62;Here's a &#60;a href='http://freecodecamp.com'&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>" "Here's an example: <code>&#60;p&#62;Here's a &#60;a href='http://freecodecamp.com'&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>."
], ],
"tests": [ "tests": [
"assert($('a').attr('href').match(/catphotoapp.com/gi).length > 0, 'You need an <code>a</code> element that links to \"catphotoapp.com\".')", "assert($('a').attr('href').match(/catphotoapp.com/gi).length > 0, 'You need an <code>a</code> element that links to \"catphotoapp.com\".')",
"assert($('a').text().match(/cat\\sphotos/gi).length > 0, 'Your <code>a</code> element should have the anchor text of \"cat photos\"')", "assert($('a').text().match(/cat\\sphotos/gi).length > 0, 'Your <code>a</code> element should have the anchor text of \"cat photos\"')",
"assert($('a[href=\\'http://www.catphotoapp.com\\']').parent().is('p'), 'Your anchor element should be wrapped within a paragraph element.')", "assert($('a[href=\\'http://www.catphotoapp.com\\']').parent().is('p'), 'Your <code>a</code> element should be wrapped within a paragraph element.')",
"assert($('p').text().match(/click\\shere\\sfor/gi), 'Your <code>p</code> element should have the text \"click here for\".')", "assert($('p').text().match(/click\\shere\\sfor/gi), 'Your <code>p</code> element should have the text \"click here for\".')",
"assert(editor.match(/<\\/p>/g).length > 2, 'Make sureeach of your <code>p</code> elements has a closing tag.')" "assert(editor.match(/<\\/p>/g) && editor.match(/<p/g) && editor.match(/<\\/p>/g).length === editor.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.')",
"assert(editor.match(/<\\/a>/g) && editor.match(/<a/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1097,10 +1104,10 @@
"name": "Waypoint: Make Dead Links using the Hash Symbol", "name": "Waypoint: Make Dead Links using the Hash Symbol",
"difficulty": 0.033, "difficulty": 0.033,
"description": [ "description": [
"Use the hash symbol(#) to turn your <code>anchor</code> element's link into a dead link.", "Use the hash symbol (#) to turn your <code>a</code> element's link into a dead link.",
"Sometimes you want to add <code>anchor</code> elements to your website before you know where they will link.", "Sometimes you want to add <code>a</code> elements to your website before you know where they will link.",
"This is also handy when you're changing the behavior of a link using <code>jQuery</code>, which we'll learn about later.", "This is also handy when you're changing the behavior of a link using <code>jQuery</code>, which we'll learn about later.",
"Replace your <code>anchor</code> element's <code>href</code> attribute with a hash symbol to turn it into a dead link." "Replace your <code>a</code> element's <code>href</code> attribute with a hash symbol to turn it into a dead link."
], ],
"tests": [ "tests": [
"assert($('a').attr('href') === '#', 'Your <code>anchor</code> element should be a dead link with a <code>href</code> attribute set to \"#\".')" "assert($('a').attr('href') === '#', 'Your <code>anchor</code> element should be a dead link with a <code>href</code> attribute set to \"#\".')"
@ -1159,16 +1166,16 @@
"name": "Waypoint: Turn an Image into a Link", "name": "Waypoint: Turn an Image into a Link",
"difficulty": 0.034, "difficulty": 0.034,
"description": [ "description": [
"Wrap your <code>img</code> element inside an anchor element with a dead link.", "Wrap your <code>img</code> element inside an <code>a</code> element with a dead link.",
"You can make elements into links by wrapping them in an <code>anchor tag</code>.", "You can make elements into links by wrapping them within an <code>a</code> element.",
"Wrap your image in an <code>anchor tag</code>. Here's an example: <code>&#60;a href='#'&#62;&#60;img src='http://bit.ly/fcc-kittens2'/&#62;&#60;/a&#62;</code>", "Wrap your image within an <code>a</code> element. Here's an example: <code>&#60;a href='#'&#62;&#60;img src='http://bit.ly/fcc-kittens2'/&#62;&#60;/a&#62;</code>.",
"Remember to use the hash symbol as your <code>anchor tag</code>'s <code>href</code> property in order to turn it into a dead link.", "Remember to use the hash symbol (#) as your <code>a</code> element's <code>href</code> property in order to turn it into a dead link.",
"Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link." "Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link."
], ],
"tests": [ "tests": [
"assert(new RegExp('#').test($('a').children('img').parent().attr('href')), 'Your <code>anchor</code> element should be a dead link with a <code>href</code> attribute set to \"#\".')", "assert(new RegExp('#').test($('a').children('img').parent().attr('href')), 'Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to \"#\".')",
"assert($('a').children('img').length > 0, 'Wrap your image element inside an anchor element.')", "assert($('a').children('img').length > 0, 'Wrap your image element within an <code>a</code> element.')",
"assert(editor.match(/<\\/a>/g).length > 1, 'Make sureeach of your <code>a</code> elements has a closing tag.')" "assert(editor.match(/<\\/a>/g) && editor.match(/<a/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1224,11 +1231,11 @@
"name": "Waypoint: Add Alt Text to an Image for Accessibility", "name": "Waypoint: Add Alt Text to an Image for Accessibility",
"difficulty": 0.035, "difficulty": 0.035,
"description": [ "description": [
"Add the <code>alt text</code> \"A cute orange cat lying on its back\" to our cat photo", "Add an <code>alt</code> attribute with the text \"A cute orange cat lying on its back\" to our cat photo.",
"<code>alt text</code> is what browsers will display if they fail to load the image. <code>alt text</code> is also important for blind or visually impaired users to understand what an image portrays. Search engines also look at <code>alt text</code>.", "<code>alt</code> attributes, also known as \"alt text\", are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. Search engines also look at <code>alt</code> attributes.",
"In short, every image should have <code>alt text</code>!", "In short, every image should have an <code>alt</code> attribute!",
"<code>Alt text</code> is a useful way to tell people (and web crawlers like Google) what is pictured in a photo. It's extremely important for helping blind or visually impaired people understand the content of your website.", "<code>alt</code> attributes are a useful way to tell people (and web crawlers like Google) what is pictured in a photo. It's extremely important for helping blind or visually impaired people understand the content of your website.",
"You can add alt text right in the img element like this: <code>&#60img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/&#62</code>." "You can add an <code>alt</code> attribute right in the img element like this: <code>&#60img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/&#62</code>."
], ],
"tests": [ "tests": [
"assert($('img').filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an <code>alt</code> attribute set to \"A cute orange cat lying on its back\".')" "assert($('img').filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an <code>alt</code> attribute set to \"A cute orange cat lying on its back\".')"
@ -1287,7 +1294,7 @@
"name": "Waypoint: Create a Bulleted Unordered List", "name": "Waypoint: Create a Bulleted Unordered List",
"difficulty": 0.036, "difficulty": 0.036,
"description": [ "description": [
"Replace the paragraph elements with an unordered list of three things that cats love.", "Replace your <code>p</code> elements with an unordered list of three things that cats love.",
"HTML has a special element for creating unordered lists, or bullet point-style lists.", "HTML has a special element for creating unordered lists, or bullet point-style lists.",
"Unordered lists start with a <code>&#60;ul&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.", "Unordered lists start with a <code>&#60;ul&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
"For example: <code>&#60;ul&#62;&#60;li&#62;milk&#60;/li&#62;&#60;li&#62;cheese&#60;/li&#62;&#60;/ul&#62;</code> would create a bulleted list of \"milk\" and \"cheese\"." "For example: <code>&#60;ul&#62;&#60;li&#62;milk&#60;/li&#62;&#60;li&#62;cheese&#60;/li&#62;&#60;/ul&#62;</code> would create a bulleted list of \"milk\" and \"cheese\"."
@ -1295,8 +1302,8 @@
"tests": [ "tests": [
"assert($('ul').length > 0, 'Create a <code>ul</code> element.')", "assert($('ul').length > 0, 'Create a <code>ul</code> element.')",
"assert($('li').length > 2, 'Add three <code>li</code> elements to your <code>ul</code> element.')", "assert($('li').length > 2, 'Add three <code>li</code> elements to your <code>ul</code> element.')",
"assert(editor.match(/<\\/ul>/g), 'Make sureyour <code>ul</code> element has a closing tag.')", "assert(editor.match(/<\\/ul>/g) && editor.match(/<\\/ul>/g).length === editor.match(/<ul>/g).length, 'Make sure your <code>ul</code> element has a closing tag.')",
"assert(editor.match(/<\\/li>/g) && editor.match(/<\\/li>/g).length > 2, 'Make sureeach of your <code>li</code> elements has a closing tag.')" "assert(editor.match(/<\\/li>/g) && editor.match(/<\\/li>/g).length === editor.match(/<li>/g).length, 'Make sure your <code>li</code> element has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1352,19 +1359,19 @@
"name": "Waypoint: Create an Ordered List", "name": "Waypoint: Create an Ordered List",
"difficulty": 0.037, "difficulty": 0.037,
"description": [ "description": [
"Create an <code>ordered list</code> of the top 3 things cats hate the most.", "Create an ordered list of the top 3 things cats hate the most.",
"HTML has a special element for creating ordered lists, or numbered-style lists.", "HTML has a special element for creating ordered lists, or numbered-style lists.",
"Ordered lists start with a <code>&#60;ol&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.", "Ordered lists start with a <code>&#60;ol&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
"For example: <code>&#60;ol&#62;&#60;li&#62;hydrogen&#60;/li&#62;&#60;li&#62;helium&#60;/li&#62;&#60;/ol&#62;</code> would create a numbered list of \"hydrogen\" and \"helium\"." "For example: <code>&#60;ol&#62;&#60;li&#62;hydrogen&#60;/li&#62;&#60;li&#62;helium&#60;/li&#62;&#60;/ol&#62;</code> would create a numbered list of \"hydrogen\" and \"helium\"."
], ],
"tests": [ "tests": [
"assert($('ul').length > 0, 'You should have an <code>ul</code> element on your webpage.')", "assert($('ul').length > 0, 'You should have an <code>ul</code> element on your page.')",
"assert($('ol').length > 0, 'You should have an <code>ol</code> element on your webpage.')", "assert($('ol').length > 0, 'You should have an <code>ol</code> element on your page.')",
"assert($('li').length > 5, 'You should have three <code>li</code> elements within your <code>ul</code> element.')", "assert($('li').length > 5, 'You should have three <code>li</code> elements within your <code>ul</code> element.')",
"assert($('li').length > 5, 'You should have three <code>li</code> elements within your <code>ol</code> element.')", "assert($('li').length > 5, 'You should have three <code>li</code> elements within your <code>ol</code> element.')",
"assert(editor.match(/<\\/ol>/g), 'Make sureyour <code>ol</code> element has a closing tag.')", "assert(editor.match(/<\\/ul>/g) && editor.match(/<\\/ul>/g).length === editor.match(/<ul>/g).length, 'Make sure your <code>ul</code> element has a closing tag.')",
"assert(editor.match(/<\\/ul>/g), 'Make sureyour <code>ul</code> element has a closing tag.')", "assert(editor.match(/<\\/ol>/g) && editor.match(/<\\/ol>/g).length === editor.match(/<ol>/g).length, 'Make sure your <code>ol</code> element has a closing tag.')",
"assert(editor.match(/<\\/li>/g).length > 5, 'Make sureeach of your <code>li</code> elements has a closing tag.')" "assert(editor.match(/<\\/li>/g) && editor.match(/<\\/li>/g).length === editor.match(/<li>/g).length, 'Make sure your <code>li</code> element has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1424,9 +1431,9 @@
"name": "Waypoint: Create a Text Field", "name": "Waypoint: Create a Text Field",
"difficulty": 0.038, "difficulty": 0.038,
"description": [ "description": [
"Now we'll create a web form. Create a text field under your lists.", "Now we'll create a web form. Create a text input under your lists.",
"Text inputs are a convenient way to get input from your user.", "Text inputs are a convenient way to get input from your user.",
"You can create one like this: <code>&#60;input type='text'&#62;</code>" "You can create one like this: <code>&#60;input type='text'&#62;</code>. Note that <code>input</code> elements are self-closing."
], ],
"tests": [ "tests": [
"assert($('input').length > 0, 'Your app should have an text field input element.')" "assert($('input').length > 0, 'Your app should have an text field input element.')"
@ -1495,13 +1502,13 @@
"name": "Waypoint: Add Placeholder Text to a Text Field", "name": "Waypoint: Add Placeholder Text to a Text Field",
"difficulty": 0.039, "difficulty": 0.039,
"description": [ "description": [
"Add the placeholder text \"cat photo URL\" to your text field.", "Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\".",
"Placeholder text will appear in your text field before your user has inputed anything.", "Your placeholder text is what appears in your text <code>input</code> before your user has inputed anything.",
"For example: <code>&#60;input type='text' placeholder='this is placeholder text'&#62;</code>" "You can create placeholder text like so: <code>&#60;input type='text' placeholder='this is placeholder text'&#62;</code>."
], ],
"tests": [ "tests": [
"assert($('input[placeholder]').length > 0, 'Your text field should have a placeholder attribute.')", "assert($('input[placeholder]').length > 0, 'Add a <code>placeholder</code> attribute text <code>input</code> element.')",
"assert($('input').attr('placeholder') === 'cat photo URL', 'Your placeholder field should have the value of \"cat photo URL\".')" "assert($('input').attr('placeholder').match(/cat\\s+photo\\s+URL/gi), 'Set the value of your placeholder attribute to \"cat photo URL\".')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1568,14 +1575,14 @@
"name": "Waypoint: Create a Form Element", "name": "Waypoint: Create a Form Element",
"difficulty": 0.040, "difficulty": 0.040,
"description": [ "description": [
"Wrap your text field in a <code>&#60;form&#62;</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element.", "Wrap your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element.",
"You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.", "You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.",
"For example: <code>&#60;form action=\"/url-where-you-want-to-submit-form-data\"&#62;&#60;/form&#62;</code>" "For example: <code>&#60;form action=\"/url-where-you-want-to-submit-form-data\"&#62;&#60;/form&#62;</code>."
], ],
"tests": [ "tests": [
"assert($('form').length > 0, 'Wrap your text input element within a <code>form</code> element.')", "assert($('form').length > 0, 'Wrap your text input element within a <code>form</code> element.')",
"assert($('form').attr('action'), 'Your <code>form</code> element should have an <code>action</code> attribute.')", "assert($('form').attr('action'), 'Your <code>form</code> element should have an <code>action</code> attribute.')",
"assert(editor.match(/<\\/form>/g), 'Make sure your <code>form</code> elements has a closing tag.')", "assert(editor.match(/<\\/form>/g) && editor.match(/<form/g) && editor.match(/<\\/form>/g).length === editor.match(/<form/g).length, 'Make sure your <code>form</code> element has a closing tag.')",
"assert(editor.match(/\\/submit-cat-photo/ig), 'Make sure your <code>form</code> action is set to <code>/submit-cat-photo</code>.')" "assert(editor.match(/\\/submit-cat-photo/ig), 'Make sure your <code>form</code> action is set to <code>/submit-cat-photo</code>.')"
], ],
"challengeSeed": [ "challengeSeed": [
@ -1645,13 +1652,13 @@
"description": [ "description": [
"Add a submit button to your <code>form</code> element with type \"submit\" and \"Submit\" as its text.", "Add a submit button to your <code>form</code> element with type \"submit\" and \"Submit\" as its text.",
"Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.", "Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.",
"Here's an example submit button: <code>&#60;button type='submit'&#62;this button submits the form&#60;/button&#62;</code>" "Here's an example submit button: <code>&#60;button type='submit'&#62;this button submits the form&#60;/button&#62;</code>."
], ],
"tests": [ "tests": [
"assert($('form').children('button').length > 0, 'Your form should have a button inside it.')", "assert($('form').children('button').length > 0, 'Your form should have a button inside it.')",
"assert($('button').attr('type') === 'submit', 'Your submit button should have be of input type \"submit\".')", "assert($('button').attr('type') === 'submit', 'Your submit button should have be of input type \"submit\".')",
"assert($('button').text().match(/submit/gi), 'Your submit button should have the text \"submit\".')", "assert($('button').text().match(/submit/gi), 'Your submit button should have the text \"submit\".')",
"assert(editor.match(/<\\/button>/g), 'Make sureyour <code>button</code> element has a closing tag.')" "assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure your <code>button</code> element has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1720,12 +1727,12 @@
"name": "Waypoint: Use HTML5 to Require a Field", "name": "Waypoint: Use HTML5 to Require a Field",
"difficulty": 0.042, "difficulty": 0.042,
"description": [ "description": [
"Make it required for your user to input text into your form before being able to submit it.", "Make your text <code>input</code> a \"required\" field, so that your user can't submit the form without completing this field.",
"You can require your user to complete specific form fields before they will be able to submit your form.", "You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.",
"For example, if you wanted to make a text input field required, you can just add the word \"required\" within your <code>input</code> element use: <code>&#60;input type='text' required&#62;</code>" "For example, if you wanted to make a text input field required, you can just add the word \"required\" within your <code>input</code> element, you would use: <code>&#60;input type='text' required&#62;</code>."
], ],
"tests": [ "tests": [
"assert($('input').prop('required'), 'Your text field should have the property of being required.')" "assert($('input').prop('required'), 'Your text <code>input</code> element should have the \"required\" attribute.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1795,17 +1802,20 @@
"name": "Waypoint: Create a Set of Radio Buttons", "name": "Waypoint: Create a Set of Radio Buttons",
"difficulty": 0.043, "difficulty": 0.043,
"description": [ "description": [
"Add to your form a pair of <code>radio buttons</code> that are wrapped in <code>label</code> elements and share a <code>name</code> attribute, with the options of \"indoor\" and \"outdoor\".", "Add to your form a pair of radio buttons. Each radio button should be wrapped within its own <code>label</code> element. They should share a common <code>name</code> attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\".",
"You can use <code>radio buttons</code> for questions where you want the user to only give you one answer.", "You can use radio buttons for questions where you want the user to only give you one answer.",
"Radio buttons are a type of <code>input</code>.", "Radio buttons are a type of <code>input</code>.",
"Radio buttons should be wrapped within <code>label</code> elements.", "Each of your radio buttons should be wrapped within its own <code>label</code> elements.",
"All related radio buttons should have the same <code>name</code> attribute.", "All related radio buttons should have the same <code>name</code> attribute.",
"Here's an example of a radio button: <code>&#60;label&#62;&#60;input type='radio' name='indoor-outdoor'&#62; Indoor&#60;/label&#62;</code>" "Here's an example of a radio button: <code>&#60;label&#62;&#60;input type='radio' name='indoor-outdoor'&#62; Indoor&#60;/label&#62;</code>."
], ],
"tests": [ "tests": [
"assert($('input[type=\"radio\"]').length > 1, 'Your webpage should have two radio button elements.')", "assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')",
"assert($('input[type=\"radio\"]:nth-child(1)').attr('name') === 'indoor-outdoor', 'Give your radio buttons the <code>name</code> attribute of \"indoor-outdoor\".')", "assert($('input[type=\"radio\"]:nth-child(1)').attr('name') === 'indoor-outdoor', 'Give your radio buttons the <code>name</code> attribute of \"indoor-outdoor\".')",
"assert($('label').length > 1, 'Each of your two radio button elements should be wrapped in a label element.')" "assert($('label').length > 1, 'Each of your two radio button elements should be wrapped in a label element.')",
"assert(editor.match(/<\\/label>/g) && editor.match(/<label/g) && editor.match(/<\\/label>/g).length === editor.match(/<label/g).length, 'Make sure each of your <code>label</code> elements has a closing tag.')",
"assert($('label').text().match(/indoor/gi), 'One of your radio buttons should have the label \"indoor\".')",
"assert($('label').text().match(/outdoor/gi), 'One of your radio buttons should have the label \"outdoor\".')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1875,13 +1885,15 @@
"name": "Waypoint: Create a Set of Checkboxes", "name": "Waypoint: Create a Set of Checkboxes",
"difficulty": 0.044, "difficulty": 0.044,
"description": [ "description": [
"Add to your form a set of three <code>checkbox</code> elements that are wrapped in <code>label</code> elements and share the same <code>name</code> attribute.", "Add to your form a set of three checkbox elements. Each checkbox should be wrapped within its own <code>label</code> element. All three should share the <code>name</code> attribute of \"personality\".",
"Forms commonly use <code>checkbox</code> elements for questions that may have more than one answer.", "Forms commonly use checkbox inputs for questions that may have more than one answer.",
"For example: <code>&#60;label&#62;&#60;input type='checkbox' name='personality'&#62; Loving&#60;/label&#62;</code>" "For example: <code>&#60;label&#62;&#60;input type='checkbox' name='personality'&#62; Loving&#60;/label&#62;</code>."
], ],
"tests": [ "tests": [
"assert($('input[type=\"checkbox\"]').length > 2, 'Your webpage should have three checkbox elements.')", "assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')",
"assert($('label:has(input[type=\"checkbox\"])').length > 2, 'Each of your three checkbox elements should be wrapped in a label element.')" "assert($('label:has(input[type=\"checkbox\"])').length > 2, 'Each of your three checkbox elements should be wrapped in its own <code>label</code> element.')",
"assert(editor.match(/<\\/label>/g) && editor.match(/<label/g) && editor.match(/<\\/label>/g).length === editor.match(/<label/g).length, 'Make sure each of your <code>label</code> elements has a closing tag.')",
"assert($('input[type=\"checkbox\"]:nth-child(1)').attr('name') === 'trait', 'Give your radio buttons the <code>name</code> attribute of \"personality\".')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1954,7 +1966,7 @@
"difficulty": 0.045, "difficulty": 0.045,
"description": [ "description": [
"Clean up your form by adding linebreaks between form elements.", "Clean up your form by adding linebreaks between form elements.",
"Remember that you can create a linebreak element by using the code: <code>&#60;br&#62;</code>" "Remember that you can create a linebreak element by using the code: <code>&#60;br&#62;</code>."
], ],
"tests": [ "tests": [
"assert($('br').length > 1, 'Add at least 2 line breaks to visually separate your form elements.')" "assert($('br').length > 1, 'Add at least 2 line breaks to visually separate your form elements.')"
@ -2112,20 +2124,20 @@
}, },
{ {
"_id": "bad87fee1348bd9aede08835", "_id": "bad87fee1348bd9aede08835",
"name": "Waypoint: Wrap Many Elements within a Div Element", "name": "Waypoint: Wrap Many Elements within a Single Div Element",
"difficulty": 0.047, "difficulty": 0.047,
"description": [ "description": [
"Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element.", "Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element.",
"The <code>div</code> element, or \"Division\" element, is a general purpose container for other elements.", "The <code>div</code> element, or \"Division\" element, is a general purpose container for other elements.",
"The <code>div</code> element is probably the most commonly used HTML element of all. It's useful for assigning classes down to all the elements that it contains.", "The <code>div</code> element is probably the most commonly used HTML element of all. It's useful for passing the CSS of its own class declarations down to all the elements that it contains.",
"Just like any other non-self-closing element, you can open a <code>div</code> element with <code>&#60;div&#62;</code> and close it on another line with <code>&#60;/div&#62;</code>.", "Just like any other non-self-closing element, you can open a <code>div</code> element with <code>&#60;div&#62;</code> and close it on another line with <code>&#60;/div&#62;</code>.",
"Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one div." "Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>."
], ],
"tests": [ "tests": [
"assert($('div').children('ol').length > 0, 'Wrap your <code>ol</code> element inside your <code>div</code> element.')", "assert($('div').children('ol').length > 0, 'Wrap your <code>ol</code> element inside your <code>div</code> element.')",
"assert($('div').children('p').length > 1, 'Wrap your <code>p</code> element inside your <code>div</code> element.')", "assert($('div').children('p').length > 1, 'Wrap your <code>p</code> element inside your <code>div</code> element.')",
"assert($('div').children('ul').length > 0, 'Wrap your <code>ul</code> element inside your <code>div</code> element.')", "assert($('div').children('ul').length > 0, 'Wrap your <code>ul</code> element inside your <code>div</code> element.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<\\/div>/g).length === editor.match(/<div>/g).length, 'Make sureyour <code>div</code> element has a closing tag.')" "assert(editor.match(/<\\/div>/g) && editor.match(/<\\/div>/g).length === editor.match(/<div>/g).length, 'Make sure your <code>div</code> element has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -2205,7 +2217,7 @@
"description": [ "description": [
"Create a class called \"gray-background\" with the background color of gray. Assign this class to your <code>div</code> element.", "Create a class called \"gray-background\" with the background color of gray. Assign this class to your <code>div</code> element.",
"You can set an element's background color with the \"background-color\" attribute.", "You can set an element's background color with the \"background-color\" attribute.",
"For example, if you wanted an element's background color to be \"green\", you'd use <code>.green-background { background-color: green; }</code>." "For example, if you wanted an element's background color to be \"green\", you'd use <code>.green-background { background-color: green; }</code> within your <code>style</code> element."
], ],
"tests": [ "tests": [
"assert($('div').hasClass('gray-background'), 'Give your <code>div</code> element the class \"gray-background\".')", "assert($('div').hasClass('gray-background'), 'Give your <code>div</code> element the class \"gray-background\".')",
@ -2415,8 +2427,8 @@
"description": [ "description": [
"Change the <code>margin</code> of the green box to a negative value, so it fills the entire horizontal width of the yellow box around it.", "Change the <code>margin</code> of the green box to a negative value, so it fills the entire horizontal width of the yellow box around it.",
"An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.", "An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
"If you set an element's margin to a negative value, the element will grow larger.", "If you set an element's <code>margin</code> to a negative value, the element will grow larger.",
"Try to set the margin to a negative value like the one for the red box." "Try to set the <code>margin</code> to a negative value like the one for the red box."
], ],
"tests": [ "tests": [
"assert($('.green-box').css('margin-top') === '-15px', 'Your <code>green-box</code> class should give elements -15px of margin.')" "assert($('.green-box').css('margin-top') === '-15px', 'Your <code>green-box</code> class should give elements -15px of margin.')"
@ -2475,9 +2487,9 @@
"name": "Waypoint: Add Different Padding to Each Side of an Element", "name": "Waypoint: Add Different Padding to Each Side of an Element",
"difficulty": 0.067, "difficulty": 0.067,
"description": [ "description": [
"Give the green box a padding of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.", "Give the green box a <code>padding</code> of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
"Sometimes you will want to customize an element so that it has different padding on each of its sides.", "Sometimes you will want to customize an element so that it has different <code>padding</code> on each of its sides.",
"CSS allows you to control the padding of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes." "CSS allows you to control the <code>padding</code> of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes."
], ],
"tests": [ "tests": [
"assert($('.green-box').css('padding-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of padding.')", "assert($('.green-box').css('padding-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of padding.')",
@ -2540,15 +2552,15 @@
"name": "Waypoint: Add Different Margins to Each Side of an Element", "name": "Waypoint: Add Different Margins to Each Side of an Element",
"difficulty": 0.068, "difficulty": 0.068,
"description": [ "description": [
"Give the green box a margin of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.", "Give the green box a <code>margin</code> of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
"Sometimes you will want to customize an element so that it has a different margin on each of its sides.", "Sometimes you will want to customize an element so that it has a different <code>margin</code> on each of its sides.",
"CSS allows you to control the margin of an element on all four sides with <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes." "CSS allows you to control the <code>margin</code> of an element on all four sides with <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes."
], ],
"tests": [ "tests": [
"assert($('.green-box').css('margin-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of margin.')", "assert($('.green-box').css('margin-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of <code>margin</code>.')",
"assert($('.green-box').css('margin-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of margin.')", "assert($('.green-box').css('margin-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of <code>margin</code>.')",
"assert($('.green-box').css('margin-right') === '20px', 'Your <code>green-box</code> class should give the right of elements 20px of margin.')", "assert($('.green-box').css('margin-right') === '20px', 'Your <code>green-box</code> class should give the right of elements 20px of <code>margin</code>.')",
"assert($('.green-box').css('margin-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of margin.')" "assert($('.green-box').css('margin-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of <code>margin</code>.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<style>", "<style>",
@ -2605,15 +2617,15 @@
"name": "Waypoint: Use Clockwise Notation to Specify the Padding of an Element", "name": "Waypoint: Use Clockwise Notation to Specify the Padding of an Element",
"difficulty": 0.069, "difficulty": 0.069,
"description": [ "description": [
"Use <code>Clockwise Notation</code> to give the \".green-box\" class a padding of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.", "Use Clockwise Notation to give the \".green-box\" class a <code>padding</code> of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
"Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes, you can specify them all in one line, like this: <code>padding: 10px 20px 10px 20px;</code>.", "Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes, you can specify them all in one line, like this: <code>padding: 10px 20px 10px 20px;</code>.",
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions." "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions."
], ],
"tests": [ "tests": [
"assert($('.green-box').css('padding-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of padding.')", "assert($('.green-box').css('padding-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of <code>padding</code>.')",
"assert($('.green-box').css('padding-right') === '20px', 'Your <code>green-box</code> class should give the right of elements 20px of padding.')", "assert($('.green-box').css('padding-right') === '20px', 'Your <code>green-box</code> class should give the right of elements 20px of <code>padding</code>.')",
"assert($('.green-box').css('padding-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of padding.')", "assert($('.green-box').css('padding-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of <code>padding</code>.')",
"assert($('.green-box').css('padding-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of padding.')" "assert($('.green-box').css('padding-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of <code>padding</code>.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<style>", "<style>",
@ -2672,10 +2684,10 @@
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions." "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions."
], ],
"tests": [ "tests": [
"assert($('.green-box').css('margin-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of margin.')", "assert($('.green-box').css('margin-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of <code>margin</code>.')",
"assert($('.green-box').css('margin-right') === '20px', 'Your <code>green-box</code> class should give the right of elements 20px of margin.')", "assert($('.green-box').css('margin-right') === '20px', 'Your <code>green-box</code> class should give the right of elements 20px of <code>margin</code>.')",
"assert($('.green-box').css('margin-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of margin.')", "assert($('.green-box').css('margin-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of <code>margin</code>.')",
"assert($('.green-box').css('margin-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of margin.')" "assert($('.green-box').css('margin-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of <code>margin</code>.')"
], ],
"challengeSeed": [ "challengeSeed": [

119
seed_data/challenges/bootstrap.json
View File

@ -7,16 +7,16 @@
"name": "Waypoint: Mobile Responsive Images", "name": "Waypoint: Mobile Responsive Images",
"difficulty": 0.047, "difficulty": 0.047,
"description": [ "description": [
"Now let's go back to our Cat Photo App. This time, we'll style it using the popular Twitter Bootstrap responsive CSS framework. First, add a new image with the <code>src</code> attribute of \"http://bit.ly/fcc-kittens2\", and add the <code>img-responsive</code> Bootstrap class to that image.", "Now let's go back to our Cat Photo App. This time, we'll style it using the popular Twitter Bootstrap responsive CSS framework. First, add a new image with the <code>src</code> attribute of \"http://bit.ly/fcc-kittens2\", and add the \"img-responsive\" Bootstrap class to that image.",
"It would be great if the image could be exactly the width of our phone's screen.", "It would be great if the image could be exactly the width of our phone's screen.",
"Fortunately, we have access to a <code>Responsive CSS Framework</code> called Bootstrap. You can add Bootstrap to any app just by including it with <code>&#60;link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/&#62;</code> at the top of your HTML. But we've gone ahead and automatically added it to your Cat Photo App for you.", "Fortunately, we have access to a Responsive CSS Framework called Bootstrap. You can add Bootstrap to any app just by including it with <code>&#60;link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/&#62;</code> at the top of your HTML. But we've gone ahead and automatically added it to your Cat Photo App for you.",
"Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name <code>Responsive Design</code>.", "Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name <code>Responsive Design</code>.",
"With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.", "With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.",
"Now all you need to do is add the <code>img-responsive</code> class to your image." "Now all you need to do is add the \"img-responsive\" class to your image."
], ],
"tests": [ "tests": [
"assert($('img').hasClass('img-responsive'), 'Your new image should have the class \"img-responsive\".')", "assert($('img').hasClass('img-responsive'), 'Your new image should have the class \"img-responsive\".')",
"assert(new RegExp('http://bit.ly/fcc-kittens2', 'gi').test($('img.img-responsive').attr('src')), 'You should add a second image with the <code>src</code> of <code>http&#58;//bit.ly/fcc-kittens2</code>.')" "assert(new RegExp('http://bit.ly/fcc-kittens2', 'gi').test($('img.img-responsive').attr('src')), 'Add a second image with the <code>src</code> of <code>http&#58;//bit.ly/fcc-kittens2</code>.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -93,12 +93,12 @@
"name": "Waypoint: Center Text with Bootstrap", "name": "Waypoint: Center Text with Bootstrap",
"difficulty": 0.048, "difficulty": 0.048,
"description": [ "description": [
"Add Bootstrap's <code>text-center</code> class to your h2 element.", "Add Bootstrap's \"text-center\" class to your <code>h2</code> element.",
"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 <code>text-center</code> to our h1 and h2 elements.", "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 <code>text-center</code> to our <code>h1</code> and <code>h2</code> elements.",
"Remember that you can add several classes to the same element by separating each of them with a space, like this: <code>&#60h2 class=\"text-red text-center\"&#62your text&#60/h2&#62</code>." "Remember that you can add several classes to the same element by separating each of them with a space, like this: <code>&#60h2 class=\"text-red text-center\"&#62your text&#60/h2&#62</code>."
], ],
"tests": [ "tests": [
"assert($('h2').hasClass('text-center'), 'Your h2 element should be centered by applying the class \"text-center\"')" "assert($('h2').hasClass('text-center'), 'Your <code>h2</code> element should be centered by applying the class \"text-center\"')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -176,12 +176,13 @@
"name": "Waypoint: Create a Bootstrap Button", "name": "Waypoint: Create a Bootstrap Button",
"difficulty": 0.049, "difficulty": 0.049,
"description": [ "description": [
"Create a new button below your large kitten photo with the class \"btn\" and the text of \"like this photo\".", "Create a new <code>button</code> element below your large kitten photo. Give it the class \"btn\" and the text of \"like this photo\".",
"Bootstrap has its own button styles, which look much better than the plain HTML ones." "Bootstrap has its own styles for <code>button</code> elements, which look much better than the plain HTML ones."
], ],
"tests": [ "tests": [
"assert($('button').hasClass('btn'), 'Your new button should have the class \"btn\".')", "assert($('button').hasClass('btn'), 'Your new button should have the class \"btn\".')",
"assert(new RegExp('like this photo','gi').test($('button.btn').text()), 'Your button should have the text \"like this photo\".')" "assert(new RegExp('like this photo','gi').test($('button.btn').text()), 'Your button should have the text \"like this photo\".')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<\\/button>/g).length === editor.match(/<button>/g).length, 'Make sure your <code>button</code> element has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -259,13 +260,16 @@
"name": "Waypoint: Create a Block Element Bootstrap Button", "name": "Waypoint: Create a Block Element Bootstrap Button",
"difficulty": 0.050, "difficulty": 0.050,
"description": [ "description": [
"Add Bootstrap's <code>btn-block</code> class to your Bootstrap button.", "Add Bootstrap's \"btn-block\" class to your Bootstrap button.",
"Normally, your buttons are only as wide as the text they contain. By making them <code>block</code> elements, your button will stretch to fill your page's entire horizontal space.", "Normally, your <code>button</code> 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 <code>btn</code> class." "This image illustrates the difference between \"inline\" elements and \"block-level\" elements:",
"<img class='img-responsive' src='https://www.evernote.com/l/AHTFU358y71AV6mokPeuTEgrZVdUJ4A8v3AB/image.png' alt='An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'>",
"Note that these buttons still need the \"btn\" class."
], ],
"tests": [ "tests": [
"assert($('button').hasClass('btn'), 'Your button should still have the class \"btn\".')", "assert($('button').hasClass('btn'), 'Your button should still have the class \"btn\".')",
"assert($('button').hasClass('btn-block'), 'Your button should have the class \"btn-block\".')" "assert($('button').hasClass('btn-block'), 'Your button should have the class \"btn-block\".')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<\\/button>/g).length === editor.match(/<button>/g).length, 'Make sure your <code>button</code> element has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -344,13 +348,14 @@
"name": "Waypoint: Taste the Bootstrap Button Color Rainbow", "name": "Waypoint: Taste the Bootstrap Button Color Rainbow",
"difficulty": 0.051, "difficulty": 0.051,
"description": [ "description": [
"Add Bootstrap's <code>btn-primary</code> class to your button.", "Add Bootstrap's \"btn-primary\" class to your button.",
"The <code>btn-primary</code> class is the main color you'll use in your app. It is useful for highlighting actions you want your user to take.", "The \"btn-primary\" class is the main color you'll use in your app. It is useful for highlighting actions you want your user to take.",
"Note that this button will still need the <code>btn</code> class." "Note that this button will still need the \"btn\" and \"btn-block\" classes."
], ],
"tests": [ "tests": [
"assert($('button').hasClass('btn-primary'), 'Your button should have the class \"btn-primary\".')", "assert($('button').hasClass('btn-primary'), 'Your button should have the class \"btn-primary\".')",
"assert($('button').hasClass('btn-block') && $('button').hasClass('btn'), 'Your button should still have the \"btn\" and \"btn-block\" classes.')" "assert($('button').hasClass('btn-block') && $('button').hasClass('btn'), 'Your button should still have the \"btn\" and \"btn-block\" classes.')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<\\/button>/g).length === editor.match(/<button>/g).length, 'Make sure your <code>button</code> element has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -429,14 +434,15 @@
"name": "Waypoint: Call out Optional Actions with Button Info", "name": "Waypoint: Call out Optional Actions with Button Info",
"difficulty": 0.052, "difficulty": 0.052,
"description": [ "description": [
"Create a new block-level Bootstrap button below your \"Like\" button with the text \"Info\", and add Bootstrap's <code>btn-info</code> and <code>btn-block</code> classes to it.", "Create a new block-level Bootstrap button below your \"Like\" button with the text \"Info\", and add Bootstrap's \"btn-info\" and \"btn-block\" classes to it.",
"Bootstrap comes with several pre-defined colors for buttons. The <code>btn-info</code> class is used to call attention to optional actions that the user can take.", "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 <code>btn</code> and <code>btn-block</code> classes." "Note that these buttons still need the \"btn\" and \"btn-block\" classes."
], ],
"tests": [ "tests": [
"assert($('button').hasClass('btn-info'), 'Your new button should have the class \"btn-info\".')", "assert($('button').hasClass('btn-info'), 'Your new button should have the class \"btn-info\".')",
"assert($('button.btn-block.btn').length > 1, 'Both of your Bootstrap buttons should have the \"btn\" and \"btn-block\" classes.')", "assert($('button.btn-block.btn').length > 1, 'Both of your Bootstrap buttons should have the \"btn\" and \"btn-block\" classes.')",
"assert(new RegExp('info', 'gi').test($('button.btn-info').text()), 'Your new button should have the text \"Info\".')" "assert(new RegExp('info', 'gi').test($('button.btn-info').text()), 'Your new button should have the text \"Info\".')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<\\/button>/g).length === editor.match(/<button>/g).length, 'Make sure each of your <code>button</code> elements has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -515,14 +521,15 @@
"name": "Waypoint: Warn your Users of a Dangerous Action", "name": "Waypoint: Warn your Users of a Dangerous Action",
"difficulty": 0.053, "difficulty": 0.053,
"description": [ "description": [
"Create a button with the text \"Delete\" and give it the class <code>btn-danger</code>.", "Create a button with the text \"Delete\" and give it the class \"btn-danger\".",
"Bootstrap comes with several pre-defined colors for buttons. The <code>btn-danger</code> class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.", "Bootstrap comes with several pre-defined colors for buttons. The \"btn-danger\" class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.",
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes." "Note that these buttons still need the \"btn\" and \"btn-block\" classes."
], ],
"tests": [ "tests": [
"assert($('button').hasClass('btn-danger'), 'Your new button should have the class \"btn-danger\".')", "assert($('button').hasClass('btn-danger'), 'Your new button should have the class \"btn-danger\".')",
"assert($('button.btn-block.btn').length > 2, 'All of your Bootstrap buttons should have the \"btn\" and \"btn-block\" classes.')", "assert($('button.btn-block.btn').length > 2, 'All of your Bootstrap buttons should have the \"btn\" and \"btn-block\" classes.')",
"assert(new RegExp('delete', 'gi').test($('button.btn-danger').text()), 'Your new button should have the text \"delete\".')" "assert(new RegExp('delete', 'gi').test($('button.btn-danger').text()), 'Your new button should have the text \"delete\".')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<\\/button>/g).length === editor.match(/<button>/g).length, 'Make sure each of your <code>button</code> elements has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -608,11 +615,13 @@
"<a href='http://getbootstrap.com/css/#grid-example-basic' target='_blank'><img class='img-responsive' src='https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png'></a>", "<a href='http://getbootstrap.com/css/#grid-example-basic' target='_blank'><img class='img-responsive' src='https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png'></a>",
"Note that in this illustration, we use the <code>col-md-*</code> class. Here, \"md\" means \"medium\", and \"*\" is a number specifying how many columns wide the element should be. In this case, we're specifying how many columns wide an element should be on a medium-sized screen, such as a laptop.", "Note that in this illustration, we use the <code>col-md-*</code> class. Here, \"md\" means \"medium\", and \"*\" is a number specifying how many columns wide the element should be. In this case, we're specifying how many columns wide an element should be on a medium-sized screen, such as a laptop.",
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.", "In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.",
"The <code>row</code> class is applied to a <code>div</code>, and the buttons themselves can be wrapped within it." "The \"row\" class is applied to a <code>div</code>, and the buttons themselves can be wrapped within it."
], ],
"tests": [ "tests": [
"assert($('div.row:has(button)').length > 0, 'Your buttons should be wrapped within a div with the class \"row\".')", "assert($('div.row:has(button)').length > 2, 'Your buttons should be wrapped within a div with the class \"row\".')",
"assert($('div.col-xs-4').length > 2, 'Each of your Bootstrap buttons should be wrapped in a div with the class \"col-xs-4\".')" "assert($('div.col-xs-4').length > 2, 'Each of your Bootstrap buttons should be wrapped in a div with the class \"col-xs-4\".')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<\\/button>/g).length === editor.match(/<button>/g).length, 'Make sure each of your <code>button</code> elements has a closing tag.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<\\/div>/g).length === editor.match(/<div>/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -693,7 +702,7 @@
"name": "Waypoint: Ditch Custom CSS for Bootstrap", "name": "Waypoint: Ditch Custom CSS for Bootstrap",
"difficulty": 0.055, "difficulty": 0.055,
"description": [ "description": [
"<ol><li>Delete <code>.red-text</code>, <code>p</code>, and <code>.smaller-image</code> from your <code>style</code> element.</li> <li>Delete the <code>p</code> element that contains the dead link.</li> <li>Remove the <code>red-text</code> class from your <code>h2</code> element and replace it with the <code>text-primary</code> Bootstrap class.</li> <li>Remove the <code>smaller-image</code> class from your first <code>img</code> element and replace it with the <code>img-responsive</code> class.</li></ol>", "Delete the \".red-text\", \"p\", and \".smaller-image\" CSS declarations from your <code>style</code> element. Then Delete the <code>p</code> element that contains a dead link. Then remove the \"red-text\" class from your <code>h2</code> element and replace it with the \"text-primary\" Bootstrap class. Finally, remove the \"smaller-image\" class from your first <code>img</code> element and replace it with the <code>img-responsive</code> class.",
"We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier.", "We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier.",
"Don't worry - there will be plenty of time to customize our CSS later." "Don't worry - there will be plenty of time to customize our CSS later."
], ],
@ -796,14 +805,15 @@
"Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.", "Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:", "Here's a diagram of how Bootstrap's 12-column grid layout works:",
"<a href='http://getbootstrap.com/css/#grid' target='_blank'><img class='img-responsive' src='https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png'></a>", "<a href='http://getbootstrap.com/css/#grid' target='_blank'><img class='img-responsive' src='https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png'></a>",
"Note that in this illustration, we use the <code>col-md-*</code> class. Here, \"md\" means \"medium\", and \"*\" is a number specifying how many columns wide the element should be. In this case, we're specifying how many columns wide an element should be on a medium-sized screen, such as a laptop.", "Note that in this illustration, we use the \"col-md-*\" class. Here, \"md\" means \"medium\", and \"*\" is a number specifying how many columns wide the element should be. In this case, we're specifying how many columns wide an element should be on a medium-sized screen, such as a laptop.",
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.", "In the Cat Photo App that we're building, we'll use \"col-xs-*\", where \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.",
"Notice how the image is now just the right size to fit along the text?" "Notice how the image is now just the right size to fit along the text?"
], ],
"tests": [ "tests": [
"assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0, 'Your h2 and top image elements should both be wrapped together within a div with the class \"row\".')", "assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0, 'Your <code>h2</code> element and topmost <code>img</code> element should both be wrapped together within a <code>div</code> element with the class \"row\".')",
"assert($('div.col-xs-4:has(img)').length > 0, 'Wrap your top image inside a div with the class \"col-xs-4\".')", "assert($('div.col-xs-4:has(img)').length > 0, 'Wrap your topmost <code>img</code> element within a <code>div</code> with the class \"col-xs-4\".')",
"assert($('div.col-xs-8:has(h2)').length > 0, 'Wrap your h2 element inside a div with the class \"col-xs-8\".')" "assert($('div.col-xs-8:has(h2)').length > 0, 'Wrap your <code>h2</code> element within a <code>div</code> with the class \"col-xs-8\".')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<\\/div>/g).length === editor.match(/<div>/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -880,13 +890,14 @@
"difficulty": 0.057, "difficulty": 0.057,
"description": [ "description": [
"Use Font Awesome to add a \"like\" icon to your like button.", "Use Font Awesome to add a \"like\" icon to your like button.",
"Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the <code>.svg</code> file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.", "Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the \".svg\" file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.",
"Go ahead and add a <code>&#60;i class=\"fa fa-thumbs-up\"&#62;&#60;/i&#62;</code> within your like button's element." "Go ahead and add a <code>&#60;i class=\"fa fa-thumbs-up\"&#62;&#60;/i&#62;</code> within your like button's element."
], ],
"tests": [ "tests": [
"assert($('i').hasClass('fa fa-thumbs-up'), 'Add an <code>i</code> element with the classes \"fa\" and \"fa-thumbs-up\".')", "assert($('i').hasClass('fa fa-thumbs-up'), 'Add an <code>i</code> element with the classes \"fa\" and \"fa-thumbs-up\".')",
"assert($('button').children('i').length > 0, 'Wrap your <code>i</code> element within your <code>button</code> element.')", "assert($('button').children('i').length > 0, 'Wrap your <code>i</code> element within your <code>button</code> element.')",
"assert(editor.match(/<\\/i>/g), 'Be sure to close your <code>i</code> element with a closing tag.')" "assert(editor.match(/<\\/i>/g), 'Be sure to close your <code>i</code> element with a closing tag.')",
"assert(editor.match(/<\\/i>/g) && editor.match(/<\\/i/g).length === editor.match(/<i>/g).length, 'Make sure your <code>i</code> element has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -967,12 +978,13 @@
"difficulty": 0.058, "difficulty": 0.058,
"description": [ "description": [
"Use Font Awesome to add a \"info-circle\" icon to your info button and a \"trash\" icon to your delete button.", "Use Font Awesome to add a \"info-circle\" icon to your info button and a \"trash\" icon to your delete button.",
"Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the <code>.svg</code> file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.", "Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the \".svg\" file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.",
"Add <code>&#60;i class=\"fa fa-info-circle\"&#62;&#60;/i&#62;</code> within your info button's element, and a <code>&#60;i class=\"fa fa-trash\"&#62;&#60;/i&#62;</code> within your delete button." "Add <code>&#60;i class=\"fa fa-info-circle\"&#62;&#60;/i&#62;</code> within your info button's element, and a <code>&#60;i class=\"fa fa-trash\"&#62;&#60;/i&#62;</code> within your delete button."
], ],
"tests": [ "tests": [
"assert($('i').hasClass('fa fa-trash'), 'You should add a <code>&#60;i class=\"fa fa-trash\"&#62;&#60;/i&#62;</code> within your delete button element.')", "assert($('i').hasClass('fa fa-trash'), 'You should add a <code>&#60;i class=\"fa fa-trash\"&#62;&#60;/i&#62;</code> within your delete button element.')",
"assert($('i').hasClass('fa fa-info-circle'), 'You should add a <code>&#60;i class=\"fa fa-info-circle\"&#62;&#60;/i&#62;</code> within your info button element.')" "assert($('i').hasClass('fa fa-info-circle'), 'You should add a <code>&#60;i class=\"fa fa-info-circle\"&#62;&#60;/i&#62;</code> within your info button element.')",
"assert(editor.match(/<\\/i>/g) && editor.match(/<\\/i/g).length === editor.match(/<i>/g).length, 'Make sure each of your <code>i</code> elements has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1053,11 +1065,12 @@
"difficulty": 0.059, "difficulty": 0.059,
"description": [ "description": [
"Wrap all of your radio buttons within a <code>&#60;div class='row'&#62;</code> element. Then wrap each of them within a <code>&#60;div class='col-xs-6'&#62;</code> element.", "Wrap all of your radio buttons within a <code>&#60;div class='row'&#62;</code> element. Then wrap each of them within a <code>&#60;div class='col-xs-6'&#62;</code> element.",
"You can use Bootstrap's <code>col-xs-*</code> classes on form elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is." "You can use Bootstrap's \"col-xs-*\" classes on <code>form</code> elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is."
], ],
"tests": [ "tests": [
"assert($('div.row:has(input[type=\\'radio\\'])').length > 0, 'Wrap all of your radio buttons inside one div with the class \"row\".')", "assert($('div.row:has(input[type=\\'radio\\'])').length > 0, 'Wrap all of your radio buttons inside one <code>div</code> with the class \"row\".')",
"assert($('div.col-xs-6:has(input[type=\\'radio\\'])').length > 1, 'Wrap each of your radio buttons inside its own div with the class \"col-xs-6\".')" "assert($('div.col-xs-6:has(input[type=\\'radio\\'])').length > 1, 'Wrap each of your radio buttons inside its own <code>div</code> with the class \"col-xs-6\".')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<\\/div>/g).length === editor.match(/<div>/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1138,11 +1151,12 @@
"difficulty": 0.060, "difficulty": 0.060,
"description": [ "description": [
"Wrap all your checkboxes in a <code>&#60;div class='row'&#62;</code> element. Then wrap each of them in a <code>&#60;div class='col-xs-4'&#62;</code> element.", "Wrap all your checkboxes in a <code>&#60;div class='row'&#62;</code> element. Then wrap each of them in a <code>&#60;div class='col-xs-4'&#62;</code> element.",
"You can use Bootstrap's <code>col-xs-*</code> classes on form elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is." "You can use Bootstrap's \"col-xs-*\" classes on <code>form</code> elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is."
], ],
"tests": [ "tests": [
"assert($('div.row:has(input[type=\\'checkbox\\'])').length > 0, 'Wrap all of your checkboxes inside one div with the class \"row\".')", "assert($('div.row:has(input[type=\\'checkbox\\'])').length > 0, 'Wrap all of your checkboxes inside one <code>div</code> with the class \"row\".')",
"assert($('div.col-xs-4:has(input[type=\\'checkbox\\'])').length > 2, 'Wrap each of your checkboxes inside its own div with the class \"col-xs-4\".')" "assert($('div.col-xs-4:has(input[type=\\'checkbox\\'])').length > 2, 'Wrap each of your checkboxes inside its own <code>div</code> with the class \"col-xs-4\".')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<\\/div>/g).length === editor.match(/<div>/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1229,12 +1243,14 @@
"name": "Waypoint: Style Text Inputs as Form Controls", "name": "Waypoint: Style Text Inputs as Form Controls",
"difficulty": 0.061, "difficulty": 0.061,
"description": [ "description": [
"Give your form's text input field a class of <code>form-control</code>. Give your form's submit button the classes <code>btn btn-primary</code> and give it the Font Awesome icon of <code>fa-paper-plane</code>." "Give your form's text input field a class of \"form-control\". Give your form's submit button the classes \"btn btn-primary\". Also give this button the Font Awesome icon of \"fa-paper-plane\".",
"You can add the \"fa-paper-plane\" Font Awesome icon by adding <code>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;/i&#62;</code> within your submit <code>button</code> element."
], ],
"tests": [ "tests": [
"assert($('button[type=\\'submit\\']').hasClass('btn btn-primary'), 'Give the submit button in your form the classes \"btn btn-primary\".')", "assert($('button[type=\\'submit\\']').hasClass('btn btn-primary'), 'Give the submit button in your form the classes \"btn btn-primary\".')",
"assert($('button[type=\\'submit\\']:has(i.fa.fa-paper-plane)').length > 0, 'Add a <code>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;/i&#62;</code> within your submit button element.')", "assert($('button[type=\\'submit\\']:has(i.fa.fa-paper-plane)').length > 0, 'Add a <code>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;/i&#62;</code> within your submit <code>button</code> element.')",
"assert($('input[type=\\'text\\']').hasClass('form-control'), 'Give the text input field in your form the class \"form-control\".')" "assert($('input[type=\\'text\\']').hasClass('form-control'), 'Give the text <code>input<code> in your form the class \"form-control\".')",
"assert(editor.match(/<\\/i>/g) && editor.match(/<\\/i/g).length === editor.match(/<i>/g).length, 'Make sure each of your <code>i</code> elements has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1330,14 +1346,15 @@
"name": "Waypoint: Line up Form Elements Responsively with Bootstrap", "name": "Waypoint: Line up Form Elements Responsively with Bootstrap",
"difficulty": 0.062, "difficulty": 0.062,
"description": [ "description": [
"Now let's get your form input and your submission button on the same line. We'll do this the same way we have previously: by using a \"row\" element with \"col-xs-*\" elements within it.", "Now let's get your form <code>input</code> and your submission <code>button</code> on the same line. We'll do this the same way we have previously: by using a <code>div</code> element with the class \"row\", and other <code>div</code> elements within it using the \"col-xs-*\" class.",
"Wrap both your form's text input field and submit button within a div with the class \"row\". Wrap your form's text input field within a div with the class of \"col-xs-7\". Wrap your form's submit button the in a div with the class \"col-xs-5\".", "Wrap both your form's text <code>input</code> and submit <code>button</code> within a <code>div</code> with the class \"row\". Wrap your form's text <code>input</code> within a div with the class of \"col-xs-7\". Wrap your form's submit <code>button</code> in a <code>div</code> with the class \"col-xs-5\".",
"This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!" "This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!"
], ],
"tests": [ "tests": [
"assert($('div.row:has(input[type=\\'text\\'])').length > 0 && $('div.row:has(button[type=\\'submit\\'])').length > 0, 'Wrap your form submission button and text area in a div with class \"row\".')", "assert($('div.row:has(input[type=\\'text\\'])').length > 0 && $('div.row:has(button[type=\\'submit\\'])').length > 0, 'Wrap your form submission button and text area in a div with class \"row\".')",
"assert($('div.col-xs-5:has(button[type=\\'submit\\'])').length > 0, 'Wrap your form submission button in a div with the class \"col-xs-5\".')", "assert($('div.col-xs-5:has(button[type=\\'submit\\'])').length > 0, 'Wrap your form submission button in a div with the class \"col-xs-5\".')",
"assert($('div.col-xs-7:has(input[type=\\'text\\'])').length > 0, 'Wrap your form text area in a div with the class \"col-xs-7\".')" "assert($('div.col-xs-7:has(input[type=\\'text\\'])').length > 0, 'Wrap your form text area in a div with the class \"col-xs-7\".')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<\\/div>/g).length === editor.match(/<div>/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",

4
seed_data/challenges/get-set-for-free-code-camp.json
View File

@ -265,7 +265,7 @@
"Any time you get stuck or don't know what to do next, follow this simple algorithm (procedure): RSAP (Read, Search, Ask, Post).", "Any time you get stuck or don't know what to do next, follow this simple algorithm (procedure): RSAP (Read, Search, Ask, Post).",
"First, R - Read the documentation or error message. A key skill that good coders have is the ability to interpret and then follow instructions.", "First, R - Read the documentation or error message. A key skill that good coders have is the ability to interpret and then follow instructions.",
"Next, S - Search Google. Good Google queries take a lot of practice. When you search Google, you usually want to include the language or framework you're using. You also want to limit the results to a recent period.", "Next, S - Search Google. Good Google queries take a lot of practice. When you search Google, you usually want to include the language or framework you're using. You also want to limit the results to a recent period.",
"Then, if you still haven't found an answer to your question, A - Ask your friends. If you have trouble, you can ask your fellow campers. We have a special chat room specifically for getting help with tools you learn through these Free Code Camp Challenges. Go to <a href='https://freecode.slack.com/messages/help/' target='_blank'>https://freecode.slack.com/messages/help/</a>. Keep this chat open while you work on the remaining challenges.", "Then, if you still haven't found an answer to your question, A - Ask your friends. If you have trouble, you can ask your fellow campers. We have a special chat room specifically for getting help with tools you learn through these Free Code Camp Challenges. Go to <a href='https://freecodecamp.slack.com/messages/help/' target='_blank'>https://freecodecamp.slack.com/messages/help/</a>. Keep this chat open while you work on the remaining challenges.",
"Finally, P - Post on Stack Overflow. Before you attempt to do this, read Stack Overflow's guide to asking good questions: <a href='http://stackoverflow.com/help/how-to-ask'>http://stackoverflow.com/help/how-to-ask</a>.", "Finally, P - Post on Stack Overflow. Before you attempt to do this, read Stack Overflow's guide to asking good questions: <a href='http://stackoverflow.com/help/how-to-ask'>http://stackoverflow.com/help/how-to-ask</a>.",
"Here's our detailed field guide on getting help: <a href='/field-guide/how-do-i-get-help-when-i-get-stuck' target='_blank'>http://freecodecamp.com/field-guide/how-do-i-get-help-when-i-get-stuck</a>.", "Here's our detailed field guide on getting help: <a href='/field-guide/how-do-i-get-help-when-i-get-stuck' target='_blank'>http://freecodecamp.com/field-guide/how-do-i-get-help-when-i-get-stuck</a>.",
"Now you have a clear algorithm to follow when you need help! Let's start coding! Move on to your next challenge." "Now you have a clear algorithm to follow when you need help! Let's start coding! Move on to your next challenge."
@ -284,7 +284,7 @@
"Cualquier momento en el que te atasques o no sepas que hacer, sigue este simple algoritmo (procedimiento): RSAP (Read, Search, Ask, Post). Que en español vendría a ser Lee, Busca, Pregunta, Publica.", "Cualquier momento en el que te atasques o no sepas que hacer, sigue este simple algoritmo (procedimiento): RSAP (Read, Search, Ask, Post). Que en español vendría a ser Lee, Busca, Pregunta, Publica.",
"Primero, Lee - Lee la documentación o el mensaje de error. El punto fuerte de un buen programador es la habilidad de interpretar y seguir instrucciones.", "Primero, Lee - Lee la documentación o el mensaje de error. El punto fuerte de un buen programador es la habilidad de interpretar y seguir instrucciones.",
"Luego, Busca - Busca en Google. Buenas búsquedas o queries requieren bastante práctica. Cuando búsques en Google, idealmente tienes que incluir el lenguaje o framework que estés usando. También tendrás que limitar los resultados de búsqueda a un periodo reciente.", "Luego, Busca - Busca en Google. Buenas búsquedas o queries requieren bastante práctica. Cuando búsques en Google, idealmente tienes que incluir el lenguaje o framework que estés usando. También tendrás que limitar los resultados de búsqueda a un periodo reciente.",
"Ahora, en caso no hayas encontrado la respuesta a tu pregunta, Pregunta - Pregunta a tus amigos. En caso estes en problemas, puedes preguntar a otros campers. Tenemos una sala de chat especificamente para obtener ayuda sobre las herramientas que utilizamos en los desafíos de Free Code Camp. Ingresa a <a href='https://freecode.slack.com/messages/help/' target='_blank'>https://freecode.slack.com/messages/help/</a>. Mantén este chat abierto mientras trabajas en los desafíos subsiguientes.", "Ahora, en caso no hayas encontrado la respuesta a tu pregunta, Pregunta - Pregunta a tus amigos. En caso estes en problemas, puedes preguntar a otros campers. Tenemos una sala de chat especificamente para obtener ayuda sobre las herramientas que utilizamos en los desafíos de Free Code Camp. Ingresa a <a href='https://freecodecamp.slack.com/messages/help/' target='_blank'>https://freecodecamp.slack.com/messages/help/</a>. Mantén este chat abierto mientras trabajas en los desafíos subsiguientes.",
"Finalmente, Publica - Publica tu pregunta en Stack Overflow. Antes de hacer esto lee la guía de Stack Overflow para publicar buenas preguntas: <a href='http://stackoverflow.com/help/how-to-ask'>http://stackoverflow.com/help/how-to-ask</a>. Tendrás que hacerlo en inglés, en caso no sepas como, pide que te ayuden a traducir tu pregunta en el canal #espanol de Slack.", "Finalmente, Publica - Publica tu pregunta en Stack Overflow. Antes de hacer esto lee la guía de Stack Overflow para publicar buenas preguntas: <a href='http://stackoverflow.com/help/how-to-ask'>http://stackoverflow.com/help/how-to-ask</a>. Tendrás que hacerlo en inglés, en caso no sepas como, pide que te ayuden a traducir tu pregunta en el canal #espanol de Slack.",
"Aquí está nuestra guia detallada en como obtener ayuda: <a href='/field-guide/how-do-i-get-help-when-i-get-stuck' target='_blank'>http://freecodecamp.com/field-guide/how-do-i-get-help-when-i-get-stuck</a>.", "Aquí está nuestra guia detallada en como obtener ayuda: <a href='/field-guide/how-do-i-get-help-when-i-get-stuck' target='_blank'>http://freecodecamp.com/field-guide/how-do-i-get-help-when-i-get-stuck</a>.",
"Ahora que tienes en claro el procedimiento a seguir cuando necesites ayuda. ¡Empecémos a programar! Continua con el siguiente desafío." "Ahora que tienes en claro el procedimiento a seguir cuando necesites ayuda. ¡Empecémos a programar! Continua con el siguiente desafío."

17
seed_data/field-guides.json
View File

@ -225,7 +225,7 @@
" </p>", " </p>",
" <p class='large-p'>This is the most time-efficient way to handle being stuck, and it's the most respectful of other people's time, too.</p>", " <p class='large-p'>This is the most time-efficient way to handle being stuck, and it's the most respectful of other people's time, too.</p>",
" <p class='large-p'>Most of the time, you'll solve your problem after just one or two steps of this algorithm.</p>", " <p class='large-p'>Most of the time, you'll solve your problem after just one or two steps of this algorithm.</p>",
" <p class='large-p'>We have a special chat room just for getting help: <a href='https://freecode.slack.com/messages/help/' target='_blank'>https://freecode.slack.com/messages/help/</a></p>", " <p class='large-p'>We have a special chat room just for getting help: <a href='https://freecodecamp.slack.com/messages/help/' target='_blank'>https://freecodecamp.slack.com/messages/help/</a></p>",
" <p class='large-p'>Also, if you need to post on Stack Overflow, be sure to read their guide to asking good questions: <a href='http://stackoverflow.com/help/how-to-ask' target='_blank'>http://stackoverflow.com/help/how-to-ask</a>.</p>", " <p class='large-p'>Also, if you need to post on Stack Overflow, be sure to read their guide to asking good questions: <a href='http://stackoverflow.com/help/how-to-ask' target='_blank'>http://stackoverflow.com/help/how-to-ask</a>.</p>",
" <p class='large-p'>Learning to code is hard. But it's a lot easier if you ask for help when you need it!</p>", " <p class='large-p'>Learning to code is hard. But it's a lot easier if you ask for help when you need it!</p>",
"</div>" "</div>"
@ -309,6 +309,7 @@
" <li><a href='https://www.facebook.com/groups/free.code.camp.austin/' target='_blank'>Austin</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.austin/' target='_blank'>Austin</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.baltimore.md/' target='_blank'>Baltimore</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.baltimore.md/' target='_blank'>Baltimore</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.bandung/' target='_blank'>Bandung</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.bandung/' target='_blank'>Bandung</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.belem/' target='_blank'>Belem</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.belgrade/' target='_blank'>Belgrade</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.belgrade/' target='_blank'>Belgrade</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.bellingham/' target='_blank'>Bellingham</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.bellingham/' target='_blank'>Bellingham</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.bengaluru/' target='_blank'>Bengaluru</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.bengaluru/' target='_blank'>Bengaluru</a></li>",
@ -316,6 +317,7 @@
" <li><a href='https://www.facebook.com/groups/free.code.camp.berlin/' target='_blank'>Berlin</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.berlin/' target='_blank'>Berlin</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.bhaktapur/' target='_blank'>Bhaktapur</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.bhaktapur/' target='_blank'>Bhaktapur</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.bijeljina/' target='_blank'>Bijeljina</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.bijeljina/' target='_blank'>Bijeljina</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.oxford.al/' target='_blank'>Birmingham, Alabama</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.bismarck.north.dakota/' target='_blank'>Bismarck, ND</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.bismarck.north.dakota/' target='_blank'>Bismarck, ND</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.bogota/' target='_blank'>Bogota</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.bogota/' target='_blank'>Bogota</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.boston/' target='_blank'>Boston</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.boston/' target='_blank'>Boston</a></li>",
@ -351,6 +353,7 @@
" <li><a href='https://www.facebook.com/groups/free.code.camp.florianopolis/' target='_blank'>Florianopolis</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.florianopolis/' target='_blank'>Florianopolis</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.dallas/' target='_blank'>Fort Worth</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.dallas/' target='_blank'>Fort Worth</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.frankfurt.main/' target='_blank'>Frankfurt</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.frankfurt.main/' target='_blank'>Frankfurt</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.freehold/' target='_blank'>Freehold</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.geneva/' target='_blank'>Geneva</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.geneva/' target='_blank'>Geneva</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.Glendora.California/' target='_blank'>Glendora</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.Glendora.California/' target='_blank'>Glendora</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.jakarta/' target='_blank'>Jakarta</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.jakarta/' target='_blank'>Jakarta</a></li>",
@ -382,6 +385,7 @@
" <li><a href='https://www.facebook.com/groups/free.code.camp.limassol/' target='_blank'>Limassol</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.limassol/' target='_blank'>Limassol</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.london/' target='_blank'>London</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.london/' target='_blank'>London</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.los.angeles/' target='_blank'>Los Angeles</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.los.angeles/' target='_blank'>Los Angeles</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.lubbock/' target='_blank'>Lubbock</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.manila/' target='_blank'>Manila</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.manila/' target='_blank'>Manila</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.miami/' target='_blank'>Miami</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.miami/' target='_blank'>Miami</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.minneapolis/' target='_blank'>Minneapolis</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.minneapolis/' target='_blank'>Minneapolis</a></li>",
@ -392,6 +396,7 @@
" <li><a href='https://www.facebook.com/groups/free.code.camp.mysore/' target='_blank'>Mysore</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.mysore/' target='_blank'>Mysore</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.nairobi/' target='_blank'>Nairobi</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.nairobi/' target='_blank'>Nairobi</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.nashville/' target='_blank'>Nashville</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.nashville/' target='_blank'>Nashville</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.new.haven/' target='_blank'>New Haven</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.neworleans/' target='_blank'>New Orleans</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.neworleans/' target='_blank'>New Orleans</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.new.york.city/' target='_blank'>New York City</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.new.york.city/' target='_blank'>New York City</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.berkeley/' target='_blank'>Oakland</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.berkeley/' target='_blank'>Oakland</a></li>",
@ -399,7 +404,6 @@
" <li><a href='https://www.facebook.com/groups/free.code.camp.omaha/' target='_blank'>Omaha</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.omaha/' target='_blank'>Omaha</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.orange.county/' target='_blank'>Orange County</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.orange.county/' target='_blank'>Orange County</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.orlando.fl/' target='_blank'>Orlando</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.orlando.fl/' target='_blank'>Orlando</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.oxford.al/' target='_blank'>Oxford, Alabama</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.your.apucarana.parana/' target='_blank'>Parana</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.your.apucarana.parana/' target='_blank'>Parana</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.paris/' target='_blank'>Paris</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.paris/' target='_blank'>Paris</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.philadelphia/' target='_blank'>Philadelphia</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.philadelphia/' target='_blank'>Philadelphia</a></li>",
@ -439,6 +443,7 @@
" <li><a href='https://www.facebook.com/groups/free.code.camp.vlc/' target='_blank'>Valencia</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.vlc/' target='_blank'>Valencia</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.vancouver.bc.canada/' target='_blank'>Vancouver</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.vancouver.bc.canada/' target='_blank'>Vancouver</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.washington.dc/' target='_blank'>Washington, DC</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.washington.dc/' target='_blank'>Washington, DC</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.winnipeg/' target='_blank'>Winnipeg</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.zurich/' target='_blank'>Zurich</a></li>", " <li><a href='https://www.facebook.com/groups/free.code.camp.zurich/' target='_blank'>Zurich</a></li>",
" </ol>", " </ol>",
" </h4>", " </h4>",
@ -592,7 +597,7 @@
" <h3>Choosing your first Nonprofit Project</h3>", " <h3>Choosing your first Nonprofit Project</h3>",
" <p class='large-p'>We've categorized all the nonprofit projects by estimated time investment per camper: 100 hours, 200 hours, and 300 hours. These are only rough estimates.</p>", " <p class='large-p'>We've categorized all the nonprofit projects by estimated time investment per camper: 100 hours, 200 hours, and 300 hours. These are only rough estimates.</p>",
" <p class='large-p'>Example: if you and the camper you're paired up with (your pair) each stated you could work 20 hours per week. If the project is a 100 hour per camper project, you should be able to complete it in about 5 weeks.</p>", " <p class='large-p'>Example: if you and the camper you're paired up with (your pair) each stated you could work 20 hours per week. If the project is a 100 hour per camper project, you should be able to complete it in about 5 weeks.</p>",
" <p class='large-p'>Our team of nonprofit project camp counselors will match you and your pair based on:</p>", " <p class='large-p'>Our Nonprofit Project team will match you and your pair based on:</p>",
" <p class='large-p'>", " <p class='large-p'>",
" <ol>", " <ol>",
" <li>Your estimated time commitment (10, 20 or 40 hours per week)</li>", " <li>Your estimated time commitment (10, 20 or 40 hours per week)</li>",
@ -625,7 +630,7 @@
" <li>and establish deadlines based on your weekly time commitment, and how long you think each task will take.</li>", " <li>and establish deadlines based on your weekly time commitment, and how long you think each task will take.</li>",
" </ul>", " </ul>",
" </p>", " </p>",
" <p class='large-p'>It's notoriously difficult to estimate how long building software projects will take, so feel free to ask camp counselors for help.</p>", " <p class='large-p'>It's notoriously difficult to estimate how long building software projects will take, so feel free to ask our volunteer team for help.</p>",
" <p class='large-p'>You'll continue to meet with your stakeholder at least twice a month in your project's Slack channel.</p>", " <p class='large-p'>You'll continue to meet with your stakeholder at least twice a month in your project's Slack channel.</p>",
" <p class='large-p'>You should also ask questions in your project's Slack channel as they come up throughout the week, and your stakeholder can answer them asynchronously.</p>", " <p class='large-p'>You should also ask questions in your project's Slack channel as they come up throughout the week, and your stakeholder can answer them asynchronously.</p>",
" <p class='large-p'>Getting \"blocked\" on a task can take away your sense of forward momentum, so be sure to proactively seek answers to any ambiguities you encounter.</p>", " <p class='large-p'>Getting \"blocked\" on a task can take away your sense of forward momentum, so be sure to proactively seek answers to any ambiguities you encounter.</p>",
@ -648,7 +653,7 @@
" <p class='large-p'>Once you complete a nonprofit project, your obligation to its stakeholder is finished. You goal is to leave behind a well documented solution that can be easily maintained by a contract JavaScript developer (or even a less-technical \"super user\").</p>", " <p class='large-p'>Once you complete a nonprofit project, your obligation to its stakeholder is finished. You goal is to leave behind a well documented solution that can be easily maintained by a contract JavaScript developer (or even a less-technical \"super user\").</p>",
" <p class='large-p'>While you will no longer need to help with feature development, we encourage you to consider helping your stakeholder with occasional patches down the road. After all, this project will be an important piece of your portfolio, and you'll want it to remain in good shape for curious future employers.</p>", " <p class='large-p'>While you will no longer need to help with feature development, we encourage you to consider helping your stakeholder with occasional patches down the road. After all, this project will be an important piece of your portfolio, and you'll want it to remain in good shape for curious future employers.</p>",
" <h3>Pledging to finish the project</h3>", " <h3>Pledging to finish the project</h3>",
" <p class='large-p'>Your nonprofit stakeholder, your pair, and the volunteer camp counselor team are all counting on you to finish your nonprofit project. If you walk away from an unfinished nonprofit project, you'll become ineligible to ever be assigned another one.</p>", " <p class='large-p'>Your nonprofit stakeholder, your pair, and our volunteer team are all counting on you to finish your nonprofit project. If you walk away from an unfinished nonprofit project, you'll become ineligible to ever be assigned another one.</p>",
" <p class='large-p'>To confirm that you understand the seriousness of this commitment, we require that all campers &thinsp;<a href=\"http://goo.gl/forms/ZMn96z2QqY\">sign this pledge &thinsp;</a>before starting on their nonprofit projects.</p>", " <p class='large-p'>To confirm that you understand the seriousness of this commitment, we require that all campers &thinsp;<a href=\"http://goo.gl/forms/ZMn96z2QqY\">sign this pledge &thinsp;</a>before starting on their nonprofit projects.</p>",
" <p class='large-p'>There will likely be times of confusion or frustration. This is normal in software development. The most important thing is that you do not give up and instead persevere through these setbacks. As Steve Jobs famously said, \"Real artists ship.\" And you are going to ship one successful nonprofit project after another until you feel ready to take the next step in your promising career.</p>", " <p class='large-p'>There will likely be times of confusion or frustration. This is normal in software development. The most important thing is that you do not give up and instead persevere through these setbacks. As Steve Jobs famously said, \"Real artists ship.\" And you are going to ship one successful nonprofit project after another until you feel ready to take the next step in your promising career.</p>",
"</div>" "</div>"
@ -678,7 +683,7 @@
" <li>Fork the Free Code Camp repository and <code>open seed_data/bonfires.json</code> to become familiar with the format of our bonfires.</li>", " <li>Fork the Free Code Camp repository and <code>open seed_data/bonfires.json</code> to become familiar with the format of our bonfires.</li>",
" <li>Regardless of your bonfire's difficulty, put it as the last bonfire in the JSON file. Change one of the numbers in the ID to ensure that your bonfire has a unique ID.</li>", " <li>Regardless of your bonfire's difficulty, put it as the last bonfire in the JSON file. Change one of the numbers in the ID to ensure that your bonfire has a unique ID.</li>",
" <li>In the terminal, run <code>node seed_data/seed.js</code>. Run <code>gulp</code>. You should be able to navigate to your new bonfire in the challenge map. Whenever you make a change to bonfire.json, you'll need to reseed in order to see these changes in the browser.</li>", " <li>In the terminal, run <code>node seed_data/seed.js</code>. Run <code>gulp</code>. You should be able to navigate to your new bonfire in the challenge map. Whenever you make a change to bonfire.json, you'll need to reseed in order to see these changes in the browser.</li>",
" <li>Solved your own Bonfire. Confirmed that your tests work as expected and that your instructions are sufficiently clear.</li>", " <li>Solve your own Bonfire. Confirm that your tests work as expected and that your instructions are sufficiently clear.</li>",
" <li>Submit a pull request to Free Code Camp's Staging branch and in the pull request body, link to a gist that has your algorithmic solution.</li>", " <li>Submit a pull request to Free Code Camp's Staging branch and in the pull request body, link to a gist that has your algorithmic solution.</li>",
" </ol>", " </ol>",
" </p>", " </p>",

10
views/challengeMap/show.jade
View File

@ -90,19 +90,19 @@ block content
.modal-body .modal-body
.spacer .spacer
h4.text-left 我們正在研究將Free Code Camp翻成中文! &thinsp; h4.text-left 我們正在研究將Free Code Camp翻成中文! &thinsp;
a(href='https://freecode.slack.com/messages/chinese') 請按這裡來參觀我們的中文聊天室 a(href='https://freecodecamp.slack.com/messages/chinese') 請按這裡來參觀我們的中文聊天室
| . | .
h4.text-left Estamos trabajando a traducir Free Code Camp en español! &thinsp; h4.text-left Estamos trabajando a traducir Free Code Camp en español! &thinsp;
a(href='https://freecode.slack.com/messages/espanol') Haz clic aquí para ir a nuestra sala de chat español a(href='https://freecodecamp.slack.com/messages/espanol') Haz clic aquí para ir a nuestra sala de chat español
| . | .
h4.text-left Nós estamos trabalhando para traduzir o Free Code Camp para o Português! &thinsp; h4.text-left Nós estamos trabalhando para traduzir o Free Code Camp para o Português! &thinsp;
a(href='https://freecode.slack.com/messages/portugues') Clique aqui para visitar nossa sala de bate-papo em Português a(href='https://freecodecamp.slack.com/messages/portugues') Clique aqui para visitar nossa sala de bate-papo em Português
| . | .
h4.text-left Nous travaillons pour traduire Free Code Camp en Français! &thinsp; h4.text-left Nous travaillons pour traduire Free Code Camp en Français! &thinsp;
a(href='https://freecode.slack.com/messages/francais') Cliquez ici pour visiter notre salle de chat Français a(href='https://freecodecamp.slack.com/messages/francais') Cliquez ici pour visiter notre salle de chat Français
| . | .
h4.text-left Мы работаем над переводом Free Code Camp на русский язык! &thinsp; h4.text-left Мы работаем над переводом Free Code Camp на русский язык! &thinsp;
a(href='https://freecode.slack.com/messages/russian') Нажмите здесь, чтобы посетить русский чат a(href='https://freecodecamp.slack.com/messages/russian') Нажмите здесь, чтобы посетить русский чат
| . | .
a.btn.btn-lg.btn-primary.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Thanks for the heads-up! a.btn.btn-lg.btn-primary.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Thanks for the heads-up!
script. script.

7
views/nonprofits/directory.jade
View File

@ -16,5 +16,8 @@ block content
h2.negative-15= nonprofit.name h2.negative-15= nonprofit.name
h3.negative-15= nonprofit.whatDoesNonprofitDo h3.negative-15= nonprofit.whatDoesNonprofitDo
a.text-center.btn.btn-primary.btn-lg(href='/nonprofits/' + nonprofit.name.toLowerCase().replace(/\s/g, '-')) Read more a.text-center.btn.btn-primary.btn-lg(href='/nonprofits/' + nonprofit.name.toLowerCase().replace(/\s/g, '-')) Read more
.spacer
.spacer .col-xs-12.col-sm-8.col-sm-offset-2
if (!user)
a.btn.btn-cta.signup-btn.btn-block(href="/nonprofits-form") My nonprofit needs coding help
.spacer

17
views/nonprofits/show.jade
View File

@ -55,20 +55,21 @@ block content
for assignedCamper in assignedCampers for assignedCamper in assignedCampers
a(href='/' + assignedCamper.username class="interested-camper-image") a(href='/' + assignedCamper.username class="interested-camper-image")
img.profile-picture.float-right(src=assignedCamper.picture) img.profile-picture.float-right(src=assignedCamper.picture)
.spacer
if (!buttonActive) if (!buttonActive)
.col-xs-12.col-sm-8.col-sm-offset-2 .col-xs-12.col-sm-8.col-sm-offset-2
.text-center .text-center
a.btn.btn-primary.btn-big.btn-block.disabled(href='/nonprofits/interested-in-nonprofit/#{dashedName}') I'm interested in building this project * if !user
p * Complete all our Bonfires, Ziplines, and Basejumps to unlock this. a.btn.btn-cta.signup-btn.btn-block(href="/login") Start learning to code (it's free)
.button-spacer
else
a.btn.btn-primary.btn-big.btn-block.disabled(href='/nonprofits/interested-in-nonprofit/#{dashedName}') I'm interested in building this project *
p * Complete all our Bonfires, Ziplines, and Basejumps to unlock this.
a.btn.btn-info.btn-big.btn-block(href='/nonprofits/directory') Show all Nonprofit Projects a.btn.btn-info.btn-big.btn-block(href='/nonprofits/directory') Show all Nonprofit Projects
.spacer
if (buttonActive) if (buttonActive)
.col-xs-12.col-sm-8.col-sm-offset-2 .col-xs-12.col-sm-8.col-sm-offset-2
.text-center .text-center
a.btn.btn-primary.btn-big.btn-block(href='/nonprofits/interested-in-nonprofit/#{dashedName}') I'm interested in building this project a.btn.btn-primary.btn-big.btn-block(href='/nonprofits/interested-in-nonprofit/#{dashedName}') I'm interested in building this project
.button-spacer
a.btn.btn-info.btn-big.btn-block(href='/nonprofits/directory') Show all Nonprofit Projects a.btn.btn-info.btn-big.btn-block(href='/nonprofits/directory') Show all Nonprofit Projects
.row .spacer
.col-xs-12.text-center
if !user
a.btn.btn-cta.signup-btn.btn-primary(href="/login") Start learning to code (it's free)
.spacer

43
views/partials/field-guide.jade
View File

@ -1,43 +0,0 @@
h3
ol#fieldGuideList
script(src='/js/lib/ramda/ramda.min.js')
script.
var getLinkedName = function getLinkedName(name) {
// ensure name is a string
name = name + '';
return name.toLowerCase().replace(/\s/g, '-').replace(/\?/g, '');
}
$.ajax({
url: '/field-guide/getFieldGuideList',
type: 'GET'
})
.success(
function(data) {
var docfrag = document.createDocumentFragment();
for (var i = 0; i < data.fieldGuideList.length; i++) {
var div = document.createElement("div");
// strike through field guides previously read
var linkedName = getLinkedName(data.fieldGuideList[i].name);
if (data.completedFieldGuides.indexOf(data.fieldGuideIds[i]) > -1) {
$(div).html("<div class='row'>" +
"<div class='hidden-xs col-sm-3 col-md-2 text-primary ion-checkmark-circled padded-ionic-icon text-center'></div>" +
"<div class='col-xs-12 col-sm-6 col-md-8'>" +
"<li class='faded'><a href='/field-guide/" + linkedName + "'>" + data.fieldGuideList[i].name + "</a></li>" +
"</div>" +
"<div class='col-sm-3 col-md-2'></div>" +
"</div>" +
"</div>");
} else {
$(div).html("<div class='row'>" +
"<div class='hidden-xs col-sm-3 col-md-2'></div>" +
"<div class='col-xs-12 col-sm-6 col-md-8'>" +
"<li><a href='/field-guide/" + linkedName + "'>" + data.fieldGuideList[i].name + "</a></li>" +
"</div>" +
"<div class='col-sm-3 col-md-2'></div>" +
"</div>" +
"</div>");
}
docfrag.appendChild(div);
};
$('#fieldGuideList').append(docfrag);
});

13
views/partials/github.jade
View File

@ -1,13 +0,0 @@
#github
script.
(function() {
$.ajax({
url: '/api/github',
type: 'GET'
}).done(
function(data) {
var github = document.createElement('div');
$(github).html('<h3>' + data.issues + ' GitHub issues are open. <a href="https://github.com/freecodecamp/freecodecamp/issues">(create one)</a></h3><h3>' + data.pulls + ' pull requests are open. <a href="https://github.com/freecodecamp/freecodecamp/pulls">(create one)</a></div></div>').prependTo($('#github'))
}
);
})();

39
views/partials/nonprofit-application-progress-bar.jade
View File

@ -1,39 +0,0 @@
.spacer
.progress
.progress-bar(role='progressbar', aria-valuenow= (step * 10), aria-valuemin='0', aria-valuemax='100', style="width: #{step * 10}%;")
span.sr-only= step * 10
| % Complete
h3.gray-text.text-center Step #{step} of 10
script.
$('#story-url').on('keypress', function (e) {
if (e.which === 13 || e === 13) {
$('#preliminary-story-submit').click();
}
});
var preliminaryStorySubmit = function preliminaryStorySubmit() {
var storyURL = $('#story-url').val();
$('#preliminary-story-submit').attr('disabled', 'disabled');
$.post('/stories/preliminary',
{
data: {
url: storyURL
}
})
.fail(function (xhr, textStatus, errorThrown) {
$('#preliminary-story-submit').attr('disabled', false);
})
.done(function (data, textStatus, xhr) {
if (data.alreadyPosted) {
window.location = data.storyURL;
} else {
window.location = '/stories/submit/new-story?url=' +
encodeURIComponent(data.storyURL) +
'&title=' + encodeURIComponent(data.storyTitle) +
'&image=' + encodeURIComponent(data.storyImage) +
'&description=' + encodeURIComponent(data.storyMetaDescription);
}
});
}
$('#preliminary-story-submit').on('click', preliminaryStorySubmit);

24
views/partials/nonprofits.jade
View File

@ -1,24 +0,0 @@
h3
ol#nonprofitsList
script(src='/js/lib/ramda/ramda.min.js')
script.
var getLinkedName = function getLinkedName(name) {
// ensure name is a string
name = name + '';
return name.toLowerCase().replace(/\s/g, '-');
}
$.ajax({
url: '/nonprofits/getNonprofitList',
type: 'GET'
})
.success(
function(data) {
var docfrag = document.createDocumentFragment();
for (var i = 0; i < data.nonprofitsList.length; i++) {
var li = document.createElement("li");
var linkedName = getLinkedName(data.nonprofitsList[i].name);
$(li).html("<a href='/nonprofits/" + linkedName + "'>" + data.nonprofitsList[i].name + "</a></li>");
docfrag.appendChild(li);
};
$('#nonprofitsList').append(docfrag);
});

2
views/resources/nonprofits.jade
View File

@ -53,3 +53,5 @@ block content
h2.black-text ...and other tools h2.black-text ...and other tools
.big-break .big-break
a.btn.btn-cta.signup-btn.btn-block(href="/nonprofits-form") My nonprofit needs coding help a.btn.btn-cta.signup-btn.btn-block(href="/nonprofits-form") My nonprofit needs coding help
.button-spacer
a.btn.btn-cta.btn-success.btn-block(href="/nonprofits/directory") Browse our directory of nonprofit we've helped