Website-mit-Custom-Carousel
Erste Website, die ich jemals gebaut habe (meine dritte und letzte Karriereveränderung). Ich startete bei HTML- und CSS -Vorlagen, die ich am Ende 90% von ihnen wiedergegeben habe.
Die Homepage ist einfach (ich habe eine Weile für meinen ersten Build gebraucht; sicherzustellen, dass das richtige Styling, die Position und das richtige Merkmal zeitaufwändig ist; großartige Lernerfahrung). Das Suchfeld ist nicht voll funktionsfähig. Es wirkt sich vorerst eher wie ein Dropdown.
Auf der Detailseite verfügt das dynamische Karussell, das ich gebaut habe. Die Anzahl der Karten im Karussell kann durch die Aktualisierung der TeamData geändert werden. Die Breite von IT ändert sich mit der Größe des Fensters und die linken/rechten Pfeile werden angezeigt, wenn das Karussell in die entsprechende Richtung gleiten kann.
So kommen Sie zur Webseite mit Custom Carousel:
- Gehen Sie direkt zum detial.html oder von index.html ...
- Geben Sie "ux d" in das Suchfeld ein
- Klicken Sie in der Dropdown -Liste auf "UX Designer"
- Mein individuelles Karussell befindet sich direkt unter dem Kopfball
NÄCHSTE SCHRITTE:
- Separate Karussellabschnitt von Main.js und erstellen Sie ein Carousel.js. (Erledigt)
- Vollständige anfängliche Karriere -Pfadkarte (fertig)
- Werden Sie wiederholte Titel in der Suchliste (Fertig) von wiederholten Titeln los
- Fügen Sie "x" in das Suchfeld (fertig) hinzu
- Begrenzen Sie das Ergebnis der Suchliste auf den Boden des Fensters und fügen Sie die Bildlaufleiste hinzu (fertig).
- Verfeinern Sie die Karrierewegkarte, so dass der linke Seitenpunkt angezeigt wird (fertig; umstrukturiert, um 3 Spalten anstelle von 2 zu verwenden)
- Word die Titel in der Pfadkarte einwickeln (niedrig)
- Finden Sie heraus, wie SVG funktioniert, und ändern Sie seine Farbe als Schwarz (fertig).
- BRUNKTIEREN SIE HTML, DIE ALLE "LI" -TAGs sind JS anstelle von Hardcode (fertig).
- Datenliste in einer separaten Datei; Quellsuchliste aus der SMAE -Quelle anstatt eine andere Liste zu erstellen (erledigt)
- Besuchen Sie den Suchkästchen Code und CSS, damit es eher eine Komponente sein kann (in Bearbeitung 70%)
- Konvertieren Sie alle in React.js in Komponentieren
Danke fürs Besuch.
Technologie:
Einfaches JavaScript, HTML, CSS
