Øvelse – Opdater en JavaScript-portefølje med GitHub Copilot

Lad os undersøge, hvordan du kan bruge kodeforslag fra GitHub Copilot. I denne øvelse skal du tilføje animationer med dynamiske forslag og bruge en prompt til at tilpasse rullefunktionsmåden fra et allerede eksisterende JavaScript-skabelonlager. Med GitHub Copilot kan du hurtigt arbejde med en JavaScript-situation i det virkelige liv.

JavaScript-portefølje

Uanset om du er studerende, nyuddannet eller erfaren professionel, er din portefølje dit personlige rum til at fremvise dine færdigheder og erfaring.

At have en portefølje giver troværdighed og notoriety til den oplevelse, du nævner i dit CV, når du ansøger om job. Uanset om du er dataforsker, UX-designer eller frontendudvikler. En stærk online tilstedeværelse kan hjælpe dig med at få et job og blive opdaget!

Tilpas din JavaScript-portefølje

I denne skabelonoversigt har vi et React-baseret webprogram, der er klar til nemt at tilpasse og udrulle ved hjælp af din webbrowser.

Før du starter, kan du tilpasse porteføljen med dine egne links. Gå til src/App.jsx, og opdater siteProps med dine oplysninger. Variablen siteProps er et JavaScript-objekt, der indeholder nøgleværdipar, der bruges til at tilpasse webstedet. Det bør se sådan ud:

const siteProps = {
  name: "Alexandrie Grenier",
  title: "Web Designer & Content Creator",
  email: "alex@example.com",
  gitHub: "microsoft",
  instagram: "microsoft",
  linkedIn: "satyanadella",
  medium: "",
  twitter: "microsoft",
  youTube: "Code",
};

Animere ikoner for sociale medier med en prompt

En animation kan gøre afsnittet om sociale medier mere iøjnefaldende. Spørg Copilots hjælp til at animere ikonerne. Du kan bruge GitHub Copilot Chat til at spørge Copilot eller skrive følgende promptkommentar i filen src/styles.css:

/* add an amazing animation to the social icons */

Forslaget fra Copilot bør ligne følgende:

img.socialIcon:hover {
  animation: bounce 0.5s;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

Acceptér forslaget ved at trykke på tabulatortasten. Hvis du ikke modtager nøjagtigt det samme forslag, kan du enten eksperimentere med det angivne forslag eller fortsætte med at skrive CSS-koden, indtil den stemmer overens.

Dit websted skulle allerede køre i kodeområdet, og ændringen genindlæses automatisk på siden. Hvis du vil se dem, skal du holde markøren over et af dine ikoner for sociale medier i sidefoden for at se magien!

Tillykke, gennem øvelsen har du ikke kun brugt Copilot til at generere kode, men også gjort det på en interaktiv og sjov måde! Du kan bruge GitHub Copilot til ikke kun at generere kode, men også skrive dokumentation, teste dine programmer og meget mere.

Når du er færdig med øvelsen i GitHub, skal du vende tilbage hertil for at: