<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pedidos</title>
<link rel="stylesheet" href="main.css">
</head>
<body style="background-color: orange">
<div class="container">
<h1>Faça seu pedido</h1>
<form action="">
<div class="content">
<label for="">Nome: </label>
<input id="nome" type="text">
</div>
<div class="content">
<label for="">Fone: </label>
<textarea name="textarea" cols="40" rows="5"></textarea>
</div>
<div class="content">
<label for="">Endereço: </label>
<input id="endereco" type="text">
</div>
<div class="sanduiche">
<label for="">Pedido</label>
<select name="" id="pedido">
<option value="n001">Pedido Doidao 001</option>
<option value="n002">Pedido Doidao 002</option>
<option value="n003">Pedido Doidao 003</option>
<option value="n004">Pedido Doidao 004</option>
</select>
<label for="">Pão</label>
<select name="" id="pao">
<option value="pao1">Pão 1</option>
<option value="pao2">Pão 2</option>
<option value="pao3">Pão 3</option>
<option value="pao4">Pão 4</option>
</select>
<label for="">Quantidade</label>
<input id="qtd" type="number">
<button onclick="adicionar()">Adicionar</button>
</div>
</form>
<div class="adicionados" id="tabela">
<div class="rowtabela">
<div class="item">
<b>Quantidade</b>
</div>
<div class="item">
<b>Sanduíche</b>
</div>
<div class="item">
</div>
</div>
<div class="rowtabela" id="1">
<div class="item">
20
</div>
<div class="item">
Sanduíche Brabissimo
</div>
<div class="botao">
<button onclick="remover()">X</button>
</div>
</div>
</div>
<button class="enviar">Enviar</button>
</div>
<script>
function adicionar(){
var tabela = getElementById('tabela');
var row = document.createElement("div");
row.classList.add('rowtabela');
var qtddiv = document.createElement("div");
qtddiv.classList.add('item');
qtd = document.getElementById("qtd").textContent;
qtdtxt = document.createTextNode(qtd);
qtdiv.appendChild(qtdtxt);
row.appendChild(qtdiv);
var tpdiv = document.createElement("div");
tpdiv.classList.add('item');
tp = document.getElementById("pedido").textContent;
tptxt = document.createTextNode(tp);
tpdiv.appendChild(tptxt);
row.appendChild(tpdiv);
tabela.appendChild(row);
}
function remover(){
alert(this.nodeParent)
document.getElementById(this.nodeParent).remove()
}
</script>
</body>
</html>
CSS:
body{
background: orange;
}
*{
margin: 0;
padding: 0;
color: black;
}
h1{
margin-bottom: 20px;
text-align: center;
}
button{
padding:4px;
}
.container{
width: 70%;
margin-right: auto;
margin-left: auto;
}
.content{
margin-bottom: 10px;
display: flex;
}
.sanduiche{
margin-bottom: 10px;
display: flex;
}
.content > input{
width: 100%;
height: 25px;
border: solid 1px;
background: white;
color: black;
border: 0px;
border-radius: 2px;
margin-left: 10px;
}
.content > textarea{
width: 100%;
border: solid 1px;
background: white;
color: black;
border: 0px;
border-radius: 2px;
margin-left: 10px;
}
#fone{
height: 70px;
}
.sanduiche > label{
margin-right: 15px;
}
.sanduiche > select{
width: 30%;
height: 25px;
margin-right: 15px;
}
.sanduiche > input{
width: 30%;
height: 25px;
border: solid 1px;
background: white;
color: black;
border: 0px;
border-radius: 2px;
}
#qtd{
margin-right: 10px;
}
.adicionados{
border: solid 2px white;
}
.rowtabela{
display: flex;
}
.item{
margin-right: 15%;
margin-left: 15%;
}
.enviar{
width: 100%;
margin-top: 5px;
}