Eu tenho um código javascript e não seu como usar em junto com código html css ?
class data {
constructor() {
let $ = document.querySelector.bind(document);
this._inputData = $('#data');
}
adiciona(event){
event.preventDefault();
let data = new data(...this._inputData.value.split('-')
.map((item, indece)=>
item - inice % 2)
);
console.log(data);
}
}
Oii, Jorge!
Vamos resolver isso. Quando você quiser usar JavaScript com HTML e CSS, precisa integrar esses arquivos da seguinte forma: o HTML é o corpo da página, o CSS cuida da aparência e o JS adiciona o comportamento.
Dá uma olhadinha nesse exemplo:
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Exemplo com Data</title>
</head>
<body>
<h2>Informe uma data:</h2>
<form id="form">
<input type="date" id="data" />
<button type="submit">Enviar</button>
</form>
</body>
</html>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
input,
button {
padding: 8px;
margin: 5px 0;
}
class DataForm {
constructor() {
let $ = document.querySelector.bind(document);
this._inputData = $("#data");
this._form = $("#form");
this._form.addEventListener("submit", this.adiciona.bind(this));
}
adiciona(event) {
event.preventDefault();
const partes = this._inputData.value.split("-");
const data = {
ano: partes[0],
mes: partes[1],
dia: partes[2]
};
console.log(data);
}
}
new DataForm();
Esse código cria um formulário com um campo de data. Quando você clica no botão, ele pega o valor digitado, separa em partes (ano, mês, dia) e exibe no console como um objeto.
Se quiser testar, fiz aqui no CodePen e você pode verificar como ficou.
Espero ter ajudado.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!