20TD02U_ForAlle_Blooms_Side29_UI - itnett/FTD02H-N GitHub Wiki
+++markdown
Utvikling av et brukergrensesnitt (UI) innebærer å lage den visuelle delen av en applikasjon som brukere interagerer med. Dette inkluderer alt fra å designe skjemaer og knapper til å håndtere brukerinndata og navigasjon. Denne veiledningen viser deg hvordan du kan utvikle et enkelt brukergrensesnitt ved hjelp av HTML, CSS, JavaScript, og utviklingsverktøy som Visual Studio Code. Vi vil bygge en enkel nettside som viser en liste over elementer, med funksjonalitet for å legge til nye elementer og fjerne eksisterende.
- Visual Studio Code (VS Code): En populær, gratis kodeditor som støtter en rekke programmeringsspråk og utviklingsverktøy.
- Live Server Extension: En VS Code-utvidelse som gjør det mulig å starte en lokal utviklingsserver og se endringer i sanntid.
- HTML: Struktur for webinnhold.
- CSS: Stiler for utseendet på webinnhold.
- JavaScript: Funksjonalitet og interaktivitet.
Start med å opprette en ny mappe for prosjektet ditt, for eksempel "simple-ui". Inne i denne mappen, opprett tre filer: index.html, style.css, og script.js.
Dette er den grunnleggende HTML-filen som inneholder strukturen til brukergrensesnittet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enkel UI</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Min Elementliste</h1>
<input type="text" id="itemInput" placeholder="Legg til et nytt element">
<button id="addItemButton">Legg til</button>
<ul id="itemList">
<!-- Elementer vil bli lagt til her -->
</ul>
</div>
<script src="script.js"></script>
</body>
</html>Dette er CSS-filen som bestemmer utseendet på brukergrensesnittet.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
input[type="text"] {
width: 80%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style: none;
padding: 0;
}
ul li {
background: #eee;
margin: 5px 0;
padding: 10px;
border-radius: 4px;
display: flex;
justify-content: space-between;
}
ul li button {
background-color: #dc3545;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
ul li button:hover {
background-color: #c82333;
}Dette er JavaScript-filen som håndterer interaktiviteten i brukergrensesnittet.
// Hent elementer fra DOM
const addItemButton = document.getElementById('addItemButton');
const itemInput = document.getElementById('itemInput');
const itemList = document.getElementById('itemList');
// Legg til nytt element når knappen trykkes
addItemButton.addEventListener('click', function() {
const itemText = itemInput.value.trim();
if (itemText !== '') {
const li = document.createElement('li');
li.textContent = itemText;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Fjern';
deleteButton.addEventListener('click', function() {
itemList.removeChild(li);
});
li.appendChild(deleteButton);
itemList.appendChild(li);
itemInput.value = '';
}
});Hvis du ikke allerede har gjort det, installer "Live Server" utvidelsen i VS Code:
- Åpne VS Code.
- Gå til utvidelsesikonet (eller trykk
Ctrl+Shift+X). - Søk etter "Live Server" og installer utvidelsen.
- Åpne
index.htmli VS Code. - Høyreklikk hvor som helst i dokumentet og velg "Open with Live Server".
- Dette vil starte en lokal utviklingsserver og åpne siden din i nettleseren. Nå kan du se endringene du gjør i sanntid.
- Åpne nettsiden via Live Server.
- Skriv inn et nytt element i tekstfeltet og trykk på "Legg til" knappen. Du vil se at elementet legges til i listen under.
- Hver listeelement har en "Fjern"-knapp som lar deg slette elementet fra listen.
Dette enkle brukergrensesnittet viser grunnleggende interaktivitet, og hvordan HTML, CSS, og JavaScript samhandler for å skape en brukervennlig opplevelse. Denne grunnleggende kunnskapen kan bygges videre på for å lage mer komplekse og funksjonelle brukergrensesnitt.
Opprettet og optimalisert for Github Wiki. Følg med for flere dyptgående veiledninger om UI-utvikling, koding, og beste praksis for å bygge brukervennlige applikasjoner. +++