hex code, because 16 times 16 is 256. In practice, most developers use hex code since it's faster to say out loud and to type.",
- "We'll use 6-digit hex code in all our challenges going forward, but it's good to be aware of this rgb notation."
- ],
- "tests": [
- "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');",
- "expect($('h2')).to.have.class('red-text');"
- ],
- "challengeSeed": [
- "",
- "",
- "hello world
", - "cat photo app
", - "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
" - ], - "challengeType": 0 - }, - { - "_id": "bad87fee1348bd9aedf08810", - "name": "Use Hex Codes for Precise Colors", - "difficulty": "1.15", - "description": [ - "Change the hex code in the \"red-text\" class to hex code for the color red.", - "Hexadecimal (hex) code is a popular way of specifying color in CSS.",
- "Hex code is called \"hex\" because each digit has 16 possible values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, and f",
- "The six hex code correspond to red-red-green-green-blue-blue.",
- "You can change these six values to make more than 16 million colors!",
- "The higher the value in a field, the more intense its color. For example, #000000 is black, #ffffff is white, and #00ff00 is bright green. You can also get less intense colors by using values lower than f. For example, #00f000 with the second green digit set to 0 is a light green, and #00f900 is a slightly brighter green",
- "Now figure out how to make the bright green in the \"red-text\" class into a bright red."
- ],
- "tests": [
- "expect($('h2')).to.have.css('color', '#ff0000');",
- "expect($('h2')).to.have.class('red-text');"
- ],
- "challengeSeed": [
- "",
- "",
- "hello world
", - "cat photo app
", - "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
" - ], - "challengeType": 0 - }, - { - "_id": "bad87fee1348bd9bedf08810", - "name": "Use Shortened 3 Digit Hex Codes", - "difficulty": "1.16", - "description": [ - "Change the hex code in the \"red-text\" class to the shortened 3-digit hex code for the color red.", - "You can also shorten the 6-digit color hex code to a 3-digit code. For example,#00ff00 becomes #0f0. This is less precise, but equally effective."
- ],
- "tests": [
- "expect($('h2')).to.have.css('color', '#ff0000');",
- "expect($('h2')).to.have.class('red-text');"
- ],
- "challengeSeed": [
- "",
- "",
- "hello world
", - "cat photo app
", - "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
" - ], - "challengeType": 0 - }, - { - "_id": "bad88fee1348bd9aedf08811", - "name": "Set the Alpha of a Color with rgba", - "difficulty": "1.17", - "description": [ - "Change thered-text class's color rgb value to be red.",
- "Another way to represent color in CSS is with rgb, or red-green-blue notation.",
- "For each of the three colors, you specify a value between 0 and 256.",
- "For example, black is rgb(0, 0, 0), white is rgb(255, 255, 255), bright green is rgb(0, 255, 0). You can also get less intense colors by using values lower than 255. For example, light green is rgb(0, 123, 0).",
- "If you think about it, this is just as precise as using hex code, because 16 times 16 is 256. In practice, most developers use hex code since it's faster to say out loud and to type.",
- "We'll use 6-digit hex code in all our challenges going forward, but it's good to be aware of this rgb notation."
- ],
- "tests": [
- "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');",
- "expect($('h2')).to.have.class('red-text');"
- ],
- "challengeSeed": [
- "",
- "",
- "hello world
",
- "cat photo app
",
- "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08812",
- "name": "Add an Image to your Website",
- "difficulty": "1.18",
- "description": [
- "Use an img element to add the image http://bit.ly/cutegraycat to your website.",
- "You can add images to your website by using the img element.",
- "An example of this would be <img src=\"www.your-image-source.com/your-image.jpg\"/>. Note that in most cases, img elements are self-closing.",
- "Try it with this image: http://bit.ly/cutegraycat."
- ],
- "tests": [
- "expect($('img').attr('src')).to.equal('http://bit.ly/cutegraycat');"
- ],
- "challengeSeed": [
- "",
- "",
- "hello world
",
- "cat photo app
",
- "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9acdf08812",
- "name": "Specify an Image Size",
- "difficulty": "1.19",
- "description": [
- "Create a class called narrow-image and use it to resize the image so that it's only 200 pixels wide",
- "Uh-oh, our image is too big to fit on a mobile phone. As a result, our user will need to scroll horizontally to view the image. But we can fix this by specifying an image size.",
- "CSS has an attribute called width that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the images width.",
- "Create a class called narrow-image and added it to the image element. Change the width to 200 pixels."
- ],
- "tests": [
- "expect($('img')).to.have.class('narrow-image');",
- "expect($('img')).to.have.css('width', '200px')"
- ],
- "challengeSeed": [
- "",
- "hello world
",
- "cat photo app
",
- "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
",
- "![](\"http://bit.ly/cutegraycat\"/)
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9bedf08813",
- "name": "Add a Border Around an Element",
- "difficulty": "1.20",
- "description": [
- "Create a class called \"thick-green-border\" that puts a 5-pixel-wide green border around your cat photo.",
- "CSS Borders have attributes like style, color and width.",
- "We've created an example border around your h1 element. See if you can add a 10-pixel-wide green border around your cat photo."
- ],
- "tests": [
- "expect($('img')).to.have.class('thick-green-border');",
- "expect($('img')).to.have.css('border-color', '#00ff00');",
- "expect($('img')).to.have.css('border-width', '10px');"
- ],
- "challengeSeed": [
- "",
- "hello world
",
- "cat photo app
",
- "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08814",
- "name": "Add Rounded Corners with a Border Radius",
- "difficulty": "1.21",
- "description": [
- "Give your cat photo a border-radius of 10 pixels.",
- "Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called border-radius.",
- "You can specify a border-radius with pixels. This will affect how rounded the corners are. Add this attribute to your thick-green-border class and set it to 10 pixels."
- ],
- "tests": [
- "expect($('img')).to.have.class('thick-green-border');",
- "expect($('img')).to.have.css('border-radius', '10px');"
- ],
- "challengeSeed": [
- "",
- "hello world
",
- "cat photo app
",
- "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08815",
- "name": "Make an Image Circular with a Border Radius",
- "difficulty": "1.22",
- "description": [
- "Give your cat photo a border-radius of 50%.",
- "In addition to pixels, you can also specify a border-radius of a percentage."
- ],
- "tests": [
- "expect($('img')).to.have.css('border-radius', '50%');"
- ],
- "challengeSeed": [
- "",
- "cat photo app
",
- "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08816",
- "name": "Use an Anchor Tag to Link to an External Page",
- "difficulty": "1.23",
- "description": [
- "Create an anchor tag hyperlink that links to freecodecamp.com",
- "hyperlinks link your users to other URLs (web addresses).",
- "All hyperlinks include an href attribute that tells the browser which URL to go to when your user clicks on it.",
- "hyperlinks are also important for web crawlers (like those used by Google to index the internet), which use links not only in determining which page to crawl next, but also to determine the relative importance of a given website.",
- "To create a , use an anchor tag, specify an href and enclose the text you want to appear as the link, like this: <a href=\"http://www.google.com\">This is a link to Google</a>"
- ],
- "tests": [
- "expect((/free(\\s+)?code(\\s+)?camp(\\s+)?/gi).test($('a').text())).to.be.true;",
- "expect($('a').filter(function(index) { return /freecodecamp\\.com/gi.test($('a')[index]); }).length).to.eql(1);"
- ],
- "challengeSeed": [
- "",
- "cat photo app
",
- "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
",
- "",
- "
",
- "This is a link to Google",
- "
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08817",
- "name": "Make Named Anchors using the Hash Symbol",
- "difficulty": "1.24",
- "description": [
- "Use the hash symbol(#) to turn the link at the bottom of your website into a named anchor.",
- "Sometimes you'll want to add an anchor element to your website before you know which URL its href will link to.",
- "This is also handy when you're changing the behavior of your link using jQuery, which we'll learn about later.",
- "Replace your link to freecodecamp.com's href with a hash symbol to turn it into a named anchor."
- ],
- "tests": [
- "expect((/this link leads nowhere/gi).test($('a').text())).to.be.true;",
- "expect($('a').filter(function(index) { return /#/gi.test($('a')[index]); }).length).to.eql(1);"
- ],
- "challengeSeed": [
- "",
- "cat photo app
",
- "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
",
- "",
- "
",
- "This named anchor leads nowhere",
- "
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08820",
- "name": "Turn an Image into a Link",
- "difficulty": "1.25",
- "description": [
- "Wrap the gray cat's image with an anchor tag that leads nowhere.",
- "You can make elements into links by wrapping them in an anchor tag.",
- "Check out the example snow-colored cat's photo. When you hover over it with your cursor, you'll see the finger pointer you usually see when you hover over a link. The photo is now a link.",
- "Wrap your gray cat's photo in an anchor tag",
- "Use the hash symbol as the anchor tag's href."
- ],
- "tests": [
- "expect($('a').filter(function(index) { return /#/gi.test($('a')[index]); }).length).to.eql(2);"
- ],
- "challengeSeed": [
- "",
- "cat photo app
",
- "![](\"http://bit.ly/cutesnowcat\"/)
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08818",
- "name": "Add Alt Text to an image",
- "difficulty": "1.26",
- "description": [
- "Add the alt text \"a photo of a cute gray cat\" to our cat photo",
- "alt text is what browsers will display if they fail to load the image. alt text also helps your blind or visually impaired users understand what your image portrays. Search engines also look at alt text.",
- "In short, every image on your website should have alt text!",
- "You can add alt text right in the image tag, like we've done here with the \"cute white cat\" image."
- ],
- "tests": [
- "expect($('img').filter(function(){ return /cat/gi.test(this.alt) }).length).to.eql(2);"
- ],
- "challengeSeed": [
- "",
- "cat photo app
",
- "![\"a](\"http://bit.ly/cutesnowcat\")
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad88fee1348bd9aedf08825",
- "name": "Adjusting the Padding of an Element",
- "difficulty": "1.27",
- "description": [
- "Change the padding of the green box to match that of the red box.",
- "An element's padding controls the amount of space between an element and its border.",
- "Here, we can see that the green box and the red box and the green box are nested within the yellow box. Note that the red box has more padding than the green box.",
- "When you increase the green box's padding, it will increase the distance between the word \"padding\" and the border around the text."
- ],
- "tests": [
- "expect($('.green-box')).to.have.css('padding', '20px')"
- ],
- "challengeSeed": [
- "",
- "margin
",
- "",
- "",
- " padding
",
- " padding
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08822",
- "name": "Adjust the Margin of an Element",
- "difficulty": "1.28",
- "description": [
- "Change the margin of the green box to match that of the red box.",
- "An element's margin controls the amount of space between an element's border and surrounding elements.",
- "Here, we can see that the green box and the red box and the green box are nested within the yellow box. Note that the red box has more margin than the green box, making it appear smaller.",
- "When you increase the green box's padding, it will increase the distance between its border and surrounding elements."
- ],
- "tests": [
- "expect($('.green-box')).to.have.css('margin', '20px')"
- ],
- "challengeSeed": [
- "",
- "margin
",
- "",
- "",
- " padding
",
- " padding
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08823",
- "name": "Add a Negative Margin to an Element",
- "difficulty": "1.29",
- "description": [
- "Change the margin of the green box to a negative value, so it fills the entire horizontal width of the blue box.",
- "An element's margin controls the amount of space between an element's border and surrounding elements.",
- "If you set an element's margin 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."
- ],
- "tests": [
- "expect($('.green-box')).to.have.css('margin', '-15px')"
- ],
- "challengeSeed": [
- "",
- "",
- "",
- " padding
",
- " padding
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08824",
- "name": "Add Different Padding to Each Side of an Element TEST",
- "difficulty": "1.30",
- "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.",
- "Sometimes you will want to customize an element so that it has different padding on each of its sides.",
- "CSS allows you to control the padding of an element on all four sides with padding-top, padding-right, padding-bottom, and padding-left attributes."
- ],
- "tests": [
- "expect($('.green-box')).to.have.css('padding-bottom', '20px')",
- "expect($('.green-box')).to.have.css('padding-left', '40px')"
- ],
- "challengeSeed": [
- "",
- "margin
",
- "",
- "",
- " padding
",
- " padding
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1248bd9aedf08824",
- "name": "Add Different a Margin to Each Side of an Element TEST",
- "difficulty": "1.31",
- "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.",
- "Sometimes you will want to customize an element so that it has a different margin on each of its sides.",
- "CSS allows you to control the margin of an element on all four sides with margin-top, margin-right, margin-bottom, and margin-left attributes."
- ],
- "tests": [
- "expect($('.green-box')).to.have.css('margin-bottom', '20px')",
- "expect($('.green-box')).to.have.css('margin-left', '40px')"
- ],
- "challengeSeed": [
- "",
- "margin
",
- "",
- "",
- " padding
",
- " padding
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08826",
- "name": "Use Clockwise Notation to Specify an Element's Padding",
- "difficulty": "1.32",
- "description": [
- "Use Clockwise Notation to give an element padding 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 padding-top, padding-right, padding-bottom, and padding-left attributes, you can specify them all in one line, like this: padding: 10px 20px 10px 20px;.",
- "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.",
- "You can also use this notation for margins!"
- ],
- "tests": [
- "expect($('.green-box')).to.have.css('margin-bottom', '20px')",
- "expect($('.green-box')).to.have.css('margin-left', '40px')"
- ],
- "challengeSeed": [
- "",
- "margin
",
- "",
- "",
- " padding
",
- " padding
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9acde08812",
- "name": "Use Bootstrap for Responsive Images",
- "difficulty": "1.33",
- "description": [
- "Add the img-responsive Bootstrap class to the image.",
- "Specifying a width of 200 pixels on our img element made it fit our phone's screen, but it's not a perfect fit. It would be great if the image could be exactly the width of our phone's screen.",
- "Fortunately, there's a Responsive CSS Framework called written by Twitter called Bootstrap. You can add Bootstrap to any app just by including it with <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/> at the top of your HTML, but we've gone ahead and included it for you here.",
- "Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.",
- "Now all you need to do is add the img-responsive class to your image."
- ],
- "tests": [
- "expect($('img')).to.have.class('img-responsive');"
- ],
- "challengeSeed": [
- "",
- "cat photo app
",
- "",
- "
",
- "This is a link to Google",
- "
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd8acde08812",
- "name": "Center Text with Bootstrap",
- "difficulty": "1.34",
- "description": [
- "Add Bootstrap's text-center class to your h2 element.",
- "Now that we're using Bootstrap, we can center our heading elements (h2) to make them look better. All we need to do is add the class text-center to the h1 and h2 elements.",
- "Note that you can add several classes to the same element by seperating each of them with a space, like this: <h2 class=\"text-red text-center\">your text</h2>."
- ],
- "tests": [
- "expect($('h2')).to.have.class('text-center');"
- ],
- "challengeSeed": [
- "",
- "cat photo app
",
- "",
- "
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348cd8acde08812",
- "name": "Create a Button",
- "difficulty": "1.35",
- "description": [
- "Create a button with the text \"Delete\" using the HTML button element.",
- "HTML has special elements that function like links, but look like buttons. Let's creating a default HTML button."
- ],
- "tests": [
- "expect((/delete/gi).test($('button').text())).to.be.true;"
- ],
- "challengeSeed": [
- "",
- "cat photo app
",
- "",
- "
",
- "",
- "
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348cd8acdf08812",
- "name": "Create a Bootstrap Button",
- "difficulty": "1.36",
- "description": [
- "Apply the Bootstrap's btn class to both of your buttons.",
- "Bootstrap has its own button styles, which look much better than the plain HTML ones."
- ],
- "tests": [
- "expect($('.btn').length).to.eql(2);"
- ],
- "challengeSeed": [
- "",
- "cat photo app
",
- "",
- "
",
- "",
- "
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348cd8acef08812",
- "name": "Create a Block Element Bootstrap Button",
- "difficulty": "1.37",
- "description": [
- "Add Bootstrap's btn-block class to both of your buttons.",
- "Normally, your buttons are only as wide as the text they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.",
- "Note that these buttons still need the btn class."
- ],
- "tests": [
- "expect($('.btn-block').length).to.eql(2);"
- ],
- "challengeSeed": [
- "",
- "cat photo app
",
- "",
- "
",
- "",
- "
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bae87fee1348cd8acef08812",
- "name": "Color a Bootstrap Button with Button Primary",
- "difficulty": "1.38",
- "description": [
- "Add Bootstrap's btn-block class to both of your buttons.",
- "Normally, your buttons are only as wide as the text they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.",
- "Note that these buttons still need the btn class."
- ],
- "tests": [
- "expect($('.btn-block').length).to.eql(2);",
- "expect($('.btn-primary').length).to.eql(2);"
- ],
- "challengeSeed": [
- "",
- "cat photo app
",
- "",
- "
",
- "",
- "
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad88fee1348cd8acef08812",
- "name": "Color a Bootstrap Button with Button Primary",
- "difficulty": "1.39",
- "description": [
- "Add Bootstrap's btn-primary class to both of your buttons.",
- "Bootstrap comes with several pre-defined colors for buttons. The btn-primary class is the main button color you'll use throughout your app.",
- "Note that these buttons still need the btn and btn-block classes."
- ],
- "tests": [
- "expect($('.btn-primary').length).to.eql(2);"
- ],
- "challengeSeed": [
- "",
- "cat photo app
",
- "",
- "
",
- "",
- "
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348ce8acef08812",
- "name": "Warn your Users of a Dangerous Action with the Bootstrap Button Danger Class",
- "difficulty": "1.40",
- "description": [
- "Change the \"Delete\" button from btn-primary to btn-danger.",
- "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 this button still needs the btn and btn-block classes."
- ],
- "tests": [
- "expect($('.btn-danger').length).to.eql(1);"
- ],
- "challengeSeed": [
- "",
- "cat photo app
",
- "",
- "
",
- "",
- "
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad88fee1348ce8acef08812",
- "name": "Use the Bootstrap Grid to Put Two Elements Side By Side",
- "difficulty": "1.41",
- "description": [
- "Put the \"Like\" and \"Delete\" buttons side-by-side by wrapping them in both in a <div class=\"row\"> element and each of them in a <div class=\"row\"> element.",
- "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 div element.",
- "The row class is applied to a div, and the buttons themselves can be nested within it."
- ],
- "tests": [
- "expect($('.row').length).to.eql(2);",
- "expect($('.col-xs-12').length).to.eql(4);"
- ],
- "challengeSeed": [
- "",
- "cat photo app
",
- "",
- "
",
- "",
- " ",
- " ",
- " ",
- " ",
- " ",
- " ",
- "",
- "",
- "
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad89fee1348ce8acef08812",
- "name": "Wrap Side By Side Elements in a Bootstrap Row",
- "difficulty": "1.42",
- "description": [
- "Put the \"Like\" and \"Delete\" buttons side-by-side by wrapping them in both in a <div class=\"row\"> element and each of them in a <div class=\"row\"> element.",
- "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 div element.",
- "The row class is applied to a div, and the buttons themselves can be nested within it."
- ],
- "tests": [
- "expect($('.row').length).to.eql(2);",
- "expect($('.col-xs-6').length).to.eql(4);"
- ],
- "challengeSeed": [
- "",
- "cat photo app
",
- "",
- "
",
- "",
- " ",
- " ",
- " ",
- " ",
- " ",
- " ",
- "",
- "",
- "
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08813",
- "name": "Add Alt Text to an Image TEST",
- "difficulty": "1.43",
- "description": [
- "Add the alt text \"A picture of a gray cat\" to the image.",
- "Alt text 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.",
- "You can add alt text right in the img element like this: <img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/>."
- ],
- "tests": [
- "expect((/cat/gi).test($('img').attr('alt')).to.be.true;"
- ],
- "challengeSeed": [
- "",
- "hello world
",
- "cat photo app
",
- "lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
",
- ""
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08827",
- "name": "Create an Bulleted Unordered List",
- "difficulty": "1.44",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08828",
- "name": "Created a Numbered Ordered List",
- "difficulty": "1.45",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08829",
- "name": "Create a Text Field",
- "difficulty": "1.46",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08830",
- "name": "Use HTML5 to Make a Field Required",
- "difficulty": "1.47",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08831",
- "name": "Use HTML5 to Specify an Input Type",
- "difficulty": "1.49",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08832",
- "name": "Create a Text Area",
- "difficulty": "1.50",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08834",
- "name": "Create a Set of Radio Buttons",
- "difficulty": "1.51",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08835",
- "name": "Create a Set of Checkboxes",
- "difficulty": "1.52",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08836",
- "name": "Create a HTML Form",
- "difficulty": "1.53",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08841",
- "name": "Change the background of element",
- "difficulty": "1.54",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08842",
- "name": "Make an element translucent",
- "difficulty": "1.55",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08844",
- "name": "Add a Drop Shadow",
- "difficulty": "1.56",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08845",
- "name": "Make a Navbar",
- "difficulty": "1.57",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08847",
- "name": "Add a Logo to a Navbar",
- "difficulty": "1.58",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08848",
- "name": "Make a Footer",
- "difficulty": "1.59",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08849",
- "name": "Use Icons as Links",
- "difficulty": "1.60",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08850",
- "name": "Add Hover Effects to Icons",
- "difficulty": "1.61",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08851",
- "name": "Add Depth to a Page with a Well",
- "difficulty": "1.62",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08852",
- "name": "Add an ID to a Button",
- "difficulty": "1.52",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08853",
- "name": "Fire a Modal by Clicking a Button",
- "difficulty": "1.63",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08854",
- "name": "Style a Modal with a Header",
- "difficulty": "1.64",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08855",
- "name": "Style a Modal with a Body",
- "difficulty": "1.65",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08856",
- "name": "Make a Modal Dismissable",
- "difficulty": "1.66",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08857",
- "name": "Create an Accordian Menu",
- "difficulty": "1.67",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08863",
- "name": "Add a Gradient to a Button",
- "difficulty": "1.68",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08864",
- "name": "Adjust the Line Height of Text",
- "difficulty": "1.69",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08866",
- "name": "",
- "difficulty": "1.70",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08867",
- "name": "",
- "difficulty": "1.71",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08868",
- "name": "",
- "difficulty": "1.711",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08869",
- "name": "",
- "difficulty": "1.712",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08870",
- "name": "",
- "difficulty": "1.713",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08871",
- "name": "",
- "difficulty": "1.714",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08872",
- "name": "",
- "difficulty": "1.72",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08873",
- "name": "",
- "difficulty": "1.73",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08874",
- "name": "",
- "difficulty": "1.74",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08875",
- "name": "",
- "difficulty": "1.75",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08876",
- "name": "",
- "difficulty": "1.76",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08877",
- "name": "",
- "difficulty": "1.77",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08878",
- "name": "",
- "difficulty": "1.78",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08879",
- "name": "",
- "difficulty": "1.79",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08880",
- "name": "",
- "difficulty": "1.80",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08881",
- "name": "",
- "difficulty": "1.81",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08882",
- "name": "",
- "difficulty": "1.82",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08883",
- "name": "",
- "difficulty": "1.83",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08884",
- "name": "",
- "difficulty": "1.84",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08885",
- "name": "",
- "difficulty": "1.85",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08886",
- "name": "",
- "difficulty": "1.86",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08887",
- "name": "",
- "difficulty": "1.87",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08888",
- "name": "",
- "difficulty": "1.88",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08889",
- "name": "",
- "difficulty": "1.89",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08890",
- "name": "",
- "difficulty": "1.90",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08891",
- "name": "",
- "difficulty": "1.91",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08892",
- "name": "",
- "difficulty": "1.92",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08893",
- "name": "",
- "difficulty": "1.93",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08894",
- "name": "",
- "difficulty": "1.94",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08895",
- "name": "",
- "difficulty": "1.95",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08896",
- "name": "",
- "difficulty": "1.96",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08897",
- "name": "",
- "difficulty": "1.97",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08898",
- "name": "",
- "difficulty": "1.98",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08899",
- "name": "",
- "difficulty": "1.99",
- "description": [
- "",
- ""
- ],
- "tests": [
- "expect($('h1')).to.have.class('text-center');",
- "expect($('h1')).to.have.text('hello world');"
- ],
- "challengeSeed": [
- "hello world
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bd7123c9c441eddfaeb5bdef",
- "name": "Meet Booleans",
- "difficulty": "9.98",
- "description": [
- "Return true",
- "Some additional directions"
- ],
- "tests": [
- "expect(welcomeToBooleans()).to.be.a(\"boolean\");",
- "expect(welcomeToBooleans()).to.be.true;"
- ],
- "challengeSeed": [
- "function welcomeToBooleans() {\n // Good luck!\n return false;\n}\n\nwelcomeToBooleans();"
- ],
- "challengeType": 1
- },
- {
- "_id": "bd7123c9c441eddfaeb5bdef",
- "name": "Meet Booleans",
- "difficulty": "9.98",
- "description": [
- "Return true",
- "Some additional directions"
- ],
- "tests": [
- "expect(welcomeToBooleans()).to.be.a(\"boolean\");",
- "expect(welcomeToBooleans()).to.be.true;"
- ],
- "challengeSeed": [
- "function welcomeToBooleans() {",
- "// Good luck!",
- "return false;",
- "}",
- "",
- "welcomeToBooleans();"
- ],
- "challengeType": 1
- },
- {
- "_id": "bd7123c9c442eddfaeb5bdef",
- "name": "Define Your Name",
- "difficulty": "9.9801",
- "description": [
- "Set the value of myName to your name by typing your name in quotes.",
- "Currently myName is empty. Type in your name and hit the submit button.",
- "Look at the ourName example if you get stuck."
- ],
- "tests": [
- "expect(myName).to.be.a(\"string\");",
- "expect(myName).length.not.to.be(0);"
- ],
- "challengeSeed": [
- "// ourName = \"Free Code Camp\";",
- "myName = \"\";"
- ],
- "challengeType": 1
- },
- {
- "_id": "bd7123c9c443eddfaeb5bdef",
- "name": "Start Using Variables",
- "difficulty": "9.9802",
- "description": [
- "Now, use the var keyword to create a variable called myName. Set its value to your name.",
- "Variables are used to store values.",
- "Be sure to use lowercase and uppercase letters properly. JavaScript variables are written in camel case. An example of camel case is: camelCase.",
- "Look at the ourName example if you get stuck."
- ],
- "tests": [
- "expect(myName).to.be.a(\"string\");",
- "expect(myName).length.not.to.be(0);"
- ],
- "challengeSeed": [
- "// var ourName = \"Free Code Camp\";",
- ""
- ],
- "challengeType": 1
- },
- {
- "_id": "bd7123c9c444eddfaeb5bdef",
- "name": "Define Your First and Last Name",
- "difficulty": "9.9803",
- "description": [
- "Now, use the var keyword to create a variable called myFirstName and set its value to your first name. Then set a variable called myLastName to your last name.",
- "Variables are used to store values.",
- "Be sure to use lowercase and uppercase letters properly. JavaScript variables are written in lower camel case. An example of lower camel case is: lowerCamelCase.",
- "Look at the ourFirstName and ourLastName examples if you get stuck."
- ],
- "tests": [
- "expect(myFirstName).to.be.a(\"string\");",
- "expect(myFirstName).length.not.to.be(0);",
- "expect(myLastName).to.be.a(\"string\");",
- "expect(myLastName).length.not.to.be(0);"
- ],
- "challengeSeed": [
- "// var ourFirstName = \"Free\";",
- "// var ourLastName = \"Code Camp\";",
- "",
- ""
- ],
- "challengeType": 1
- },
- {
- "_id": "bd7123c9c445eddfaeb5bdef",
- "name": "Combine Two Strings into One String",
- "difficulty": "9.9804",
- "description": [
- "Make a variable called myName by adding the string of your first name to the string of your last name.",
- "Strings can be combined in a process called concatenation.",
- "Be sure to include a space at the end of your first string. Otherwise the two strings will not have a space between them.",
- "Be sure to use lowercase and uppercase letters properly. JavaScript variables are written in lower camel case. An example of lower camel case is: lowerCamelCase.",
- "Look at the ourName example if you get stuck."
- ],
- "tests": [
- "expect(myName).to.be.a(\"string\");",
- "expect(myName).length.not.to.be(0);",
- "expect((/\\s+/).test(myName)).to.be.true;"
- ],
- "challengeSeed": [
- "// var ourName = \"Free \" + \"Code Camp\";",
- "",
- ""
- ],
- "challengeType": 1
- },
- {
- "_id": "bd7123c9c446eddfaeb5bdef",
- "name": "Combine Two Variables into One Variable",
- "difficulty": "9.9805",
- "description": [
- "Make the variables myFirstName, myLastName, and myFullName. Concatenate my myFirstName to myLastName to create myFullName.",
- "Strings can be combined in a process called concatenation.",
- "Be sure to include a space at the end of myFirstName. Otherwise myFullName will not contain a space between your first and last names.",
- "Be sure to use lowercase and uppercase letters properly. JavaScript variables are written in lower camel case. An example of lower camel case is: lowerCamelCase.",
- "Look at the ourFullName example if you get stuck."
- ],
- "tests": [
- "expect(myFirstName).to.be.a(\"string\");",
- "expect(myLastName).to.be.a(\"string\");",
- "expect(myFullName).to.be.a(\"string\");",
- "expect(myFullName).length.not.to.be(0);",
- "expect((/\\s+/).test(myFullName)).to.be.true;"
- ],
- "challengeSeed": [
- "// var ourFirstName = \"Free \";",
- "// var ourLastName = \"Code Camp\";",
- "// var ourFullName = ourFirstName + ourLastName;",
- ""
- ],
- "challengeType": 1
- },
- {
- "_id": "bd7123c9c447eddfaeb5bdef",
- "name": "Concatenate Both Variables and Strings into the Same Variable",
- "difficulty": "9.9806",
- "description": [
- "Make the variables myFirstName, myLastName, and myFullName. Concatenate my myFirstName to myLastName to create myFullName, but this time add the space as a separate string, not as part of myFirstName or myLastName.",
- "Strings can be combined in a process called concatenation.",
- "Be sure to use lowercase and uppercase letters properly. JavaScript variables are written in lower camel case. An example of lower camel case is: lowerCamelCase.",
- "Look at the ourFullName example if you get stuck."
- ],
- "tests": [
- "expect(myFirstName).to.be.a(\"string\");",
- "expect(myLastName).to.be.a(\"string\");",
- "expect(myFullName).to.be.a(\"string\");",
- "expect(myFullName).length.not.to.be(0);",
- "expect((/\\s+/).test(myFullName)).to.be.true;"
- ],
- "challengeSeed": [
- "// var ourFirstName = \"Free\";",
- "// var ourLastName = \"Code Camp\";",
- "// var ourFullName = ourFirstName + \" \" + ourLastName;",
- ""
- ],
- "challengeType": 1
- },
- {
- "_id": "bd7123c9c448eddfaeb5bdef",
- "name": "Check the Length Property of a String Variable",
- "difficulty": "9.9809",
- "description": [
- "Use the .length property to count the number of characters in the lastNameLength variable.",
- "For example, if we created a variable var firstName = \"Julie\", we could find out how long the string \"Julie\" is by using the firstName.length property."
- ],
- "tests": [
- "expect(lastNameLength).to.equal(4);"
- ],
- "challengeSeed": [
- "var firstName = \"Madeline\";",
- "",
- "var firstNameLength = firstName.length;",
- "",
- "var lastName = \"Chen\";",
- "",
- "var lastNameLength = lastName;",
- "",
- "",
- "",
- "// You can ignore this.",
- "// We use this to show you the value of your variable in your output box.",
- "// We'll learn about functions soon.",
- "function returnValue(lastNameLength) {",
- " return lastNameLength;",
- "}",
- "returnValue(lastNameLength);"
- ],
- "challengeType": 1
- },
- {
- "_id": "bd7123c9c549eddfaeb5bdef",
- "name": "Use Bracket Notation to Find the First Character in a String",
- "difficulty": "9.9810",
- "description": [
- "Use bracket notation to find the first character in a the firstLetterOfLastName variable.",
- "Bracket notation is a way to get a character at a specific index within a string.",
- "Computers don't start counting at 1 like humans do. They start at 0.",
- "For example, the character at index 0 in the word \"Julie\" is \"J\". So if var firstName = \"Julie\", you can get the value of the first letter of the string by using firstName[0].",
- "Try looking at the firstLetterOfFirstName variable declaration if you get stuck."
- ],
- "tests": [
- "expect(firstLetterOfLastName).to.equal('C');"
- ],
- "challengeSeed": [
- "var firstName = \"Madeline\";",
- "",
- "var firstLetterOfFirstName = firstName[0];",
- "",
- "var lastName = \"Chen\";",
- "",
- "var firstLetterOfLastName = lastName;",
- "",
- "",
- "// You can ignore this.",
- "// We use this to show you the value of your variable in your output box.",
- "// We'll learn about functions soon.",
- "function returnValue(firstLetterOfLastName) {",
- " return firstLetterOfLastName;",
- "}",
- "returnValue(firstLetterOfLastName);"
- ],
- "challengeType": 1
- },
- {
- "_id": "bd7123c9c450eddfaeb5bdef",
- "name": "Use Bracket Notation to Find the Nth Character in a String",
- "difficulty": "9.9811",
- "description": [
- "Use bracket notation to find the 3rd character in the lastName variable.",
- "Bracket notation is a way to get a character at a specific index within a string.",
- "Computers don't start counting at 1 like humans do. They start at 0.",
- "For example, the character at index 0 in the word \"Julie\" is \"J\". So if var firstName = \"Julie\", you can get the value of the first letter of the string by using firstName[0].",
- "Try looking at the secondLetterOfFirstName variable declaration if you get stuck."
- ],
- "tests": [
- "expect(thirdLetterOfLastName).to.equal('e');"
- ],
- "challengeSeed": [
- "var firstName = \"Madeline\";",
- "",
- "var secondLetterOfFirstName = firstName[1];",
- "",
- "var lastName = \"Chen\";",
- "",
- "var thirdLetterOfLastName = lastName;",
- "",
- "",
- "// You can ignore this.",
- "// We use this to show you the value of your variable in your output box.",
- "// We'll learn about functions soon.",
- "function returnValue(thirdLetterOfLastName) {",
- " return thirdLetterOfLastName;",
- "}",
- "returnValue(thirdLetterOfLastName);"
- ],
- "challengeType": 1
- },
- {
- "_id": "bd7123c9c451eddfaeb5bdef",
- "name": "Use Bracket Notation to Find the Last Character in a String",
- "difficulty": "9.9812",
- "description": [
- "Use bracket notation to find the last character in the lastName variable.",
- "For example, the character at index 0 in the word \"Julie\" is \"J\". So if var firstName = \"Julie\", you can get the value of the first letter of the string by using firstName[0].",
- "In order to get the last letter of a string, you can subtract one from the string's length.",
- "For example, if var firstName = \"Julie\", you can get the value of the last letter of the string by using firstName[firstName.length - 1].",
- "Try looking at the lastLetterOfLastName variable declaration if you get stuck."
- ],
- "tests": [
- "expect(lastLetterOfLastName).to.equal('n');"
- ],
- "challengeSeed": [
- "var firstName = \"Madeline\";",
- "",
- "var lastLetterOfFirstName = firstName[firstName.length - 1];",
- "",
- "var lastName = \"Chen\";",
- "",
- "var lastLetterOfLastName = lastName;",
- "",
- "",
- "// You can ignore this.",
- "// We use this to show you the value of your variable in your output box.",
- "// We'll learn about functions soon.",
- "function returnValue(lastLetterOfLastName) {",
- " return lastLetterOfLastName;",
- "}",
- "returnValue(lastLetterOfLastName);"
- ],
- "challengeType": 1
- },
- {
- "_id": "bd7123c9c452eddfaeb5bdef",
- "name": "Use Bracket Notation to Find the Nth to Last Character in a String",
- "difficulty": "9.9813",
- "description": [
- "Use bracket notation to find the second-to-last character in the lastName variable.",
- "For example, the character at index 0 in the word \"Julie\" is \"J\". So if var firstName = \"Julie\", you can get the value of the first letter of the string by using firstName[0].",
- "In order to get the last letter of a string, you can subtract one from the string's length.",
- "For example, if var firstName = \"Julie\", you can get the value of the third-to-last letter of the string by using firstName[firstName.length - 3].",
- "Try looking at the lastLetterOfLastName variable declaration if you get stuck."
- ],
- "tests": [
- "expect(secondToLastLetterOfLastName).to.equal('e');"
- ],
- "challengeSeed": [
- "var firstName = \"Madeline\";",
- "",
- "var thirdToLastLetterOfFirstName = firstName[firstName.length - 2];",
- "",
- "var lastName = \"Chen\";",
- "",
- "var secondToLastLetterOfLastName = lastName;",
- "",
- "",
- "// You can ignore this.",
- "// We use this to show you the value of your variable in your output box.",
- "// We'll learn about functions soon.",
- "function returnValue(secondToLastLetterOfLastName) {",
- " return secondToLastLetterOfLastName;",
- "}",
- "returnValue(secondToLastLetterOfLastName);"
- ],
- "challengeType": 1
- },
- {
- "_id": "bd7123c9c453eddfaeb5bdef",
- "name": "Add two numbers",
- "difficulty": "9.9814",
- "description": [
- "Set the variable sum2 to equal 5 plus 3.",
- "For example, the character at index 0 in the word \"Julie\" is \"J\". So if var firstName = \"Julie\", you can get the value of the first letter of the string by using firstName[0].",
- "In order to get the last letter of a string, you can subtract one from the string's length.",
- "For example, if var firstName = \"Julie\", you can get the value of the third-to-last letter of the string by using firstName[firstName.length - 3].",
- "Try looking at the lastLetterOfLastName variable declaration if you get stuck."
- ],
- "tests": [
- "expect(sum2).to.equal(8);"
- ],
- "challengeSeed": [
- "var sum1 = 3 + 3;",
- "",
- "var sum2 = 0;"
- ],
- "challengeType": 1
}
]
diff --git a/views/account/show.jade b/views/account/show.jade
index 2291e6868f..6b4a3d2c8e 100644
--- a/views/account/show.jade
+++ b/views/account/show.jade
@@ -125,3 +125,34 @@ block content
.row.text-primary
h4.col-sm-6.text-right Longest Streak: #{longestStreak}
h4.col-sm-6.text-left Current Streak: #{currentStreak}
+
+ - if (challenges.length > 0)
+ .col-sm-12
+ table.table.table-striped
+ thead
+ tr
+ th Challenge
+ th Date Completed
+ th Link
+ for challenge in challenges
+ tr
+ td= challenge.name
+ td= moment(challenge.completedDate, 'x').format("MMM DD, YYYY")
+ td
+ a(href=challenge.solution) View my solution
+
+ br
+ - if (bonfires.length > 0)
+ .col-sm-12
+ table.table.table-striped
+ thead
+ tr
+ th Bonfire
+ th Date Completed
+ th Link
+ for bonfire in bonfires
+ tr
+ td= bonfire.name
+ td= moment(bonfire.completedDate, 'x').format("MMM DD, YYYY")
+ td= bonfire.solution
+ br