0
私は食品にレシピを入力できるフォームを作成しました。私は、あなたがタイトルを押して、あなたが保存したレシピ全体を得ることができるように、リストの中の食品レシピのタイトルを右に保存したい。どのように進むべきかについての良い考えを持っている人ですか？フォームからの入力をリストに保存します。
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Din digitala receptbok</title>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
</head>
<body>
<main>
<div class="slideDown">
<header>
<h1>Din digitala receptbok</h1>
</header>
</div>
<div class="container">
<form id="matInput">
<div>
<label for="titel">Titel:</label>
<input type="text" name="titel" id="titel">
</div>
<div>
<label for="portioner">Antal portioner:</label>
<input type="text" name="portioner" id="portioner">
</div>
<div>
<label for="ingred">Fyll i ingredienserna här:</label>
<textarea name="ingred" rows="5" cols="40" id="ingred"></textarea>
</div>
<div>
<label for="metod">Tillagningsmetod:</label>
<textarea name="metod" rows="5" cols="40" id="metod"> </textarea>
</div>
<div id="theSubmit">
<input id="spara" type="submit" value="Spara recept">
</div>
</form>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: calc(100%-20px);
}
body {
margin: 0;
padding: 0;
background-image: url(../bilder/Optimized-food-salad-restaurant-person.jpg);
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
header {
background-color: #efe5e5;
width: 50vw;
min-width: 391px;
height: 84px;
border-radius: 64px;
margin: auto;
}
header h1 {
text-align: center;
margin: 0;
font-size: 40px;
line-height: 2;
}
nav {
display: flex;
flex-direction: row;
}
.nav {
height: 50px;
width: 100vw;
flex-grow: 1;
}
button {
border-radius: 10px;
margin-top: 5px;
margin-right: 4px;
background-color: black;
color: white;
font-size: 20px;
box-shadow: 6px 6px 10px #1b1b4c;
outline: none;
}
.slideDown {
display: none;
margin-top: 20px;
}
a {
color: white;
text-decoration: none;
}
label {
float: left;
width: 232px;
text-align: right;
padding-right: 12px;
margin-top: 12px;
clear: left;
color: white;
font-size: 1.4em;
}
input, textarea {
margin-top: 12px;
}
#theSubmit {
margin-left: 232px;
}
.container {
display: flex;
}
JS
$(document).ready(function(){
$("button").mouseenter(function(){
$(this).fadeTo("fast", 0.4);})
$("button").mouseleave(function(){
$(this).fadeTo("fast", 1);})
$(".slideDown").slideDown("slow");
})
あなたは現在どのような問題に直面していますか？ – ScanQR