forked from freeCodeCamp/freeCodeCamp
/
jquery.json
1471 lines (1471 loc) · 91.8 KB
/
jquery.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
{
"name": "jQuery",
"order": 5,
"time": "3 hours",
"helpRoom": "Help",
"required": [
{ "link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" }
],
"challenges": [
{
"id": "bad87fee1348bd9acdd08826",
"title": "Learn how Script Tags and Document Ready Work",
"description": [
"Now we're ready to learn jQuery, the most popular JavaScript tool of all time. Don't worry about JavaScript itself - we will cover it soon.",
"Before we can start using jQuery, we need to add some things to our HTML.",
"First, add a <code>script</code> element at the top of your page. Be sure to close it on the following line.",
"Your browser will run any JavaScript inside a <code>script</code> element, including jQuery.",
"Inside your <code>script</code> element, add this code: <code>$(document).ready(function() {</code> to your <code>script</code>. Then close it on the following line (still inside your <code>script</code> element) with: <code>});</code>",
"We'll learn more about <code>functions</code> later. The important thing to know is that code you put inside this <code>function</code> will run as soon as your browser has loaded your page.",
"This is important because without your <code>document ready function</code>, your code may run before your HTML is rendered, which would cause bugs."
],
"challengeSeed": [
"",
"",
"<!-- Only change code above this line. -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"tests": [
"assert(code.match(/<\\/script\\s*>/g) && code.match(/<script(\\sasync|\\sdefer)*(\\s(charset|src|type)\\s*=\\s*[\"\\']+[^\"\\']*[\"\\']+)*(\\sasync|\\sdefer)*\\s*>/g) && code.match(/<\\/script\\s*>/g).length === code.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(code.match(/\\$\\s*?\\(\\s*?document\\s*?\\)\\.ready\\s*?\\(\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/g), 'message: You should add <code>$(document).ready<wbr>(function() {</code> to the beginning of your <code>script</code> element.');",
"assert(code.match(/\\n*?\\s*?\\}\\s*?\\);/g), 'message: Close your <code>$(document).ready<wbr>(function() {</code> function with <code>});</code>');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Lerne, wie Script Tags und Document Ready funktionieren",
"description": [
"Jetzt sind wir bereit jQuery zu lernen, das populärste JavaScript-Tool aller Zeiten. Mach dir über JavaScript keine Sorgen - über dieses werden wir bald sprechen.",
"Bevor wir jQuery nutzen können, müssen wir erst ein paar Dinge zu unserem HTML hinzufügen.",
"Füge als erstes ein <code>script</code> Element am Beginn deiner Seite ein. Vergewissere dich, dass du das Element in der nächsten Zeile geschlossen hast.",
"Dein Browser wird jegliches JavaScript, jQuery eingeschlossen, innerhalb eines <code>script</code> Elements ausführen.",
"Füge innerhalb deines <code>script</code> Elements folgenden Code hinzu: <code>$(document).ready(function() {</code>. Schließe ihn danach in der nächsten Zeile (noch immer innerhalb deines <code>script</code> Elements) mit: <code>});</code>",
"Wir werden später noch mehr über <code>Funktionen</code> lernen. Wichtig zu wissen ist, dass der Code innerhalb der <code>Funktion</code> ausgeführt wird, sobald der Browser die Seite geladen hat.",
"Das ist wichtig, denn ohne deine <code>Document Ready Funktion</code> könnte dein Code ausgeführt werden, bevor das HTML gerendert wurde - was zu Fehlern führen kann."
]
},
"es": {
"title": "Aprende cómo funcionan las etiquetas de programa y la función de documento listo.",
"description": [
"Ahora estamos listos para aprender jQuery, la herramienta de JavaScript más popular de todos los tiempos. No te preocupes por JavaScript en si --lo cubriremos pronto.",
"Antes de que podamos comenzar a usar jQuery, tenemos que añadir algunas cosas a nuestro HTML.",
"En primer lugar, añade un elemento de programa <code>script</code> en la parte superior de la página. Asegúrate de cerrarlo en la línea siguiente. ",
"Tu navegador ejecutará todo JavaScript dentro de un elemento <code>script</code>, incluyendo jQuery.",
"Dentro de tu elemento <code>script</code>, agrega este código: <code>$(document).ready(function () {</code> A continuación, ciérralo en la línea siguiente (aún dentro de tu elemento <code>script</code>) con: <code>})</code>",
"Más adelante aprenderemos más acerca de funciones. Lo importante es saber que el código que pongas dentro de esta función (<code>function</code>) se ejecutará tan pronto como tu navegador haya cargado la página.",
"Esto es importante porque sin tu <code>función de documento listo</code>, tu código puede ejecutarse antes de que se haya presentado el HTML, lo que podría causar errores."
]
},
"fr": {
"title": "Apprendre comment fonctionnent les balises Script et Document Ready",
"description": [
"Nous sommes maintenant prêt à apprendre jQuery, l'outil Javascript le plus populaire de tout les temps. Ne vous inquiétez pas à propos de JavaScript lui-même, nous y viendrons bientôt.",
"Avant de pouvoir utiliser jQuery, nous avons besoin d'ajouter certaines choses à notre HTML.",
"Premièrement, ajoutez un élément <code>script</code> en haut de votre page. Assurez-vous de le fermer à la ligne suivante.",
"Votre navigateur exécutera JavaScript à l'intérieur de l'élement <code>script</code>, y compris jQuery.",
"Á l'intérieur de votre élement <code>script</code>, ajoutez ce code : <code>$(document).ready(function() {</code> à votre <code>script</code>. Puis fermez-le à la ligne suivante (toujours à l'intérieur de votre élement <code>script</code> avec: <code>});</code>",
"Nous en apprendrons plus sur les <code>functions</code> plus tard. Le plus important à savoir est que le code à l'intérieur de cette <code>function</code> sera exécuté dès que le navigateur aura chargé votre page.",
"Ceci est important car sans votre <code>document ready function</code>, votre code pourrait être exécuté avant que votre HTML soit affiché, ce qui pourrait causer des problèmes."
]
}
}
},
{
"id": "bad87fee1348bd9bedc08826",
"title": "Target HTML Elements with Selectors Using jQuery",
"description": [
"Now we have a <code>document ready function</code>.",
"Now let's write our first jQuery statement. All jQuery functions start with a <code>$</code>, usually referred to as a <code>dollar sign operator</code>, or as <code>bling</code>.",
"jQuery often selects an HTML element with a <code>selector</code>, then does something to that element.",
"For example, let's make all of your <code>button</code> elements bounce. Just add this code inside your document ready function:",
"<code>$(\"button\").addClass(\"animated bounce\");</code>",
"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.",
"Additionally make sure to use <code>$(\"button\").addClass(\"animated bounce\");</code> instead of <code>$('button').addClass(\"animated bounce\");</code> since single-quote selectors will not pass our tests."
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"",
"<!-- Only change code above this line. -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"tests": [
"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(!code.match(/class.*animated/g), 'message: Only use jQuery to add these classes to the element.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "HTML-Elemente mit Selektoren durch jQuery auswählen",
"description": [
"Jetzt haben wir eine <code>Document Ready Funktion</code>.",
"Lass uns unser erstes jQuery Statement schreiben. Alle jQuery Funktionen starten mit einem <code>$</code>, für gewöhnlich als <code>Dollar-Zeichen Operator</code> bezeichnet.",
"jQuery wählt oft HTML-Elemente mit einem <code>Selektor</code> aus, um dann mit diesen Elementen etwas zu machen.",
"Zum Beispiel, lasse alle deine <code>Button</code> Elemente hüpfen. Dazu musst du nur folgenden Code in deine <code>Document Ready Funktion</code> hinzufügen:",
"<code>$(\"button\").addClass(\"animated bounce\");</code>",
"Beachte, dass wir bereits jQuery und Animate.css im Hintergrund hinzugefügt haben, damit du diese im Editor nutzen kannst. Du nutzt also jQuery um die <code>bounce</code> Klasse von Animate.css zu deinen <code>Button</code> Elementen hinzuzufügen."
]
},
"es": {
"title": "Elige elementos HTML usando selectores y jQuery",
"description": [
"Ya tenemos una <code>función de documento listo</code>.",
"Ahora vamos a escribir nuestra primera instrucción jQuery. Todas las funciones de jQuery comienzan con un <code>$</code>, al que suele referirse como <code>operador dólar</code>, o simplemente como <code>bling</code>. ",
"jQuery a menudo selecciona un elemento HTML con un <code>selector</code>, y luego le hace algo a ese elemento.",
"Por ejemplo, hagamos que todos tus elementos <code>button</code> reboten. Sólo tienes que añadir este código dentro de la función de documento listo: ",
"<code>$(\"button\").addClass(\"animated bounce\")</code>",
"Ten en cuenta que ya hemos incluido tanto la biblioteca jQuery como la biblioteca Animate.css en segundo plano para que pueda utilizarlos en el editor. Así que estás usando jQuery para aplicar la clase <code>bounce</code> de Animate.css a tus elementos <code>button</code>."
]
},
"fr": {
"title": "Cibler des élements HTML par sélecteurs avec jQuery",
"description": [
"Nous avons maintenant un <code>document ready function</code>.",
"Nous allons à présent écrire notre première expression jQuery. Chaque fonction jQuery commence avec un <code>$</code>, habituellement nommé <code>opérateur dollar</code>, ou <code>bling</code>.",
"jQuery sélectionne souvent un élément HTML à l'aide d'un <code>selector</code>, puis fait quelque chose à cet élement.",
"Par exemple, faisons en sorte que tous nos <code>button</code> rebondissent. Ajoutez juste ce code à l'intérieur de votre <code>$(document).ready(function(){</code>:",
"<code>$(\"button\").addClass(\"animated bounce\");</code>",
"Notez que nous avons déjà inclus à la fois la librairie jQuery et la librairie Animate.css en amont donc nous pouvons les utiliser dans l'éditeur. Donc, vous utilisez jQuery pour appliquer la classe <code>bounce</code> d'Animate.css à vos éléments <code>button</code>.",
"De plus, assurez-vous d'utiliser <code>$(\"button\").addClass(\"animated bounce\");</code> et non <code>$('button').addClass(\"animated bounce\");</code> car les apostrophes ne passeront pas nos tests."
]
}
}
},
{
"id": "bad87fee1348bd9aedc08826",
"title": "Target Elements by Class Using jQuery",
"description": [
"You see how we made all of your <code>button</code> elements bounce? We selected them with <code>$(\"button\")</code>, then we added some CSS classes to them with <code>.addClass(\"animated bounce\");</code>.",
"You just used jQuery's <code>.addClass()</code> function, which allows you to add classes to elements.",
"First, let's target your <code>div</code> elements with the class <code>well</code> by using the <code>$(\".well\")</code> selector.",
"Note that, just like with CSS declarations, you type a <code>.</code> before the class's name.",
"Then use jQuery's <code>.addClass()</code> function to add the classes <code>animated</code> and <code>shake</code>.",
"For example, you could make all the elements with the class <code>text-primary</code> shake by adding the following to your <code>document ready function</code>:",
"<code>$(\".text-primary\").addClass(\"animated shake\");</code>"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"button\").addClass(\"animated bounce\");",
" });",
"fcces",
"",
"<!-- Only change code above this line. -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"tests": [
"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(!code.match(/class\\.\\*animated/g), 'message: Only use jQuery to add these classes to the element.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Elemente anhand von Klassen mit jQuery auswählen",
"description": [
"Siehst du, wie wir alle deine <code>Button</code> Elemente hüpfen haben lassen? Wir haben sie mit <code>$(\"button\")</code> ausgewählt, dann CSS-Klassen mit <code>.addClass(\"animated bounce\");</code> hinzugefügt.",
"Du hast gerade jQuery's <code>.addClass()</code> Funktion genutzt, die dir erlaubt, Klassen zu Elemente hinzuzufügen.",
"Wähle als erstes deine <code>div</code> Elemente mit der Klasse <code>well</code>, indem du den <code>$(\".well\")</code> Selektor nutzt.",
"Bedenke, dass du - genauso wie bei CSS-Deklarationen - einen <code>.</code> vor den Namen der Klasse setzen musst.",
"Dann nutze die jQuery Funktion <code>.addClass()</code> um die Klassen <code>animated</code> und <code>shake</code> hinzuzufügen.",
"Zum Beispiel könntest du alle Elemente mit der Klasse <code>text-primary</code> schütteln lassen, indem du folgendes zu deiner <code>Document Ready Funktion</code> hinzufügst:",
"<code>$(\".text-primary\").addClass(\"animated shake\");</code>"
]
},
"es": {
"title": "Elige elementos por su clase usando jQuery",
"description": [
"¿Viste como hicimos rebotar todos tus elementos <code>button</code>? Los seleccionamos con <code>$(\"button\")</code>, y luego les añadimos algunas clases CSS con <code>.addClass(\"animated bounce\");.</code> ",
"Acabas de usar la función <code>addClass()</code> de jQuery, que te permite añadir clases a los elementos.",
"En primer lugar, apuntemos a tus elementos <code>div</code> que tengan la clase <code>well</code> usando el selector <code>$(\".well\")</code>.",
"Ten en cuenta que, al igual que con las declaraciones CSS, escribes un <code>.</code> antes del nombre de la clase.",
"A continuación, utiliza la función <code>.addClass()</code> de jQuery para agregar las clases <code>animated</code> y <code>shake</code>.",
"Por ejemplo, podrías hacer que todos los elementos con la clase <code>text-primary</code> se sacudieran añadiendo lo siguiente a tu <code>función de documento listo</code>:",
"<code>$(\".text-primary\").addClass(\"animated shake\");</code>"
]
},
"fr": {
"title": "Cibler les élements par Classe avec jQuery",
"description": [
"Voyez comment nous avons fait rebondir tous nos éléments <code>button</code>? Nous les avons sélectionné avec <code>$(\"button\")</code>, puis nous leur avons ajouté des classes CSS avec <code>.addClass(\"animated bounce\");</code>.",
"Vous venez d'utiliser la fonction jQuery <code>.addClass()</code>, ce qui nous permet d'ajouter des classes aux éléments.",
"Tout d'abord, ciblons nos éléments <code>div</code> qui ont la classe <code>well</code> en utilisant le sélecteur <code>$(\".well\")</code>.",
"Notez que, tout comme les expressions CSS, vous ajoutez un <code>.</code> avant le nom de la classe.",
"Puis, vous utilisez la fonction jQuery <code>.addClass()</code> pour ajouter les classes <code>animated</code> et <code>shake</code>.",
"Par exemple, vous pouvez faire en sorte que tous les éléments avec la classe <code>text-primary</code> s'agitent en ajoutant le code suivant à votre <code>document ready function</code>:",
"<code>$(\".text-primary\").addClass(\"animated shake\");</code>"
]
}
}
},
{
"id": "bad87fee1348bd9aeda08826",
"title": "Target Elements by ID Using jQuery",
"description": [
"You can also target elements by their id attributes.",
"First target your <code>button</code> element with the id <code>target3</code> by using the <code>$(\"#target3\")</code> selector.",
"Note that, just like with CSS declarations, you type a <code>#</code> before the id's name.",
"Then use jQuery's <code>.addClass()</code> function to add the classes <code>animated</code> and <code>fadeOut</code>.",
"Here's how you'd make the <code>button</code> element with the id <code>target6</code> fade out:",
"<code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"button\").addClass(\"animated bounce\");",
" $(\".well\").addClass(\"animated shake\");",
"",
" });",
"fcces",
"",
"<!-- Only change code above this line. -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"tests": [
"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\")) && code.match(/\\$\\(\\s*.#target3.\\s*\\)/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(!code.match(/class.*animated/g), 'message: Only use jQuery to add these classes to the element.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Elemente anhand der ID mit jQuery auswählen",
"description": [
"Du kannst Elemente auch anhand deren ID-Attributs auswählen.",
"Wähle als erstes dein <code>Button</code> Element mit der ID <code>target3</code>, indem du den <code>$(\"#target3\")</code> Selektor nutzt.",
"Bedenke, dass du - genauso wie bei CSS-Deklarationen - eine <code>#</code> vor den Namen der Klasse setzen musst.",
"Dann nutze die jQuery Funktion <code>.addClass()</code> um die Klassen <code>animated</code> und <code>fadeOut</code> hinzuzufügen.",
"So könntest du das <code>Button</code> Element mit der ID <code>target6</code> ausblenden lassen:",
"<code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
]
},
"es": {
"title": "Elige elementos por ID usando jQuery",
"description": [
"También puedes elegir un elemento por su atributo id.",
"Primero selecciona tu elemento <code>button</code> con el id <code>target3</code> mediante el uso del selector <code>$(\"#target3\")</code>.",
"Ten en cuenta que, al igual que con las declaraciones CSS, debes escribir un <code>#</code> antes de la identificación.",
"A continuación, utiliza la función <code>.addClass()</code> de jQuery para agregar las clases <code>animated</code> y <code>fadeOut</code>.",
"He aquí cómo haces que desaparezca el elemento <code>button</code> con la identificación <code>target6</code>:",
"<code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
]
},
"fr": {
"title": "Cibler les éléments par ID avec jQuery",
"description": [
"Vous pouvez également cibler les éléments à l'aide de leurs attributs id.",
"Premièrement, cibler votre élément <code>button</code> avec l'id <code>target3</code> en utilisant le sélecteur <code>$(\"#target\")</code>.",
"Notez que, tout comme les expressions CSS, vous ajoutez un <code>#</code> avant le nom de l'id.",
"Puis, utilisez la fonction jQuery <code>.addClass()</code> afin d'ajouter les classes <code>animated</code> et <code>fadeOut</code>.",
"Voici comment vous pouvez faire en sorte que l'élément <code>button</code> avec l'id <code>target6</code> disparaisse en fondu:",
"<code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aeda08726",
"title": "Delete your jQuery Functions",
"description": [
"These animations were cool at first, but now they're getting kind of distracting.",
"Delete all three of these jQuery functions from your <code>document ready function</code>, but leave your <code>document ready function</code> itself intact."
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"button\").addClass(\"animated bounce\");",
" $(\".well\").addClass(\"animated shake\");",
" $(\"#target3\").addClass(\"animated fadeOut\");",
"",
" });",
"fcces",
"",
"<!-- Only change code above this line. -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"tests": [
"assert(!code.match(/e\"\\);/g) && !code.match(/t\"\\);/g), 'message: Delete all three of your jQuery functions from your <code>document ready function</code>.');",
"assert(code.match(/<script>/g), 'message: Leave your <code>script</code> element intact.');",
"assert(code.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'message: Leave your <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.');",
"assert(code.match(/\\n\\s+?\\}\\);/g), 'message: Leave your \"document ready function\" closing <code>})</code> intact.');",
"assert(code.match(/<\\/script>/g) && code.match(/<script/g) && code.match(/<\\/script>/g).length === code.match(/<script/g).length, 'message: Leave your <code>script</code> element closing tag intact.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Lösche deine jQuery Funktionen",
"description": [
"Anfangs waren diese Animationen noch cool, jetzt sind sie aber ein wenig störend.",
"Lösche alle drei jQuery Funktionen deiner <code>Document Ready Funktion</code>, aber lasse die <code>Document Ready Funktion</code> selbst intakt."
]
},
"es": {
"title": "Elimina tus funciones jQuery",
"description": [
"Estas animaciones eran divertidas al principio, pero ahora se están volviendo una distracción.",
"Elimina esas tres funciones jQuery de tu <code>función de documento listo</code>, pero deja intacta la declaración de la <code>función de documento listo</code>."
]
},
"fr": {
"title": "Effacer vos fonctions jQuery",
"description": [
"Ces animations sont sympathiques à première vue, mais maintenant elles deviennent plutôt distrayantes.",
"Effacez les trois fonctions jQuery de votre <code>document ready function</code>, mais laissez votre <code>document ready function</code> lui-même intact."
]
}
}
},
{
"id": "bad87fee1348bd9aed908626",
"title": "Target the same element with multiple jQuery Selectors",
"description": [
"Now you know three ways of targeting elements: by type: <code>$(\"button\")</code>, by class: <code>$(\".btn\")</code>, and by id <code>$(\"#target1\")</code>.",
"Although it is possible to add multiple classes in a single <code>.addClass()</code> call, let's add them to the same element in <em>three separate ways</em>.",
"Using <code>.addClass()</code>, add only one class at a time to the same element, three different ways:",
"Add the <code>animated</code> class to all elements with type <code>button</code>.",
"Add the <code>shake</code> class to all the buttons with class <code>.btn</code>.",
"Add the <code>btn-primary</code> class to the button with id <code>#target1</code>.",
"<strong>Note</strong><br>You should only be targeting one element and adding only one class at a time. Altogether, your three individual selectors will end up adding the three classes <code>shake</code>, <code>animated</code>, and <code>btn-primary</code> to <code>#target1</code>."
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" });",
"fcces",
"",
"<!-- Only change code above this line. -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"tests": [
"assert(code.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?button\\s*?(?:'|\")/gi), 'message: Use the <code>$(\"button\")</code> selector.');",
"assert(code.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.btn\\s*?(?:'|\")/gi), 'message: Use the <code>$(\".btn\")</code> selector.');",
"assert(code.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?#target1\\s*?(?:'|\")/gi), 'message: Use the <code>$(\"#target1\")</code> selector.');",
"assert(code.match(/addClass/g) && code.match(/addClass\\s*?\\(\\s*?('|\")\\s*?[\\w-]+\\s*?\\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(!code.match(/class.*animated/g), 'message: Only use jQuery to add these classes to the element.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Wähle das gleiche Element mit mehreren jQuery Selektoren aus",
"description": [
"Bis jetzt kennst du drei verschiedene Wege um Elemente auszuwählen: mit dem Element-Typ: <code>$(\"button\")</code>, mit der Element-Klasse: <code>$(\".btn\")</code>, und der Element-ID: <code>$(\"#target1\")</code>.",
"Auch wenn es möglich ist, mehrere Klassen in einem einzigen <code>.addClass()</code> Aufruf hinzuzufügen, lass uns jetzt die Klassen in drei verschiedenen Wegen dem Element hinzufügen.",
"Nutze jeden der oben erwähnten jQuery Selektoren und die <code>addClass()</code> Funktion:",
"Füge die Klasse <code>animated</code> zu allen Elementen des Typs <code>button</code> hinzu.",
"Füge die Klasse <code>shake</code> zu allen Buttons mit der Klasse <code>.btn</code> hinzu.",
"Füge die Klasse <code>btn-primary</code> zu dem Button mit der ID <code>#target1</code> hinzu."
]
},
"es": {
"title": "Elige un mismo elemento con múltiples selectores jQuery",
"description": [
"Ahora ya sabes tres formas de seleccionar elementos: por tipo <code>$(\"button\")</code>, por clase <code>$(\".btn\")</code>, y por identificación <code>$(\"#target1\")</code>. ",
"Aunque es posible agregar varias clases en una sola llamada a <code>.addClass()</code>, vamos a añadirlas al mismo elemento de tres maneras diferentes.",
"Usa cada uno de los selectores jQuery vistos y la función <code>addClass()</code> para:",
"Agregar la clase <code>animated</code> a todos los elementos con tipo <code>button</code>.",
"Agregar la clase <code>shake</code> a todos los botones con clase <code>.btn</code>.",
"Agregar la clase <code>btn-primary</code> al botón con identificación <code>#target1</code>."
]
},
"fr": {
"title": "Cibler le même élément avec plusieurs sélecteurs jQuery",
"description": [
"À présent, vous connaissez trois façons de cibler les éléments: par type: <code>$(\"button\")</code>, par classe: <code>$(\".btn\")</code>, et par id <code>$(\"#target1\")</code>.",
"En utilisant <code>.addClass()</code>, ajoutez uniquement une classe à la fois au même élément, de trois façons différentes:",
"Ajoutez la classe <code>animated</code> à tous les éléments de type <code>button</code>.",
"Ajoutez la classe <code>shake</code> à tous les boutons qui ont la classe <code>.btn</code>.",
"Ajoutez la classe <code>btn-primary</code> au bouton qui a l'id <code>#target1</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aed918626",
"title": "Remove Classes from an element with jQuery",
"description": [
"In the same way you can add classes to an element with jQuery's <code>addClass()</code> function, you can remove them with jQuery's <code>removeClass()</code> function.",
"Here's how you would do this for a specific button:",
"<code>$(\"#target2\").removeClass(\"btn-default\");</code>",
"Let's remove the <code>btn-default</code> class from all of our <code>button</code> elements."
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"button\").addClass(\"animated bounce\");",
" $(\".well\").addClass(\"animated shake\");",
" $(\"#target3\").addClass(\"animated fadeOut\");",
"",
" });",
"fcces",
"",
"<!-- Only change code above this line. -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"tests": [
"assert($(\".btn-default\").length === 0, 'message: Remove the <code>btn-default</code> class from all of your <code>button</code> elements.');",
"assert(code.match(/btn btn-default/g), 'message: Only use jQuery to remove this class from the element.');",
"assert(code.match(/\\.[\\v\\s]*removeClass[\\s\\v]*\\([\\s\\v]*('|\")\\s*btn-default\\s*('|\")[\\s\\v]*\\)/gm), 'message: Only remove the <code>btn-default</code> class.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Entferne Klassen von einem Element mit jQuery",
"description": [
"Genauso wie du Klassen mit der jQuery Funktion <code>addClass()</code> hinzufügen kannst, kannst du mit der jQuery Funktion <code>removeClass()</code> Klassen entfernen.",
"So könntest du das bei einem spezifischen Button machen:",
"<code>$(\"#target2\").removeClass(\"btn-default\");</code>",
"Lass uns alle <code>btn-default</code> Klassen von unseren <code>Button</code> Elementen entfernen."
]
},
"es": {
"title": "Elimina clases de un elemento con jQuery",
"description": [
"De la misma manera que puedes agregar clases a un elemento con la función <code>addClass()</code> de jQuery, puedes eliminarlas con la función <code>removeClass()</code>.",
"He aquí cómo puedes hacerlo para un botón específico:",
"<code>$(\"#target2\").removeClass(\"btn-default\");</code>",
"Vamos a quitar la clase <code>btn-default</code> de todos nuestros elementos <code>button</code>."
]
},
"fr": {
"title": "Supprimer des classes d'un élément avec jQuery",
"description": [
"De la même façon que vous pouvez ajouter des classes à un élément avec la fonction jQuery <code>addClass()</code>, vous pouvez les supprimer avec la fonction jQuery <code>removeClass()</code>.",
"Voici comment procéder pour un bouton spécifique:",
"<code>$(\"#target2\").removeClass(\"btn-default\");",
"Supprimons la classe <code>btn-default</code> de tous nos éléments <code>button</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aed908826",
"title": "Change the CSS of an Element Using jQuery",
"description": [
"We can also change the CSS of an HTML element directly with jQuery.",
"jQuery has a function called <code>.css()</code> that allows you to change the CSS of an element.",
"Here's how we would change its color to blue:",
"<code>$(\"#target1\").css(\"color\", \"blue\");</code>",
"This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon.",
"Delete your jQuery selectors, leaving an empty <code>document ready function</code>.",
"Select <code>target1</code> and change its color to red."
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"button\").addClass(\"animated bounce\");",
" $(\".well\").addClass(\"animated shake\");",
" $(\"#target3\").addClass(\"animated fadeOut\");",
" $(\"button\").removeClass(\"btn-default\");",
"",
" });",
"fcces",
"",
"<!-- Only change code above this line. -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"tests": [
"assert($(\"#target1\").css(\"color\") === 'rgb(255, 0, 0)', 'message: Your <code>target1</code> element should have red text.');",
"assert(!code.match(/class.*animated/g), 'message: Only use jQuery to add these classes to the element.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Das CSS eines Elements mit jQuery ändern",
"description": [
"Wir können auch das CSS eines HTML-Elements mit jQuery verändern.",
"jQuery hat die Funktion <code>.css()</code>, welche dir erlaubt, das CSS eines Elements zu ändern.",
"So können wir die Farbe einer ID zu Blau ändern:",
"<code>$(\"#target1\").css(\"color\", \"blue\");</code>",
"Das ist ein wenig anders als eine normale CSS-Deklaration, weil die CSS-Eigenschaft und deren Wert in Anführungszeichen sind und durch ein Komma anstatt eines Doppelpunkts getrennt werden.",
"Lösche deine jQuery Selektoren, damit eine leere <code>Document Ready Funktion</code> übrig bleibt.",
"Wähle <code>target1</code> und ändere dessen Farbe zu Rot."
]
},
"es": {
"title": "Cambia el CSS de un elemento usando jQuery",
"description": [
"También podemos cambiar el CSS de un elemento HTML directamente con jQuery.",
"jQuery tiene una función llamada <code>.css()</code> que te permite cambiar el CSS de un elemento.",
"Así es como cambiaríamos su color a azul:",
"<code>$(\"#target1\").css(\"color\", \"blue\");</code>",
"Esto es un poco diferente a una declaración normal CSS, porque la propiedad CSS y su valor están entre comillas y separadas por una coma en lugar de dos puntos.",
"Elimina tus selectores jQuery, dejando en blanco la <code>función de documento listo</code>.",
"Selecciona <code>target1</code> y cambia su color a rojo."
]
},
"fr": {
"title": "Changer le CSS d'un élément en utilisant jQuery",
"description": [
"Nous pouvons aussi changer le CSS d'un élément HTML directement avec jQuery.",
"jQuery dispose d'une fonction appelée <code>.css()</code> qui vous permet de changer le CSS d'un élément.",
"Voici comment changer sa couleur en bleu:",
"<code>$(\"#target1\").css(\"color\", \"blue\");",
"Ceci est légèrement différent d'une expression CSS normale, car la propriété CSS et sa valeur sont entre guillemets, et separées par une virgule au lieu de deux points.",
"Effacez vos sélecteurs jQuery, laissant votre <code>document ready function</code> vide.",
"Sélectionnez <code>target1</code> et changez sa couleur en rouge."
]
}
}
},
{
"id": "bad87fee1348bd9aed808826",
"title": "Disable an Element Using jQuery",
"description": [
"You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.",
"When you disable a button, it will become grayed-out and can no longer be clicked.",
"jQuery has a function called <code>.prop()</code> that allows you to adjust the properties of elements.",
"Here's how you would disable all buttons:",
"<code>$(\"button\").prop(\"disabled\", true);</code>",
"Disable only the <code>target1</code> button."
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"#target1\").css(\"color\", \"red\");",
"",
" });",
"fcces",
"",
"<!-- Only change code above this line. -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"tests": [
"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(!code.match(/disabled>/g), 'message: Only use jQuery to add these classes to the element.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Elemente mit jQuery deaktivieren",
"description": [
"Du kannst auch die nicht-CSS Eigenschaften eines HTML-Elements mit jQuery ändern. Zum Beispiel kannst du <code>Buttons</code> deaktivieren.",
"Wenn du einen <code>Button</code> deaktivierst, wird er grau unterlegt und kann nicht mehr geklickt werden.",
"jQuery hat eine Funktion namens <code>.prop()</code>, die es dir erlaubt, die Eigenschaften von Elementen anzupassen.",
"So kannst du alle <code>Buttons</code> deaktivieren:",
"<code>$(\"button\").prop(\"disabled\", true);</code>",
"Deaktiviere nur den <code>target1</code> Button."
]
},
"es": {
"title": "Desactiva un elemento usando jQuery",
"description": [
"También puedes cambiar propiedades que no son CSS de los elementos HTML con jQuery. Por ejemplo, puedes desactivar los botones. ",
"Al deshabilitar un botón, se volverá gris y no podrá pulsarse.",
"jQuery tiene una función llamada <code>.prop()</code> que te permite ajustar las propiedades de los elementos.",
"He aquí cómo puedes desactivar todos los botones:",
"<code>$(\"button\").prop(\"disabled\", true);</code>",
"Desactiva sólo el botón <code>target1</code>."
]
},
"fr": {
"title": "Changer le texte à l'intérieur d'un élément en utilisant jQuery",
"description": [
"En utilisant jQuery, vous pouvez changer le texte entre les balises ouvrante et fermante d'un élément. Vous pouvez même changer les balises HTML.",
"jQuery dispose d'une fonction appelée <code>.html()</code> qui vous permet d'ajouter des balises HTML et du texte à l'intérieur d'un élément. Tout le contenu de l'élément sera alors remplacé par le contenu que vous indiquerez en utilisant la fonction.",
"Voici comment vous pourriez ré-écrire et mettre en italique le texte de notre titre:",
"<code>$(\"h3\").html(\"<em>jQuery Playground</em>\");",
"jQuery dispose également d'une fonction similaire appelée <code>.text()</code> qui change uniquement le texte sans ajouter de balises. Autrement dit, cette fonction n'évaluera aucune balise HTML que vous lui donnez, mais les traitera comme du texte que vous désirez ajouter à votre élément.",
"Changez le bouton avec l'id <code>target4</code> en mettant en italique son texte."
]
}
}
},
{
"id": "564944c91be2204b269d51e3",
"title": "Change Text Inside an Element Using jQuery",
"description": [
"Using jQuery, you can change the text between the start and end tags of an element. You can even change HTML markup.",
"jQuery has a function called <code>.html()</code> that lets you add HTML tags and text within an element. Any content previously within the element will be completely replaced with the content you provide using this function.",
"Here's how you would rewrite and emphasize the text of our heading:",
"<code>$(\"h3\").html(\"<em>jQuery Playground</em>\");</code>",
"jQuery also has a similar function called <code>.text()</code> that only alters text without adding tags. In other words, this function will not evaluate any HTML tags passed to it, but will instead treat it as the text you want to replace the existing content with.",
"Change the button with id <code>target4</code> by emphasizing its text."
],
"releasedOn": "November 18, 2015",
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"#target1\").css(\"color\", \"red\");",
" ",
" });",
"fcces",
"",
"<!-- Only change code above this line. -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"tests": [
"assert.isTrue((/<em>#target4<\\/em>/gi).test($(\"#target4\").html()), 'message: Emphasize 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((/<em>/gi).test($(\"h3\").html()), 'message: Do not alter any other text.');",
"assert(code.match(/\\.html\\(/g), 'message: Make sure you are using <code>.html()</code> and not <code>.text()</code>.');",
"assert(code.match(/\\$\\(\\s*?(\\\"|\\')#target4(\\\"|\\')\\s*?\\)\\.html\\(/), 'message: Make sure to select <code>button id=\"target4\"</code> with jQuery.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Ändere den Text innerhalb eines Elements mit jQuery",
"description": [
"Mit jQuery kannst du den Text zwischen dem Start- und dem End-Tag eines Elements ändern. Du kannst sogar das HTML-Markup ändern.",
"jQuery hat eine Funktion namens <code>.html()</code>, die dich HTML-Tags und Text innerhalb eines Elements hinzufügen lässt. Jeglicher Content der sich vorher innerhalb des Elements befand, wird mit jenem Content ersetzt, den du durch diese Funktion bereitstellst.",
"So kannst du den Text unserer Überschrift überschreiben und hervorheben:",
"<code>$(\"h3\").html(\"<em>jQuery Playground</em>\");</code>",
"jQuery hat auch eine weitere ähnliche Funktion namens <code>.text()</code>, welche nur den Text ändert, ohne Tags hinzuzufügen. In anderen Worten: diese Funktion evaluiert keinerlei HTML-Tags, die an sie übergeben werden, sondern behandelt diese als Text, den du mit der Funktion ersetzen willst.",
"Ändere den Button mit der ID <code>target4</code> indem du seinen Text hervorhebst."
]
},
"es": {
"title": "Cambia el texto de un elemento usando jQuery",
"description": [
"Con jQuery, puedes cambiar el texto que está entre las etiquetas de apertura y cierre de un elemento. Incluso puedes cambiar marcado HTML.",
"jQuery tiene una función llamada <code>.html()</code> que te permite añadir etiquetas HTML y texto dentro de un elemento. Cualquier contenido que estuviese previamente dentro del elemento será remplazado por completo con el contenido que proveas usando esta función.",
"He aquí como reescribes y pones en itálicas el texto de nuestro encabezado:",
"<code>$(\"h3\").html(\"<i>jQuery Playground</i>\");</code>",
"jQuery también tiene una función similar llamada <code>.text()</code> que sólo altera el texto sin añadir etiquetas.",
"Cambia el botón con identificación <code>target4</code> de forma que su texto quede en itálicas."
]
}
}
},
{
"id": "bad87fee1348bd9aed708826",
"title": "Remove an Element Using jQuery",
"description": [
"Now let's remove an HTML element from your page using jQuery.",
"jQuery has a function called <code>.remove()</code> that will remove an HTML element entirely",
"Remove element <code>target4</code> from the page by using the <code>.remove()</code> function."
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"#target1\").css(\"color\", \"red\");",
" $(\"#target1\").prop(\"disabled\", true);",
"",
" });",
"fcces",
"",
"<!-- Only change code above this line. -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"tests": [
"assert($(\"#target4\").length === 0, 'message: Use jQuery to remove your <code>target4</code> element from your page.');",
"assert(code.match(/id=\"target4/g), 'message: Only use jQuery to remove this element.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Entferne ein Element mit jQuery",
"description": [
"Lass uns jetzt ein HTML-Element mit jQuery von deiner Seite entfernen.",
"jQuery hat eine Funktion namens <code>.remove()</code>, die ein HTML-Element komplett entfernt.",
"Entferne das Element <code>target4</code> von der Seite, indem du die <code>.remove()</code> Funktion nutzt."
]
},
"es": {
"title": "Elimina un elemento usando jQuery",
"description": [
"Ahora quitemos un elemento HTML de tu página usando jQuery.",
"jQuery tiene una función llamada <code>.remove()</code> que eliminará un elemento HTML por completo",
"Elimina el elemento con identificación <code>target4</code> de la página utilizando la función <code>.remove()</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aed608826",
"title": "Use appendTo to Move Elements with jQuery",
"description": [
"Now let's try moving elements from one <code>div</code> to another.",
"jQuery has a function called <code>appendTo()</code> that allows you to select HTML elements and append them to another element.",
"For example, if we wanted to move <code>target4</code> from our right well to our left well, we would use:",
"<code>$(\"#target4\").appendTo(\"#left-well\");</code>",
"Move your <code>target2</code> element from your <code>left-well</code> to your <code>right-well</code>."
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"#target1\").css(\"color\", \"red\");",
" $(\"#target1\").prop(\"disabled\", true);",
" $(\"#target4\").remove();",
"",
" });",
"fcces",
"",
"<!-- Only change code above this line. -->",
"",
"<div class=\"container-fluid\">",
" <h3 class=\"text-primary text-center\">jQuery Playground</h3>",
" <div class=\"row\">",
" <div class=\"col-xs-6\">",
" <h4>#left-well</h4>",
" <div class=\"well\" id=\"left-well\">",
" <button class=\"btn btn-default target\" id=\"target1\">#target1</button>",
" <button class=\"btn btn-default target\" id=\"target2\">#target2</button>",
" <button class=\"btn btn-default target\" id=\"target3\">#target3</button>",
" </div>",
" </div>",
" <div class=\"col-xs-6\">",
" <h4>#right-well</h4>",
" <div class=\"well\" id=\"right-well\">",
" <button class=\"btn btn-default target\" id=\"target4\">#target4</button>",
" <button class=\"btn btn-default target\" id=\"target5\">#target5</button>",
" <button class=\"btn btn-default target\" id=\"target6\">#target6</button>",
" </div>",
" </div>",
" </div>",
"</div>"
],
"tests": [
"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(!code.match(/class.*animated/g), 'message: Only use jQuery to move these elements.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Verwende appendTo um Elemente mit jQuery zu verschieben.",
"description": [
"Lass uns jetzt versuchen, ein Element von einem <code>div</code> zum Nächsten zu verschieben.",
"jQuery hat eine Funktion namens <code>appendTo()</code>, die es dir erlaubt HTML-Elemente auszuwählen und diese zu einem anderen Element anzuhängen.",
"Wenn wir zum Beispiel <code>target4</code> von <code>right-well</code> zu <code>left-well</code> verschieben wollen, würden wir folgenden Code nutzen:",
"<code>$(\"#target4\").appendTo(\"#left-well\");</code>",
"Verschiebe dein <code>target2</code> Element von <code>left-well</code> zu <code>right-well</code>."
]
},
"es": {
"title": "Usa appendTo para mover elementos con jQuery",
"description": [
"Ahora intentemos mover elementos de un <code>div</code> a otro.",
"jQuery tiene una función llamada <code>appendTo()</code> que te permite seleccionar elementos HTML y anexarlos a otro elemento.",
"Por ejemplo, si quisiéramos mover <code>target4</code> de nuestro pozo (<em>well</em>) derecho a nuestro pozo izquierdo, usaríamos:",
"<code>$(\"#target4\").appendTo(\"#left-well\");</code>",
"Mueve tu elemento <code>target2</code> de tu <code>left-well</code> a tu <code>right-well</code>."
]
}
}
},
{
"id": "bad87fee1348bd9aed508826",
"title": "Clone an Element Using jQuery",
"description": [
"In addition to moving elements, you can also copy them from one place to another.",
"jQuery has a function called <code>clone()</code> that makes a copy of an element.",
"For example, if we wanted to copy <code>target2</code> from our <code>left-well</code> to our <code>right-well</code>, we would use:",