- Joined
- Apr 22, 2023
- Messages
- 1
- Reaction score
- 0
Whats possibily causing this error to happen? also if you guys notice any incoherence in my code attempt, fell free to point out, so i can learn from my mistakes 
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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
<script src="script.js"></script>
<title>Document</title>
</head>
<body>
<h1>Cadastros de produtos</h1>
<div class="dias">
Escolha o dia da semana desejado:
<select id="dias semana">
<option value="dia1" selected>Segunda</option>
<option value="dia2">Terça</option>
<option value="dia3">Quarta</option>
<option value="dia4">Quinta</option>
<option value="dia5">Sexta</option>
<option value="dia6">Sábado</option>
<option value="dia7">Domingo</option>
</select>
</div>
<div class="item">
Escolha o item desejado:
<input type="text" placeholder="">
</div>
<div class="botao-centro">
<button onclick="item.inserir()">Inserir dados</button>
</div>
<div id="saida">
<table border="1" width="100%" height="5%">
<thead>
<th>Segunda</th>
<th>Terça</th>
<th>Quarta</th>
<th>Quinta</th>
<th>Sexta</th>
<th>Sábado</th>
<th>Domingo</th>
<th>Ações</th>
</thead>
<tbody id="">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td><img src="edit-icon.png"><img src="remove-icon.png"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
JavaScript:
class Item {
constructor() {
this.id = 1;
this.arrayItems = [];
}
inserir() {
let item = this.lerDados();
if(this.validaCampos(item)) {
this.adicionar(item);
}
console.log(item);
}
adicionar(item) {
this.arrayItems.push(item);
this.id++;
}
lerDados() {
let item = {}
item.id = this.id;
item.diasSemana = document.getElementById('dias semana').value;
item.nomeItem = document.getElementById('item').value;
return item;
}
validaCampos(item) {
let msg = '';
if(item.nomeItem == '') {
msg += 'informe o nome do produto';
}
if(msg != '') {
alert(msg);
return false
}
return true;
}
}
CSS(just because):
* {
margin: 0;
}
body{
font-family: 'Roboto', sans-serif;
background-color: grey ;
}
h1{
text-align: center;
margin-top: 2%;
margin-bottom: 1%;
}
select {
background: rgba(56, 63, 151, 0.637);
color: white;
}
button{
margin-top: 1%;
margin-bottom: 2%;
background-color: rgba(56, 63, 151, 0.637);
color:white;
text-align: center;
border: 0;
padding: 7px;
border-radius: 5px;
}
input{
outline: 0;
}
.dias{
margin-top: 2%;
margin-bottom: 2%;
text-align: center;
}
.item{
margin-top: 2%;
margin-bottom: 1%;
text-align: center;
}
.botao-centro{
text-align: center;
}
td{
text-align: center;
}
td img{
width: 20px;
margin-right: 5%;
}
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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
<script src="script.js"></script>
<title>Document</title>
</head>
<body>
<h1>Cadastros de produtos</h1>
<div class="dias">
Escolha o dia da semana desejado:
<select id="dias semana">
<option value="dia1" selected>Segunda</option>
<option value="dia2">Terça</option>
<option value="dia3">Quarta</option>
<option value="dia4">Quinta</option>
<option value="dia5">Sexta</option>
<option value="dia6">Sábado</option>
<option value="dia7">Domingo</option>
</select>
</div>
<div class="item">
Escolha o item desejado:
<input type="text" placeholder="">
</div>
<div class="botao-centro">
<button onclick="item.inserir()">Inserir dados</button>
</div>
<div id="saida">
<table border="1" width="100%" height="5%">
<thead>
<th>Segunda</th>
<th>Terça</th>
<th>Quarta</th>
<th>Quinta</th>
<th>Sexta</th>
<th>Sábado</th>
<th>Domingo</th>
<th>Ações</th>
</thead>
<tbody id="">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td><img src="edit-icon.png"><img src="remove-icon.png"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
JavaScript:
class Item {
constructor() {
this.id = 1;
this.arrayItems = [];
}
inserir() {
let item = this.lerDados();
if(this.validaCampos(item)) {
this.adicionar(item);
}
console.log(item);
}
adicionar(item) {
this.arrayItems.push(item);
this.id++;
}
lerDados() {
let item = {}
item.id = this.id;
item.diasSemana = document.getElementById('dias semana').value;
item.nomeItem = document.getElementById('item').value;
return item;
}
validaCampos(item) {
let msg = '';
if(item.nomeItem == '') {
msg += 'informe o nome do produto';
}
if(msg != '') {
alert(msg);
return false
}
return true;
}
}
CSS(just because):
* {
margin: 0;
}
body{
font-family: 'Roboto', sans-serif;
background-color: grey ;
}
h1{
text-align: center;
margin-top: 2%;
margin-bottom: 1%;
}
select {
background: rgba(56, 63, 151, 0.637);
color: white;
}
button{
margin-top: 1%;
margin-bottom: 2%;
background-color: rgba(56, 63, 151, 0.637);
color:white;
text-align: center;
border: 0;
padding: 7px;
border-radius: 5px;
}
input{
outline: 0;
}
.dias{
margin-top: 2%;
margin-bottom: 2%;
text-align: center;
}
.item{
margin-top: 2%;
margin-bottom: 1%;
text-align: center;
}
.botao-centro{
text-align: center;
}
td{
text-align: center;
}
td img{
width: 20px;
margin-right: 5%;
}