fix some issues and finalize jquery challenges for today
Quincy Larson
parent
57592545d9
commit
1e2011a354
|
|
@ -1569,7 +1569,7 @@
|
|||
"Let's nest your <code>h3</code> element within a <code>div<code> element with the class \"containter-fluid\"."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('div').hasClass('container-fluid'), 'Your <code>div</code> element should have the class \"row\"')",
|
||||
"assert($('div').hasClass('container-fluid'), 'Your <code>div</code> element should have the class \"container-fluid\"')",
|
||||
"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.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
|
|
@ -1837,7 +1837,7 @@
|
|||
],
|
||||
"tests": [
|
||||
"assert($('#left-well') && $('#left-well').length > 0, 'Give your left \"well\" the id of \"left-well\".')",
|
||||
"assert($('#left-well') && $('#left-well').length > 0, 'Give your right \"well\" the id of \"right-well\".')"
|
||||
"assert($('#right-well') && $('#right-well').length > 0, 'Give your right \"well\" the id of \"right-well\".')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<div class='container-fluid'>",
|
||||
|
|
|
|||
|
|
@ -3720,14 +3720,14 @@
|
|||
"difficulty": 1.63,
|
||||
"description": [
|
||||
"Another way you can represent colors in CSS is by using RGB values.",
|
||||
"RGB values look like this: <code>rgb(0, 0, 0)</code> for black and <code>rgb(255, 255, 255)<code> for white.",
|
||||
"RGB values look like this: <code>rgb(0, 0, 0)</code> for black and <code>rgb(255, 255, 255)</code> for white.",
|
||||
"Instead of using six hexadecimal digits like you do with hex code, with RGB you specify the brightness of each color with a number between 0 and 255.",
|
||||
"If you do the math, 16 times 16 is 256 total values. So RGB, which starts counting from zero, has the exact same number of possible values as hex code.",
|
||||
"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(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of black. For example <code>body: { color: rgb(0, 0, 0); }</code>.')",
|
||||
"assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Your <code>body</code> element's the background-color should be black.')"
|
||||
"assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your <code>body</code> element the background-color of black.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of black. For example <code>body: { color: rgb(0, 0, 0); }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
|
|
@ -3761,8 +3761,8 @@
|
|||
"Change the <code>body</code> element's background color from the RGB value for black to the RGB value for white: <code>rgb(255, 255, 255)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*255\\s*,\\s*255\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of white. For example <code>body: { color: rgb(255,255,255); }</code>.')",
|
||||
"assert($('body').css('background-color') === 'rgb(255, 255, 255)', 'Your <code>body</code> element's the background-color should be white.')"
|
||||
"assert($('body').css('background-color') === 'rgb(255, 255, 255)', 'Give your <code>body</code> element the background-color of white.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*255\\s*,\\s*255\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of white. For example <code>body: { background-color: rgb(255, 255 , 255); }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
|
|
@ -3796,8 +3796,8 @@
|
|||
"Change the <code>body</code> element's background color to the RGB value red: <code>rgb(255, 0, 0)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of red. For example <code>body: { color: rgb(255, 0, 0); }</code>.')",
|
||||
"assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Your <code>body</code> element's the background-color should be red.')"
|
||||
"assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Give your <code>body</code> element the background-color of red.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of red. For example <code>body: { background-color: rgb(255, 0, 0); }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
|
|
@ -3829,8 +3829,8 @@
|
|||
"Now change the <code>body</code> element's background color to the RGB value green: <code>rgb(0, 255, 0)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*255\\s*,\\s*0\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of green. For example <code>body: { color: rgb(0, 255, 0); }</code>.')",
|
||||
"assert($('body').css('background-color') === 'rgb(0, 255, 0)', 'Your <code>body</code> element's the background-color should be green.')"
|
||||
"assert($('body').css('background-color') === 'rgb(0, 255, 0)', 'Give your <code>body</code> element the background-color of green.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*255\\s*,\\s*0\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of green. For example <code>body: { background-color: rgb(0, 255, 0); }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
|
|
@ -3862,8 +3862,8 @@
|
|||
"Change the <code>body</code> element's background color to the RGB value blue: <code>rgb(0, 0, 255)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*255\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of blue. For example <code>body: { color: rgb(0, 0, 255); }</code>.')",
|
||||
"assert($('body').css('background-color') === 'rgb(0, 0, 255)', 'Your <code>body</code> element's the background-color should be blue.')"
|
||||
"assert($('body').css('background-color') === 'rgb(0, 0, 255)', 'Give your <code>body</code> element the background-color of blue.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*255\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of blue. For example <code>body: { background-color: rgb(0, 0, 255); }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
|
|
@ -3896,8 +3896,8 @@
|
|||
"Change the <code>body</code> element's background color to the RGB value orange: <code>rgb(255, 165, 0)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*165\\s*,\\s*0\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of orange. For example <code>body: { color: rgb(255, 165, 0); }</code>.')",
|
||||
"assert($('body').css('background-color') === 'rgb(255, 165, 0)', 'Your <code>body</code> element's the background-color should be orange.')"
|
||||
"assert($('body').css('background-color') === 'rgb(255, 165, 0)', 'Give your <code>body</code> element the background-color of orange.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*165\\s*,\\s*0\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of orange. For example <code>body: { background-color: rgb(255, 165, 0); }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
|
|
@ -3930,8 +3930,8 @@
|
|||
"Change the <code>body</code> element's background color to the RGB value for gray: <code>rgb(128, 128, 128)</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*128\\s*,\\s*128\\s*,\\s*128\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of gray. For example <code>body: { color: rgb(128, 128, 128); }</code>.')",
|
||||
"assert($('body').css('background-color') === 'rgb(128, 128, 128)', 'Your <code>body</code> element's the background-color should be gray.')"
|
||||
"assert($('body').css('background-color') === 'rgb(128, 128, 128)', 'Give your <code>body</code> element the background-color of gray.')",
|
||||
"assert(editor.match(/rgb\\s*\\(\\s*128\\s*,\\s*128\\s*,\\s*128\\s*\\)/ig), 'Use RGB to give your <code>body</code> element the background-color of gray. For example <code>body: { background-color: rgb(128, 128, 128); }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
|
|
|
|||
|
|
@ -847,15 +847,18 @@
|
|||
},
|
||||
|
||||
{
|
||||
"id": "bad84fee1348bd9aecc08826",
|
||||
"name": "Waypoint: Read Data from an Element Using jQuery",
|
||||
"dashedName": "Waypoint-read-data-from-an-element-using-jquery",
|
||||
"difficulty": 3.17,
|
||||
"id": "bad87fee1348bd9aecb08826",
|
||||
"name": "Waypoint: Use jQuery to Modify the Entire Page",
|
||||
"dashedName": "waypoint-use-jquery-to-modify-the-entire-page",
|
||||
"difficulty": 3.20,
|
||||
"description": [
|
||||
|
||||
"We're done playing with our jQuery playground. Let's tear it down!",
|
||||
"jQuery can target the <code>body</code> element as well.",
|
||||
"Here's how we would make the entire body fade out: <code> $('body').addClass('animated fadeOut')</code>",
|
||||
"But let's do something more dramatic. Add the classes \"animated\" and \"hinge\" to your <code>body</code> element."
|
||||
],
|
||||
"tests": [
|
||||
|
||||
"assert($('body').hasClass('animated') && $('body').hasClass('hinge'), 'Add the classes \"animated\" and \"hinge\" to your <code>body</code> element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
|
|
@ -899,149 +902,6 @@
|
|||
"</div>"
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad87fee1348bd9aecc08826",
|
||||
"name": "Waypoint: Trigger onHover Events with jQuery",
|
||||
"dashedName": "Waypoint-trigger-onhover-events-with-jquery",
|
||||
"difficulty": 3.18,
|
||||
"description": [
|
||||
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad87fee1348bd9aeca08826",
|
||||
"name": "Waypoint: Trigger onClick Events with jQuery",
|
||||
"dashedName": "Waypoint-trigger-onClick-events-with-jquery",
|
||||
"difficulty": 3.19,
|
||||
"description": [
|
||||
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad87fee1348bd9aecb08826",
|
||||
"name": "Waypoint: Use jQuery to Modify the Entire Page",
|
||||
"dashedName": "Waypoint-use-jquery-to-modify-the-entire-page",
|
||||
"difficulty": 3.20,
|
||||
"description": [
|
||||
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad87fee1348bd9aebc08826",
|
||||
"name": "Waypoint: Get Data from an URL Using jQuery",
|
||||
"dashedName": "waypoint-get-data-from-a-url-using-jquery",
|
||||
"difficulty": 3.21,
|
||||
"description": [
|
||||
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad87fee1348bd9ae9c08826",
|
||||
"name": "Waypoint: Loop through JSON Data Using jQuery",
|
||||
"dashedName": "waypoint-loop-through-json-data-using-jquery",
|
||||
"difficulty": 3.22,
|
||||
"description": [
|
||||
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad87fee1348bd9ae8c08826",
|
||||
"name": "Waypoint: Setup Click Events Using jQuery",
|
||||
"dashedName": "waypoint-setup-click-events-using-jquery",
|
||||
"difficulty": 3.23,
|
||||
"description": [
|
||||
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
"",
|
||||
" });",
|
||||
"fcces",
|
||||
"<!-- You shouldn't need to modify code below this line -->",
|
||||
"<button id='count-presses-button' class='btn btn-primary btn-block btn-lg>Press me</button>",
|
||||
"<span id='times-pressed'>"
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
{
|
||||
"id": "bad88fee1348bd9ae8c08826",
|
||||
"name": "Waypoint: Wire AJAX Call into a jQuery Click Event",
|
||||
"dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event",
|
||||
"difficulty": 3.24,
|
||||
"description": [
|
||||
"<img src='https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png'>"
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" var random = function() { return Math.floor(Math.random() * 3) }",
|
||||
" $(document).ready(function() {",
|
||||
"<!-- Don't change code above this line -->",
|
||||
"",
|
||||
" $('#cat-button').on('click', function() {",
|
||||
" $.getJSON('/json/cats.json', function( json ) {",
|
||||
" var kitten = json[random()];",
|
||||
" $(\"<img src='\" + kitten.imageLink + \"'>\").appendTo('#output');",
|
||||
" $(\"<h3>Code name: \" + kitten.codeNames[random()] + \"</h3>\").appendTo('#output');",
|
||||
" });",
|
||||
" });",
|
||||
"",
|
||||
"<!-- Don't change code below this line -->",
|
||||
" });",
|
||||
"fcces",
|
||||
"<button id='cat-button' class='btn btn-primary btn-block btn-lg'>Cat Button</button>",
|
||||
"<div class='jumbotron' id='output'>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue