Add files via upload

assets/css/style.css

@@ -0,0 +1,128 @@
+body {
+    font-family: Arial, sans-serif;
+
+    background: url('../img/codigo.svg'), linear-gradient(#1354A5 0%, #041832 33.33%, #041832 66.67%, #01080E 100%);
+
+
+    background-size: auto;
+    background-repeat: no-repeat;
+    /* Hace que la imagen cubra todo el área del elemento */
+    background-position: right;
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
+    color: white;
+}
+
+input[type="text"],
+input[type="number"] {
+    font-size: 1rem;
+    width: calc(100% - 20px);
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+button {
+    padding: 10px 40px;
+    width: fit-content;
+    background-color: #1875E8;
+    color: #fff;
+    font-size: 1.2rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #4cae4c;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+    margin-top: 20px;
+    max-height: fit-content;
+    overflow-y: auto;
+    width: 100%;
+}
+
+ul li {
+    padding: 10px;
+    background-color: #041832;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+}
+
+ul li:last-child {
+    border-bottom: none;
+}
+
+.main-container {
+    display: flex;
+    justify-content: center;
+    top: 110px;
+    left: 120px;
+    width: 1200px;
+    min-height: 80vh;
+    margin: 0px auto;
+    padding: 20px;
+    background: linear-gradient(0deg, rgba(20, 68, 128, 0.3), rgba(20, 68, 128, 0.3)),
+        linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
+
+    border-radius: 24px;
+    color: white;
+    box-shadow: 4px 4px 20px 0px #01080E26;
+    border: 1px solid #1875E8
+}
+
+.container {
+    display: flex;
+    gap: 45px;
+    width: 860px;
+    align-items: center;
+    flex-direction: column;
+    padding: 45px;
+    opacity: 0px;
+}
+
+.img-container {
+    display: flex;
+    justify-content: center;
+}
+
+.img-container img {
+    width: 50%;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    align-items: center;
+    gap: 20px;
+}
+
+.total {
+    margin-top: 20px;
+    font-size: 24px;
+    text-align: center;
+    color: #fff;
+
+}
+
+table {
+    width: 100%;  /* Ancho de la tabla */
+    border-collapse: collapse;  /* Elimina el espacio entre celdas */
+}
+
+td {
+    border: 5px solid #ccc;  /* Borde de las celdas */
+    padding: 8px;  /* Espaciado interno */
+    text-align: left;  /* Alineación del texto */
+    background-color: white;  /* Color de fondo de las celdas */
+    color: black;  /* Color del texto de las celdas */
+    font-size: 1rem;  /* Tamaño del texto de las celdas */
+}

assets/js/script.js

@@ -0,0 +1,115 @@
+let listaNombresGastos = [];  //DEFINE UN ARRAY INICIALIZADO EN VACIO (EN JS ARREGLO Y LISTA SON LO MISMO)
+let listaDescripcionesGastos = [];
+let listaValoresGastos = [];
+let indiceLista = -1;
+const elementoNombreGasto = document.getElementById('nombreGasto');
+const elementoDescripcionGasto = document.getElementById('descripcionGasto');
+const elementoValorGasto = document.getElementById('valorGasto');
+const elementobotonFormulario = document.getElementById('botonFormulario');
+
+function clickRegistrar() {
+    let nombreGasto = elementoNombreGasto.value;
+    if (validaInconsistencia(nombreGasto)) {
+        alert('Debe ingresar el Nombre del Gasto');
+        elementoNombreGasto.focus();
+        return;
+    }
+
+    let descripcionGasto = elementoDescripcionGasto.value;
+    if (validaInconsistencia(descripcionGasto)) {
+        alert('Debe ingresar la Descripción del Gasto');
+        elementoDescripcionGasto.focus();
+        return;
+    }
+
+    let valorGasto = elementoValorGasto.value;
+    if (validaInconsistencia(valorGasto)) {
+        alert('Debe ingresar el Valor del Gasto');
+        elementoValorGasto.focus();
+        return;
+    }  
+
+    if (valorGasto > 150) {
+        alert('¡Cuide su presupuesto!, ha registrado un gasto mayor a 150 Dólares');
+    }
+
+    if (indiceLista !== -1) {
+        listaNombresGastos[indiceLista] = nombreGasto;
+        listaDescripcionesGastos[indiceLista] = descripcionGasto;
+        listaValoresGastos[indiceLista] = valorGasto;
+        indiceLista = -1;
+        elementobotonFormulario.innerHTML = 'Agregar Gasto';
+    } else {
+        listaNombresGastos.push(nombreGasto);  //CON 'push' SE AGREGA UN ELEMENTO AL ARRAY
+        listaDescripcionesGastos.push(descripcionGasto);
+        listaValoresGastos.push(valorGasto);
+    }    
+    actualizarListaGastos();
+}
+
+function actualizarListaGastos() {
+    let htmlLista = '';
+    let totalGastos = 0;
+    const listaElementos = document.getElementById('listaDeGastos');
+    const htmltotalGastos = document.getElementById('totalGastos');
+
+    /* 'elemento' y 'posicion' PODEMOS PONERLE CUALQUIER OTRO NOMBRE QUE DEFINAMOS, PERO SIEMPRE EL PRIMERO HARÁ
+       REFERENCIA AL ELEMENTO DE ITERACION DE LA LISTA Y EL SEGUNDO A LA POSICION DE ESTE ELEMENTO */
+    listaNombresGastos.forEach((elemento, posicion) => {
+        //LO CONVIERTE DE 'String' a 'Number' (QUE CONSIDERA HASTA DECIMALES)
+        let listaGasto = Number(listaValoresGastos[posicion]);
+
+        let listaDescripcionGasto = listaDescripcionesGastos[posicion];
+
+        //htmlLista += "<li>" + elemento + "</li>";
+        //USANDO LISTA NO ORDENADA - TEMPLATE STRING SE USA PARA EVITAR EL CONCATENAR CON '+'       
+        /*htmlLista += `<li>${elemento} - ${listaDescripcionGasto} - USD ${listaGasto.toFixed(2)}
+                    <button onclick="eliminar(${posicion});">Eliminar</button>
+                    <button onclick="actualizar(${posicion});">Editar</button></li>`;*/
+
+        //USANDO TABLA - TEMPLATE STRING SE USA PARA EVITAR EL CONCATENAR CON '+'            
+        htmlLista += `<tr><td>${elemento}</td><td>${listaDescripcionGasto}</td><td>USD ${listaGasto.toFixed(2)}</td>
+                    <td><button onclick="eliminar(${posicion});">Eliminar</button></td>
+                    <td><button onclick="actualizar(${posicion});">Editar</button></td></tr>`;               
+        totalGastos += listaGasto;
+    });
+    listaElementos.innerHTML = htmlLista;  //'innerHTML' ASIGNA CONTENIDO A LA PAGINA HTML DE FORMA DINAMICA
+    htmltotalGastos.innerHTML = totalGastos.toFixed(2);  //'toFixed(2)' DEFINE SE TRABAJE SOLO CON 2 DECIMALES
+    limpiar();
+}
+
+function limpiar() {
+    elementoNombreGasto.value = '';
+    elementoDescripcionGasto.value = '';
+    elementoValorGasto.value = '';
+    elementoNombreGasto.focus();
+}
+
+function eliminar(posicion) {
+    listaNombresGastos.splice(posicion, 1);
+    listaValoresGastos.splice(posicion, 1);
+    actualizarListaGastos();
+}
+
+function actualizar(posicion) {
+    limpiar();
+    indiceLista = posicion;
+    elementoNombreGasto.value = listaNombresGastos[posicion];
+    elementoDescripcionGasto.value = listaDescripcionesGastos[posicion];
+    elementoValorGasto.value = listaValoresGastos[posicion];
+    elementobotonFormulario.innerHTML = 'Actualizar Gasto';
+}
+
+function validaInconsistencia(valor) {
+    if (typeof valor === 'String') {
+        if (valor === null || valor === undefined || valor.trim() === '') {
+            return true;
+        }
+    }    
+    else {
+        if (!valor || valor <= 0) {
+            return true;
+        }    
+    }
+    return false;       
+}

index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Control de Gastos Mensuales</title>
+    <link rel="stylesheet" href="assets/css/style.css">
+</head>
+
+<body>
+    <div class="main-container">
+        <div class="container">
+            <div class="img-container">
+                <img src="./assets/img/titulo.png" />
+            </div>
+            <div class="form-group">
+                <input type="text" id="nombreGasto" placeholder="Nombre del gasto">
+                <input type="text" id="descripcionGasto" placeholder="Descripción del gasto">
+                <input type="number" id="valorGasto" placeholder="Valor del gasto" min="0" step="0.01">
+                <button id="botonFormulario" onclick="clickRegistrar();">Agregar Gasto</button>
+            </div>
+            <!-- <ul id="listaDeGastos"></ul> *USANDO LISTA NO ORDENADA -->
+            <table id="listaDeGastos"></table>  <!-- USANDO TABLA -->
+            <div class="total">
+                Total Mensual: US$ <span id="totalGastos">0.00</span>
+            </div>
+        </div>
+    </div>
+    <script src="assets/js/script.js"></script>
+</body>
+
+</html>