Web App apra registro de vehiculos
Formulario que toma informacion, la guarda y luego puede mostrarla.
¿Como lo he hecho?
Primero he creado la plantilla o maquetacion con html, donde he hecho referencia al documento “script.js” que contiene el codigo en JavaScript que guarda y muestra la informacion.
Dentro de mi codigo html, he colocado 2 botones, estos tiene el atributo “onclick” a cada uno de estos, le asigno un metodo, que tiene una funcion definida dentro de mi archivo _script.js. _
<buttonclass="primary-button"id="save"onclick="saveACar()">Guardar</button><buttonclass="primary-button"id="view_List"onclick="showMe()">Ver Lista</button>Estos botones crean una accion.
Script.js
Primero utilizo una funcion constructora, esta funcion se encarga de crear un objeto que contiene la informacion de marca, modelo y annio del vehiculo.
functionAuto(maker,model,year){
this.maker = maker;
this.model = model;
this.year = year;
}
Como se puede observar es limpia y toma informacion directa.
Luego,he utilizado un array, para ir guardando los objetos que sean creados usando esa funcion constructora llamada “auto”
letAutoSaved = [];
Manipulacion del DOM
Utilizando manipulacion basica del DOM, pude acceder a los inputs y obtener la informacion que el usuario digita, luego pasarla a una variable, y mas tarde poder crear el objeto usando la funcion constructora.
let maker;
let model;
let year;
let vehNew;
functionsaveACar(){
maker = document.getElementById("maker").value;
model = document.getElementById("model").value;
year = document.getElementById("year").value;
vehNew = new Auto(maker,model,year);
Como se puede observar uso el docment.getElementById(), a este metodo le puedo pasar como nombr,el id que haya colocado al tag del input que tiene esa informacion, cuando paso eso como argumento, puedo llamar a la propiedad “value” que es la que obtiene o tiene el valor en si.
Luego hago un push a mi array:
AutoSaved.push(vehNew);
alert("Car Was Added");
}
Alerto al usaurio que hemos podido agregar el vehiculo.
¿Como logro conseguir la informacion que fue guardada?
Para esto he creado otra funcion, llamada “showMe()” aqui simplemente tomo el array creado y su informacion, y luego llamando
a las propiedades de cada objeto que le fue agregado, pues muestro la informacion.
Agrego un saldo de linea al final de la variable “allvehicules” para que se muestre cada registro por linea.
A continuacion
function showMe(){
let allVehicule = "";while(AutoSaved.length > 0){
let currentObject = AutoSaved.shift();
allVehicule += currentObject.maker + "| " + currentObject.model + "| " + currentObject.year + "\n";
}
alert(allVehicule);
}
A continuacion todo el codigo css, html, y js
++
Aqui el codigo html completo:
++
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Vehiculo Registration - [Ricardo Collado]</title><linkrel="stylesheet"href="./style.css"></head><body><mainclass="container"><divclass="title-container"><h1>Car register</h1></div><divclass="data-container"><divclass="data-container--input"><label>Vehicule Maker:</label><inputclass="data-container--modifier"type="text"id="maker"></div><divclass="data-container--input"><label>Vehicule Model:</label><inputclass="data-container--modifier"type="text"id="model"></div><divclass="data-container--input"><label>Vehicule Year:</label><inputclass="data-container--modifier"type="text"id="year"></div><buttonclass="primary-button"id="save"onclick="saveACar()">Guardar</button><buttonclass="primary-button"id="view_List"onclick="showMe()">Ver Lista</button></div></main><scriptsrc="./script.js"></script></body></html>CSS
:root{
--verde-oscuro: #008000;
--naranja: #FFA500;
--azul-claro: #ADD8E6;
--gris-oscuro: #333333;
}
*{
padding:0;
margin:0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
body{
width:100%;
height: 100vh;
display:grid;
place-items: center;
background-color: var(--verde-oscuro);
}
.container{
width:360px;
min-width: 320px;
max-width: 420px;
padding:25px;
display: flex;
flex-direction:column;
border:none;
background-color: var(--naranja);
color: #ffffff;
border-radius: 8px;
box-shadow: 0px8px10pxrgba(0, 0, 0, 0.5);
}
.title-containerh1{
margin-bottom: 10px;
text-align: center;
font-size: 2.8rem;
font-weight: bold;
color:var(--gris-oscuro);
}
.data-container{
display:flex;
flex-direction: column;
gap:10px;
}
.data-container--input{
display:flex;
flex-direction: column;
}
.data-container.data-container--inputlabel{
font-size: 1.8rem;
line-height: 1.6rem;
font-weight: 400;
margin-bottom: 8px;
}
.primary-button{
width:100px;
height: 38px;
padding:8px;
border:none;
font-size: 1.8rem;
font-weight: bold;
border-radius: 8px;
background-color: #a2c037;
color:#ffff;
cursor: pointer;
box-shadow:08px10pxrgba(56,73,86,0.5) ;
}
.primary-button:hover{
background-color: #fff;
color: #a2c037;
cursor: pointer;
}
JavaScript
functionAuto(maker,model,year){
this.maker = maker;
this.model = model;
this.year = year;
}
let AutoSaved = [];
let maker;
let model;
let year;
let vehNew;
functionsaveACar(){
maker = document.getElementById("maker").value;
model = document.getElementById("model").value;
year = document.getElementById("year").value;
vehNew = new Auto(maker,model,year);
AutoSaved.push(vehNew);
alert("Car Was Added");
}
functionshowMe(){
let allVehicule = "";
while(AutoSaved.length > 0){
let currentObject = AutoSaved.shift();
allVehicule += currentObject.maker + "| " + currentObject.model + "| " + currentObject.year + "\n";
}
alert(allVehicule);
}
by Ricardo Collado Rothschild
Muy buen proyecto, me gusta cómo conectaste HTML con JavaScript para registrar datos. Justo hace poco necesitaba algo similar para llevar el control de los autos que vi en subastas y terminé encontrando esta página https://www.autobidmaster.com/es/locations/usa/new-jersey/ . Desde ahí compré un coche y aproveché para hacer una app básica como esta para llevar registro de gastos y mantenimientos. ¡Me viene de diez este ejemplo!