From db6662d76d4cfdd8c0e4c8976c37846ead59e01d Mon Sep 17 00:00:00 2001 From: Abhisek Pattnaik Date: Fri, 14 Aug 2015 12:31:58 +0530 Subject: [PATCH 001/137] Bonfire: Where art thou test case update Added further test cases to check for adhering to the instructions in bonfire properly. --- challenges/basic-bonfires.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/challenges/basic-bonfires.json b/challenges/basic-bonfires.json index 6f1cf7b9d4..d027bfa3ae 100644 --- a/challenges/basic-bonfires.json +++ b/challenges/basic-bonfires.json @@ -582,7 +582,8 @@ ], "tests": [ "assert.deepEqual(where([{ first: 'Romeo', last: 'Montague' }, { first: 'Mercutio', last: null }, { first: 'Tybalt', last: 'Capulet' }], { last: 'Capulet' }), [{ first: 'Tybalt', last: 'Capulet' }], 'should return an array of objects');", - "assert.deepEqual(where([{ 'a': 1 }, { 'a': 1 }, { 'a': 1, 'b': 2 }], { 'a': 1 }), [{ 'a': 1 }, { 'a': 1 }, { 'a': 1, 'b': 2 }], 'should return with multiples');" + "assert.deepEqual(where([{ 'a': 1 }, { 'a': 1 }, { 'a': 1, 'b': 2 }], { 'a': 1 }), [{ 'a': 1 }, { 'a': 1 }, { 'a': 1, 'b': 2 }], 'should return with multiples');", + "assert.deepEqual(where([{ 'a': 5 }, { 'a': 5 }, { 'a': 5, 'b': 10 }], { 'a': 5, 'b': 10 }), [{ 'a': 5, 'b': 10 }], 'should return a single object in array');" ], "MDNlinks": [ "Global Object", From 361c16bb1ea0a86135eb8642877f7f9e844054bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Djordje=20Lacmanovi=C4=87?= Date: Sun, 16 Aug 2015 00:37:31 +0200 Subject: [PATCH 002/137] fixes issue #1005 --- challenges/html5-and-css.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/challenges/html5-and-css.json b/challenges/html5-and-css.json index 7cbb0d11c7..506ee7f30c 100644 --- a/challenges/html5-and-css.json +++ b/challenges/html5-and-css.json @@ -483,7 +483,7 @@ "description": [ "Apply the \"red-text\" class to your h2 and p elements.", "Remember that you can attach classes to HTML elements by using class=\"your-class-here\" within the relevant element's opening tag.", - "Remember that CSS selectors require a period at the beginning like this: .blue-text { color: blue; }, but that class declarations don't use a period, like this: <h2 class=\"blue-text\">CatPhotoApp<h2>." + "Remember that CSS class selectors require a period at the beginning like this: .blue-text { color: blue; }, but that class declarations don't use a period, like this: <h2 class=\"blue-text\">CatPhotoApp<h2>." ], "tests": [ "assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')", From 5041d6e4723af6a997ad5e7fc44bd6119534efcc Mon Sep 17 00:00:00 2001 From: Aryan Jabbari Date: Sun, 16 Aug 2015 20:06:47 -0400 Subject: [PATCH 003/137] Fixes #1801 --- challenges/basic-javascript.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/challenges/basic-javascript.json b/challenges/basic-javascript.json index fa59afe650..9b3944f236 100644 --- a/challenges/basic-javascript.json +++ b/challenges/basic-javascript.json @@ -726,10 +726,10 @@ ], "challengeSeed":[ "//var ourDog = {", - "// \"name\": \"Camper\"", - "// \"legs\": 4", - "// \"tails\": 1", - "// \"friends\": [\"everything!\"]", + "// \"name\": \"Camper\",", + "// \"legs\": 4,", + "// \"tails\": 1,", + "// \"friends\": [\"everything!\"],", "//};", "", "// add the name(string), legs(number), tails(number) and friends(array) properties to myDog.", @@ -766,10 +766,10 @@ ], "challengeSeed":[ "// var ourDog = {", - "// \"name\": \"Camper\"", - "// \"legs\": 4", - "// \"tails\": 1", - "// \"friends\": [\"everything!\"]", + "// \"name\": \"Camper\",", + "// \"legs\": 4,", + "// \"tails\": 1,", + "// \"friends\": [\"everything!\"],", "// };", "", "// ourDog.bark(\"arf!\");", From 59a2765e27c4a914d2707b35d751b8dffbc8b31e Mon Sep 17 00:00:00 2001 From: Aryan Jabbari Date: Sun, 16 Aug 2015 20:08:37 -0400 Subject: [PATCH 004/137] Deleted extra comma --- challenges/basic-javascript.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/challenges/basic-javascript.json b/challenges/basic-javascript.json index 9b3944f236..75fde692ad 100644 --- a/challenges/basic-javascript.json +++ b/challenges/basic-javascript.json @@ -729,7 +729,7 @@ "// \"name\": \"Camper\",", "// \"legs\": 4,", "// \"tails\": 1,", - "// \"friends\": [\"everything!\"],", + "// \"friends\": [\"everything!\"]", "//};", "", "// add the name(string), legs(number), tails(number) and friends(array) properties to myDog.", @@ -769,7 +769,7 @@ "// \"name\": \"Camper\",", "// \"legs\": 4,", "// \"tails\": 1,", - "// \"friends\": [\"everything!\"],", + "// \"friends\": [\"everything!\"]", "// };", "", "// ourDog.bark(\"arf!\");", From d206e0b416625d1b2a60cd82d1384f5b64afbb88 Mon Sep 17 00:00:00 2001 From: Aryan Jabbari Date: Sun, 16 Aug 2015 20:14:12 -0400 Subject: [PATCH 005/137] Fixes #1807 --- challenges/basic-javascript.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/challenges/basic-javascript.json b/challenges/basic-javascript.json index fa59afe650..048a99f311 100644 --- a/challenges/basic-javascript.json +++ b/challenges/basic-javascript.json @@ -992,7 +992,7 @@ "title": "Sift through Text with Regular Expressions", "difficulty":"9.984", "description":[ - "Regular expressions are way to find certain words or patterns inside of strings.", + "Regular expressions are used to find certain words or patterns inside of strings.", "For example, if we wanted to find the number of times the word the occurred in the string The dog chased the cat, we could use the following regular expression: \/the+\/gi", "Let's break this down a bit:", "the is the pattern we want to match.", From d3c819d40d1468e39cc5d4a05f31487e3a54afc9 Mon Sep 17 00:00:00 2001 From: Aryan Jabbari Date: Sun, 16 Aug 2015 20:38:49 -0400 Subject: [PATCH 006/137] Fixed issue #1806 --- challenges/advanced-bonfires.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/challenges/advanced-bonfires.json b/challenges/advanced-bonfires.json index f71370c238..62a5f2cd3c 100644 --- a/challenges/advanced-bonfires.json +++ b/challenges/advanced-bonfires.json @@ -80,7 +80,7 @@ "sym([1, 2, 3], [5, 2, 1, 4]);" ], "tests": [ - "expect(sym([1, 2, 3], [5, 2, 1, 4])).to.equal([3, 5, 4]);", + "assert.deepEqual(sym([1, 2, 3], [5, 2, 1, 4]), [3, 5, 4], 'should return an array of unique values');", "assert.deepEqual(sym([1, 2, 5], [2, 3, 5], [3, 4, 5]), [1, 4, 5], 'should return the symmetric difference of the given arrays');", "assert.deepEqual(sym([1, 1, 2, 5], [2, 2, 3, 5], [3, 4, 5, 5]), [1, 4, 5], 'should return an array of unique values');", "assert.deepEqual(sym([1, 1]), [1], 'should return an array of unique values');" From 8cbde055af18252511dce106bd0d8eab3ed3f1ef Mon Sep 17 00:00:00 2001 From: Aryan Jabbari Date: Sun, 16 Aug 2015 20:47:43 -0400 Subject: [PATCH 007/137] Fixed #1813 --- challenges/basic-javascript.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/challenges/basic-javascript.json b/challenges/basic-javascript.json index fa59afe650..a62a77a5ed 100644 --- a/challenges/basic-javascript.json +++ b/challenges/basic-javascript.json @@ -902,7 +902,7 @@ ], "challengeSeed":[ "function myFunction(){", - " // Make myFunction return a random number between zero and nine instead of a decimal", + " // Make myFunction return a random number between 'min' and 'max' instead of a decimal", "", " // Only change code below this line.", "", From a2206c68a515a6e72808bc437145ca8060547a86 Mon Sep 17 00:00:00 2001 From: Michael Krebs Date: Sun, 16 Aug 2015 20:59:17 -0400 Subject: [PATCH 008/137] fix #935 --- challenges/intermediate-bonfires.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/challenges/intermediate-bonfires.json b/challenges/intermediate-bonfires.json index 10c1c35bcf..e4811bcb1c 100644 --- a/challenges/intermediate-bonfires.json +++ b/challenges/intermediate-bonfires.json @@ -71,10 +71,10 @@ ], "MDNlinks": [ "Comparison Operators", - "String.slice()", + "Array.slice()", "Array.filter()", "Array.indexOf()", - "String.concat()" + "Array.concat()" ], "type": "bonfire", "challengeType": 5, From a76755d1eb48571e8d2e833186d5df06623e4498 Mon Sep 17 00:00:00 2001 From: Aryan Jabbari Date: Sun, 16 Aug 2015 21:27:22 -0400 Subject: [PATCH 009/137] Fixed #1820 --- challenges/html5-and-css.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/challenges/html5-and-css.json b/challenges/html5-and-css.json index 4d4ae95cad..926676c9e4 100644 --- a/challenges/html5-and-css.json +++ b/challenges/html5-and-css.json @@ -3681,8 +3681,8 @@ "Make the body element's background color a dark gray by giving it the hex code value of #111111." ], "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(17, 17, 17)\", 'Give your body element the background-color of a light gray.')", - "assert(editor.match(/#111111/g) && editor.match(/#111111/g).length > 0, 'Use hex code to make a light gray. For example body { color: #111111; }.')" + "assert($(\"body\").css(\"background-color\") === \"rgb(17, 17, 17)\", 'Give your body element the background-color of a dark gray.')", + "assert(editor.match(/#111111/g) && editor.match(/#111111/g).length > 0, 'Use hex code to make a dark gray. For example body { color: #111111; }.')" ], "challengeSeed": [ "", + "", + "

CatPhotoApp

", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "Waypoint: Utiliza una clase CSS para darle estilo a un elemento", + "descriptionEs": [ + "Crea una clase CSS llamada \"red-text\" y aplicala a tu elemento h2.", + "Las clases son estilos reutilizables que pueden ser añadidos a elementos HTML", + "Esta es la anatomía de una clase CSS:", + "\"a", + "Puedes ver que hemos creado una clase CSS llamada \"blue-text\" dentro de la etiqueta <style>.", + "Puedes aplicar una clase a un elemento HTML de esta manera: <h2 class=\"blue-text\">CatPhotoApp</h2>.", + "Nota que en el elemento CSS style, las clases deberían comenzar con un punto. En los elementos HTML, las declaraciones de clase, NO deberían comenzar con punto. ", + "En vez de de crear un nuevo elemento style, prueba remover la declaración de estilo de h2 y reemplazarla por la declaración \"red-text\"." + ], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Nutze eine CSS Klasse um ein Element zu gestalten", + "descriptionDe": [ + "Erstelle eine CSS Klasse namens \"red-text\" und füge sie zu deinem h2 Element hinzu.", + "Klassen sind wiederverwendbare Styles, die HTML Elementen zugewiesen werden können.", + "So sieht eine CSS Klasse aus:", + "\"Ein", + "Du siehst, dass wir die CSS Klasse \"blue-text\" innerhalb von <style> geschrieben haben.", + "Du kannst eine Klasse folgendermaßen einem HTML Element beifügen: <h2 class=\"blue-text\">CatPhotoApp</h2>.", + "Beachte, dass Klassen in deinem CSS style Element mit einem Punkt beginngen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.", + "Anstatt ein neues style Element zu erstellen, versuche die h2 Style-Deklaration von deinem bereits bestehenden Style Element zu entfernen und sie mit der Klassen-Deklaration \".red-text\" zu ersetzen." + ] + }, + { + "id": "bad87fee1348bd9aefe08806", + "title": "Style Multiple Elements with a CSS Class", + "difficulty": 1.12, + "description": [ + "Apply the red-text class to your h2 and p elements.", + "Remember that you can attach classes to HTML elements by using class=\"your-class-here\" within the relevant element's opening tag.", + "Remember that CSS class selectors require a period at the beginning like this: .blue-text { color: blue; }, but that class declarations don't use a period, like this: <h2 class=\"blue-text\">CatPhotoApp<h2>." + ], + "tests": [ + "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your h2 element should be red.')", + "assert($(\"h2\").hasClass(\"red-text\"), 'Your h2 element should have the class red-text.')", + "assert($(\"p\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your p element should be red.')", + "assert($(\"p\").hasClass(\"red-text\"), 'Your p element should have the class red-text.')" + ], + "challengeSeed": [ + "", + "", + "

CatPhotoApp

", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "Waypoint: Estila multiples elementos con una clase CSS", + "descriptionEs": [ + "Aplica la clase \"red-text\" a tus elementos h2 y p.", + "Recuerda que puedes agregar clases a elementos HTML utilizando class=\"your-class-here\" dentro de la tag de entrada del mismo.", + "Recuerda que los selectores CSS requieren un punto al principio: .blue-text { color: blue; }, pero que las declaraciones de clase NO llevan punto: <h2 class=\"blue-text\">CatPhotoApp<h2>." + ], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Gestalte mehrere Elemente mit einer CSS Klasse", + "descriptionDe": [ + "Füge den h2 und p Elementen die Klasse \"red-text\" hinzu.", + "Du kannst Klassen zu HTML Elementen hinzufügen, indem du zum Beispiel class=\"deine-klasse\" innerhalb des öffnenden Tags schreibst.", + "Du weißt, es gehört ein Punkt vor CSS Klassen: .red-text { color: blue; }. Aber diese Klassen-Deklarationen brauchen keinen Punkt: <h2 class=\"blue-text\">CatPhotoApp<h2>." + ] + }, + { + "id": "bad87fee1348bd9aedf08806", + "title": "Change the Font Size of an Element", + "difficulty": 1.13, + "description": [ + "Create a second p element with the following kitty ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "Then, inside your <style> element, set the font-size of all p elements to 16 pixels.", + "Font size is controlled by the font-size CSS attribute, like this: h1 { font-size: 30px; }.", + "See if you can figure out how to give both of your p elements the font-size of 16 pixels (16px). You can do this inside the same <style> tag that we created for your red-text class." + ], + "tests": [ + "assert($(\"p\").length > 1, 'You need 2 p elements with Kitty Ipsum text.')", + "assert(editor.match(/<\\/p>/g) && editor.match(/<\\/p>/g).length === editor.match(/

p elements has a closing tag.')", + "assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'Your p element should contain the first few words of the provided additional kitty ipsum text.')", + "assert($(\"p\").css(\"font-size\") === \"16px\", 'Give your p elements the font-size of 16px.')" + ], + "challengeSeed": [ + "", + "", + "

CatPhotoApp

", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "Waypoint: Cambia el tamaño de fuente de un elemento.", + "descriptionEs": [ + "Crea un segundo elemento p. Luego, dentro de tu elemento <style>, pon el \"font-size\" de todos los elementos p a 16 pixeles.", + "El tamaño de fuente es controlado por el atributo CSS \"font-size\", como aquí: h1 { font-size: 30px; }.", + "Primero, crea un segundo elemento p con el siguiente texto Kitty Ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "Ve si puedes encontrar una manera de darle a ambos elementos p un font-size de 16 pixeles (16px). Puedes hacer esto dentro de la misma etiqueta <style> que creamos para la clase \"red-text\"." + ], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Ändere die Schriftgröße eines Elements", + "descriptionDe": [ + "Erstelle ein zweites p Element. Ändere dann innerhalb deines <style> Elements die Schriftgröße oder \"font-size\" von allen p Elementen auf 16 Pixel.", + "Schriftgröße wird von dem CSS Attribut \"font-size\" kontrolliert: h1 { font-size: 30px; }.", + "Zuerst erstellst du ein zweites p Element mit dem folgenden Kitty Ipsum Text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "Versuche nun beiden p Elementen die Schriftgröße von 16 Pixeln (16px) zu geben. Du kannst das innerhalb des selben <style> Tags machen, welches wir für deine \"red-text\" Klasse erstellt haben." + ] + }, + { + "id": "bad87fee1348bd9aede08807", + "title": "Set the Font Family of an Element", + "difficulty": 1.14, + "description": [ + "Make all of your p elements use the Monospace font.", + "You can set an element's font by using the font-family attribute.", + "For example, if you wanted to set your h2 element's font to Sans-serif, you would use the following CSS: h2 { font-family: Sans-serif; }." + ], + "tests": [ + "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your p elements should use the font Monospace.')" + ], + "challengeSeed": [ + "", + "", + "

CatPhotoApp

", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Definiere die Schriftart eines Elements", + "descriptionDe": [ + "Definiere für alle p Elemente die Schriftart \"Monospace\".", + "Du kannst einem Element mit \"font-family\" eine Schriftart zuweisen.", + "Wenn du zum Beispiel deinem h2 Element die Schriftart \"Sans-serif\" zuweisen willst, kannst du das mit dem folgenden CSS tun: h2 { font-family: Sans-serif; }." + ] + }, + { + "id": "bad87fee1348bd9aedf08807", + "title": "Import a Google Font", + "difficulty": 1.15, + "description": [ + "Apply the font-family of Lobster to your h2 element.", + "First, you'll need to make a call to Google to grab the Lobster font and load it into your HTML.", + "Copy the following code snippet and paste it into your code editor:", + "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">.", + "Now you can set Lobster as a font-family attribute on your h2 element." + ], + "tests": [ + "assert(new RegExp(\"googleapis\", \"gi\").test(editor), 'Import the Lobster font.')", + "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'Your h2 element should use the font Lobster.')", + "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your p element should still use the font Monospace.')" + ], + "challengeSeed": [ + "", + "", + "

CatPhotoApp

", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Importiere eine Google Font", + "descriptionDe": [ + "Füge dem h2 Element die Schriftart oder font-family \"Lobster\" hinzu.", + "Zuerst musst du Google Fonts in dein HTML einbinden, um auf \"Lobster\" zugreifen zu können.", + "Kopiere den folgenden Code und füge diesen in deinen Editor über dem style Element ein:", + "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">.", + "Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem h2 Element hinzufügen." + ] + }, + { + "id": "bad87fee1348bd9aedf08808", + "title": "Specify How Fonts Should Degrade", + "difficulty": 1.16, + "description": [ + "There are several default fonts that are available in all browsers. These include Monospace, Serif and Sans-Serif. Leave Lobster as the font-family for your h2 elements. Make them \"degrade\" to Monospace when Lobster isn't available.", + "For example, if you wanted an element to use the Helvetica font, but also degrade to the Sans-Serif font when Helvetica wasn't available, you could use this CSS style: p { font-family: Helvetica, Sans-Serif; }.", + "Now comment out your call to Google Fonts, so that the Lobster font isn't available. Notice how it degrades to the Monospace font." + ], + "tests": [ + "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'Your h2 element should use the font Lobster.')", + "assert($(\"h2\").css(\"font-family\").match(/lobster.*,.*monospace/i), 'Your h2 element should degrade to the font Monospace when Lobster is not available.')", + "assert(new RegExp(\"\", \"gi\").test(editor), 'Be sure to close your comment by deleting all trailing comment tags, i.e. -->.')" + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Spezifiziere die Rangfolge von Schriftarten", + "descriptionDe": [ + "Füge allen h2 Elementen die Schriftart \"Lobster\" hinzu und definiere \"Monospace\" als Ersatzschrift, wenn \"Lobster\" nicht verfügbar ist.", + "Du kannst \"Lobster\" als Schriftart deines h2 Elements belassen, aber gleichzeitig dafür sorgen, dass eine alternative Schrift geladen wird, wenn \"Lobster\" nicht zur Verfügung steht.", + "Wenn du zum Beispiel einem Element die Schriftart \"Helvetica\" geben möchtest, aber gleichzeitig die alternative Schrift \"Sans-Serif\" laden willst, wenn \"Helvetica\" nicht verfügbar ist, kannst du diesen CSS Style verwenden: p { font-family: Helvetica, Sans-Serif; }.", + "Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem \"Monospace\", \"Serif\" und \"Sans-Serif\". Probiere deinem h2 Element gleichzeitig die Schriftart \"Lobster\" und als Alternative \"Monospace\" zu geben.", + "Jetzt versuche den Aufruf von Google Fonts in deinem HTML auszukommentieren, sodass \"Lobster\" nicht zur Verfügung steht. Beachte, wie nun die Schriftart \"Monospace\" geladen wird." + ] + }, + { + "id": "bad87fee1348bd9aedf08812", + "title": "Add Images to your Website", + "difficulty": 1.17, + "description": [ + "You can add images to your website by using the img element, and point to a specific image's URL using the src attribute.", + "An example of this would be <img src=\"www.your-image-source.com/your-image.jpg\">. Note that in most cases, img elements are self-closing.", + "Try it with this image: https://bit.ly/fcc-relaxing-cat." + ], + "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 have a src attribute that points to the kitten image.')" + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Füge Bilder zu deiner Website hinzu", + "descriptionDe": [ + "Nutze ein img Element um das Bild https://bit.ly/fcc-relaxing-cat einzufügen.", + "Du kannst img Elemente verwenden, um Bilder in deine Website einzubauen. Um zur URL des Bildes zu verweisen, benutzt du das src Attribut.", + "Ein Beispiel dafür wäre <img src=\"www.bild-quelle.com/bild.jpg\"/>. Beachte, dass img Elemente in den meisten Fällen selbstschließend sind.", + "Versuche es mit diesem Bild: https://bit.ly/fcc-relaxing-cat." + ] + }, + { + "id": "bad87fee1348bd9acdf08812", + "title": "Size your Images", + "difficulty": 1.18, + "description": [ + "CSS has an attribute called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width.", + "For example, if we wanted to create a CSS class called larger-image that gave HTML elements a width of 500 pixels, we'd use: <style> .larger-image { width: 500px; } </style>.", + "Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide." + ], + "tests": [ + "assert($(\"img\").hasClass(\"smaller-image\"), 'Your img element should have the class smaller-image.')", + "assert($(\"img\").width() === 100, 'Your image should be 100 pixels wide.')" + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "", + "", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Skaliere deine Bilder", + "descriptionDe": [ + "Erstelle eine Klasse mit dem Namen smaller-image und verwende sie, um dein Bild auf 100 Pixel zu skalieren.", + "Die Breite eines Elements wird mit dem CSS Attribut width kontrolliert. Wie bei Schriftarten verwenden wir Pixel (px) um die Größe zu definieren.", + "Wenn wir also die CSS Klasse \"larger-image\" erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir: <style> .larger-image { width: 500px; } </style>." + ] + }, + { + "id": "bad87fee1348bd9bedf08813", + "title": "Add Borders Around your Elements", + "difficulty": 1.19, + "description": [ + "CSS borders have attributes like style, color and width.", + "For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>.", + "Create a class called thick-green-border that puts a 10-pixel-wide green border with a style of solid around an HTML element, and apply that class to your cat photo." + ], + "tests": [ + "assert($(\"img\").hasClass(\"smaller-image\"), 'Your img element should have the class smaller-image.')", + "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your img element should have the class thick-green-border.')", + "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\")), 'Give your image a border width of 10px.')", + "assert(new RegExp(\"solid\", \"gi\").test(editor), 'Give your image a border style of solid.')", + "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'The border around your img element should be green.')" + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "", + "", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Füge Rahmen zu deinen Elementen hinzu", + "descriptionDe": [ + "Erstelle die Klasse \"thick-green-border\", welche einen 10 Pixel dicken, grünen Rahmen mit dem Style \"solid\" um ein HTML Element setzt. Füge diese Klasse zu deinem Katzenfoto hinzu.", + "CSS Rahmen haben Attribute wie Style, Color und Width.", + "Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, würden wir so vorgehen: <style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>." + ] + }, + { + "id": "bad87fee1348bd9aedf08814", + "title": "Add Rounded Corners with a Border Radius", + "difficulty": 1.20, + "description": [ + "Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called border-radius.", + "You can specify a border-radius with pixels. This will affect how rounded the corners are. Add this attribute to your thick-green-border class and set it to 10px.", + "Give your cat photo a border-radius of 10px." + ], + "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 10px')" + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "", + "", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Füge abgerundete Ecken mit Border Radius hinzu", + "descriptionDe": [ + "Gib deinem Katzenbild einen border-radius von 10 Pixeln.", + "Das Bild hat nun spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius abrunden.", + "Du kannst einen border-radius mit Pixeln deklarieren. Das beeinflusst die Rundung der Ecken. Füge dieses Attribut zu deiner thick-green-border Klasse hinzu und setze es auf 10 Pixel." + ] + }, + { + "id": "bad87fee1348bd9aedf08815", + "title": "Make Circular Images with a Border Radius", + "difficulty": 1.21, + "description": [ + "In addition to pixels, you can also specify a border-radius using a percentage.", + "Give your cat photo a border-radius of 50%." + ], + "tests": [ + "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of 50%, making it perfectly circular.')", + "assert(editor.match(/50%/g), 'Be sure to use a percentage instead of a pixel value.')" + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "", + "", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Erstelle runde Bilder mit einem Border Radius", + "descriptionDe": [ + "Gib deinem Katzenfoto einen border-radius von 50 %.", + "Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen." + ] + }, + { + "id": "bad87fee1348bd9aedf08816", + "title": "Link to External Pages with Anchor Elements", + "difficulty": 1.22, + "description": [ + "a elements, also known as anchor elements, are used to link to content outside of the current page.", + "Here's a diagram of an a element. In this case, the a element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.", + "\"a", + "Here's an example: <p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p>.", + "Create an a element that links to http://catphotoapp.com and has \"cat photos\" as its anchor text." + ], + "tests": [ + "assert((/cat photos/gi).test($(\"a\").text()), 'Your a element should have the anchor text of \"cat photos\"')", + "assert(/http:\\/\\/catphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an a element that links to http://catphotoapp.com.')", + "assert(editor.match(/<\\/a>/g) && editor.match(/<\\/a>/g).length === editor.match(/a element has a closing tag.')" + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "", + "", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen", + "descriptionDe": [ + "Erstelle ein a Element oder \"Anker Element\", das auf http://catphotoapp.com verlinkt und den Link-Text \"cat photos\" oder \"anchor text\" beinhaltet.", + "So sieht ein a Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.", + "\"Ein", + "Hier ist ein Beispiel: <p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>." + ] + }, + { + "id": "bad87fee1348bd9aede08817", + "title": "Nest an Anchor Element within a Paragraph", + "difficulty": 1.23, + "description": [ + "Again, here's a diagram of an a element for your reference:", + "\"a", + "Here's an example: <p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p>.", + "Nesting just means putting one element inside of another element.", + "Now nest your a element within a new p element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link, and the rest of the text is rest is plain text." + ], + "tests": [ + "assert($(\"a\").attr(\"href\").match(/catphotoapp.com/gi).length > 0, 'You need an a element that links to \"catphotoapp.com\".')", + "assert($(\"a\").text().match(/cat\\sphotos/gi).length > 0, 'Your a element should have the anchor text of \"cat photos\"')", + "assert($(\"p\") && $(\"p\").length > 2, 'Create a new p element around your a element.')", + "assert($(\"a[href=\\\"http://www.catphotoapp.com\\\"]\").parent().is(\"p\"), 'Your a element should be nested within your new p element.')", + "assert($(\"p\").text().match(/click\\shere\\sfor/gi), 'Your p element should have the text \"click here for\".')", + "assert(editor.match(/<\\/p>/g) && editor.match(/

/g).length === editor.match(/

p elements has a closing tag.')", + "assert(editor.match(/<\\/a>/g) && editor.match(//g).length === editor.match(/a elements has a closing tag.')" + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "", + "cat photos", + "", + "", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint Umschließe ein Anker Element mit einem Paragraphen", + "descriptionDe":[ + "Jetzt umschließe dein a Element mit einem p Element und dem Text \"click here for cat photos\". Nur \"cat photos\" soll ein Link ein – der Rest normaler Text.", + "Hier ist nochmal ein Beispiel für ein a Element: \"Ein", + "So könnte es aussehen: <p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>" + ] + }, + { + "id": "bad87fee1348bd9aedf08817", + "title": "Make Dead Links using the Hash Symbol", + "difficulty": 1.24, + "description": [ + "Sometimes you want to add a elements to your website before you know where they will link.", + "This is also handy when you're changing the behavior of a link using jQuery, which we'll learn about later.", + "Replace your a element's href attribute with a #, also known as a hash symbol, to turn it into a dead link." + ], + "tests": [ + "assert($(\"a\").attr(\"href\") === \"#\", 'Your a element should be a dead link with a href attribute set to \"#\".')" + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "", + "

Click here for cat photos.

", + "", + "", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Erstelle tote Links mit dem Hash Symbol", + "descriptionDe": [ + "Nutze das Hash Symbol (#) um deine a Elemente zu toten Links zu machen.", + "Manchmal wirst du a Elemente zu deiner Website hinzufügen möchten, ohne dass du das Ziel des Links kennst.", + "Das ist auch nützlich, wenn du die Funktion eines Links mit jQuery verändern willst. Das werden wir noch behandeln.", + "Ersetze den Inhalt des href Attributs deines a Elements mit einem Hash Symbol um einen toten Link zu erzeugen." + ] + }, + { + "id": "bad87fee1348bd9aedf08820", + "title": "Turn an Image into a Link", + "difficulty": 1.25, + "description": [ + "You can make elements into links by nesting them within an a element.", + "Nest your image within an a element. Here's an example: <a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a>.", + "Remember to use # as your a element's href property in order to turn it into a dead link.", + "Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link." + ], + "tests": [ + "assert($(\"a\").children(\"img\").length > 0, 'Nest your img element within an a element.')", + "assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'Your a element should be a dead link with a href attribute set to #.')", + "assert(editor.match(/<\\/a>/g) && editor.match(//g).length === editor.match(/a elements has a closing tag.')" + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "", + "

Click here for cat photos.

", + "", + "", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Verlinke ein Bild", + "descriptionDe": [ + "Umschließe dein img Element mit einem a Element als toten Link.", + "Du kannst jedes Element in einen Link verwandeln, indem du es mit einem a Element umschließt.", + "Umschließe nun dein Bild mit einem a Element. Hier ist ein Beispiel: <a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a>.", + "Vergewissere dich, dass du ein Hash Symbol (#) innerhalb des href Attributs des a Elements nutzt, um daraus einen toten Link zu machen.", + "Sobald du das gemacht hast, kannst du mit der Maus über dein Bild fahren. Der normale Mauszeiger sollte nun zu einer Hand für Links werden. Das Bild ist jetzt ein Link." + ] + }, + { + "id": "bad87fee1348bd9aedf08818", + "title": "Add Alt Text to an Image for Accessibility", + "difficulty": 1.26, + "description": [ + "alt attributes, also known as alt text, are what browsers will display if they fail to load the image. alt attributes are also important for blind or visually impaired users to understand what an image portrays. And search engines also look at alt attributes.", + "In short, every image should have an alt attribute!", + "You can add an alt attribute right in the img element like this: <img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/>.", + "Add an alt attribute with the text A cute orange cat lying on its back to our cat photo." + ], + "tests": [ + "assert($(\"img\").filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an alt attribute set to A cute orange cat lying on its back.')" + ], + "challengeSeed": [ + "", + "", + "", + "

CatPhotoApp

", + "", + "

Click here for cat photos.

", + "", + "", + "", + "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Füge Alt Text für mehr Barrierefreiheit hinzu", + "descriptionDe": [ + "Füge zu unserem Katzen-Bild ein alt Attribut mit dem Text \"A cute orange cat lying on its back\" hinzu.", + "alt Attribute – auch \"Alt Text\" genannt – werden vom Browser angezeigt, wenn sie ein Bild nicht laden können. Für blinde oder visuell eingeschränkte Menschen sind sie ebenfalls wichtig um zu verstehen, was ein Bild darstellt. Zudem werden diese Texte von Suchmaschinen genutzt.", + "Kurz gesagt: Jedes Bild sollte ein alt Attribut beinhalten!", + "alt Attribute sind nützlich um Personen – und Web Crawlers wie Google – zu sagen was in einem Foto abgebildet wird. Das ist extrem wichtig, damit blinde oder visuell eingeschränkte Menschen den Inhalt der Website verstehen.", + "Du kannst das alt Attribut direkt in das Img Element einfügen: <img src=\"www.bild-quelle.com/bild.jpg\" alt=\"Dein Alt Text.\"/>." + ] + }, + { + "id": "bad87fee1348bd9aedf08827", + "title": "Create a Bulleted Unordered List", + "difficulty": 1.27, + "description": [ + "HTML has a special element for creating unordered lists, or bullet point-style lists.", + "Unordered lists start with a <ul> element. Then they contain some number of <li> elements.", + "For example: ", + "<ul>", + "  <li>milk</li>", + "  <li>cheese</li>", + "</ul>", + "would create a bullet point-style list of \"milk\" and \"cheese\".", + "Replace your p elements with an unordered list of three things that cats love." + ], + "tests": [ + "assert($(\"ul\").length > 0, 'Create a ul element.')", + "assert($(\"ul li\").length > 2, 'You should have three li elements within your ul element.')", + "assert(editor.match(/<\\/ul>/g) && editor.match(/
    /g).length === editor.match(/
      ul element has a closing tag.')", + "assert(editor.match(/<\\/li>/g) && editor.match(/
    • /g) && editor.match(/<\\/li>/g).length === editor.match(/
    • /g).length, 'Make sure your li element has a closing tag.')" + ], + "challengeSeed": [ + "", + "", + "", + "

      CatPhotoApp

      ", + "", + "

      Click here for cat photos.

      ", + "", + "", + "", + "

      Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

      ", + "

      Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

      " + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Erstelle eine ungeordnete Liste", + "descriptionDe": [ + "Ersetze deine p Elemente mit drei Dingen, die Katzen lieben – in einer ungeordneten Liste.", + "HTML hat ein spezielles Element zum Erstellen von ungeordneten Listen.", + "ungeordnete Listen starten mit einem <ul> Element. Dann beinhalten sie eine gewisse Anzahl an <li> Elementen.", + "Als Beispiel: <ul><li>Milch</li><li>Käse</li></ul> würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen." + ] + }, + { + "id": "bad87fee1348bd9aedf08828", + "title": "Create an Ordered List", + "difficulty": 1.28, + "description": [ + "HTML has a special element for creating ordered lists, or numbered-style lists.", + "Ordered lists start with a <ol> element. Then they contain some number of <li> elements.", + "For example:", + "<ol>", + "  <li>hydrogen</li>", + "  <li>helium</li>", + "</ol>", + "would create a numbered list of \"hydrogen\" and \"helium\".", + "Create an ordered list of the top 3 things cats hate the most." + ], + "tests": [ + "assert($(\"ul\").length > 0, 'You should have an ul element on your page.')", + "assert($(\"ol\").length > 0, 'You should have an ol element on your page.')", + "assert($(\"ul li\").length > 2, 'You should have three li elements within your ul element.')", + "assert($(\"ol li\").length > 2, 'You should have three li elements within your ol element.')", + "assert(editor.match(/<\\/ul>/g) && editor.match(/<\\/ul>/g).length === editor.match(/
        /g).length, 'Make sure your ul element has a closing tag.')", + "assert(editor.match(/<\\/ol>/g) && editor.match(/<\\/ol>/g).length === editor.match(/
          /g).length, 'Make sure your ol element has a closing tag.')", + "assert(editor.match(/<\\/li>/g) && editor.match(/
        1. /g) && editor.match(/<\\/li>/g).length === editor.match(/
        2. /g).length, 'Make sure your li element has a closing tag.')" + ], + "challengeSeed": [ + "", + "", + "", + "

          CatPhotoApp

          ", + "", + "

          Click here for cat photos.

          ", + "", + "", + "", + "

          Things cats love:

          ", + "
            ", + "
          • cat nip
            • ", + "
          • laser pointers
            • ", + "
          • lasagna
            • ", + "
          ", + "

          Top 3 things cats hate:

          " + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Erstelle eine geordnete Liste", + "descriptionDe": [ + "Erstelle eine geordnete Liste von den drei Dingen, die Katzen am meisten hassen.", + "HTML beinhaltet ein spezielles Element für geordnete Listen.", + "Geordnete Listen starten mit einem <ol> Element. Dann enthalten sie eine gewisse Anzahl an <li> Elementen.", + "Als beispiel: <ol><li>hydrogen</li><li>Helium</li></ol> würde eine nummerierte Liste aus \"Hydrogen\" und \"Helium\" erstellen." + ] + }, + { + "id": "bad87fee1348bd9aedf08829", + "title": "Create a Text Field", + "difficulty": 1.29, + "description": [ + "Now let's create a web form.", + "Text inputs are a convenient way to get input from your user.", + "You can create one like this: <input type=\"text\">. Note that input elements are self-closing.", + "Create an input element of type text below your lists." + ], + "tests": [ + "assert($(\"input[type=text]\").length > 0, 'Your app should have an input element of type text.')" + ], + "challengeSeed": [ + "", + "", + "", + "

          CatPhotoApp

          ", + "", + "

          Click here for cat photos.

          ", + "", + "", + "", + "

          Things cats love:

          ", + "
            ", + "
          • cat nip
            • ", + "
          • laser pointers
            • ", + "
          • lasagna
            • ", + "
          ", + "

          Top 3 things cats hate:

          ", + "
            ", + "
          1. flea treatment
            2. ", + "
          2. thunder
            3. ", + "
          3. other cats
            4. ", + "
          " + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Erstelle ein Textfeld", + "descriptionDe": [ + "Nun erstellen wir ein Web Formular. Erstelle ein Textfeld unter deinen Listen.", + "Eingabefelder sind ein guter Weg, um Daten von Nutzern zu erhalten.", + "So kannst du eines erstellen: <input type=\"text\">. Beachte, dass input Elemente selbstschließend sind." + ] + }, + { + "id": "bad87fee1348bd9aedf08830", + "title": "Add Placeholder Text to a Text Field", + "difficulty": 1.30, + "description": [ + "Your placeholder text is what appears in your text input before your user has inputed anything.", + "You can create placeholder text like so: <input type=\"text\" placeholder=\"this is placeholder text\">.", + "Set the placeholder value of your text input to \"cat photo URL\"." + ], + "tests": [ + "assert($(\"input[placeholder]\").length > 0, 'Add a placeholder attribute text input 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\".')" + ], + "challengeSeed": [ + "", + "", + "", + "

          CatPhotoApp

          ", + "", + "

          Click here for cat photos.

          ", + "", + "", + "", + "

          Things cats love:

          ", + "
            ", + "
          • cat nip
            • ", + "
          • laser pointers
            • ", + "
          • lasagna
            • ", + "
          ", + "

          Top 3 things cats hate:

          ", + "
            ", + "
          1. flea treatment
            2. ", + "
          2. thunder
            3. ", + "
          3. other cats
            4. ", + "
          ", + "" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Füge Platzhalter zu einem Textfeld hinzu", + "descriptionDe": [ + "Setze bei deinem input Element den Wert für placeholder auf \"cat photo URL\".", + "Platzhalter erscheinen in input Feldern, bevor der Nutzer etwas eingibt.", + "Du kannst Platzhalter auf folgende Weise erstellen: <input type=\"text\" placeholder=\"Das ist ein Platzhalter.\">." + ] + }, + { + "id": "bad87fee1348bd9aede08830", + "title": "Create a Form Element", + "difficulty": 1.31, + "description": [ + "You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your form element.", + "For example: <form action=\"/url-where-you-want-to-submit-form-data\"></form>.", + "Nest your text field in a form element. Add the action=\"/submit-cat-photo\" attribute to this form element." + ], + "tests": [ + "assert($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'Nest your text input element within a form element.')", + "assert($(\"form\").attr(\"action\"), 'Your form element should have an action attribute.')", + "assert(editor.match(/<\\/form>/g) && editor.match(/
          /g).length === editor.match(/form element has a closing tag.')", + "assert(editor.match(/\\/submit-cat-photo/ig), 'Make sure your form action is set to /submit-cat-photo.')" + ], + "challengeSeed": [ + "", + "", + "", + "

          CatPhotoApp

          ", + "", + "

          Click here for cat photos.

          ", + "", + "", + "", + "

          Things cats love:

          ", + "
            ", + "
          • cat nip
            • ", + "
          • laser pointers
            • ", + "
          • lasagna
            • ", + "
          ", + "

          Top 3 things cats hate:

          ", + "
            ", + "
          1. flea treatment
            2. ", + "
          2. thunder
            3. ", + "
          3. other cats
            4. ", + "
          ", + "" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Erstelle ein Formular", + "descriptionDe": [ + "Umschließe dein Textfeld mit einem form Element. Füge anschließend das Attribut action=\"/submit-cat-photo\" hinzu.", + "Du kannst Web Formulare bauen, die Daten zu einem Server übertragen – und das nur mit HTML. Das wird möglich, indem du eine Aktion für dein form Element bestimmst.", + "Zum Beispiel: <form action=\"/url-wohin-du-deine-formular-daten-senden-willst\"></form>." + ] + }, + { + "id": "bad87fee1348bd9aedd08830", + "title": "Add a Submit Button to a Form", + "difficulty": 1.32, + "description": [ + "Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's action attribute.", + "Here's an example submit button: <button type=\"submit\">this button submits the form</button>.", + "Add a submit button to your form element with type submit 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 type set to submit.')", + "assert($(\"button\").text().match(/submit/gi), 'Your submit button should have the text \"submit\".')", + "assert(editor.match(/<\\/button>/g) && editor.match(/
          ", + "" + ], + "type": "waypoint", + "challengeType": 0, + "nameCn": "", + "descriptionCn": [], + "nameFr": "", + "descriptionFr": [], + "nameRu": "", + "descriptionRu": [], + "nameEs": "", + "descriptionEs": [], + "namePt": "", + "descriptionPt": [], + "nameDe": "Waypoint: Nutze HTML5 um ein Pflichtfeld zu erstellen", + "descriptionDe": [ + "Mache aus deinem input Feld ein Pflichtfeld – \"required\" – damit deine Nutzer das Formular nicht abschicken können, ohne dieses Feld auszufüllen.", + "Du kannst bestimmte Felder eines Formulars als Pflichtfelder deklarieren. Damit ist es deinen Nutzern nicht mehr möglich, das Formular abzuschicken, ohne die Pflichtfelder auszufüllen.", + "Um zum Beispiel ein Textfeld als Pflichtfeld zu deklarieren, kannst du einfach ein \"required\" innerhalb deines input Elements hinzufügen: <input type=\"text\" required>." + ] + }, + { + "id": "bad87fee1348bd9aedf08834", + "title": "Create a Set of Radio Buttons", + "difficulty": 1.34, + "description": [ + "You can use radio buttons for questions where you want the user to only give you one answer.", + "Radio buttons are a type of input.", + "Each of your radio buttons should be nested within its own label element.", + "All related radio buttons should have the same name attribute.", + "Here's an example of a radio button: <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>.", + "Add to your form a pair of radio buttons. Each radio button should be nested within its own label element. They should share a common name attribute. One should have the option of indoor and the other should have the option of outdoor." + ], + "tests": [ + "assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')", + "assert($('input[type=\"radio\"]:nth-child(1)').attr('name') === 'indoor-outdoor', 'Give your radio buttons the name attribute of indoor-outdoor.')", + "assert($(\"label\").length > 1, 'Each of your two radio button elements should be nested in a label element.')", + "assert(editor.match(/<\\/label>/g) && editor.match(/