website with custom carousel

site Web-with-custom carrousel

Premier site Web que j'ai jamais construit (mon troisième et dernier changement de carrière). J'ai commencé à partir de modèles HTML et CSS que j'ai fini par en relancer 90%.

La page d'accueil est simple (m'a pris un certain temps pour ma première construction; assurer le bon style, la position et la bonne fonctionnalité prennent du temps; une excellente expérience d'apprentissage). La zone de recherche ne fonctionne pas entièrement. Il agit plus comme une liste déroulante pour l'instant.

La page de détail a le carrousel dynamique que j'ai construit. Le nombre de cartes dans le carrousel peut être modifié par la mise à jour de TeamData. La largeur de celui-ci changera avec la taille de la fenêtre et les flèches gauche / droite apparaîtront lorsque le carrousel peut glisser dans la direction correspondante.

Comment accéder à la page Web avec un carrousel personnalisé:

1. Accédez directement à DTIAL.html ou à partir d'index.html ...
2. Tapez "UX D" dans la zone de recherche
3. Cliquez sur "UX Designer" dans la liste déroulante
4. Mon carrousel personnalisé est juste en dessous de l'en-tête

Étapes suivantes:

• Section de carrousel séparée de Main.js et créez un carrousel.js. (fait)
• Carte complète du cheminement de carrière (terminé)
• Débarrassez-vous des titres répétés dans la liste de recherche (fait)
• Ajouter "x" dans la zone de recherche (fait)
• Limiter le résultat de la liste de recherche au bas de la fenêtre et ajouter une barre de défilement (terminée)
• Affiner la carte du cheminement de carrière donc le point gauche apparaît (fait; restructuré pour utiliser 3 colonnes au lieu de 2)
• Word enveloppe les titres de la carte du chemin (bas)
• Déterminez le fonctionnement de SVG et changent sa couleur autre que le noir (fait)
• Réfractez HTML pour que toutes les balises "Li" soient conduites à JS au lieu du code dur (fait)
• Liste de données dans un fichier séparé; Liste de recherche de source à partir de la source SMAE au lieu de créer une liste différente (faite)
• Revisitez le code de la boîte de recherche et CSS afin qu'il puisse être plus un composant (en cours 70%)
• convertir tous en react.js en composant

Merci de votre visite.

Technologie:

Plain JavaScript, HTML, CSS