1 00:00:01,130 --> 00:00:03,650 ‫Kursleiter: Lassen Sie uns nun jedes der 2 00:00:03,650 --> 00:00:06,583 ‫Kartenelemente mit den richtigen Daten für jede der Touren füllen. 3 00:00:08,210 --> 00:00:09,870 ‫Also nur als kurze Zusammenfassung. 4 00:00:09,870 --> 00:00:13,690 ‫In einem letzten Video haben wir damit begonnen, dieses Hauptelement 5 00:00:13,690 --> 00:00:17,220 ‫und ein Element innerhalb eines div-Containerelements zu erstellen, und 6 00:00:17,220 --> 00:00:19,070 ‫dann innerhalb dieses Containers 7 00:00:19,070 --> 00:00:21,670 ‫eines dieser Kartenelemente für jede der 8 00:00:21,670 --> 00:00:24,740 ‫Touren, die in dem Array enthalten sind, das 9 00:00:24,740 --> 00:00:26,850 ‫wir an diese Vorlage übergeben. 10 00:00:26,850 --> 00:00:29,720 ‫Und dafür verwenden wir ein Pug-Array, das genau 11 00:00:29,720 --> 00:00:30,930 ‫so funktioniert. 12 00:00:30,930 --> 00:00:33,270 ‫Also, was ist jedes Schlüsselwort 13 00:00:33,270 --> 00:00:37,580 ‫hier und das Ergebnis davon sah so aus, in Ordnung. 14 00:00:37,580 --> 00:00:40,010 ‫Was wir jetzt also tun werden, 15 00:00:40,010 --> 00:00:43,773 ‫ist, jede dieser Karten hier mit den tatsächlichen Daten zu füllen. 16 00:00:45,610 --> 00:00:48,223 ‫Und fangen wir hier mit dem Tournamen an. 17 00:00:49,940 --> 00:00:52,760 ‫Denken Sie also daran, wie wir den Wert einer Variablen 18 00:00:52,760 --> 00:00:53,983 ‫in ein Element einfügen. 19 00:00:55,200 --> 00:00:58,970 ‫Naja, wir benutzen gleich und dann in diesem Fall Tour. 20 00:00:58,970 --> 00:01:00,310 ‫Also, der Name 21 00:01:00,310 --> 00:01:03,370 ‫der Variablen in der aktuellen Schleifeniteration, richtig. 22 00:01:03,370 --> 00:01:08,270 ‫Das ist also ein Tourdokument und dann ein Punktname, denk dran. 23 00:01:08,270 --> 00:01:11,300 ‫Schauen wir uns das also ganz schnell im Kompass an. 24 00:01:11,300 --> 00:01:12,900 ‫Hier haben wir also 25 00:01:12,900 --> 00:01:14,283 ‫vier Touren und 26 00:01:14,283 --> 00:01:17,680 ‫das sind alle Daten, die wir jetzt brauchen werden, okay. 27 00:01:17,680 --> 00:01:21,080 ‫Und beginnend mit dem Namen hier, okay. 28 00:01:21,080 --> 00:01:23,930 ‫Wenn wir also jetzt unsere Seite neu laden, sollte sich 29 00:01:23,930 --> 00:01:25,203 ‫das hier eigentlich widerspiegeln. 30 00:01:26,670 --> 00:01:30,350 ‫Und hier beginnt die Magie und es hat funktioniert. 31 00:01:30,350 --> 00:01:32,740 ‫Dies ist das erste Mal, dass wir 32 00:01:32,740 --> 00:01:35,470 ‫wirklich sehen, dass die Daten aus der Datenbank tatsächlich 33 00:01:35,470 --> 00:01:37,240 ‫auf der Website gerendert werden. 34 00:01:37,240 --> 00:01:41,490 ‫Hier haben wir also den Tournamen für jede der 35 00:01:41,490 --> 00:01:46,170 ‫Touren und wieder der kommt jetzt direkt aus unserer Datenbank. 36 00:01:46,170 --> 00:01:49,270 ‫Also, fantastisch, das ist wirklich cool 37 00:01:49,270 --> 00:01:53,240 ‫und lasst uns diese Karte nun tatsächlich weiterbauen. 38 00:01:53,240 --> 00:01:55,460 ‫Also, hier über das Bild jetzt. 39 00:01:55,460 --> 00:01:59,600 ‫Fügen wir auch den alternativen Text zum Tournamen hinzu. 40 00:01:59,600 --> 00:02:02,530 ‫Jetzt können wir hier nicht einfach einen Tourpunktnamen eingeben, weil 41 00:02:03,490 --> 00:02:05,190 ‫wir uns in einem String befinden 42 00:02:05,190 --> 00:02:06,770 ‫und das funktioniert nicht. 43 00:02:06,770 --> 00:02:07,730 ‫Wenn 44 00:02:07,730 --> 00:02:09,570 ‫wir es jetzt so 45 00:02:09,570 --> 00:02:13,270 ‫machen, wird es auch nicht funktionieren, denn hier 46 00:02:13,270 --> 00:02:16,220 ‫erwartet dieses Alt tatsächlich einen String, okay. 47 00:02:16,220 --> 00:02:19,350 ‫Daher brauchen wir hier einige Anführungszeichen um diese Variable. 48 00:02:19,350 --> 00:02:21,230 ‫Der einfachste Weg, dies 49 00:02:21,230 --> 00:02:24,093 ‫zu tun, besteht darin, tatsächlich ES6-Vorlagenzeichenfolgen zu verwenden. 50 00:02:27,700 --> 00:02:30,840 ‫Also, nur so und immer wieder, 51 00:02:30,840 --> 00:02:34,620 ‫weil dies hier eigentlich erwartet, dass eine Saite 52 00:02:34,620 --> 00:02:38,320 ‫hereinkommt, und damit erstellen wir natürlich eine Saite. 53 00:02:38,320 --> 00:02:42,450 ‫Als nächstes legen wir dann das Bild hier fest, okay. 54 00:02:42,450 --> 00:02:45,720 ‫Werfen wir also noch einmal einen Blick auf 55 00:02:45,720 --> 00:02:49,827 ‫den Kompass, um zu sehen, wie das Titelbild in Ordnung aussieht. 56 00:02:49,827 --> 00:02:52,550 ‫Und so haben wir eine Eigenschaft namens image 57 00:02:52,550 --> 00:02:55,960 ‫cover und dann haben wir hier nur den Namen des Bildes selbst. 58 00:02:55,960 --> 00:02:57,760 ‫Also nicht der Pfad zum Bild. = 59 00:02:57,760 --> 00:03:01,200 ‫und damit wir tatsächlich manuell angeben müssen, okay. 60 00:03:01,200 --> 00:03:03,300 ‫Aber was hier zählt, ist, dass es 61 00:03:03,300 --> 00:03:04,603 ‫Image-Cover genannt wird. 62 00:03:05,700 --> 00:03:07,500 ‫Und lassen Sie uns das alles los. 63 00:03:08,740 --> 00:03:11,730 ‫Beginnen Sie damit, eine Vorlagenzeichenfolge zu 64 00:03:11,730 --> 00:03:16,170 ‫erstellen und dann das Dot-Image-Cover zu erkunden, und jetzt müssen 65 00:03:17,160 --> 00:03:18,480 ‫wir den 66 00:03:18,480 --> 00:03:21,700 ‫gesamten Pfad zu diesem Bild herausfinden, okay. 67 00:03:21,700 --> 00:03:24,480 ‫Und wie wir bereits wissen, befinden sich die 68 00:03:24,480 --> 00:03:26,430 ‫Bilddaten im öffentlichen Ordner. 69 00:03:26,430 --> 00:03:28,820 ‫Also der Ordner, aus dem alle 70 00:03:28,820 --> 00:03:30,400 ‫statischen Assets bereitgestellt 71 00:03:30,400 --> 00:03:32,790 ‫werden, und hier haben wir Bilder. 72 00:03:32,790 --> 00:03:34,130 ‫Und dann haben wir einen Ordner. 73 00:03:34,130 --> 00:03:37,833 ‫Eine für Touren und eine für Benutzer, okay. 74 00:03:39,197 --> 00:03:41,700 ‫Und so haben wir innerhalb jeder 75 00:03:41,700 --> 00:03:45,423 ‫dieser Touren dann die drei Bilder und ein Titelbild. 76 00:03:46,330 --> 00:03:49,120 ‫Das wird also ungefähr so aussehen. 77 00:03:49,120 --> 00:03:54,120 ‫Und so ist der Pfad hier Bildpunkt-Touren oder Schrägstrich-Touren und 78 00:03:56,230 --> 00:03:59,863 ‫dann den Namen des Bildes schräg, großartig. 79 00:04:00,750 --> 00:04:04,270 ‫Damit sollten ganze Websites 80 00:04:04,270 --> 00:04:08,560 ‫jetzt noch besser aussehen, ja. 81 00:04:08,560 --> 00:04:11,770 ‫Jetzt wird es richtig lebendig. 82 00:04:11,770 --> 00:04:13,730 ‫Das ist also fantastisch. 83 00:04:13,730 --> 00:04:15,460 ‫Das gibt mir jedes Mal ein 84 00:04:15,460 --> 00:04:16,993 ‫tolles Gefühl, wenn es funktioniert. 85 00:04:18,090 --> 00:04:21,260 ‫Wie auch immer, kümmern wir uns jetzt um den 86 00:04:21,260 --> 00:04:23,010 ‫Rest der Daten, die 87 00:04:23,010 --> 00:04:26,680 ‫natürlich auf all diesen Karten immer noch gleich aussehen, okay. 88 00:04:26,680 --> 00:04:29,550 ‫Lassen Sie uns nun die Daten in unserer Sammlung verwenden, 89 00:04:29,550 --> 00:04:31,600 ‫um diese Zeichenfolge hier zu erstellen. 90 00:04:31,600 --> 00:04:33,550 ‫Sie sehen also, dass dies tatsächlich eine 91 00:04:33,550 --> 00:04:35,010 ‫Kombination verschiedener Daten ist. 92 00:04:35,010 --> 00:04:38,630 ‫Wir haben also den Schwierigkeitsgrad und die Tourdauer und 93 00:04:38,630 --> 00:04:41,710 ‫lassen uns hier nun einen Vorlagenstring erstellen. 94 00:04:41,710 --> 00:04:46,093 ‫Weisen Sie diesem Element also grundsätzlich diese Vorlagenzeichenfolge zu. 95 00:04:48,100 --> 00:04:53,083 ‫Und so starten wir hier mit 96 00:04:54,410 --> 00:04:59,410 ‫Tourpunktschwierigkeit, merken, dann den Platz und dann 97 00:05:01,090 --> 00:05:05,763 ‫die Tourdauer, Tourpunktdauer Tagestour, okay. 98 00:05:10,400 --> 00:05:14,030 ‫Das ist die Übersetzung dieses Inhalts. 99 00:05:14,030 --> 00:05:18,413 ‫Als nächstes haben wir hier die Tourzusammenfassung, okay. 100 00:05:19,700 --> 00:05:24,700 ‫Also, gleiche Tour-Punkte-Zusammenfassung, in Ordnung. 101 00:05:26,520 --> 00:05:29,870 ‫Als nächstes haben wir dann den Startort und so startet 102 00:05:29,870 --> 00:05:31,720 ‫diese Tour zum Beispiel in 103 00:05:31,720 --> 00:05:34,470 ‫Banff Kanada und also schauen wir uns hier nochmal 104 00:05:34,470 --> 00:05:36,520 ‫den Kompass an, nur um zu 105 00:05:36,520 --> 00:05:38,520 ‫sehen, wie die Daten aussehen oder 106 00:05:38,520 --> 00:05:40,740 ‫eigentlich müssen wir nicht immer hin und 107 00:05:40,740 --> 00:05:42,520 ‫her schalten zu kompassieren. 108 00:05:42,520 --> 00:05:46,340 ‫Wir können hier auch einfach Daten öffnen oder importieren. 109 00:05:49,170 --> 00:05:52,850 ‫Auf den Touren können wir diese Daten also einfach hier 110 00:05:52,850 --> 00:05:55,980 ‫verwenden, anstatt immer den Kompass zu verwenden. 111 00:05:55,980 --> 00:05:57,810 ‫Bevor wir also die Zusammenfassung verwenden, 112 00:05:57,810 --> 00:06:00,400 ‫gehen wir weiter und verwenden den Startort, der 113 00:06:01,600 --> 00:06:03,040 ‫tatsächlich hier oben ist. 114 00:06:03,040 --> 00:06:07,083 ‫Also, jetzt wollen wir die Punktbeschreibung des Startorts, okay. 115 00:06:09,570 --> 00:06:14,570 ‫Also, Tourpunkt-Startpunkt-Punktbeschreibung. 116 00:06:17,630 --> 00:06:19,090 ‫Und jetzt beginnen Sie 117 00:06:19,090 --> 00:06:21,480 ‫zu verstehen, warum es sinnvoll war, all 118 00:06:21,480 --> 00:06:24,450 ‫diese verschiedenen Daten, die wir hier erstellt haben, zu erstellen. 119 00:06:24,450 --> 00:06:28,010 ‫Richtig, als nächstes werden wir die Verabredungen verwenden, also behalte 120 00:06:28,010 --> 00:06:29,520 ‫es im Hinterkopf. 121 00:06:29,520 --> 00:06:32,010 ‫Dass dies ein Array ist, okay. 122 00:06:32,010 --> 00:06:34,900 ‫Denn was wir jetzt in unserer Übersicht wollen, 123 00:06:34,900 --> 00:06:38,680 ‫ist im Grunde das Datum, an dem die nächste Tour beginnt. 124 00:06:38,680 --> 00:06:41,710 ‫Das ist in diesem Fall das Symbol mit 125 00:06:41,710 --> 00:06:42,923 ‫einem Kalender hier. 126 00:06:44,260 --> 00:06:46,470 ‫Das ist also 127 00:06:46,470 --> 00:06:50,710 ‫im Grunde das erste Element dieses Startdaten-Arrays. 128 00:06:50,710 --> 00:06:55,680 ‫Beginnen Sie also mit dem Startdatum an Position 0. 129 00:06:55,680 --> 00:06:59,960 ‫Als nächstes haben wir dieses Datenelement, das angibt, wie viele Stopps 130 00:06:59,960 --> 00:07:02,320 ‫es bei diesen Touren gibt. 131 00:07:02,320 --> 00:07:03,670 ‫Im Grunde 132 00:07:03,670 --> 00:07:06,000 ‫bedeutet das also, wie viele Standorte 133 00:07:06,000 --> 00:07:09,210 ‫wir haben und wir werden also wieder die 134 00:07:09,210 --> 00:07:11,120 ‫Standorte verwenden und dieses Mal 135 00:07:11,120 --> 00:07:13,770 ‫nicht die Start-Location, sondern wirklich diese Standorte, 136 00:07:13,770 --> 00:07:17,350 ‫also wenn Sie angeben möchten, wie viele Standorte wir haben. 137 00:07:17,350 --> 00:07:21,493 ‫Nun, dann müssen wir die Länge dieses Arrays zählen, okay. 138 00:07:22,910 --> 00:07:24,560 ‫Und so einfach auch. 139 00:07:24,560 --> 00:07:27,370 ‫Also, gleich und setzen Sie es 140 00:07:27,370 --> 00:07:29,830 ‫dann auf diese Vorlagenzeichenfolge, 141 00:07:31,840 --> 00:07:36,807 ‫da wir auch diesen Stopp hinzufügen möchten und so Punktpositionen Punktlängenstopps 142 00:07:42,850 --> 00:07:45,740 ‫und schließlich die Anzahl der Personen, 143 00:07:45,740 --> 00:07:49,070 ‫die zu jeder der Gruppen gehören, hinzufügen. 144 00:07:49,070 --> 00:07:52,990 ‫Denken Sie also daran, die Personen, die an einer 145 00:07:52,990 --> 00:07:55,110 ‫Tour teilnehmen können und 146 00:07:56,750 --> 00:08:00,053 ‫die bei Tour gespeichert ist, aber maximale Gruppengröße. 147 00:08:02,440 --> 00:08:03,953 ‫Und dann Leute. 148 00:08:05,950 --> 00:08:08,990 ‫Großartig, dieser Teil ist jetzt erledigt und 149 00:08:08,990 --> 00:08:12,550 ‫lasst uns tatsächlich auf unsere Website zurückkehren und 150 00:08:12,550 --> 00:08:13,743 ‫das testen. 151 00:08:15,270 --> 00:08:20,150 ‫Und ja schön, zumindest fast schön, denn dieses Date 152 00:08:20,150 --> 00:08:23,030 ‫sieht hier irgendwie komisch aus. 153 00:08:23,030 --> 00:08:28,030 ‫Also, wir wollen wirklich nur den einundzwanzigsten Juni, also müssen wir 154 00:08:28,500 --> 00:08:30,550 ‫hier in dieser Übersicht 155 00:08:30,550 --> 00:08:32,630 ‫nicht allzu spezifisch sein, okay. 156 00:08:32,630 --> 00:08:37,630 ‫Was wir also wollen, ist wieder der Juni 2021 und im Moment 157 00:08:38,200 --> 00:08:41,620 ‫ist das ganze Durcheinander und also lasst uns 158 00:08:41,620 --> 00:08:43,560 ‫das beheben und zum 159 00:08:43,560 --> 00:08:45,910 ‫Glück ist das mit JavaScript 160 00:08:45,910 --> 00:08:48,640 ‫sehr einfach, das ein paar sehr nette 161 00:08:48,640 --> 00:08:51,640 ‫Funktionen enthält, um mit Datumsangaben zu arbeiten. 162 00:08:51,640 --> 00:08:55,100 ‫Und denken Sie daran, dass jedes dieser 163 00:08:55,100 --> 00:08:57,920 ‫Startdaten hier wirklich ein Datumsobjekt 164 00:08:57,920 --> 00:09:01,120 ‫in einer Datenbank ist und wir 165 00:09:01,120 --> 00:09:06,120 ‫jetzt eine Funktion wie diese für lokale Zeichenfolgen verwenden können, okay. 166 00:09:06,510 --> 00:09:09,260 ‫Im Grunde wird dieses Datum also in 167 00:09:09,260 --> 00:09:11,440 ‫einen gut lesbaren String umgewandelt 168 00:09:11,440 --> 00:09:15,580 ‫und hier können wir jetzt eine Option für die Sprache übergeben. 169 00:09:15,580 --> 00:09:18,080 ‫Das ist also Englisch für US und 170 00:09:19,570 --> 00:09:22,580 ‫dann auch ein Objekt mit einigen Optionen und so 171 00:09:22,580 --> 00:09:25,481 ‫können wir hier nun angeben, dass ein Monat 172 00:09:25,481 --> 00:09:27,093 ‫lang sein soll. 173 00:09:29,330 --> 00:09:31,870 ‫Also, anstatt nur eine Abkürzung, wie wir sie 174 00:09:31,870 --> 00:09:32,940 ‫hier hatten. 175 00:09:32,940 --> 00:09:34,910 ‫Also, an einem April, einem 176 00:09:34,910 --> 00:09:36,970 ‫August wird es jetzt so ausgedruckt. 177 00:09:36,970 --> 00:09:41,560 ‫Also wirklich der Name des gesamten Monats und okay und dann 178 00:09:41,560 --> 00:09:46,557 ‫auch noch sagen, dass das Jahr numerisch sein soll und wenn du 179 00:09:48,380 --> 00:09:50,757 ‫hier mehr über diese Funktion 180 00:09:50,757 --> 00:09:55,180 ‫erfahren willst dann geh einfach weiter und google das, okay. 181 00:09:55,180 --> 00:09:57,810 ‫Also, probieren wir das noch einmal 182 00:09:59,550 --> 00:10:02,930 ‫aus und jetzt sieht es wirklich schön aus, toll. 183 00:10:02,930 --> 00:10:06,980 ‫Lassen Sie uns also weitermachen und den letzten Teil hier mit 184 00:10:06,980 --> 00:10:09,723 ‫dem Preis und den Bewertungsdetails beenden. 185 00:10:11,640 --> 00:10:14,700 ‫Und das ist hier unten in der Fußzeile der Karte 186 00:10:14,700 --> 00:10:17,150 ‫und das ist hier nur der Preis. 187 00:10:17,150 --> 00:10:21,240 ‫Also, lassen wir es tatsächlich dort, denn jetzt brauchen 188 00:10:21,240 --> 00:10:23,810 ‫wir noch einen Vorlagenstring, weil der 189 00:10:23,810 --> 00:10:27,910 ‫Preis nicht nur diese Zahl ist, sondern wir brauchen 190 00:10:31,370 --> 00:10:34,120 ‫hier tatsächlich ein zusätzliches Dollarzeichen für 191 00:10:34,120 --> 00:10:35,250 ‫den Dollarpreis. 192 00:10:35,250 --> 00:10:36,433 ‫Also, dieser hier, richtig. 193 00:10:39,620 --> 00:10:42,410 ‫Als nächstes haben wir hier die durchschnittliche Bewertung. 194 00:10:42,410 --> 00:10:45,300 ‫Das ist es also, 195 00:10:45,300 --> 00:10:50,300 ‫und wir wissen bereits, dass dies Tour-Punkte-Durchschnittsbewertung genannt wird. 196 00:10:51,020 --> 00:10:54,560 ‫Also haben wir das so oft benutzt, glaube ich zumindest. 197 00:10:54,560 --> 00:10:59,240 ‫Bestätigen wir es einfach so, dass es sich tatsächlich um den Durchschnitt der Bewertungen und dann 198 00:10:59,240 --> 00:11:01,490 ‫auch um die Anzahl der Bewertungen handelt. 199 00:11:01,490 --> 00:11:03,488 ‫Also kopieren wir das einfach. 200 00:11:03,488 --> 00:11:05,890 ‫Also, Bewertungen durchschnittlich und 201 00:11:05,890 --> 00:11:10,073 ‫jetzt wollen wir hier die Anzahl der Bewertungen. 202 00:11:16,320 --> 00:11:19,270 ‫Alles klar, aber natürlich muss dies 203 00:11:23,390 --> 00:11:25,560 ‫ein Template-String sein 204 00:11:25,560 --> 00:11:30,450 ‫und dann hier gleich setzen und dann natürlich den Variablennamen 205 00:11:30,450 --> 00:11:33,490 ‫hier interpolieren und jetzt müssen wir endlich 206 00:11:33,490 --> 00:11:36,220 ‫die URL zur Detailseite bauen, okay. 207 00:11:36,220 --> 00:11:39,180 ‫Denken Sie also daran, wenn wir auf eine der Karten klicken. 208 00:11:39,180 --> 00:11:41,280 ‫Es führt uns dann zur 209 00:11:41,280 --> 00:11:44,550 ‫Detailseite und so müssen wir jetzt natürlich diesen Link 210 00:11:45,410 --> 00:11:48,800 ‫angeben, denn das hängt natürlich von jeder Tour ab. 211 00:11:48,800 --> 00:11:52,380 ‫Wir möchten also Links zu Slash-Touren verlinken und uns dann 212 00:11:52,380 --> 00:11:54,760 ‫daran erinnern, wie ich zuvor erwähnt 213 00:11:54,760 --> 00:11:57,530 ‫habe, dass wir zum Rendern dieser Seiten tatsächlich 214 00:11:57,530 --> 00:12:00,050 ‫Touren nach ihrem Slug und nicht nach 215 00:12:00,050 --> 00:12:01,870 ‫ihrer ID abfragen möchten. 216 00:12:01,870 --> 00:12:04,620 ‫Wie wir es in der API 217 00:12:04,620 --> 00:12:09,620 ‫gemacht haben, okay, denn dadurch sieht die URL eigentlich viel schöner aus, okay. 218 00:12:09,920 --> 00:12:11,973 ‫Und das verwenden wir jetzt hier. 219 00:12:13,430 --> 00:12:18,130 ‫Also Tour Dot Slug und so nur um euch zu 220 00:12:18,130 --> 00:12:20,200 ‫erklären warum wir diese 221 00:12:20,200 --> 00:12:23,110 ‫URL hier mit einem Schrägstrich beginnen. 222 00:12:23,110 --> 00:12:26,230 ‫Dies liegt daran, dass das Erstellen einer URL 223 00:12:26,230 --> 00:12:30,140 ‫wie dieser, die nur mit dem Schrägstrich beginnt, als relative URL 224 00:12:30,140 --> 00:12:31,620 ‫bezeichnet wird und 225 00:12:31,620 --> 00:12:35,020 ‫dies bewirkt, dass an diesem Teil der URL nach 226 00:12:35,020 --> 00:12:36,640 ‫dem Hostnamen hinzugefügt wird. 227 00:12:36,640 --> 00:12:41,540 ‫Also, dieser Host ist im Moment eins bis sieben Komma null null eins, 228 00:12:41,540 --> 00:12:44,170 ‫aber das muss hier nicht angegeben 229 00:12:44,170 --> 00:12:47,710 ‫werden, da beim Schreiben einer relativen URL wie dieser 230 00:12:47,710 --> 00:12:51,663 ‫dann das, was wir hier haben, zu diesem Hostnamen hinzufügt, okay. 231 00:12:53,135 --> 00:12:56,490 ‫Also, lass uns das nochmal neu laden und so 232 00:12:56,490 --> 00:12:58,930 ‫sind wir hier fast fertig, nicht 233 00:12:58,930 --> 00:13:00,250 ‫ganz fertig. 234 00:13:00,250 --> 00:13:01,750 ‫Hier sehen Sie also undefiniert 235 00:13:01,750 --> 00:13:03,820 ‫und daher haben wir dort wahrscheinlich etwas falsch gemacht. 236 00:13:03,820 --> 00:13:06,490 ‫Und Sie sehen auch, dass hier kein Platz 237 00:13:06,490 --> 00:13:08,650 ‫zwischen dem Preis und dem 238 00:13:08,650 --> 00:13:11,440 ‫pro Person ist und auch hier jetzt das gleiche. 239 00:13:11,440 --> 00:13:13,360 ‫Wenn Sie diese Schaltfläche hierher 240 00:13:13,360 --> 00:13:15,550 ‫bewegen, dann unten in der linken Ecke. 241 00:13:15,550 --> 00:13:18,400 ‫Hier unten sehen Sie also die URL, die wir 242 00:13:18,400 --> 00:13:19,780 ‫gerade erstellt haben. 243 00:13:19,780 --> 00:13:21,040 ‫Kann es tatsächlich 244 00:13:21,040 --> 00:13:23,010 ‫anklicken und es wird uns dann 245 00:13:23,010 --> 00:13:25,470 ‫dieser Fehler geben, weil wir diese Route natürlich 246 00:13:25,470 --> 00:13:27,390 ‫noch nicht definiert haben, aber 247 00:13:27,390 --> 00:13:30,660 ‫du siehst, dass es hier wirklich schön aussieht, mit den 248 00:13:30,660 --> 00:13:35,660 ‫Touren, die den Waldwanderer aufschlitzen, anstatt diesen hässlich aussehenden Ausweis da oben zu haben, okay . 249 00:13:35,950 --> 00:13:38,270 ‫Aber wie auch immer, lassen Sie uns jetzt dieses Undefinierte 250 00:13:38,270 --> 00:13:39,563 ‫in diesem fehlenden Raum reparieren. 251 00:13:40,610 --> 00:13:44,550 ‫Werfen wir also einen Blick auf diesen. 252 00:13:44,550 --> 00:13:49,270 ‫Nun, es sieht tatsächlich richtig aus, Bewertungen, Quantität, 253 00:13:50,290 --> 00:13:54,690 ‫aber natürlich fehlt uns dieser Tourpunkt, okay. 254 00:13:54,690 --> 00:13:57,770 ‫Das hast du wahrscheinlich schon gesehen. 255 00:13:57,770 --> 00:13:59,360 ‫Nun zu diesem fehlenden Platz. 256 00:13:59,360 --> 00:14:02,950 ‫Es gibt etwas Neues, das ich Ihnen über 257 00:14:02,950 --> 00:14:06,050 ‫Mops zeigen muss, nämlich diese sogenannte leere 258 00:14:07,090 --> 00:14:08,950 ‫Gasse oder eine Linie. 259 00:14:08,950 --> 00:14:11,080 ‫Wenn wir also einen 260 00:14:11,080 --> 00:14:13,220 ‫echten Abstand zwischen zwei Inline-Block-Elementen 261 00:14:13,220 --> 00:14:15,610 ‫benötigen, die diese Bänder sind, müssen 262 00:14:15,610 --> 00:14:17,210 ‫wir diesen Abstand 263 00:14:17,210 --> 00:14:20,840 ‫manuell mit dieser Pipeline hier wie folgt erstellen, okay. 264 00:14:20,840 --> 00:14:23,180 ‫Und das gleiche hier unten, 265 00:14:23,180 --> 00:14:25,260 ‫denn sonst werden, 266 00:14:25,260 --> 00:14:27,660 ‫wie wir gerade gesehen haben, 267 00:14:27,660 --> 00:14:31,120 ‫all diese Elemente dann einfach zusammengeklebt, in Ordnung. 268 00:14:31,120 --> 00:14:33,880 ‫Also, jetzt sollte das alles behoben sein 269 00:14:33,880 --> 00:14:37,260 ‫und dieser Platz ist immer noch nicht da und das 270 00:14:37,260 --> 00:14:40,070 ‫liegt tatsächlich daran, dass wir etwas vergessen haben. 271 00:14:40,070 --> 00:14:41,750 ‫Gehen wir 272 00:14:41,750 --> 00:14:44,080 ‫also zurück und wir müssen 273 00:14:44,080 --> 00:14:47,600 ‫diesen leeren Raum hier und hier manuell hinzufügen. 274 00:14:47,600 --> 00:14:50,290 ‫Diese leere Pipeline hier schafft also im Grunde 275 00:14:50,290 --> 00:14:53,390 ‫einen Raum für uns, in dem wir dann Inhalte 276 00:14:53,390 --> 00:14:55,020 ‫außerhalb eines Elements erstellen 277 00:14:55,020 --> 00:14:57,690 ‫können, und das ist im Grunde dieser Raum. 278 00:14:57,690 --> 00:14:59,930 ‫Also, dieser Raum hier, den wir gerade hier platziert haben. 279 00:14:59,930 --> 00:15:03,180 ‫Der Inhalt dieses leeren Raums befindet sich also 280 00:15:03,180 --> 00:15:05,830 ‫nicht in einem dieser beiden Elemente. 281 00:15:05,830 --> 00:15:08,690 ‫Um das zu können, brauchen 282 00:15:08,690 --> 00:15:10,880 ‫wir diese Pipeline. 283 00:15:10,880 --> 00:15:13,423 ‫Also, diese beiden Pipelines. 284 00:15:14,960 --> 00:15:17,020 ‫Also, versuchen Sie es noch 285 00:15:17,020 --> 00:15:18,870 ‫einmal und jetzt ist 286 00:15:18,870 --> 00:15:21,670 ‫der Raum, den wir gerade geschaffen haben, perfekt. 287 00:15:21,670 --> 00:15:25,010 ‫Und damit beenden wir eigentlich diesen Vortrag und 288 00:15:25,010 --> 00:15:28,140 ‫diese atemberaubend aussehende erste Website oder einen 289 00:15:28,140 --> 00:15:32,110 ‫Teil der Website, die wir gerade hier zusammen gebaut haben. 290 00:15:32,110 --> 00:15:35,651 ‫Also, ein Moment, um zu schätzen, wie cool das 291 00:15:35,651 --> 00:15:38,280 ‫wirklich ist und wie der 292 00:15:38,280 --> 00:15:42,340 ‫ganze Code, den wir zusammen geschrieben haben, tatsächlich funktioniert, okay. 293 00:15:42,340 --> 00:15:44,560 ‫Und danach gleich wieder 294 00:15:44,560 --> 00:15:47,693 ‫zurück, damit wir gemeinsam die Tourübersichtsseite aufbauen können.