Html, CSS und JS Liste?
Guten Tag,
Wir müssen eine Einkaufsliste mit HTML, CSS und JS machen. Es soll in einer Liste aufgezählt werden, wenn man auf Hinzufügen drückt. Man soll es links eingeben können und das was man dort schreibt wird dann aufgelistet. Sobald man Hinzufügen gedrückt hat soll das Feld auf der linken Seite wieder geleert werden.
<ul >
<li></li>
<li></li>
</ul>
Es wäre top, wenn mir jemand helfen könnte :)
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Einkaufsliste</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Einkaufsliste</h1>
<form>
<input type="text" class="text" placeholder="Produkt..." />
<button class="submit">Hinzufügen</button>
</form>
<ul class="liste">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
CSS:
* {
margin: 0;
}
h1 {
font-family: Poppins;
font-weight: 500;
text-align: center;
background-color: rgb(40, 36, 255);
color: white;
font-size: 50px;
}
.text {
width: 50%;
font-size: 20px;
font-family: Poppins;
outline: none;
height: 50px;
border-radius: 20px;
}
.submit {
background-color: rgb(40, 36, 255);
color: white;
border-style: none;
font-size: 30px;
font-family: Poppins;
transition: 1s;
}
.submit:hover {
background-color: rgb(18, 17, 99);
border-radius: 20px;
transition: 0.5s;
}
form {
text-align: center;
padding-top: 10%;
}
.liste {
padding-left: 10%;
}
1 Antwort
Dass was du umsetzen möchtest, ist im Grunde nichts weiter als eine To-do-Liste. In JavaScript musst du lediglich die Eingabe aus dem Input abfragen. Anschließend kannst du die Eingabe relativ einfach über appendChild() zu deiner Liste hinzufügen.