Merge pull request #4919 from ltegman/fix/assert-message-formatting
Fix assert message formatting
This commit is contained in:
Rex Schrader
@ -1658,10 +1658,10 @@
|
||||
"<code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(typeof runSlots($(\".slot\"))[0] === \"number\" && runSlots($(\".slot\"))[0] > 0 && runSlots($(\".slot\"))[0] < 4, '<code>slotOne</code> should be a random number.')",
|
||||
"assert(typeof runSlots($(\".slot\"))[1] === \"number\" && runSlots($(\".slot\"))[1] > 0 && runSlots($(\".slot\"))[1] < 4, '<code>slotTwo</code> should be a random number.')",
|
||||
"assert(typeof runSlots($(\".slot\"))[2] === \"number\" && runSlots($(\".slot\"))[2] > 0 && runSlots($(\".slot\"))[2] < 4, '<code>slotThree</code> should be a random number.')",
|
||||
"assert((function(){if(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1/gi) !== null){return editor.match(/slot.*?=.*?\\(.*?\\).*?/gi).length >= 3;}else{return false;}})(), 'You should have used <code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code> three times to generate your random numbers.')"
|
||||
"assert(typeof runSlots($(\".slot\"))[0] === \"number\" && runSlots($(\".slot\"))[0] > 0 && runSlots($(\".slot\"))[0] < 4, 'message: <code>slotOne</code> should be a random number.')",
|
||||
"assert(typeof runSlots($(\".slot\"))[1] === \"number\" && runSlots($(\".slot\"))[1] > 0 && runSlots($(\".slot\"))[1] < 4, 'message: <code>slotTwo</code> should be a random number.')",
|
||||
"assert(typeof runSlots($(\".slot\"))[2] === \"number\" && runSlots($(\".slot\"))[2] > 0 && runSlots($(\".slot\"))[2] < 4, 'message: <code>slotThree</code> should be a random number.')",
|
||||
"assert((function(){if(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1/gi) !== null){return editor.match(/slot.*?=.*?\\(.*?\\).*?/gi).length >= 3;}else{return false;}})(), 'message: You should have used <code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code> three times to generate your random numbers.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -1825,7 +1825,7 @@
|
||||
"If all three numbers match, we should also set the text <code>\"It's A Win\"</code> to the element with class <code>logger</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert((function(){var data = runSlots();return data === null || data.toString().length === 1;})(), 'If all three of our random numbers are the same we should return that number. Otherwise we should return <code>null</code>.')"
|
||||
"assert((function(){var data = runSlots();return data === null || data.toString().length === 1;})(), 'message: If all three of our random numbers are the same we should return that number. Otherwise we should return <code>null</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -1994,8 +1994,8 @@
|
||||
"Use the above selector to display each number in its corresponding slot."
|
||||
],
|
||||
"tests": [
|
||||
"assert((function(){runSlots();if($($(\".slot\")[0]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[1]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[2]).html().replace(/\\s/gi, \"\") !== \"\"){return true;}else{return false;}})(), 'You should be displaying the result of the slot numbers in the corresponding slots.')",
|
||||
"assert((editor.match( /\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)/gi) && editor.match( /\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)/gi ).length >= 3 && editor.match( /\\.html\\(slotOne\\)/gi ) && editor.match( /\\.html\\(slotTwo\\)/gi ) && editor.match( /\\.html\\(slotThree\\)/gi )), 'You should have used the the selector given in the description to select each slot and assign it the value of <code>slotOne</code>, <code>slotTwo</code> and <code>slotThree</code> respectively.')"
|
||||
"assert((function(){runSlots();if($($(\".slot\")[0]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[1]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[2]).html().replace(/\\s/gi, \"\") !== \"\"){return true;}else{return false;}})(), 'message: You should be displaying the result of the slot numbers in the corresponding slots.')",
|
||||
"assert((editor.match( /\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)/gi) && editor.match( /\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)/gi ).length >= 3 && editor.match( /\\.html\\(slotOne\\)/gi ) && editor.match( /\\.html\\(slotTwo\\)/gi ) && editor.match( /\\.html\\(slotThree\\)/gi )), 'message: You should have used the the selector given in the description to select each slot and assign it the value of <code>slotOne</code>, <code>slotTwo</code> and <code>slotThree</code> respectively.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -2168,13 +2168,13 @@
|
||||
"Set up all three slots like this, then click the \"Go\" button to play the slot machine."
|
||||
],
|
||||
"tests": [
|
||||
"assert((editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)\\.html\\(\\s*?\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\s*\\-\\s*1\\]\\s?\\+\\s?\\'\"\\>\\'\\s*?\\);/gi) && editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)\\.html\\(\\s*?\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\s*\\-\\s*1\\]\\s?\\+\\s?\\'\"\\>\\'\\s*?\\);/gi).length >= 3), 'Use the provided code three times. One for each slot.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[0\\]\\s*?\\)/gi), 'You should have used <code>$('.slot')[0]</code> at least once.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[1\\]\\s*?\\)/gi), 'You should have used <code>$('.slot')[1]</code> at least once.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[2\\]\\s*?\\)/gi), 'You should have used <code>$('.slot')[2]</code> at least once.')",
|
||||
"assert(editor.match(/slotOne/gi) && editor.match(/slotOne/gi).length >= 7, 'You should have used the <code>slotOne</code> value at least once.')",
|
||||
"assert(editor.match(/slotTwo/gi) && editor.match(/slotTwo/gi).length >= 8, 'You should have used the <code>slotTwo</code> value at least once.')",
|
||||
"assert(editor.match(/slotThree/gi) && editor.match(/slotThree/gi).length >= 7, 'You should have used the <code>slotThree</code> value at least once.')"
|
||||
"assert((editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)\\.html\\(\\s*?\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\s*\\-\\s*1\\]\\s?\\+\\s?\\'\"\\>\\'\\s*?\\);/gi) && editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)\\.html\\(\\s*?\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\s*\\-\\s*1\\]\\s?\\+\\s?\\'\"\\>\\'\\s*?\\);/gi).length >= 3), 'message: Use the provided code three times. One for each slot.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[0\\]\\s*?\\)/gi), 'message: You should have used <code>$('.slot')[0]</code> at least once.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[1\\]\\s*?\\)/gi), 'message: You should have used <code>$('.slot')[1]</code> at least once.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[2\\]\\s*?\\)/gi), 'message: You should have used <code>$('.slot')[2]</code> at least once.')",
|
||||
"assert(editor.match(/slotOne/gi) && editor.match(/slotOne/gi).length >= 7, 'message: You should have used the <code>slotOne</code> value at least once.')",
|
||||
"assert(editor.match(/slotTwo/gi) && editor.match(/slotTwo/gi).length >= 8, 'message: You should have used the <code>slotTwo</code> value at least once.')",
|
||||
"assert(editor.match(/slotThree/gi) && editor.match(/slotThree/gi).length >= 7, 'message: You should have used the <code>slotThree</code> value at least once.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
|
||||
@ -16,9 +16,9 @@
|
||||
"To get started, we should nest all of our HTML in a <code>div</code> element with the class <code>container-fluid</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"div\").hasClass(\"container-fluid\"), 'Your <code>div</code> element should have the class <code>container-fluid</code>.')",
|
||||
"assert(editor.match(/<\\/div>/g) && 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.')",
|
||||
"assert($(\".container-fluid\").children().length >= 8, 'Make sure you have nested all HTML elements in <code>.container-fluid</code>.')"
|
||||
"assert($(\"div\").hasClass(\"container-fluid\"), 'message: Your <code>div</code> element should have the class <code>container-fluid</code>.')",
|
||||
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.')",
|
||||
"assert($(\".container-fluid\").children().length >= 8, 'message: Make sure you have nested all HTML elements in <code>.container-fluid</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -106,11 +106,11 @@
|
||||
"Fortunately, with Bootstrap, all we need to do is add the <code>img-responsive</code> class to your image. Do this, and the image should perfectly fit the width of your page."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"img\").length === 2, 'You should have a total of two images.')",
|
||||
"assert($(\"img:eq(1)\").hasClass(\"img-responsive\"), 'Your new image should be below your old one and have the class <code>img-responsive</code>.')",
|
||||
"assert(!$(\"img:eq(1)\").hasClass(\"smaller-image\"), 'Your new image should not have the class <code>smaller-image</code>.')",
|
||||
"assert($(\"img:eq(1)\").attr(\"src\") === \"http://bit.ly/fcc-running-cats\", 'Your new image should have a <code>src</code> of <code>http://bit.ly/fcc-running-cats</code>.')",
|
||||
"assert(editor.match(/<img/g) && editor.match(/<img.*>/g).length === 2 && editor.match(/<img/g).length === 2, 'Make sure your new <code>img</code> element has a closing angle bracket.')"
|
||||
"assert($(\"img\").length === 2, 'message: You should have a total of two images.')",
|
||||
"assert($(\"img:eq(1)\").hasClass(\"img-responsive\"), 'message: Your new image should be below your old one and have the class <code>img-responsive</code>.')",
|
||||
"assert(!$(\"img:eq(1)\").hasClass(\"smaller-image\"), 'message: Your new image should not have the class <code>smaller-image</code>.')",
|
||||
"assert($(\"img:eq(1)\").attr(\"src\") === \"http://bit.ly/fcc-running-cats\", 'message: Your new image should have a <code>src</code> of <code>http://bit.ly/fcc-running-cats</code>.')",
|
||||
"assert(editor.match(/<img/g) && editor.match(/<img.*>/g).length === 2 && editor.match(/<img/g).length === 2, 'message: Make sure your new <code>img</code> element has a closing angle bracket.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -196,8 +196,8 @@
|
||||
"<code><h2 class=\"red-text text-center\">your text</h2></code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h2\").hasClass(\"text-center\"), 'Your <code>h2</code> element should be centered by applying the class <code>text-center</code>')",
|
||||
"assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should still have the class <code>red-text</code>')"
|
||||
"assert($(\"h2\").hasClass(\"text-center\"), 'message: Your <code>h2</code> element should be centered by applying the class <code>text-center</code>')",
|
||||
"assert($(\"h2\").hasClass(\"red-text\"), 'message: Your <code>h2</code> element should still have the class <code>red-text</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -283,9 +283,9 @@
|
||||
"Create a new <code>button</code> element below your large kitten photo. Give it the class <code>btn</code> and the text of \"Like\"."
|
||||
],
|
||||
"tests": [
|
||||
"assert(new RegExp(\"like\",\"gi\").test($(\"button\").text()), 'Create a new <code>button</code> element with the text \"Like\".')",
|
||||
"assert($(\"button\").hasClass(\"btn\"), 'Your new button should have the class <code>btn</code>.')",
|
||||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')"
|
||||
"assert(new RegExp(\"like\",\"gi\").test($(\"button\").text()), 'message: Create a new <code>button</code> element with the text \"Like\".')",
|
||||
"assert($(\"button\").hasClass(\"btn\"), 'message: Your new button should have the class <code>btn</code>.')",
|
||||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -374,9 +374,9 @@
|
||||
"Add Bootstrap's <code>btn-block</code> class to your Bootstrap button."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"button\").hasClass(\"btn\"), 'Your button should still have the class <code>btn</code>.')",
|
||||
"assert($(\"button\").hasClass(\"btn-block\"), 'Your button should have the class <code>btn-block</code>.')",
|
||||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')"
|
||||
"assert($(\"button\").hasClass(\"btn\"), 'message: Your button should still have the class <code>btn</code>.')",
|
||||
"assert($(\"button\").hasClass(\"btn-block\"), 'message: Your button should have the class <code>btn-block</code>.')",
|
||||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -466,9 +466,9 @@
|
||||
"Note that this button will still need the <code>btn</code> and <code>btn-block</code> classes."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"button\").hasClass(\"btn-primary\"), 'Your button should have the class <code>btn-primary</code>.')",
|
||||
"assert($(\"button\").hasClass(\"btn-block\") && $(\"button\").hasClass(\"btn\"), 'Your button should still have the <code>btn</code> and <code>btn-block</code> classes.')",
|
||||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')"
|
||||
"assert($(\"button\").hasClass(\"btn-primary\"), 'message: Your button should have the class <code>btn-primary</code>.')",
|
||||
"assert($(\"button\").hasClass(\"btn-block\") && $(\"button\").hasClass(\"btn\"), 'message: Your button should still have the <code>btn</code> and <code>btn-block</code> classes.')",
|
||||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -556,10 +556,10 @@
|
||||
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
|
||||
],
|
||||
"tests": [
|
||||
"assert(new RegExp(\"info\",\"gi\").test($(\"button\").text()), 'Create a new <code>button</code> element with the text \"Info\".')",
|
||||
"assert($(\"button.btn-block.btn\").length > 1, 'Both of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.')",
|
||||
"assert($(\"button\").hasClass(\"btn-info\"), 'Your new button should have the class <code>btn-info</code>.')",
|
||||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')"
|
||||
"assert(new RegExp(\"info\",\"gi\").test($(\"button\").text()), 'message: Create a new <code>button</code> element with the text \"Info\".')",
|
||||
"assert($(\"button.btn-block.btn\").length > 1, 'message: Both of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.')",
|
||||
"assert($(\"button\").hasClass(\"btn-info\"), 'message: Your new button should have the class <code>btn-info</code>.')",
|
||||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -647,10 +647,10 @@
|
||||
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
|
||||
],
|
||||
"tests": [
|
||||
"assert(new RegExp(\"Delete\",\"gi\").test($(\"button\").text()), 'Create a new <code>button</code> element with the text \"Delete\".')",
|
||||
"assert($(\"button.btn-block.btn\").length > 2, 'All of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.')",
|
||||
"assert($(\"button\").hasClass(\"btn-danger\"), 'Your new button should have the class <code>btn-danger</code>.')",
|
||||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have a closing tag.')"
|
||||
"assert(new RegExp(\"Delete\",\"gi\").test($(\"button\").text()), 'message: Create a new <code>button</code> element with the text \"Delete\".')",
|
||||
"assert($(\"button.btn-block.btn\").length > 2, 'message: All of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.')",
|
||||
"assert($(\"button\").hasClass(\"btn-danger\"), 'message: Your new button should have the class <code>btn-danger</code>.')",
|
||||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -743,10 +743,10 @@
|
||||
"The <code>row</code> class is applied to a <code>div</code>, and the buttons themselves can be nested within it."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"div.row:has(button)\").length > 0, 'Your buttons should all be nested within the same <code>div</code> element with the class <code>row</code>.')",
|
||||
"assert($(\"div.col-xs-4:has(button)\").length > 2, 'Each of your Bootstrap buttons should be nested within its own <code>div</code> element with the class <code>col-xs-4</code>.')",
|
||||
"assert(editor.match(/<\\/button>/g) && 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) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure each of your <code>div</code> elements has a closing tag.')"
|
||||
"assert($(\"div.row:has(button)\").length > 0, 'message: Your buttons should all be nested within the same <code>div</code> element with the class <code>row</code>.')",
|
||||
"assert($(\"div.col-xs-4:has(button)\").length > 2, 'message: Each of your Bootstrap buttons should be nested within its own <code>div</code> element with the class <code>col-xs-4</code>.')",
|
||||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'message: Make sure each of your <code>button</code> elements has a closing tag.')",
|
||||
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -842,11 +842,11 @@
|
||||
"Finally, remove the \"smaller-image\" class from your first <code>img</code> element and replace it with the <code>img-responsive</code> class."
|
||||
],
|
||||
"tests": [
|
||||
"assert(!$(\"h2\").hasClass(\"red-text\"), 'Your h2 element should no longer have the class <code>red-text</code>.')",
|
||||
"assert($(\"h2\").hasClass(\"text-primary\"), 'Your h2 element should now have the class <code>text-primary</code>.')",
|
||||
"assert(!$(\"p\").css(\"font-family\").match(/monospace/i), 'Your paragraph elements should no longer use the font <code>Monospace</code>.')",
|
||||
"assert(!$(\"img\").hasClass(\"smaller-image\"), 'Remove the <code>smaller-image</code> class from your top image.')",
|
||||
"assert($(\".img-responsive\").length > 1, 'Add the <code>img-responsive</code> class to your top image.')"
|
||||
"assert(!$(\"h2\").hasClass(\"red-text\"), 'message: Your h2 element should no longer have the class <code>red-text</code>.')",
|
||||
"assert($(\"h2\").hasClass(\"text-primary\"), 'message: Your h2 element should now have the class <code>text-primary</code>.')",
|
||||
"assert(!$(\"p\").css(\"font-family\").match(/monospace/i), 'message: Your paragraph elements should no longer use the font <code>Monospace</code>.')",
|
||||
"assert(!$(\"img\").hasClass(\"smaller-image\"), 'message: Remove the <code>smaller-image</code> class from your top image.')",
|
||||
"assert($(\".img-responsive\").length > 1, 'message: Add the <code>img-responsive</code> class to your top image.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -950,10 +950,10 @@
|
||||
"<code><p>Top 3 things cats <span class = \"text-danger\">hate</span></p></code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"p span\") && $(\"p span\").length > 0, 'Your <code>span</code> element should be inside your <code>p</code> element.')",
|
||||
"assert($(\"p span\") && $(\"p span\").text().match(/love/i), 'Your <code>span</code> element should have the text <code>love</code>.')",
|
||||
"assert($(\"span\").hasClass(\"text-danger\"), 'Your <code>span</code> element should have class <code>text-danger</code>.')",
|
||||
"assert(editor.match(/<\\/span>/g) && editor.match(/<span/g) && editor.match(/<\\/span>/g).length === editor.match(/<span/g).length, 'Make sure your <code>span</code> element has a closing tag.')"
|
||||
"assert($(\"p span\") && $(\"p span\").length > 0, 'message: Your <code>span</code> element should be inside your <code>p</code> element.')",
|
||||
"assert($(\"p span\") && $(\"p span\").text().match(/love/i), 'message: Your <code>span</code> element should have the text <code>love</code>.')",
|
||||
"assert($(\"span\").hasClass(\"text-danger\"), 'message: Your <code>span</code> element should have class <code>text-danger</code>.')",
|
||||
"assert(editor.match(/<\\/span>/g) && editor.match(/<span/g) && editor.match(/<\\/span>/g).length === editor.match(/<span/g).length, 'message: Make sure your <code>span</code> element has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1047,10 +1047,10 @@
|
||||
"Notice how the image is now just the right size to fit along the text?"
|
||||
],
|
||||
"tests": [
|
||||
"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 nested together within a <code>div</code> element with the class <code>row</code>.')",
|
||||
"assert($(\"div.col-xs-4:has(img)\").length > 0, 'Nest your topmost <code>img</code> element within a <code>div</code> with the class <code>col-xs-4</code>.')",
|
||||
"assert($(\"div.col-xs-8:has(h2)\").length > 0, 'Nest your <code>h2</code> element within a <code>div</code> with the class <code>col-xs-8</code>.')",
|
||||
"assert(editor.match(/<\\/div>/g) && 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.')"
|
||||
"assert($(\"div.row:has(h2)\").length > 0 && $(\"div.row:has(img)\").length > 0, 'message: Your <code>h2</code> element and topmost <code>img</code> element should both be nested together within a <code>div</code> element with the class <code>row</code>.')",
|
||||
"assert($(\"div.col-xs-4:has(img)\").length > 0, 'message: Nest your topmost <code>img</code> element within a <code>div</code> with the class <code>col-xs-4</code>.')",
|
||||
"assert($(\"div.col-xs-8:has(h2)\").length > 0, 'message: Nest your <code>h2</code> element within a <code>div</code> with the class <code>col-xs-8</code>.')",
|
||||
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1140,10 +1140,10 @@
|
||||
"Use Font Awesome to add a <code>thumbs-up</code> icon to your like button by giving it an <code>i</code> element with the classes <code>fa</code> and <code>fa-thumbs-up</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"i\").hasClass(\"fa fa-thumbs-up\"), 'Add an <code>i</code> element with the classes <code>fa</code> and <code>fa-thumbs-up</code>.')",
|
||||
"assert($(\"i.fa-thumbs-up\").parent().text().match(/Like/gi), 'Your <code>fa-thumbs-up</code> icon should be located within the Like button.')",
|
||||
"assert($(\"button\").children(\"i\").length > 0, 'Nest your <code>i</code> element within your <code>button</code> element.')",
|
||||
"assert(editor.match(/<\\/i>/g), 'Make sure your <code>i</code> element has a closing tag.')"
|
||||
"assert($(\"i\").hasClass(\"fa fa-thumbs-up\"), 'message: Add an <code>i</code> element with the classes <code>fa</code> and <code>fa-thumbs-up</code>.')",
|
||||
"assert($(\"i.fa-thumbs-up\").parent().text().match(/Like/gi), 'message: Your <code>fa-thumbs-up</code> icon should be located within the Like button.')",
|
||||
"assert($(\"button\").children(\"i\").length > 0, 'message: Nest your <code>i</code> element within your <code>button</code> element.')",
|
||||
"assert(editor.match(/<\\/i>/g), 'message: Make sure your <code>i</code> element has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1228,9 +1228,9 @@
|
||||
"Use Font Awesome to add a <code>info-circle</code> icon to your info button and a <code>trash</code> icon to your delete button."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".btn-danger > i\").hasClass(\"fa fa-trash\"), 'You should add a <code><i class=\"fa fa-trash\"></i></code> within your delete button element.')",
|
||||
"assert($(\".btn-info > i\").hasClass(\"fa fa-info-circle\"), 'You should add a <code><i class=\"fa fa-info-circle\"></i></code> within your info button element.')",
|
||||
"assert(editor.match(/<\\/i>/g) && editor.match(/<\\/i>/g).length > 2 && $(\".btn-primary > i\").hasClass(\"fa fa-thumbs-up\"), 'Make sure each of your <code>i</code> elements has a closing tag and <code><i class=\"fa fa-thumbs-up\"></i></code> is in your like button element.')"
|
||||
"assert($(\".btn-danger > i\").hasClass(\"fa fa-trash\"), 'message: You should add a <code><i class=\"fa fa-trash\"></i></code> within your delete button element.')",
|
||||
"assert($(\".btn-info > i\").hasClass(\"fa fa-info-circle\"), 'message: You should add a <code><i class=\"fa fa-info-circle\"></i></code> within your info button element.')",
|
||||
"assert(editor.match(/<\\/i>/g) && editor.match(/<\\/i>/g).length > 2 && $(\".btn-primary > i\").hasClass(\"fa fa-thumbs-up\"), 'message: Make sure each of your <code>i</code> elements has a closing tag and <code><i class=\"fa fa-thumbs-up\"></i></code> is in your like button element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1315,9 +1315,9 @@
|
||||
"Nest all of your radio buttons within a <code><div class=\"row\"></code> element. Then nest each of them within a <code><div class=\"col-xs-6\"></code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"div.row:has(input[type=\\\"radio\\\"])\").length > 0, 'Nest all of your radio buttons inside one <code>div</code> with the class <code>row</code>.')",
|
||||
"assert($(\"div.col-xs-6:has(input[type=\\\"radio\\\"])\").length > 1, 'Nest each of your radio buttons inside its own <code>div</code> with the class <code>col-xs-6</code>.')",
|
||||
"assert(editor.match(/<\\/div>/g) && 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.')"
|
||||
"assert($(\"div.row:has(input[type=\\\"radio\\\"])\").length > 0, 'message: Nest all of your radio buttons inside one <code>div</code> with the class <code>row</code>.')",
|
||||
"assert($(\"div.col-xs-6:has(input[type=\\\"radio\\\"])\").length > 1, 'message: Nest each of your radio buttons inside its own <code>div</code> with the class <code>col-xs-6</code>.')",
|
||||
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1402,9 +1402,9 @@
|
||||
"Nest all your checkboxes in a <code><div class=\"row\"></code> element. Then nest each of them in a <code><div class=\"col-xs-4\"></code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"div.row:has(input[type=\\\"checkbox\\\"])\").length > 0, 'Nest all of your checkboxes inside one <code>div</code> with the class <code>row</code>.')",
|
||||
"assert($(\"div.col-xs-4:has(input[type=\\\"checkbox\\\"])\").length > 2, 'Nest each of your checkboxes inside its own <code>div</code> with the class <code>col-xs-4</code>.')",
|
||||
"assert(editor.match(/<\\/div>/g) && 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.')"
|
||||
"assert($(\"div.row:has(input[type=\\\"checkbox\\\"])\").length > 0, 'message: Nest all of your checkboxes inside one <code>div</code> with the class <code>row</code>.')",
|
||||
"assert($(\"div.col-xs-4:has(input[type=\\\"checkbox\\\"])\").length > 2, 'message: Nest each of your checkboxes inside its own <code>div</code> with the class <code>col-xs-4</code>.')",
|
||||
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1496,10 +1496,10 @@
|
||||
"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>. Also give this button the Font Awesome icon of <code>fa-paper-plane</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"button[type=\\\"submit\\\"]\").hasClass(\"btn btn-primary\"), 'Give the submit button in your form the classes <code>btn btn-primary</code>.')",
|
||||
"assert($(\"button[type=\\\"submit\\\"]:has(i.fa.fa-paper-plane)\").length > 0, 'Add a <code><i class=\"fa fa-paper-plane\"></i></code> within your submit <code>button</code> element.')",
|
||||
"assert($(\"input[type=\\\"text\\\"]\").hasClass(\"form-control\"), 'Give the text <code>input</code> in your form the class <code>form-control</code>.')",
|
||||
"assert(editor.match(/<\\/i>/g) && editor.match(/<\\/i/g).length > 3, 'Make sure each of your <code>i</code> elements has a closing tag.')"
|
||||
"assert($(\"button[type=\\\"submit\\\"]\").hasClass(\"btn btn-primary\"), 'message: Give the submit button in your form the classes <code>btn btn-primary</code>.')",
|
||||
"assert($(\"button[type=\\\"submit\\\"]:has(i.fa.fa-paper-plane)\").length > 0, 'message: Add a <code><i class=\"fa fa-paper-plane\"></i></code> within your submit <code>button</code> element.')",
|
||||
"assert($(\"input[type=\\\"text\\\"]\").hasClass(\"form-control\"), 'message: Give the text <code>input</code> in your form the class <code>form-control</code>.')",
|
||||
"assert(editor.match(/<\\/i>/g) && editor.match(/<\\/i/g).length > 3, 'message: Make sure each of your <code>i</code> elements has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1600,10 +1600,10 @@
|
||||
"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": [
|
||||
"assert($(\"div.row:has(input[type=\\\"text\\\"])\").length > 0 && $(\"div.row:has(button[type=\\\"submit\\\"])\").length > 0, 'Nest your form submission button and text input in a div with class <code>row</code>.')",
|
||||
"assert($(\"div.col-xs-7:has(input[type=\\\"text\\\"])\").length > 0, 'Nest your form text input in a div with the class <code>col-xs-7</code>.')",
|
||||
"assert($(\"div.col-xs-5:has(button[type=\\\"submit\\\"])\").length > 0, 'Nest your form submission button in a div with the class <code>col-xs-5</code>.')",
|
||||
"assert(editor.match(/<\\/div>/g) && 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.')"
|
||||
"assert($(\"div.row:has(input[type=\\\"text\\\"])\").length > 0 && $(\"div.row:has(button[type=\\\"submit\\\"])\").length > 0, 'message: Nest your form submission button and text input in a div with class <code>row</code>.')",
|
||||
"assert($(\"div.col-xs-7:has(input[type=\\\"text\\\"])\").length > 0, 'message: Nest your form text input in a div with the class <code>col-xs-7</code>.')",
|
||||
"assert($(\"div.col-xs-5:has(button[type=\\\"submit\\\"])\").length > 0, 'message: Nest your form submission button in a div with the class <code>col-xs-5</code>.')",
|
||||
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1706,11 +1706,11 @@
|
||||
"Color your <code>h3</code> element with the <code>text-primary</code> Bootstrap class, and center it with the <code>text-center</code> Bootstrap class."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h3\") && $(\"h3\").length > 0, 'Add a <code>h3</code> element to your page.')",
|
||||
"assert(editor.match(/<\\/h3>/g) && editor.match(/<h3/g) && editor.match(/<\\/h3>/g).length === editor.match(/<h3/g).length, 'Make sure your <code>h3</code> element has a closing tag.')",
|
||||
"assert($(\"h3\").hasClass(\"text-primary\"), 'Your <code>h3</code> element should be colored by applying the class <code>text-primary</code>')",
|
||||
"assert($(\"h3\").hasClass(\"text-center\"), 'Your <code>h3</code> element should be centered by applying the class <code>text-center</code>')",
|
||||
"assert.isTrue((/jquery(\\s)+playground/gi).test($(\"h3\").text()), 'Your <code>h3</code> element should have the text <code>jQuery Playground</code>.')"
|
||||
"assert($(\"h3\") && $(\"h3\").length > 0, 'message: Add a <code>h3</code> element to your page.')",
|
||||
"assert(editor.match(/<\\/h3>/g) && editor.match(/<h3/g) && editor.match(/<\\/h3>/g).length === editor.match(/<h3/g).length, 'message: Make sure your <code>h3</code> element has a closing tag.')",
|
||||
"assert($(\"h3\").hasClass(\"text-primary\"), 'message: Your <code>h3</code> element should be colored by applying the class <code>text-primary</code>')",
|
||||
"assert($(\"h3\").hasClass(\"text-center\"), 'message: Your <code>h3</code> element should be centered by applying the class <code>text-center</code>')",
|
||||
"assert.isTrue((/jquery(\\s)+playground/gi).test($(\"h3\").text()), 'message: Your <code>h3</code> element should have the text <code>jQuery Playground</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"",
|
||||
@ -1743,8 +1743,8 @@
|
||||
"Let's nest your <code>h3</code> element within a <code>div</code> element with the class <code>container-fluid</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"div\").hasClass(\"container-fluid\"), 'Your <code>div</code> element should have the class <code>container-fluid</code>.')",
|
||||
"assert(editor.match(/<\\/div>/g) && 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.')"
|
||||
"assert($(\"div\").hasClass(\"container-fluid\"), 'message: Your <code>div</code> element should have the class <code>container-fluid</code>.')",
|
||||
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h3 class=\"text-primary text-center\">jQuery Playground</h3>",
|
||||
@ -1775,10 +1775,10 @@
|
||||
"Create a <code>div</code> element below the <code>h3</code> tag, with a class of <code>row</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"div\").length > 1, 'Add a <code>div</code> element below your <code>h3</code> element.')",
|
||||
"assert($(\"div\").hasClass(\"row\"), 'Your <code>div</code> element should have the class <code>row</code>')",
|
||||
"assert($(\"div.container-fluid div.row\").length > 0, 'Your <code>row div</code> should be nested inside the <code>container-fluid div</code>')",
|
||||
"assert(editor.match(/<\\/div>/g) && 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.')"
|
||||
"assert($(\"div\").length > 1, 'message: Add a <code>div</code> element below your <code>h3</code> element.')",
|
||||
"assert($(\"div\").hasClass(\"row\"), 'message: Your <code>div</code> element should have the class <code>row</code>')",
|
||||
"assert($(\"div.container-fluid div.row\").length > 0, 'message: Your <code>row div</code> should be nested inside the <code>container-fluid div</code>')",
|
||||
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'message: Make sure your <code>div</code> element has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class=\"container-fluid\">",
|
||||
@ -1811,8 +1811,8 @@
|
||||
"Create two <code>div</code> elements within your row, both with the class <code>col-xs-6</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"div.row > div.col-xs-6\").length > 1, 'Nest two <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
|
||||
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')"
|
||||
"assert($(\"div.row > div.col-xs-6\").length > 1, 'message: Nest two <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
|
||||
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'message: Make sure all your <code>div</code> elements have closing tags.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class=\"container-fluid\">",
|
||||
@ -1847,9 +1847,9 @@
|
||||
"Nest one <code>div</code> element with the class <code>well</code> within each of your <code>col-xs-6</code> <code>div</code> elements."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"div.col-xs-6\").not(\":has(>div.well)\").length < 1, 'Add a <code>div</code> element with the class <code>well</code> inside each of your <code>div</code> elements with the class <code>\"col-xs-6\"</code>')",
|
||||
"assert($(\"div.row > div.col-xs-6\").length > 1, 'Nest both of your <code>div</code> elements with the class <code>\"col-xs-6\"</code> within your <code>div</code> element with the class <code>\"row\"</code>.')",
|
||||
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')"
|
||||
"assert($(\"div.col-xs-6\").not(\":has(>div.well)\").length < 1, 'message: Add a <code>div</code> element with the class <code>well</code> inside each of your <code>div</code> elements with the class <code>\"col-xs-6\"</code>')",
|
||||
"assert($(\"div.row > div.col-xs-6\").length > 1, 'message: Nest both of your <code>div</code> elements with the class <code>\"col-xs-6\"</code> within your <code>div</code> element with the class <code>\"row\"</code>.')",
|
||||
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'message: Make sure all your <code>div</code> elements have closing tags.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class=\"container-fluid\">",
|
||||
@ -1888,9 +1888,9 @@
|
||||
"Nest three <code>button</code> elements within each of your <code>well</code> <code>div</code> elements."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"div.well\").children(\"button\").length > 5, 'Nest three <code>button</code> elements within each of your <code>div</code> elements with class <code>well</code>.')",
|
||||
"assert($(\"button\") && $(\"button\").length > 5, 'You should have a total of 6 <code>button</code> elements.')",
|
||||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> elements have closing tags.')"
|
||||
"assert($(\"div.well\").children(\"button\").length > 5, 'message: Nest three <code>button</code> elements within each of your <code>div</code> elements with class <code>well</code>.')",
|
||||
"assert($(\"button\") && $(\"button\").length > 5, 'message: You should have a total of 6 <code>button</code> elements.')",
|
||||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have closing tags.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class=\"container-fluid\">",
|
||||
@ -1937,8 +1937,8 @@
|
||||
"Apply both the <code>btn</code> and <code>btn-default</code> classes to each of your <code>button</code> elements."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".btn\").length > 5, 'Apply the <code>btn</code> class to each of your <code>button</code> elements.')",
|
||||
"assert($(\".btn-default\").length > 5, 'Apply the <code>btn-default</code> class to each of your <code>button</code> elements.')"
|
||||
"assert($(\".btn\").length > 5, 'message: Apply the <code>btn</code> class to each of your <code>button</code> elements.')",
|
||||
"assert($(\".btn-default\").length > 5, 'message: Apply the <code>btn-default</code> class to each of your <code>button</code> elements.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class=\"container-fluid\">",
|
||||
@ -1985,7 +1985,7 @@
|
||||
"Give each of your <code>button</code> elements the class <code>target</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".target\").length > 5, 'Apply the <code>target</code> class to each of your <code>button</code> elements.')"
|
||||
"assert($(\".target\").length > 5, 'message: Apply the <code>target</code> class to each of your <code>button</code> elements.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class=\"container-fluid\">",
|
||||
@ -2036,8 +2036,8 @@
|
||||
"Give the well on the left the id of <code>left-well</code>. Give the well on the right the <code>id</code> of <code>right-well</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".col-xs-6\").children(\"#left-well\") && $(\".col-xs-6\").children(\"#left-well\").length > 0, 'Give your left <code>well</code> the id of <code>left-well</code>.')",
|
||||
"assert($(\".col-xs-6\").children(\"#right-well\") && $(\".col-xs-6\").children(\"#right-well\").length > 0, 'Give your right <code>well</code> the id of <code>right-well</code>.')"
|
||||
"assert($(\".col-xs-6\").children(\"#left-well\") && $(\".col-xs-6\").children(\"#left-well\").length > 0, 'message: Give your left <code>well</code> the id of <code>left-well</code>.')",
|
||||
"assert($(\".col-xs-6\").children(\"#right-well\") && $(\".col-xs-6\").children(\"#right-well\").length > 0, 'message: Give your right <code>well</code> the id of <code>right-well</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class=\"container-fluid\">",
|
||||
@ -2089,10 +2089,10 @@
|
||||
"Above your right-well, inside its <code>col-xs-6</code> <code>div</code> element, add a <code>h4</code> element with the text <code>#right-well</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".col-xs-6\").children(\"h4\") && $(\".col-xs-6\").children(\"h4\").length > 1, 'Add an <code>h4</code> element to each of your <code><div class=\"col-xs-6\"></code> elements.');",
|
||||
"assert(new RegExp(\"#left-well\",\"gi\").test($(\"h4\").text()), 'One <code>h4</code> element should have the text <code>#left-well</code>.');",
|
||||
"assert(new RegExp(\"#right-well\",\"gi\").test($(\"h4\").text()), 'One <code>h4</code> element should have the text <code>#right-well</code>.');",
|
||||
"assert(editor.match(/<\\/h4>/g) && editor.match(/<h4/g) && editor.match(/<\\/h4>/g).length === editor.match(/<h4/g).length, 'Make sure all your <code>h4</code> elements have closing tags.')"
|
||||
"assert($(\".col-xs-6\").children(\"h4\") && $(\".col-xs-6\").children(\"h4\").length > 1, 'message: Add an <code>h4</code> element to each of your <code><div class=\"col-xs-6\"></code> elements.');",
|
||||
"assert(new RegExp(\"#left-well\",\"gi\").test($(\"h4\").text()), 'message: One <code>h4</code> element should have the text <code>#left-well</code>.');",
|
||||
"assert(new RegExp(\"#right-well\",\"gi\").test($(\"h4\").text()), 'message: One <code>h4</code> element should have the text <code>#right-well</code>.');",
|
||||
"assert(editor.match(/<\\/h4>/g) && editor.match(/<h4/g) && editor.match(/<\\/h4>/g).length === editor.match(/<h4/g).length, 'message: Make sure all your <code>h4</code> elements have closing tags.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class=\"container-fluid\">",
|
||||
@ -2142,12 +2142,12 @@
|
||||
"Give each of your buttons a unique id like, starting with <code>target1</code> and ending with <code>target6</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"#left-well\").children(\"#target1\") && $(\"#left-well\").children(\"#target1\").length > 0, 'One <code>button</code> element should have the id <code>target1</code>.')",
|
||||
"assert($(\"#left-well\").children(\"#target2\") && $(\"#left-well\").children(\"#target2\").length > 0, 'One <code>button</code> element should have the id <code>target2</code>.')",
|
||||
"assert($(\"#left-well\").children(\"#target3\") && $(\"#left-well\").children(\"#target3\").length > 0, 'One <code>button</code> element should have the id <code>target3</code>.')",
|
||||
"assert($(\"#right-well\").children(\"#target4\") && $(\"#right-well\").children(\"#target4\").length > 0, 'One <code>button</code> element should have the id <code>target4</code>.')",
|
||||
"assert($(\"#right-well\").children(\"#target5\") && $(\"#right-well\").children(\"#target5\").length > 0, 'One <code>button</code> element should have the id <code>target5</code>.')",
|
||||
"assert($(\"#right-well\").children(\"#target6\") && $(\"#right-well\").children(\"#target6\").length > 0, 'One <code>button</code> element should have the id <code>target6</code>.')"
|
||||
"assert($(\"#left-well\").children(\"#target1\") && $(\"#left-well\").children(\"#target1\").length > 0, 'message: One <code>button</code> element should have the id <code>target1</code>.')",
|
||||
"assert($(\"#left-well\").children(\"#target2\") && $(\"#left-well\").children(\"#target2\").length > 0, 'message: One <code>button</code> element should have the id <code>target2</code>.')",
|
||||
"assert($(\"#left-well\").children(\"#target3\") && $(\"#left-well\").children(\"#target3\").length > 0, 'message: One <code>button</code> element should have the id <code>target3</code>.')",
|
||||
"assert($(\"#right-well\").children(\"#target4\") && $(\"#right-well\").children(\"#target4\").length > 0, 'message: One <code>button</code> element should have the id <code>target4</code>.')",
|
||||
"assert($(\"#right-well\").children(\"#target5\") && $(\"#right-well\").children(\"#target5\").length > 0, 'message: One <code>button</code> element should have the id <code>target5</code>.')",
|
||||
"assert($(\"#right-well\").children(\"#target6\") && $(\"#right-well\").children(\"#target6\").length > 0, 'message: One <code>button</code> element should have the id <code>target6</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class=\"container-fluid\">",
|
||||
@ -2196,12 +2196,12 @@
|
||||
"Give each of your <code>button</code> elements text that corresponds to their <code>id</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert(new RegExp(\"#target1\",\"gi\").test($(\"#target1\").text()), 'Give your <code>button</code> element with the id <code>target1</code> the text <code>#target1</code>.')",
|
||||
"assert(new RegExp(\"#target2\",\"gi\").test($(\"#target2\").text()), 'Give your <code>button</code> element with the id <code>target2</code> the text <code>#target2</code>.')",
|
||||
"assert(new RegExp(\"#target3\",\"gi\").test($(\"#target3\").text()), 'Give your <code>button</code> element with the id <code>target3</code> the text <code>#target3</code>.')",
|
||||
"assert(new RegExp(\"#target4\",\"gi\").test($(\"#target4\").text()), 'Give your <code>button</code> element with the id <code>target4</code> the text <code>#target4</code>.')",
|
||||
"assert(new RegExp(\"#target5\",\"gi\").test($(\"#target5\").text()), 'Give your <code>button</code> element with the id <code>target5</code> the text <code>#target5</code>.')",
|
||||
"assert(new RegExp(\"#target6\",\"gi\").test($(\"#target6\").text()), 'Give your <code>button</code> element with the id <code>target6</code> the text <code>#target6</code>.')"
|
||||
"assert(new RegExp(\"#target1\",\"gi\").test($(\"#target1\").text()), 'message: Give your <code>button</code> element with the id <code>target1</code> the text <code>#target1</code>.')",
|
||||
"assert(new RegExp(\"#target2\",\"gi\").test($(\"#target2\").text()), 'message: Give your <code>button</code> element with the id <code>target2</code> the text <code>#target2</code>.')",
|
||||
"assert(new RegExp(\"#target3\",\"gi\").test($(\"#target3\").text()), 'message: Give your <code>button</code> element with the id <code>target3</code> the text <code>#target3</code>.')",
|
||||
"assert(new RegExp(\"#target4\",\"gi\").test($(\"#target4\").text()), 'message: Give your <code>button</code> element with the id <code>target4</code> the text <code>#target4</code>.')",
|
||||
"assert(new RegExp(\"#target5\",\"gi\").test($(\"#target5\").text()), 'message: Give your <code>button</code> element with the id <code>target5</code> the text <code>#target5</code>.')",
|
||||
"assert(new RegExp(\"#target6\",\"gi\").test($(\"#target6\").text()), 'message: Give your <code>button</code> element with the id <code>target6</code> the text <code>#target6</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class=\"container-fluid\">",
|
||||
@ -2252,9 +2252,9 @@
|
||||
"Add a comment at the top of your HTML that says <code>Only change code above this line.</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/^<!--/) && editor.match(/<!--/g).length > 0, 'Start a comment with <code><!--</code> at the top of your HTML.')",
|
||||
"assert(editor.match(/this line/g) && editor.match(/this line/g).length > 0, 'Your comment should have the text <code>Only change code above this line</code>.')",
|
||||
"assert(editor.match(/-->.*\\n+.+/g), 'Be sure to close your comment with <code>--></code>.')"
|
||||
"assert(editor.match(/^<!--/) && editor.match(/<!--/g).length > 0, 'message: Start a comment with <code><!--</code> at the top of your HTML.')",
|
||||
"assert(editor.match(/this line/g) && editor.match(/this line/g).length > 0, 'message: Your comment should have the text <code>Only change code above this line</code>.')",
|
||||
"assert(editor.match(/-->.*\\n+.+/g), 'message: Be sure to close your comment with <code>--></code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class=\"container-fluid\">",
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
"To pass the test on this challenge, change your <code>h1</code> element's text to say \"Hello World\" instead of \"Hello\". Then click the \"Run tests\" button."
|
||||
],
|
||||
"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()), 'message: Your <code>h1</code> element should have the text \"Hello World\".')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>Hello</h1>"
|
||||
@ -67,10 +67,10 @@
|
||||
"Add an <code>h2</code> tag that says \"CatPhotoApp\" to create a second HTML <code>element</code> below your \"Hello World\" <code>h1</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"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 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((/hello(\\s)+world/gi).test($(\"h1\").text()), 'Your <code>h1</code> element should have the text \"Hello World\".')"
|
||||
"assert(($(\"h2\").length > 0), 'message: Create an <code>h2</code> element.')",
|
||||
"assert(editor.match(/<\\/h2>/g) && editor.match(/<\\/h2>/g).length === editor.match(/<h2>/g).length, 'message: Make sure your <code>h2</code> element has a closing tag.')",
|
||||
"assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'message: Your <code>h2</code> element should have the text \"CatPhotoApp\".')",
|
||||
"assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'message: Your <code>h1</code> element should have the text \"Hello World\".')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>Hello World</h1>"
|
||||
@ -112,9 +112,9 @@
|
||||
"Create a <code>p</code> element below your <code>h2</code> element, and give it the text \"Hello Paragraph\"."
|
||||
],
|
||||
"tests": [
|
||||
"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(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.')"
|
||||
"assert(($(\"p\").length > 0), 'message: Create a <code>p</code> element.')",
|
||||
"assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'message: 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, 'message: Make sure your <code>p</code> element has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>Hello World</h1>",
|
||||
@ -153,10 +153,10 @@
|
||||
"Uncomment your <code>h1</code>, <code>h2</code> and <code>p</code> elements."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h1\").length > 0, 'Make your <code>h1</code> element visible on your page by uncommenting it.')",
|
||||
"assert($(\"h2\").length > 0, 'Make your <code>h2</code> element visible on your page by uncommenting it.')",
|
||||
"assert($(\"p\").length > 0, 'Make your <code>p</code> element visible on your page by uncommenting it.')",
|
||||
"assert(!new RegExp(\"-->\", 'gi').test(editor), 'Be sure to delete all trailing comment tags, i.e. <code>--></code>.')"
|
||||
"assert($(\"h1\").length > 0, 'message: Make your <code>h1</code> element visible on your page by uncommenting it.')",
|
||||
"assert($(\"h2\").length > 0, 'message: Make your <code>h2</code> element visible on your page by uncommenting it.')",
|
||||
"assert($(\"p\").length > 0, 'message: Make your <code>p</code> element visible on your page by uncommenting it.')",
|
||||
"assert(!new RegExp(\"-->\", 'message: gi').test(editor), 'Be sure to delete all trailing comment tags, i.e. <code>--></code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<!--",
|
||||
@ -201,10 +201,10 @@
|
||||
"Comment out your <code>h1</code> element and your <code>p</code> element, but leave your <code>h2</code> element uncommented."
|
||||
],
|
||||
"tests": [
|
||||
"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 it is 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 > 1, 'Be sure to close each of your comments with <code>--></code>.')"
|
||||
"assert(($(\"h1\").length === 0), 'message: Comment out your <code>h1</code> element so that it is not visible on your page.')",
|
||||
"assert(($(\"h2\").length > 0), 'message: Leave your <code>h2</code> element uncommented so that it is visible on your page.')",
|
||||
"assert(($(\"p\").length === 0), 'message: Comment out your <code>p</code> element so that it is not visible on your page.')",
|
||||
"assert(editor.match(/-->/g).length > 1, 'message: Be sure to close each of your comments with <code>--></code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<!--",
|
||||
@ -248,7 +248,7 @@
|
||||
"Replace the text inside your <code>p</code> element with the first few words of this kitty ipsum text: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($(\"p\").text()), 'Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.')"
|
||||
"assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>Hello World</h1>",
|
||||
@ -292,9 +292,9 @@
|
||||
"Delete your <code>h1</code> element so we can simplify our view."
|
||||
],
|
||||
"tests": [
|
||||
"assert(($(\"h1\").length == 0), 'Delete your <code>h1</code> element.')",
|
||||
"assert(($(\"h2\").length > 0), 'Leave your <code>h2</code> element on the page.')",
|
||||
"assert(($(\"p\").length > 0), 'Leave your <code>p</code> element on the page.')"
|
||||
"assert(($(\"h1\").length == 0), 'message: Delete your <code>h1</code> element.')",
|
||||
"assert(($(\"h2\").length > 0), 'message: Leave your <code>h2</code> element on the page.')",
|
||||
"assert(($(\"p\").length > 0), 'message: Leave your <code>p</code> element on the page.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>Hello World</h1>",
|
||||
@ -338,7 +338,7 @@
|
||||
"Change your <code>h2</code> element's style so that its text color is red."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.')"
|
||||
"assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your <code>h2</code> element should be red.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h2>CatPhotoApp</h2>",
|
||||
@ -389,11 +389,11 @@
|
||||
"Delete your <code>h2</code> element's style attribute and instead create a CSS <code>style</code> element. Add the necessary CSS to turn all <code>h2</code> elements blue."
|
||||
],
|
||||
"tests": [
|
||||
"assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your <code>h2</code> element.')",
|
||||
"assert($(\"style\") && $(\"style\").length > 1, 'Create a <code>style</code> element.')",
|
||||
"assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your <code>h2</code> element should be blue.')",
|
||||
"assert(editor.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.')",
|
||||
"assert(editor.match(/<\\/style>/g) && editor.match(/<\\/style>/g).length === (editor.match(/<style((\\s)*((type|media|scoped|title|disabled)=\"[^\"]*\")?(\\s)*)*>/g) || []).length, 'Make sure all your <code>style</code> elements are valid and have a closing tag.')"
|
||||
"assert(!$(\"h2\").attr(\"style\"), 'message: Remove the style attribute from your <code>h2</code> element.')",
|
||||
"assert($(\"style\") && $(\"style\").length > 1, 'message: Create a <code>style</code> element.')",
|
||||
"assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'message: Your <code>h2</code> element should be blue.')",
|
||||
"assert(editor.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'message: Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.')",
|
||||
"assert(editor.match(/<\\/style>/g) && editor.match(/<\\/style>/g).length === (editor.match(/<style((\\s)*((type|media|scoped|title|disabled)=\"[^\"]*\")?(\\s)*)*>/g) || []).length, 'message: Make sure all your <code>style</code> elements are valid and have a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h2 style=\"color: red\">CatPhotoApp</h2>",
|
||||
@ -453,10 +453,10 @@
|
||||
"Create a CSS class called <code>red-text</code> and apply it to your <code>h2</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.')",
|
||||
"assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.')",
|
||||
"assert(editor.match(/\\.red-text\\s*\\{\\s*color:\\s*red;\\s*\\}/g), 'Your stylesheet should declare a <code>red-text</code> class and have its color set to red.')",
|
||||
"assert($(\"h2\").attr(\"style\") === undefined, 'Do not use inline style declarations like <code>style=\"color: red\"</code> in your <code>h2</code> element.')"
|
||||
"assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your <code>h2</code> element should be red.')",
|
||||
"assert($(\"h2\").hasClass(\"red-text\"), 'message: Your <code>h2</code> element should have the class <code>red-text</code>.')",
|
||||
"assert(editor.match(/\\.red-text\\s*\\{\\s*color:\\s*red;\\s*\\}/g), 'message: Your stylesheet should declare a <code>red-text</code> class and have its color set to red.')",
|
||||
"assert($(\"h2\").attr(\"style\") === undefined, 'message: Do not use inline style declarations like <code>style=\"color: red\"</code> in your <code>h2</code> element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -521,10 +521,10 @@
|
||||
"Apply the <code>red-text</code> class to your <code>h2</code> and <code>p</code> elements."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.')",
|
||||
"assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.')",
|
||||
"assert($(\"p\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>p</code> element should be red.')",
|
||||
"assert($(\"p\").hasClass(\"red-text\"), 'Your <code>p</code> element should have the class <code>red-text</code>.')"
|
||||
"assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your <code>h2</code> element should be red.')",
|
||||
"assert($(\"h2\").hasClass(\"red-text\"), 'message: Your <code>h2</code> element should have the class <code>red-text</code>.')",
|
||||
"assert($(\"p\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your <code>p</code> element should be red.')",
|
||||
"assert($(\"p\").hasClass(\"red-text\"), 'message: Your <code>p</code> element should have the class <code>red-text</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -577,10 +577,10 @@
|
||||
"Inside the same <code><style></code> tag that we created for your <code>red-text</code> class, set the <code>font-size</code> of all <code>p</code> elements to 16 pixels (<code>16px</code>)."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"p\").length > 1, 'You need 2 <code>p</code> elements with Kitty Ipsum text.')",
|
||||
"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 <code>kitty ipsum text</code>.')",
|
||||
"assert($(\"p\").css(\"font-size\") === \"16px\", 'Give elements with the <code>p</code> tag a <code>font-size</code> of <code>16px</code>.')"
|
||||
"assert($(\"p\").length > 1, 'message: You need 2 <code>p</code> elements with Kitty Ipsum text.')",
|
||||
"assert(editor.match(/<\\/p>/g) && editor.match(/<\\/p>/g).length === editor.match(/<p/g).length, 'message: Make sure each of your <code>p</code> elements has a closing tag.')",
|
||||
"assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.')",
|
||||
"assert($(\"p\").css(\"font-size\") === \"16px\", 'message: Give elements with the <code>p</code> tag a <code>font-size</code> of <code>16px</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -632,7 +632,7 @@
|
||||
"Make all of your <code>p</code> elements use the <code>Monospace</code> font."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> elements should use the font <code>Monospace</code>.')"
|
||||
"assert($(\"p\").css(\"font-family\").match(/monospace/i), 'message: Your <code>p</code> elements should use the font <code>Monospace</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -688,9 +688,9 @@
|
||||
"Apply the <code>font-family</code> of <code>Lobster</code> to your <code>h2</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert(new RegExp(\"googleapis\", \"gi\").test(editor), 'Import the <code>Lobster</code> font.')",
|
||||
"assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'Your <code>h2</code> element should use the font <code>Lobster</code>.')",
|
||||
"assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> element should still use the font <code>Monospace</code>.')"
|
||||
"assert(new RegExp(\"googleapis\", \"gi\").test(editor), 'message: Import the <code>Lobster</code> font.')",
|
||||
"assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'message: Your <code>h2</code> element should use the font <code>Lobster</code>.')",
|
||||
"assert($(\"p\").css(\"font-family\").match(/monospace/i), 'message: Your <code>p</code> element should still use the font <code>Monospace</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -750,10 +750,10 @@
|
||||
"Now comment out your call to Google Fonts, so that the <code>Lobster</code> font isn't available. Notice how it degrades to the <code>Monospace</code> font."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'Your h2 element should use the font <code>Lobster</code>.')",
|
||||
"assert($(\"h2\").css(\"font-family\").match(/lobster.*,.*monospace/i), 'Your h2 element should degrade to the font <code>Monospace</code> when <code>Lobster</code> is not available.')",
|
||||
"assert(new RegExp(\"<!--\", \"gi\").test(editor), 'Comment out your call to Google for the <code>Lobster</code> font by putting <code><!--</code> in front of it.')",
|
||||
"assert(new RegExp(\"-->\", \"gi\").test(editor), 'Be sure to close your comment by adding <code>--></code>.')"
|
||||
"assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'message: Your h2 element should use the font <code>Lobster</code>.')",
|
||||
"assert($(\"h2\").css(\"font-family\").match(/lobster.*,.*monospace/i), 'message: Your h2 element should degrade to the font <code>Monospace</code> when <code>Lobster</code> is not available.')",
|
||||
"assert(new RegExp(\"<!--\", \"gi\").test(editor), 'message: Comment out your call to Google for the <code>Lobster</code> font by putting <code><!--</code> in front of it.')",
|
||||
"assert(new RegExp(\"-->\", \"gi\").test(editor), 'message: Be sure to close your comment by adding <code>--></code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -818,8 +818,8 @@
|
||||
"<code>https://bit.ly/fcc-relaxing-cat</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"img\").length > 0, 'Your page should have an image element.')",
|
||||
"assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat\", \"gi\").test($(\"img\").attr(\"src\")), 'Your image should have a <code>src</code> attribute that points to the kitten image.')"
|
||||
"assert($(\"img\").length > 0, 'message: Your page should have an image element.')",
|
||||
"assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat\", \"gi\").test($(\"img\").attr(\"src\")), 'message: Your image should have a <code>src</code> attribute that points to the kitten image.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -884,8 +884,8 @@
|
||||
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"img\").hasClass(\"smaller-image\"), 'Your <code>img</code> element should have the class <code>smaller-image</code>.')",
|
||||
"assert($(\"img\").width() === 100, 'Your image should be 100 pixels wide.')"
|
||||
"assert($(\"img\").hasClass(\"smaller-image\"), 'message: Your <code>img</code> element should have the class <code>smaller-image</code>.')",
|
||||
"assert($(\"img\").width() === 100, 'message: Your image should be 100 pixels wide.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -957,11 +957,11 @@
|
||||
"<code><img class=\"class1 class2\"></code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"img\").hasClass(\"smaller-image\"), 'Your <code>img</code> element should have the class <code>smaller-image</code>.')",
|
||||
"assert($(\"img\").hasClass(\"thick-green-border\"), 'Your <code>img</code> element should have the class <code>thick-green-border</code>.')",
|
||||
"assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'Give your image a border width of <code>10px</code>.')",
|
||||
"assert($(\"img\").css(\"border-right-style\") === \"solid\", 'Give your image a border style of <code>solid</code>.')",
|
||||
"assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'The border around your <code>img</code> element should be green.')"
|
||||
"assert($(\"img\").hasClass(\"smaller-image\"), 'message: Your <code>img</code> element should have the class <code>smaller-image</code>.')",
|
||||
"assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your <code>img</code> element should have the class <code>thick-green-border</code>.')",
|
||||
"assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'message: Give your image a border width of <code>10px</code>.')",
|
||||
"assert($(\"img\").css(\"border-right-style\") === \"solid\", 'message: Give your image a border style of <code>solid</code>.')",
|
||||
"assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'message: The border around your <code>img</code> element should be green.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1032,8 +1032,8 @@
|
||||
"Give your cat photo a <code>border-radius</code> of <code>10px</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"img\").hasClass(\"thick-green-border\"), 'Your image element should have the class \"thick-green-border\".')",
|
||||
"assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'Your image should have a border radius of <code>10px</code>')"
|
||||
"assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your image element should have the class \"thick-green-border\".')",
|
||||
"assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'message: Your image should have a border radius of <code>10px</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1109,8 +1109,8 @@
|
||||
"Give your cat photo a <code>border-radius</code> of <code>50%</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of <code>50%</code>, making it perfectly circular.')",
|
||||
"assert(editor.match(/50%/g), 'Be sure to use a percentage instead of a pixel value.')"
|
||||
"assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'message: Your image should have a border radius of <code>50%</code>, making it perfectly circular.')",
|
||||
"assert(editor.match(/50%/g), 'message: Be sure to use a percentage instead of a pixel value.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1181,9 +1181,9 @@
|
||||
"Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert((/cat photos/gi).test($(\"a\").text()), 'Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\".')",
|
||||
"assert(/http:\\/\\/freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an <code>a</code> element that links to <code>http://freecatphotoapp.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.')"
|
||||
"assert((/cat photos/gi).test($(\"a\").text()), 'message: Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\".')",
|
||||
"assert(/http:\\/\\/freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'message: You need an <code>a</code> element that links to <code>http://freecatphotoapp.com</code>')",
|
||||
"assert(editor.match(/<\\/a>/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'message: Make sure your <code>a</code> element has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1259,14 +1259,14 @@
|
||||
"Now nest your existing <code>a</code> element within a new <code>p</code> element (just after the existing <code>h2</code> element) so that the surrounding paragraph says \"View more cat photos\", but where only \"cat photos\" is a link, and the rest of the text is plain text."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0, 'You need an <code>a</code> element that links to \"http://www.freecatphotoapp.com\".')",
|
||||
"assert($(\"a\").text().match(/cat\\sphotos/gi), 'Your <code>a</code> element should have the anchor text of \"cat photos\"')",
|
||||
"assert($(\"p\") && $(\"p\").length > 2, 'Create a new <code>p</code> element around your <code>a</code> element.')",
|
||||
"assert($(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\"), 'Your <code>a</code> element should be nested within your new <code>p</code> element.')",
|
||||
"assert($(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().text().match(/^\\s*View\\smore\\s/gi), 'Your <code>p</code> element should have the text \"View more \" (with a space after it).')",
|
||||
"assert(!$(\"a\").text().match(/View\\smore/gi), 'Your <code>a</code> element should <em>not</em> have the text \"View more\".')",
|
||||
"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.')"
|
||||
"assert($(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0, 'message: You need an <code>a</code> element that links to \"http://www.freecatphotoapp.com\".')",
|
||||
"assert($(\"a\").text().match(/cat\\sphotos/gi), 'message: Your <code>a</code> element should have the anchor text of \"cat photos\"')",
|
||||
"assert($(\"p\") && $(\"p\").length > 2, 'message: Create a new <code>p</code> element around your <code>a</code> element.')",
|
||||
"assert($(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\"), 'message: Your <code>a</code> element should be nested within your new <code>p</code> element.')",
|
||||
"assert($(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().text().match(/^\\s*View\\smore\\s/gi), 'message: Your <code>p</code> element should have the text \"View more \" (with a space after it).')",
|
||||
"assert(!$(\"a\").text().match(/View\\smore/gi), 'message: Your <code>a</code> element should <em>not</em> have the text \"View more\".')",
|
||||
"assert(editor.match(/<\\/p>/g) && editor.match(/<p/g) && editor.match(/<\\/p>/g).length === editor.match(/<p/g).length, 'message: 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, 'message: Make sure each of your <code>a</code> elements has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1340,7 +1340,7 @@
|
||||
"Replace the value of your <code>a</code> element's <code>href</code> attribute with a <code>#</code>, also known as a hash symbol, to turn it into a dead link."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"a\").attr(\"href\") === \"#\", 'Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to \"#\".')"
|
||||
"assert($(\"a\").attr(\"href\") === \"#\", 'message: Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to \"#\".')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1414,9 +1414,9 @@
|
||||
"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": [
|
||||
"assert($(\"a\").children(\"img.smaller-image\").length > 0, 'Nest the existing <code>img</code> element within an <code>a</code> element.')",
|
||||
"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 <code>#</code>.')",
|
||||
"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.')"
|
||||
"assert($(\"a\").children(\"img.smaller-image\").length > 0, 'message: Nest the existing <code>img</code> element within an <code>a</code> element.')",
|
||||
"assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'message: Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.')",
|
||||
"assert(editor.match(/<\\/a>/g) && editor.match(/<a/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'message: Make sure each of your <code>a</code> elements has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1493,7 +1493,7 @@
|
||||
"Add an <code>alt</code> attribute with the text <code>A cute orange cat lying on its back</code> to our cat photo."
|
||||
],
|
||||
"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 <code>A cute orange cat lying on its back</code>')"
|
||||
"assert($(\"img\").filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'message: Your image element should have an <code>alt</code> attribute set to <code>A cute orange cat lying on its back</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1574,10 +1574,10 @@
|
||||
"Remove the last two <code>p</code> elements and create an unordered list of three things that cats love at the bottom of the page."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"ul\").length > 0, 'Create a <code>ul</code> element.')",
|
||||
"assert($(\"ul li\").length > 2, 'You should have three <code>li</code> elements within your <code>ul</code> element.')",
|
||||
"assert(editor.match(/<\\/ul>/gi) && editor.match(/<ul/gi) && editor.match(/<\\/ul>/gi).length === editor.match(/<ul/gi).length, 'Make sure your <code>ul</code> element has a closing tag.')",
|
||||
"assert(editor.match(/<\\/li>/gi) && editor.match(/<li[\\s>]/gi) && editor.match(/<\\/li>/gi).length === editor.match(/<li[\\s>]/gi).length, 'Make sure your <code>li</code> elements have closing tags.')"
|
||||
"assert($(\"ul\").length > 0, 'message: Create a <code>ul</code> element.')",
|
||||
"assert($(\"ul li\").length > 2, 'message: You should have three <code>li</code> elements within your <code>ul</code> element.')",
|
||||
"assert(editor.match(/<\\/ul>/gi) && editor.match(/<ul/gi) && editor.match(/<\\/ul>/gi).length === editor.match(/<ul/gi).length, 'message: Make sure your <code>ul</code> element has a closing tag.')",
|
||||
"assert(editor.match(/<\\/li>/gi) && editor.match(/<li[\\s>]/gi) && editor.match(/<\\/li>/gi).length === editor.match(/<li[\\s>]/gi).length, 'message: Make sure your <code>li</code> elements have closing tags.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1661,13 +1661,13 @@
|
||||
"Create an ordered list of the top 3 things cats hate the most."
|
||||
],
|
||||
"tests": [
|
||||
"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 page.')",
|
||||
"assert($(\"ul li\").length > 2, 'You should have three <code>li</code> elements within your <code>ul</code> element.')",
|
||||
"assert($(\"ol li\").length > 2, 'You should have three <code>li</code> elements within your <code>ol</code> element.')",
|
||||
"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(/<\\/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) && 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.')"
|
||||
"assert($(\"ul\").length > 0, 'message: You should have an <code>ul</code> element on your page.')",
|
||||
"assert($(\"ol\").length > 0, 'message: You should have an <code>ol</code> element on your page.')",
|
||||
"assert($(\"ul li\").length > 2, 'message: You should have three <code>li</code> elements within your <code>ul</code> element.')",
|
||||
"assert($(\"ol li\").length > 2, 'message: You should have three <code>li</code> elements within your <code>ol</code> element.')",
|
||||
"assert(editor.match(/<\\/ul>/g) && editor.match(/<\\/ul>/g).length === editor.match(/<ul>/g).length, 'message: Make sure your <code>ul</code> element has a closing tag.')",
|
||||
"assert(editor.match(/<\\/ol>/g) && editor.match(/<\\/ol>/g).length === editor.match(/<ol>/g).length, 'message: Make sure your <code>ol</code> element has a closing tag.')",
|
||||
"assert(editor.match(/<\\/li>/g) && editor.match(/<li>/g) && editor.match(/<\\/li>/g).length === editor.match(/<li>/g).length, 'message: Make sure your <code>li</code> element has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1753,7 +1753,7 @@
|
||||
"Create an <code>input</code> element of type <code>text</code> below your lists."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"input[type=text]\").length > 0, 'Your app should have an <code>input</code> element of type <code>text</code>.')"
|
||||
"assert($(\"input[type=text]\").length > 0, 'message: Your app should have an <code>input</code> element of type <code>text</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1838,8 +1838,8 @@
|
||||
"Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\"."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"input[placeholder]\").length > 0, 'Add a <code>placeholder</code> attribute text <code>input</code> element.')",
|
||||
"assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'Set the value of your placeholder attribute to \"cat photo URL\".')"
|
||||
"assert($(\"input[placeholder]\").length > 0, 'message: Add a <code>placeholder</code> attribute text <code>input</code> element.')",
|
||||
"assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'message: Set the value of your placeholder attribute to \"cat photo URL\".')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -1923,9 +1923,9 @@
|
||||
"Nest your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'Nest your text input element within a <code>form</code> element.')",
|
||||
"assert($(\"form\").attr(\"action\") === \"/submit-cat-photo\", 'Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>')",
|
||||
"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($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'message: Nest your text input element within a <code>form</code> element.')",
|
||||
"assert($(\"form\").attr(\"action\") === \"/submit-cat-photo\", 'message: Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>')",
|
||||
"assert(editor.match(/<\\/form>/g) && editor.match(/<form/g) && editor.match(/<\\/form>/g).length === editor.match(/<form/g).length, 'message: Make sure your <code>form</code> element has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -2009,10 +2009,10 @@
|
||||
"Add a submit button to your <code>form</code> element with type <code>submit</code> and \"Submit\" as its text."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"form\").children(\"button\").length > 0, 'Your form should have a button inside it.')",
|
||||
"assert($(\"button\").attr(\"type\") === \"submit\", 'Your submit button should have the attribute <code>type</code> set to <code>submit</code>.')",
|
||||
"assert($(\"button\").text().match(/submit/gi), 'Your submit button should have the text \"submit\".')",
|
||||
"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.')"
|
||||
"assert($(\"form\").children(\"button\").length > 0, 'message: Your form should have a button inside it.')",
|
||||
"assert($(\"button\").attr(\"type\") === \"submit\", 'message: Your submit button should have the attribute <code>type</code> set to <code>submit</code>.')",
|
||||
"assert($(\"button\").text().match(/submit/gi), 'message: Your submit button should have the text \"submit\".')",
|
||||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'message: Make sure your <code>button</code> element has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -2099,7 +2099,7 @@
|
||||
"Note: This field does not work in Safari."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"input\").prop(\"required\"), 'Your text <code>input</code> element should have the <code>required</code> attribute.')"
|
||||
"assert($(\"input\").prop(\"required\"), 'message: Your text <code>input</code> element should have the <code>required</code> attribute.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -2189,12 +2189,12 @@
|
||||
"Add a pair of radio buttons to your form. One should have the option of <code>indoor</code> and the other should have the option of <code>outdoor</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')",
|
||||
"assert($('label > input[type=\"radio\"]').filter(\"[name='indoor-outdoor']\").length > 1, 'Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.')",
|
||||
"assert($('label > input[type=\"radio\"]:only-child').length > 1, 'Each of your two radio button elements should be nested 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($(\"label\").text().match(/indoor/gi), 'One of your radio buttons should have the label <code>indoor</code>.')",
|
||||
"assert($(\"label\").text().match(/outdoor/gi), 'One of your radio buttons should have the label <code>outdoor</code>.')"
|
||||
"assert($('input[type=\"radio\"]').length > 1, 'message: Your page should have two radio button elements.')",
|
||||
"assert($('label > input[type=\"radio\"]').filter(\"[name='indoor-outdoor']\").length > 1, 'message: Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.')",
|
||||
"assert($('label > input[type=\"radio\"]:only-child').length > 1, 'message: Each of your two radio button elements should be nested 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), 'message: Make sure each of your <code>label</code> elements has a closing tag.')",
|
||||
"assert($(\"label\").text().match(/indoor/gi), 'message: One of your radio buttons should have the label <code>indoor</code>.')",
|
||||
"assert($(\"label\").text().match(/outdoor/gi), 'message: One of your radio buttons should have the label <code>outdoor</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -2290,10 +2290,10 @@
|
||||
"Add to your form a set of three checkboxes. Each checkbox should be nested within its own <code>label</code> element. All three should share the <code>name</code> attribute of <code>personality</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')",
|
||||
"assert($('label > input[type=\"checkbox\"]:only-child').length > 2, 'Each of your three checkbox elements should be nested 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($('label > input[type=\"checkbox\"]').filter(\"[name='personality']\").length > 2, 'Give your checkboxes the <code>name</code> attribute of <code>personality</code>.')"
|
||||
"assert($('input[type=\"checkbox\"]').length > 2, 'message: Your page should have three checkbox elements.')",
|
||||
"assert($('label > input[type=\"checkbox\"]:only-child').length > 2, 'message: Each of your three checkbox elements should be nested 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, 'message: Make sure each of your <code>label</code> elements has a closing tag.')",
|
||||
"assert($('label > input[type=\"checkbox\"]').filter(\"[name='personality']\").length > 2, 'message: Give your checkboxes the <code>name</code> attribute of <code>personality</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -2385,8 +2385,8 @@
|
||||
"Set the first of your <code>radio buttons</code> and the first of your <code>checkboxes</code> to both be checked by default."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('input[type=\"radio\"]').prop(\"checked\"), 'Your first radio button on your form should be checked by default.')",
|
||||
"assert($('input[type=\"checkbox\"]').prop(\"checked\"), 'Your first checkbox on your form should be checked by default.')"
|
||||
"assert($('input[type=\"radio\"]').prop(\"checked\"), 'message: Your first radio button on your form should be checked by default.')",
|
||||
"assert($('input[type=\"checkbox\"]').prop(\"checked\"), 'message: Your first checkbox on your form should be checked by default.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -2479,10 +2479,10 @@
|
||||
"Nest your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"div\").children(\"p\").length > 1, 'Nest your <code>p</code> element inside your <code>div</code> element.')",
|
||||
"assert($(\"div\").children(\"ul\").length > 0, 'Nest your <code>ul</code> element inside your <code>div</code> element.')",
|
||||
"assert($(\"div\").children(\"ol\").length > 0, 'Nest your <code>ol</code> element inside your <code>div</code> element.')",
|
||||
"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.')"
|
||||
"assert($(\"div\").children(\"p\").length > 1, 'message: Nest your <code>p</code> element inside your <code>div</code> element.')",
|
||||
"assert($(\"div\").children(\"ul\").length > 0, 'message: Nest your <code>ul</code> element inside your <code>div</code> element.')",
|
||||
"assert($(\"div\").children(\"ol\").length > 0, 'message: Nest your <code>ol</code> element inside your <code>div</code> element.')",
|
||||
"assert(editor.match(/<\\/div>/g) && editor.match(/<\\/div>/g).length === editor.match(/<div>/g).length, 'message: Make sure your <code>div</code> element has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -2580,8 +2580,8 @@
|
||||
"Create a class called <code>gray-background</code> with the <code>background-color</code> of gray. Assign this class to your <code>div</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"div\").hasClass(\"gray-background\"), 'Give your <code>div</code> element the class <code>gray-background</code>.')",
|
||||
"assert($(\".gray-background\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'Your <code>div</code> element should have a gray background.')"
|
||||
"assert($(\"div\").hasClass(\"gray-background\"), 'message: Give your <code>div</code> element the class <code>gray-background</code>.')",
|
||||
"assert($(\".gray-background\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'message: Your <code>div</code> element should have a gray background.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -2676,7 +2676,7 @@
|
||||
"Give your <code>form</code> element the id <code>cat-photo-form</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.')"
|
||||
"assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'message: Give your <code>form</code> element the id of <code>cat-photo-form</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -2775,10 +2775,10 @@
|
||||
"Try giving your form, which now has the <code>id</code> attribute of <code>cat-photo-form</code>, a green background."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.')",
|
||||
"assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'Your <code>form</code> element should have the <code>background-color</code> of green.')",
|
||||
"assert(editor.match(/<form.*cat-photo-form.*>/gi) && editor.match(/<form.*cat-photo-form.*>/gi).length > 0, 'Make sure your <code>form</code> element has an <code>id</code> attribute.')",
|
||||
"assert(!editor.match(/<form.*style.*>/gi) && !editor.match(/<form.*class.*>/gi), 'Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.')"
|
||||
"assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'message: Give your <code>form</code> element the id of <code>cat-photo-form</code>.')",
|
||||
"assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'message: Your <code>form</code> element should have the <code>background-color</code> of green.')",
|
||||
"assert(editor.match(/<form.*cat-photo-form.*>/gi) && editor.match(/<form.*cat-photo-form.*>/gi).length > 0, 'message: Make sure your <code>form</code> element has an <code>id</code> attribute.')",
|
||||
"assert(!editor.match(/<form.*style.*>/gi) && !editor.match(/<form.*class.*>/gi), 'message: Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||||
@ -2879,7 +2879,7 @@
|
||||
"Change the <code>padding</code> of your green box to match that of your red box."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".green-box\").css(\"padding-top\") === \"20px\", 'Your <code>green-box</code> class should give elements <code>20px</code> of <code>padding</code>.')"
|
||||
"assert($(\".green-box\").css(\"padding-top\") === \"20px\", 'message: Your <code>green-box</code> class should give elements <code>20px</code> of <code>padding</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -2955,7 +2955,7 @@
|
||||
"Change the <code>margin</code> of the green box to match that of the red box."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".green-box\").css(\"margin-top\") === \"20px\", 'Your <code>green-box</code> class should give elements <code>20px</code> of <code>margin</code>.')"
|
||||
"assert($(\".green-box\").css(\"margin-top\") === \"20px\", 'message: Your <code>green-box</code> class should give elements <code>20px</code> of <code>margin</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3030,7 +3030,7 @@
|
||||
"Change the <code>margin</code> of the green box to <code>-15px</code>, so it fills the entire horizontal width of the yellow box around it."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".green-box\").css(\"margin-top\") === \"-15px\", 'Your <code>green-box</code> class should give elements <code>-15px</code> of <code>margin</code>.')"
|
||||
"assert($(\".green-box\").css(\"margin-top\") === \"-15px\", 'message: Your <code>green-box</code> class should give elements <code>-15px</code> of <code>margin</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3103,10 +3103,10 @@
|
||||
"Give the green box a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'Your <code>green-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'Your <code>green-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>green-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.')"
|
||||
"assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'message: Your <code>green-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'message: Your <code>green-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'message: Your <code>green-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'message: Your <code>green-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3178,10 +3178,10 @@
|
||||
"Give the green box a <code>margin</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.')"
|
||||
"assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'message: Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'message: Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'message: Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'message: Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3253,10 +3253,10 @@
|
||||
"Use Clockwise Notation to give the \".green-box\" class a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.')"
|
||||
"assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'message: Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'message: Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'message: Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.')",
|
||||
"assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'message: Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3328,10 +3328,10 @@
|
||||
"Use <code>Clockwise Notation</code> to give the element with the <code>green-box</code> class a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.')"
|
||||
"assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'message: Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'message: Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'message: Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.')",
|
||||
"assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'message: Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3406,8 +3406,8 @@
|
||||
"<code>}</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of black.')",
|
||||
"assert(editor.match(/<style>\\s*body\\s*\\{\\s*background-color\\s*:\\s*black;?\\s*\\}\\s*<\\/style>/i), 'Make sure your CSS rule is properly formatted with both and opening and closing curly bracket.')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Give your <code>body</code> element the <code>background-color</code> of black.')",
|
||||
"assert(editor.match(/<style>\\s*body\\s*\\{\\s*background-color\\s*:\\s*black;?\\s*\\}\\s*<\\/style>/i), 'message: Make sure your CSS rule is properly formatted with both and opening and closing curly bracket.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3448,13 +3448,13 @@
|
||||
"Finally, give your <code>body</code> element the font-family of <code>Monospace</code> by adding <code>font-family: Monospace;</code> to your <code>body</code> element's style declaration."
|
||||
],
|
||||
"tests": [
|
||||
"assert(($(\"h1\").length > 0), 'Create an <code>h1</code> element.')",
|
||||
"assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your <code>h1</code> element should have the text <code>Hello World</code>.')",
|
||||
"assert(editor.match(/<\\/h1>/g) && editor.match(/<h1/g) && editor.match(/<\\/h1>/g).length === editor.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.')",
|
||||
"assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your <code>body</code> element the <code>color</code> property of <code>green</code>.')",
|
||||
"assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> property of <code>Monospace</code>.')",
|
||||
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your <code>h1</code> element should inherit the font <code>Monospace</code> from your <code>body</code> element.')",
|
||||
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your <code>h1</code> element should inherit the color green from your <code>body</code> element.')"
|
||||
"assert(($(\"h1\").length > 0), 'message: Create an <code>h1</code> element.')",
|
||||
"assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'message: Your <code>h1</code> element should have the text <code>Hello World</code>.')",
|
||||
"assert(editor.match(/<\\/h1>/g) && editor.match(/<h1/g) && editor.match(/<\\/h1>/g).length === editor.match(/<h1/g).length, 'message: Make sure your <code>h1</code> element has a closing tag.')",
|
||||
"assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'message: Give your <code>body</code> element the <code>color</code> property of <code>green</code>.')",
|
||||
"assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'message: Give your <code>body</code> element the <code>font-family</code> property of <code>Monospace</code>.')",
|
||||
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'message: Your <code>h1</code> element should inherit the font <code>Monospace</code> from your <code>body</code> element.')",
|
||||
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'message: Your <code>h1</code> element should inherit the color green from your <code>body</code> element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3496,8 +3496,8 @@
|
||||
"Give your <code>h1</code> element the class of <code>pink-text</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your <code>h1</code> element should be pink.')"
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'message: Your <code>h1</code> element should be pink.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3542,9 +3542,9 @@
|
||||
"<code>class=\"class1 class2\"</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.')",
|
||||
"assert($(\"h1\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your <code>h1</code> element should be blue.')"
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your <code>h1</code> element should have the class <code>blue-text</code>.')",
|
||||
"assert($(\"h1\").css(\"color\") === \"rgb(0, 0, 255)\", 'message: Your <code>h1</code> element should be blue.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3597,12 +3597,12 @@
|
||||
"<code>}</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.')",
|
||||
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Give your <code>h1</code> element the id of <code>orange-text</code>.')",
|
||||
"assert(editor.match(/#orange-text\\s*{/gi), 'Create a CSS declaration for your <code>orange-text</code> id')",
|
||||
"assert(!editor.match(/<h1.*style.*>/gi), 'Do not give your <code>h1</code> any <code>style</code> attributes.')",
|
||||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'Your <code>h1</code> element should be orange.')"
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your <code>h1</code> element should have the class <code>blue-text</code>.')",
|
||||
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Give your <code>h1</code> element the id of <code>orange-text</code>.')",
|
||||
"assert(editor.match(/#orange-text\\s*{/gi), 'message: Create a CSS declaration for your <code>orange-text</code> id')",
|
||||
"assert(!editor.match(/<h1.*style.*>/gi), 'message: Do not give your <code>h1</code> any <code>style</code> attributes.')",
|
||||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'message: Your <code>h1</code> element should be orange.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3657,11 +3657,11 @@
|
||||
"Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.')",
|
||||
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.')",
|
||||
"assert(editor.match(/<h1.*style/gi) && editor.match(/<h1.*style.*color\\s*?:/gi), 'Give your <code>h1</code> element the inline style of <code>color: white</code>.')",
|
||||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 255, 255)\", 'Your <code>h1</code> element should be white.')"
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your <code>h1</code> element should have the class <code>blue-text</code>.')",
|
||||
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Your <code>h1</code> element should have the id of <code>orange-text</code>.')",
|
||||
"assert(editor.match(/<h1.*style/gi) && editor.match(/<h1.*style.*color\\s*?:/gi), 'message: Give your <code>h1</code> element the inline style of <code>color: white</code>.')",
|
||||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 255, 255)\", 'message: Your <code>h1</code> element should be white.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3716,12 +3716,12 @@
|
||||
"<code>color: red !important;</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.')",
|
||||
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.')",
|
||||
"assert(editor.match(/<h1.*style/gi) && editor.match(/<h1.*style.*color\\s*?:/gi), 'Your <code>h1</code> element should have the inline style of <code>color: white</code>.')",
|
||||
"assert(editor.match(/pink.*\\!important;/gi), 'Your <code>pink-text</code> class should have the <code>!important</code> keyword to override all other declarations.')",
|
||||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your <code>h1</code> element should be pink.')"
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your <code>h1</code> element should have the class <code>blue-text</code>.')",
|
||||
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Your <code>h1</code> element should have the id of <code>orange-text</code>.')",
|
||||
"assert(editor.match(/<h1.*style/gi) && editor.match(/<h1.*style.*color\\s*?:/gi), 'message: Your <code>h1</code> element should have the inline style of <code>color: white</code>.')",
|
||||
"assert(editor.match(/pink.*\\!important;/gi), 'message: Your <code>pink-text</code> class should have the <code>!important</code> keyword to override all other declarations.')",
|
||||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'message: Your <code>h1</code> element should be pink.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3775,8 +3775,8 @@
|
||||
"Replace the word <code>black</code> in our <code>body</code> element's background-color with its <code>hex code</code> representation, <code>#000000</code> "
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the background-color of black.')",
|
||||
"assert(editor.match(/#000000/g) && editor.match(/#000000/g).length > 0, 'Use the <code>hex code</code> for the color black instead of the word <code>black</code>. For example <code>body { color: #000000; }</code>')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Give your <code>body</code> element the background-color of black.')",
|
||||
"assert(editor.match(/#000000/g) && editor.match(/#000000/g).length > 0, 'message: Use the <code>hex code</code> for the color black instead of the word <code>black</code>. For example <code>body { color: #000000; }</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3814,8 +3814,8 @@
|
||||
"Let's turn our <code>body</code> element's background-color white by changing its hex code to <code>#FFFFFF</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'Your <code>body</code> element should have the <code>background-color</code> of white.')",
|
||||
"assert(editor.match(/#FFFFFF/ig) && editor.match(/#FFFFFF/ig).length > 0, 'Use the <code>hex code</code> for the color white instead of the word <code>white</code>. For example <code>body { color: #FFFFFF; }</code>')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'message: Your <code>body</code> element should have the <code>background-color</code> of white.')",
|
||||
"assert(editor.match(/#FFFFFF/ig) && editor.match(/#FFFFFF/ig).length > 0, 'message: Use the <code>hex code</code> for the color white instead of the word <code>white</code>. For example <code>body { color: #FFFFFF; }</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3854,8 +3854,8 @@
|
||||
"Make the <code>body</code> element's background color red by giving it the hex code value of <code>#FF0000</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of red.')",
|
||||
"assert(editor.match(/#FF0000/ig) && editor.match(/#FF0000/ig).length > 0, 'Use the <code>hex code</code> for the color red instead of the word <code>red</code>. For example <code>body { color: #FF0000; }</code>')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Give your <code>body</code> element the <code>background-color</code> of red.')",
|
||||
"assert(editor.match(/#FF0000/ig) && editor.match(/#FF0000/ig).length > 0, 'message: Use the <code>hex code</code> for the color red instead of the word <code>red</code>. For example <code>body { color: #FF0000; }</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3894,8 +3894,8 @@
|
||||
"Make the <code>body</code> element's background color green by giving it the hex code value of <code>#00FF00</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of <code>green</code>.')",
|
||||
"assert(editor.match(/#00FF00/ig) && editor.match(/#00FF00/ig).length > 0, 'Use the <code>hex code</code> for the color green instead of the word <code>green</code>. For example <code>body { color: #00FF00; }</code>')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'message: Give your <code>body</code> element the <code>background-color</code> of <code>green</code>.')",
|
||||
"assert(editor.match(/#00FF00/ig) && editor.match(/#00FF00/ig).length > 0, 'message: Use the <code>hex code</code> for the color green instead of the word <code>green</code>. For example <code>body { color: #00FF00; }</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3932,8 +3932,8 @@
|
||||
"Make the <code>body</code> element's background color blue by giving it the hex code value of <code>#0000FF</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'Give your <code>body</code> element the <code>background-color</code> of blue.')",
|
||||
"assert(editor.match(/#0000FF/ig) && editor.match(/#0000FF/ig).length > 0, 'Use the <code>hex code</code> for the color blue instead of the word <code>blue</code>. For example <code>body { color: #0000FF; }</code>')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'message: Give your <code>body</code> element the <code>background-color</code> of blue.')",
|
||||
"assert(editor.match(/#0000FF/ig) && editor.match(/#0000FF/ig).length > 0, 'message: Use the <code>hex code</code> for the color blue instead of the word <code>blue</code>. For example <code>body { color: #0000FF; }</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -3970,8 +3970,8 @@
|
||||
"Make the <code>body</code> element's background color orange by giving it the hex code value of <code>#FFA500</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of orange.')",
|
||||
"assert(editor.match(/#FFA500/ig) && editor.match(/#FFA500/ig).length > 0, 'Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>. For example <code>body { color: #FFA500; }</code>')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'message: Give your <code>body</code> element the <code>background-color</code> of orange.')",
|
||||
"assert(editor.match(/#FFA500/ig) && editor.match(/#FFA500/ig).length > 0, 'message: Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>. For example <code>body { color: #FFA500; }</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -4008,8 +4008,8 @@
|
||||
"Make the <code>body</code> element's background color gray by giving it the hex code value of <code>#808080</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'Give your <code>body</code> element the <code>background-color</code> of gray.')",
|
||||
"assert(editor.match(/#808080/g) && editor.match(/#808080/g).length > 0, 'Use the <code>hex code</code> the color gray instead of the word <code>gray</code>. For example <code>body { color: #808080; }</code>')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'message: Give your <code>body</code> element the <code>background-color</code> of gray.')",
|
||||
"assert(editor.match(/#808080/g) && editor.match(/#808080/g).length > 0, 'message: Use the <code>hex code</code> the color gray instead of the word <code>gray</code>. For example <code>body { color: #808080; }</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -4045,8 +4045,8 @@
|
||||
"Make the <code>body</code> element's background color a dark gray by giving it the hex code value of <code>#111111</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(17, 17, 17)\", 'Give your <code>body</code> element the <code>background-color</code> of a dark gray.')",
|
||||
"assert(editor.match(/#111111/g) && editor.match(/#111111/g).length > 0, 'Use <code>hex code</code> to make a dark gray. For example <code>body { color: #111111; }</code>')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(17, 17, 17)\", 'message: Give your <code>body</code> element the <code>background-color</code> of a dark gray.')",
|
||||
"assert(editor.match(/#111111/g) && editor.match(/#111111/g).length > 0, 'message: Use <code>hex code</code> to make a dark gray. For example <code>body { color: #111111; }</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -4083,8 +4083,8 @@
|
||||
"Go ahead, try using <code>#F00</code> to turn the <code>body</code> element's background-color red."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of red.')",
|
||||
"assert(editor.match(/#F00/ig) && editor.match(/#F00/ig).length > 0, 'Use <code>abbreviated hex code</code> instead of a six-character <code>hex code</code>. For example <code>body { color: #F00; }</code>')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Give your <code>body</code> element the <code>background-color</code> of red.')",
|
||||
"assert(editor.match(/#F00/ig) && editor.match(/#F00/ig).length > 0, 'message: Use <code>abbreviated hex code</code> instead of a six-character <code>hex code</code>. For example <code>body { color: #F00; }</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -4127,8 +4127,8 @@
|
||||
"Let's replace the hex code in our <code>body</code> element's background color with the RGB value for black: <code>rgb(0, 0, 0)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Your <code>body</code> element should have a black background.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of black. For example <code>body { background-color: rgb(0, 0, 0); }</code>')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Your <code>body</code> element should have a black background.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of black. For example <code>body { background-color: rgb(0, 0, 0); }</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -4174,8 +4174,8 @@
|
||||
"Change the <code>body</code> element's background color from the RGB value for black to the <code>rgb</code> value for white: <code>rgb(255, 255, 255)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'Your <code>body</code> should have a white background.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*255\\s*,\\s*255\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of white. For example <code>body { background-color: rgb(255, 255 , 255); }</code>')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'message: Your <code>body</code> should have a white background.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*255\\s*,\\s*255\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of white. For example <code>body { background-color: rgb(255, 255 , 255); }</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -4215,8 +4215,8 @@
|
||||
"Change the <code>body</code> element's background color to the RGB value red: <code>rgb(255, 0, 0)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'Your <code>body</code> should have a red background.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of red. For example <code>body { background-color: rgb(255, 0, 0); }</code>')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Your <code>body</code> should have a red background.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of red. For example <code>body { background-color: rgb(255, 0, 0); }</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -4251,8 +4251,8 @@
|
||||
"Now change the <code>body</code> element's background color to the <code>rgb</code> value green: <code>rgb(0, 255, 0)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'Your <code>body</code> element should have a green background.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*255\\s*,\\s*0\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of green. For example <code>body { background-color: rgb(0, 255, 0); }</code>')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'message: Your <code>body</code> element should have a green background.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*255\\s*,\\s*0\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of green. For example <code>body { background-color: rgb(0, 255, 0); }</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -4285,8 +4285,8 @@
|
||||
"Change the <code>body</code> element's background color to the RGB value blue: <code>rgb(0, 0, 255)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'Your <code>body</code> element should have a blue background.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*255\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of blue. For example <code>body { background-color: rgb(0, 0, 255); }</code>')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'message: Your <code>body</code> element should have a blue background.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*255\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of blue. For example <code>body { background-color: rgb(0, 0, 255); }</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -4320,8 +4320,8 @@
|
||||
"Change the <code>body</code> element's background color to the RGB value orange: <code>rgb(255, 165, 0)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'Your <code>body</code> element should have an orange background.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*165\\s*,\\s*0\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of orange. For example <code>body { background-color: rgb(255, 165, 0); }</code>')"
|
||||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'message: Your <code>body</code> element should have an orange background.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*165\\s*,\\s*0\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of orange. For example <code>body { background-color: rgb(255, 165, 0); }</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
|
||||
@ -16,9 +16,9 @@
|
||||
"This is important because without your <code>document ready function</code>, your code may run before your HTML is rendered, which would cause bugs."
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/<\\/script\\s*>/g) && editor.match(/<script(\\sasync|\\sdefer)*(\\s(charset|src|type)\\s*=\\s*[\"\\']+[^\"\\']*[\"\\']+)*(\\sasync|\\sdefer)*\\s*>/g) && editor.match(/<\\/script\\s*>/g).length === editor.match(/<script(\\sasync|\\sdefer)*(\\s(charset|src|type)\\s*=\\s*[\"\\']+[^\"\\']*[\"\\']+)*(\\sasync|\\sdefer)*\\s*>/g).length, 'Create a <code>script</code> element making sure it is valid and has a closing tag.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?document\\)\\.ready\\s*?\\(\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/g), 'You should add <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
|
||||
"assert(editor.match(/\\n*?\\s*?\\}\\s*?\\);/g), 'Close your <code>$(document).ready(function() {</code> function with <code>});</code>')"
|
||||
"assert(editor.match(/<\\/script\\s*>/g) && editor.match(/<script(\\sasync|\\sdefer)*(\\s(charset|src|type)\\s*=\\s*[\"\\']+[^\"\\']*[\"\\']+)*(\\sasync|\\sdefer)*\\s*>/g) && editor.match(/<\\/script\\s*>/g).length === editor.match(/<script(\\sasync|\\sdefer)*(\\s(charset|src|type)\\s*=\\s*[\"\\']+[^\"\\']*[\"\\']+)*(\\sasync|\\sdefer)*\\s*>/g).length, 'message: Create a <code>script</code> element making sure it is valid and has a closing tag.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?document\\)\\.ready\\s*?\\(\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/g), 'message: You should add <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
|
||||
"assert(editor.match(/\\n*?\\s*?\\}\\s*?\\);/g), 'message: Close your <code>$(document).ready(function() {</code> function with <code>});</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"",
|
||||
@ -72,8 +72,8 @@
|
||||
"Note that we've already included both the jQuery library and the Animate.css library in the background so that you can use them in the editor. So you are using jQuery to apply the Animate.css <code>bounce</code> class to your <code>button</code> elements."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"button\").hasClass(\"animated\") && $(\"button\").hasClass(\"bounce\"), 'Use the jQuery <code>addClass()</code> function to give the classes <code>animated</code> and <code>bounce</code> to your <code>button</code> elements.')",
|
||||
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
|
||||
"assert($(\"button\").hasClass(\"animated\") && $(\"button\").hasClass(\"bounce\"), 'message: Use the jQuery <code>addClass()</code> function to give the classes <code>animated</code> and <code>bounce</code> to your <code>button</code> elements.')",
|
||||
"assert(!editor.match(/class.*animated/g), 'message: Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -131,8 +131,8 @@
|
||||
"<code>$(\".text-primary\").addClass(\"animated shake\");</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".well\").hasClass(\"animated\") && $(\".well\").hasClass(\"shake\"), 'Use the jQuery <code>addClass()</code> function to give the classes <code>animated</code> and <code>shake</code> to all your elements with the class <code>well</code>.')",
|
||||
"assert(!editor.match(/class\\.\\*animated/g), 'Only use jQuery to add these classes to the element.')"
|
||||
"assert($(\".well\").hasClass(\"animated\") && $(\".well\").hasClass(\"shake\"), 'message: Use the jQuery <code>addClass()</code> function to give the classes <code>animated</code> and <code>shake</code> to all your elements with the class <code>well</code>.')",
|
||||
"assert(!editor.match(/class\\.\\*animated/g), 'message: Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -190,9 +190,9 @@
|
||||
"<code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"#target3\").hasClass(\"animated\"), 'Select the <code>button</code> element with the <code>id</code> of <code>target3</code> and use the jQuery <code>addClass()</code> function to give it the class of <code>animated</code>.')",
|
||||
"assert(($(\"#target3\").hasClass(\"fadeOut\") || $(\"#target3\").hasClass(\"fadeout\")) && editor.match(/\\$\\(.#target3.\\)/g), 'Target the element with the id <code>target3</code> and use the jQuery <code>addClass()</code> function to give it the class <code>fadeOut</code>.')",
|
||||
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
|
||||
"assert($(\"#target3\").hasClass(\"animated\"), 'message: Select the <code>button</code> element with the <code>id</code> of <code>target3</code> and use the jQuery <code>addClass()</code> function to give it the class of <code>animated</code>.')",
|
||||
"assert(($(\"#target3\").hasClass(\"fadeOut\") || $(\"#target3\").hasClass(\"fadeout\")) && editor.match(/\\$\\(.#target3.\\)/g), 'message: Target the element with the id <code>target3</code> and use the jQuery <code>addClass()</code> function to give it the class <code>fadeOut</code>.')",
|
||||
"assert(!editor.match(/class.*animated/g), 'message: Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -247,11 +247,11 @@
|
||||
"Delete all three of these jQuery functions from your <code>document ready function</code>, but leave your <code>document ready function</code> itself intact."
|
||||
],
|
||||
"tests": [
|
||||
"assert(!editor.match(/e\"\\);/g) && !editor.match(/t\"\\);/g), 'Delete all three of your jQuery functions from your <code>document ready function</code>.')",
|
||||
"assert(editor.match(/<script>/g), 'Leave your <code>script</code> element intact.')",
|
||||
"assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'Leave your <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
|
||||
"assert(editor.match(/\\n\\s+?\\}\\);/g), 'Leave your \"document ready function\" closing <code>})</code> intact.')",
|
||||
"assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'Leave your <code>script</code> element closing tag intact.')"
|
||||
"assert(!editor.match(/e\"\\);/g) && !editor.match(/t\"\\);/g), 'message: Delete all three of your jQuery functions from your <code>document ready function</code>.')",
|
||||
"assert(editor.match(/<script>/g), 'message: Leave your <code>script</code> element intact.')",
|
||||
"assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'message: Leave your <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
|
||||
"assert(editor.match(/\\n\\s+?\\}\\);/g), 'message: Leave your \"document ready function\" closing <code>})</code> intact.')",
|
||||
"assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'message: Leave your <code>script</code> element closing tag intact.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -307,12 +307,12 @@
|
||||
"Add the <code>btn-primary</code> class to the button with id <code>#target1</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?button\\s*?(?:'|\")/gi), 'Use the <code>$(\"button\")</code> selector.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.btn\\s*?(?:'|\")/gi), 'Use the <code>$(\".btn\")</code> selector.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?#target1\\s*?(?:'|\")/gi), 'Use the <code>$(\"#target1\")</code> selector.')",
|
||||
"assert(editor.match(/addClass/g) && editor.match(/addClass\\(\\s*?('|\")[\\w-]+\\1\\s*?\\)/g).length > 2, 'Only add one class with each of your three selectors.')",
|
||||
"assert($(\"#target1\").hasClass(\"animated\") && $(\"#target1\").hasClass(\"shake\") && $(\"#target1\").hasClass(\"btn-primary\"), 'Your <code>#target1</code> element should have the classes <code>animated</code>‚ <code>shake</code> and <code>btn-primary</code>.')",
|
||||
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?button\\s*?(?:'|\")/gi), 'message: Use the <code>$(\"button\")</code> selector.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.btn\\s*?(?:'|\")/gi), 'message: Use the <code>$(\".btn\")</code> selector.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?#target1\\s*?(?:'|\")/gi), 'message: Use the <code>$(\"#target1\")</code> selector.')",
|
||||
"assert(editor.match(/addClass/g) && editor.match(/addClass\\(\\s*?('|\")[\\w-]+\\1\\s*?\\)/g).length > 2, 'message: Only add one class with each of your three selectors.')",
|
||||
"assert($(\"#target1\").hasClass(\"animated\") && $(\"#target1\").hasClass(\"shake\") && $(\"#target1\").hasClass(\"btn-primary\"), 'message: Your <code>#target1</code> element should have the classes <code>animated</code>‚ <code>shake</code> and <code>btn-primary</code>.')",
|
||||
"assert(!editor.match(/class.*animated/g), 'message: Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -367,9 +367,9 @@
|
||||
"Let's remove the <code>btn-default</code> class from all of our <code>button</code> elements."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".btn-default\").length === 0, 'Remove the <code>btn-default</code> class from all of your <code>button</code> elements.')",
|
||||
"assert(editor.match(/btn btn-default/g), 'Only use jQuery to remove this class from the element.')",
|
||||
"assert(editor.match(/\\.[\\v\\s]*removeClass[\\s\\v]*\\([\\s\\v]*('|\")\\s*btn-default\\s*('|\")[\\s\\v]*\\)/gm), 'Only remove the <code>btn-default</code> class.')"
|
||||
"assert($(\".btn-default\").length === 0, 'message: Remove the <code>btn-default</code> class from all of your <code>button</code> elements.')",
|
||||
"assert(editor.match(/btn btn-default/g), 'message: Only use jQuery to remove this class from the element.')",
|
||||
"assert(editor.match(/\\.[\\v\\s]*removeClass[\\s\\v]*\\([\\s\\v]*('|\")\\s*btn-default\\s*('|\")[\\s\\v]*\\)/gm), 'message: Only remove the <code>btn-default</code> class.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -428,8 +428,8 @@
|
||||
"Select <code>target1</code> and change its color to red."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"#target1\").css(\"color\") === 'rgb(255, 0, 0)', 'Your <code>target1</code> element should have red text.')",
|
||||
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
|
||||
"assert($(\"#target1\").css(\"color\") === 'rgb(255, 0, 0)', 'message: Your <code>target1</code> element should have red text.')",
|
||||
"assert(!editor.match(/class.*animated/g), 'message: Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -491,9 +491,9 @@
|
||||
"Disable only the <code>target1</code> button."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"#target1\") && $(\"#target1\").prop(\"disabled\"), 'Disable your <code>target1</code> button.')",
|
||||
"assert($(\"#target2\") && !$(\"#target2\").prop(\"disabled\"), 'Do not disable any other buttons.')",
|
||||
"assert(!editor.match(/disabled>/g), 'Only use jQuery to add these classes to the element.')"
|
||||
"assert($(\"#target1\") && $(\"#target1\").prop(\"disabled\"), 'message: Disable your <code>target1</code> button.')",
|
||||
"assert($(\"#target2\") && !$(\"#target2\").prop(\"disabled\"), 'message: Do not disable any other buttons.')",
|
||||
"assert(!editor.match(/disabled>/g), 'message: Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -552,9 +552,9 @@
|
||||
],
|
||||
"releasedOn": "November 18, 2015",
|
||||
"tests": [
|
||||
"assert.isTrue((/<i>/gi).test($(\"#target4\").html()), 'Italicize the text in your <code>target4</code> button by adding HTML tags.')",
|
||||
"assert($(\"#target4\") && $(\"#target4\").text() === '#target4', 'Make sure the text is otherwise unchanged.')",
|
||||
"assert.isFalse((/<i>/gi).test($(\"h3\").html()), 'Do not alter any other text.')"
|
||||
"assert.isTrue((/<i>/gi).test($(\"#target4\").html()), 'message: Italicize the text in your <code>target4</code> button by adding HTML tags.')",
|
||||
"assert($(\"#target4\") && $(\"#target4\").text() === '#target4', 'message: Make sure the text is otherwise unchanged.')",
|
||||
"assert.isFalse((/<i>/gi).test($(\"h3\").html()), 'message: Do not alter any other text.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -600,8 +600,8 @@
|
||||
"Remove element <code>target4</code> from the page by using the <code>.remove()</code> function."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"#target4\").length === 0, 'Use jQuery to remove your <code>target4</code> element from your page.')",
|
||||
"assert(editor.match(/id=\"target4/g), 'Only use jQuery to remove this element.')"
|
||||
"assert($(\"#target4\").length === 0, 'message: Use jQuery to remove your <code>target4</code> element from your page.')",
|
||||
"assert(editor.match(/id=\"target4/g), 'message: Only use jQuery to remove this element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -656,9 +656,9 @@
|
||||
"Move your <code>target2</code> element from your <code>left-well</code> to your <code>right-well</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"#left-well\").children(\"#target2\").length === 0, 'Your <code>target2</code> element should not be inside your <code>left-well</code>.')",
|
||||
"assert($(\"#right-well\").children(\"#target2\").length > 0, 'Your <code>target2</code> element should be inside your <code>right-well</code>.')",
|
||||
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to move these elements.')"
|
||||
"assert($(\"#left-well\").children(\"#target2\").length === 0, 'message: Your <code>target2</code> element should not be inside your <code>left-well</code>.')",
|
||||
"assert($(\"#right-well\").children(\"#target2\").length > 0, 'message: Your <code>target2</code> element should be inside your <code>right-well</code>.')",
|
||||
"assert(!editor.match(/class.*animated/g), 'message: Only use jQuery to move these elements.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -717,9 +717,9 @@
|
||||
"Clone your <code>target5</code> element and append it to your <code>left-well</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"#right-well\").children(\"#target5\").length > 0, 'Your <code>target5</code> element should be inside your <code>right-well</code>.')",
|
||||
"assert($(\"#left-well\").children(\"#target5\").length > 0, 'A copy of your <code>target5</code> element should also be inside your <code>left-well</code>.')",
|
||||
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to move these elements.')"
|
||||
"assert($(\"#right-well\").children(\"#target5\").length > 0, 'message: Your <code>target5</code> element should be inside your <code>right-well</code>.')",
|
||||
"assert($(\"#left-well\").children(\"#target5\").length > 0, 'message: A copy of your <code>target5</code> element should also be inside your <code>left-well</code>.')",
|
||||
"assert(!editor.match(/class.*animated/g), 'message: Only use jQuery to move these elements.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -780,10 +780,10 @@
|
||||
"Give the parent of the <code>#target1</code> element a background-color of red."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"#left-well\").css(\"background-color\") === 'red' || $(\"#left-well\").css(\"background-color\") === 'rgb(255, 0, 0)' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#ff0000' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#f00', 'Your <code>left-well</code> element should have a red background.')",
|
||||
"assert(editor.match(/\\.parent\\(\\)\\.css/g), 'You should use the <code>.parent()</code> function to modify this element.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?#target1\\s*?(?:'|\")\\s*?\\)\\.parent/gi), 'The <code>.parent()</code> method should be called on the <code>#target1</code> element.')",
|
||||
"assert(editor.match(/<div class=\"well\" id=\"left-well\">/g), 'Only use jQuery to add these classes to the element.')"
|
||||
"assert($(\"#left-well\").css(\"background-color\") === 'red' || $(\"#left-well\").css(\"background-color\") === 'rgb(255, 0, 0)' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#ff0000' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#f00', 'message: Your <code>left-well</code> element should have a red background.')",
|
||||
"assert(editor.match(/\\.parent\\(\\)\\.css/g), 'message: You should use the <code>.parent()</code> function to modify this element.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?#target1\\s*?(?:'|\")\\s*?\\)\\.parent/gi), 'message: The <code>.parent()</code> method should be called on the <code>#target1</code> element.')",
|
||||
"assert(editor.match(/<div class=\"well\" id=\"left-well\">/g), 'message: Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -847,9 +847,9 @@
|
||||
"Give all the children of your <code>#right-well</code> element a color of green."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"#right-well\").children().css(\"color\") === 'rgb(0, 128, 0)', 'All children of <code>#right-well</code> should have green text.')",
|
||||
"assert(editor.match(/\\.children\\(\\)\\.css/g), 'You should use the <code>children()</code> function to modify these elements.')",
|
||||
"assert(editor.match(/<div class=\"well\" id=\"right-well\">/g), 'Only use jQuery to add these classes to the element.')"
|
||||
"assert($(\"#right-well\").children().css(\"color\") === 'rgb(0, 128, 0)', 'message: All children of <code>#right-well</code> should have green text.')",
|
||||
"assert(editor.match(/\\.children\\(\\)\\.css/g), 'message: You should use the <code>children()</code> function to modify these elements.')",
|
||||
"assert(editor.match(/<div class=\"well\" id=\"right-well\">/g), 'message: Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -912,9 +912,9 @@
|
||||
"Make the second child in each of your well elements bounce. You must target the children of element with the <code>target</code> class."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".target:nth-child(2)\").hasClass(\"animated\") && $(\".target:nth-child(2)\").hasClass(\"bounce\"), 'The second element in your <code>target</code> elements should bounce.')",
|
||||
"assert(editor.match(/\\:nth-child\\(/g), 'You should use the <code>:nth-child()</code> function to modify these elements.')",
|
||||
"assert(editor.match(/<button class=\"btn btn-default target\" id=\"target2\">/g), 'Only use jQuery to add these classes to the element.')"
|
||||
"assert($(\".target:nth-child(2)\").hasClass(\"animated\") && $(\".target:nth-child(2)\").hasClass(\"bounce\"), 'message: The second element in your <code>target</code> elements should bounce.')",
|
||||
"assert(editor.match(/\\:nth-child\\(/g), 'message: You should use the <code>:nth-child()</code> function to modify these elements.')",
|
||||
"assert(editor.match(/<button class=\"btn btn-default target\" id=\"target2\">/g), 'message: Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -977,9 +977,9 @@
|
||||
"Try selecting all the even-numbered elements and giving them the classes of <code>animated</code> and <code>shake</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('.target:even').hasClass('animated') && $('.target:even').hasClass('shake'), 'All the <code>target</code> elements that computer considers even should shake.')",
|
||||
"assert(editor.match(/\\:even/g), 'You should use the <code>:even</code> function to modify these elements.')",
|
||||
"assert(editor.match(/<button class=\"btn btn-default target\" id=\"target3\">/g), 'Only use jQuery to add these classes to the element.')"
|
||||
"assert($('.target:even').hasClass('animated') && $('.target:even').hasClass('shake'), 'message: All the <code>target</code> elements that computer considers even should shake.')",
|
||||
"assert(editor.match(/\\:even/g), 'message: You should use the <code>:even</code> function to modify these elements.')",
|
||||
"assert(editor.match(/<button class=\"btn btn-default target\" id=\"target3\">/g), 'message: Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -1041,7 +1041,7 @@
|
||||
"But let's do something more dramatic. Add the classes <code>animated</code> and <code>hinge</code> to your <code>body</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('body').hasClass('animated') && $('body').hasClass('hinge'), 'Add the classes <code>animated</code> and <code>hinge</code> to your <code>body</code> element.')"
|
||||
"assert($('body').hasClass('animated') && $('body').hasClass('hinge'), 'message: Add the classes <code>animated</code> and <code>hinge</code> to your <code>body</code> element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
|
||||
@ -17,8 +17,8 @@
|
||||
"<code>});</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\#getMessage(?:'|\")\\s*?\\)\\s*?\\.on\\s*?\\(\\s*?(?:'|\")click(?:'|\")\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'Bind the click event to the button with the ID of <code>getMessage</code>')",
|
||||
"assert(editor.match(/\\n*?\\s*?\\}\\n*?\\s*?\\);/gi) && editor.match(/\\n*?\\s*?\\}\\);/gi).length >= 2, 'Be sure to close your functions with <code>});</code>')"
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\#getMessage(?:'|\")\\s*?\\)\\s*?\\.on\\s*?\\(\\s*?(?:'|\")click(?:'|\")\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'message: Bind the click event to the button with the ID of <code>getMessage</code>')",
|
||||
"assert(editor.match(/\\n*?\\s*?\\}\\n*?\\s*?\\);/gi) && editor.match(/\\n*?\\s*?\\}\\);/gi).length >= 2, 'message: Be sure to close your functions with <code>});</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -61,7 +61,7 @@
|
||||
"<code> $(\".message\").html(\"Here is the message\");</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\.message(?:'|\")\\s*?\\)\\s*?\\.html\\s*?\\(\\s*?(?:'|\")Here\\sis\\sthe\\smessage(?:'|\")\\s*?\\);/gi), 'Clicking the \"Get Message\" button should give the element with the class <code>message</code> the text \"Here is the message\".')"
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\.message(?:'|\")\\s*?\\)\\s*?\\.html\\s*?\\(\\s*?(?:'|\")Here\\sis\\sthe\\smessage(?:'|\")\\s*?\\);/gi), 'message: Clicking the \"Get Message\" button should give the element with the class <code>message</code> the text \"Here is the message\".')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -113,11 +113,11 @@
|
||||
"Once you've added this, click the \"Get Message\" button. Your Ajax function will replace the \"The message will go here\" text with the raw JSON output from the Free Code Camp Cat Photo API."
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(\\\"|\\')\\#getMessage(\\\"|\\')\\s*?\\)\\s*?\\.\\s*?on\\s*?\\(\\s*?(\\\"|\\')click(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'You should have a click handler on the getMessage button to trigger the AJAX request.')",
|
||||
"assert(editor.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi), 'You should have at least one closing set of brackets and parenthesis.')",
|
||||
"assert(editor.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi) && editor.match(/\\,\\s*?function\\s*?\\(\\s*?\\w*?\\s*?\\)\\s*?\\{/gi) && editor.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi).length === editor.match(/\\s*?function\\s*?\\(\\s*?\\w*?\\s*?\\)\\s*?\\{/gi).length, 'Each callback function should have a closing set of brackets and parenthesis.')",
|
||||
"assert(editor.match(/\\$\\s*?\\.\\s*?getJSON\\s*?\\(\\s*?(\\\"|\\')\\\/json\\\/cats\\.json(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?json\\s*?\\)\\s*?\\{/gi), 'You should be making use of the getJSON method given in the description to load data from the json file.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(\\\"|\\')\\.message(\\\"|\\')\\s*?\\)\\s*?\\.\\s*?html\\s*?\\(\\s*?JSON\\s*?\\.\\s*?stringify\\s*?\\(\\s*?json\\s*?\\)\\s*?\\)/gi), 'Don\\'t forget to make the <code>.html</code> change the contents of the message box so that it contains the result of the getJSON.')"
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(\\\"|\\')\\#getMessage(\\\"|\\')\\s*?\\)\\s*?\\.\\s*?on\\s*?\\(\\s*?(\\\"|\\')click(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'message: You should have a click handler on the getMessage button to trigger the AJAX request.')",
|
||||
"assert(editor.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi), 'message: You should have at least one closing set of brackets and parenthesis.')",
|
||||
"assert(editor.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi) && editor.match(/\\,\\s*?function\\s*?\\(\\s*?\\w*?\\s*?\\)\\s*?\\{/gi) && editor.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi).length === editor.match(/\\s*?function\\s*?\\(\\s*?\\w*?\\s*?\\)\\s*?\\{/gi).length, 'message: Each callback function should have a closing set of brackets and parenthesis.')",
|
||||
"assert(editor.match(/\\$\\s*?\\.\\s*?getJSON\\s*?\\(\\s*?(\\\"|\\')\\\/json\\\/cats\\.json(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?json\\s*?\\)\\s*?\\{/gi), 'message: You should be making use of the getJSON method given in the description to load data from the json file.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(\\\"|\\')\\.message(\\\"|\\')\\s*?\\)\\s*?\\.\\s*?html\\s*?\\(\\s*?JSON\\s*?\\.\\s*?stringify\\s*?\\(\\s*?json\\s*?\\)\\s*?\\)/gi), 'message: Don\\'t forget to make the <code>.html</code> change the contents of the message box so that it contains the result of the getJSON.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -174,7 +174,7 @@
|
||||
"<code>});</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/json\\.forEach/gi), 'The message box should have something in it.')"
|
||||
"assert(editor.match(/json\\.forEach/gi), 'message: The message box should have something in it.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -227,7 +227,7 @@
|
||||
"<code> html += \"<img src = '\" + val.imageLink + \"'>\";</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/val.imageLink/gi), 'You should have used the <code>imageLink</code> property to display the images.')"
|
||||
"assert(editor.match(/val.imageLink/gi), 'message: You should have used the <code>imageLink</code> property to display the images.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -292,7 +292,7 @@
|
||||
"<code>});</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/filter/gi), 'You should be making use of the .filter method.')"
|
||||
"assert(editor.match(/filter/gi), 'message: You should be making use of the .filter method.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -363,7 +363,7 @@
|
||||
"<code>}</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/navigator\\.geolocation\\.getCurrentPosition/gi), 'You should make use of the <code>navigator.geolocation</code> to access the users current location.')"
|
||||
"assert(editor.match(/navigator\\.geolocation\\.getCurrentPosition/gi), 'message: You should make use of the <code>navigator.geolocation</code> to access the users current location.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
|
||||
Reference in New Issue
Block a user