Javascript-I/index.html at main · Stackjaeger/Javascript-I · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Presupuesto</title>
    <link rel="stylesheet" href="./css/estilos.css"/>
  </head>
  <body onload="cargarApp()">
    <header class="cabecero">
      <article class="presupuesto">
        <div class="presupuesto_titulo">Presupuesto Disponible</div>
        <div class="presupuesto_valor" id="presupuesto"></div>
        <div class="presupuesto_ingreso limpiarEstilos">
          <div class="presupuesto_ingreso--texto">Ingresos</div>
          <div class="derecha">
            <div class="presupuesto_ingreso--valor" id="ingresos"></div>
            <div class="presupuesto_ingreso--porcentaje">
              <p>&nbsp</p>
            </div>
          </div>
        </div>
        <div class="presupuesto_egreso limpiarEstilos">
          <div class="presupuesto_egreso--texto">Egresos</div>
          <div class="derecha limpiarEstilos">
            <div class="presupuesto_egreso--valor" id="egresos"></div>
            <div class="presupuesto_egreso--porcentaje" id="porcentaje">
              45%
            </div>
          </div>
        </div>
      </article>
    </header>

    <form action="" id="form" onsubmit="return false">
      <div class="agregar">
        <div class="agregar_contenedor">
          <select name="tipo" id="tipo" class="agregar_tipo">
            <option value="ingreso" selected>+</option>
            <option value="egreso">-</option>
            <input
              type="text"
              class="agregar_descripcion"
              id="descripcion"
              placeholder="Agregar Descripción"
            />
            <input
              type="number"
              class="agregar_valor"
              placeholder="Valor"
              name="importe"
            />
            <button class="agregar_btn" onclick="agregarDato()">
              <ion-icon name="checkmark-circle-outline" aria-hidden="true"><ion-icon>
            </button>
          </select>
        </div>
      </div>
    </form>

    <div class="contenedor limpiarEstilos">
      <div class="ingreso">
        <h2 class="ingreso_titulo">Ingreso</h2>
        <div id="lista-ingresos">
          <!-- <div class="elemento limpiarEstilos">
            <div class="elemento_descripcion">Salario</div>
            <div class="derecha limpiarEstilos">
              <div class="elemento_valor">+2,200.00</div>
              <div class="elemento_eliminar">
                <button class="elemento_eliminar_btn">
                  <ion-icon name="close-circle-outline"></ion-icon>
                </button>
              </div>
            </div>
          </div> -->
          <!-- <div class="elemento limpiarEstilos">
            <div class="elemento_descripcion">Venta Coche</div>
            <div class="derecha limpiarEstilos">
              <div class="elemento_valor">+1,500.00</div>
              <div class="elemento_eliminar">
                <button class="elemento_eliminar_btn">
                  <ion-icon name="close-circle-outline"></ion-icon>
                </button>
              </div>
            </div>
          </div> -->
        </div>
      </div>
      <div class="egreso">
        <h2 class="egreso_titulo">Egresos</h2>
        <div id="lista-egresos">
          <!-- <div class="elemento limpiarEstilos">
            <div class="elemento_descripcion">Renta Departamento</div>
            <div class="derecha limpiarEstilos">
              <div class="elemento_valor">-900.00</div>
              <div class="elemento_porcentaje">21%</div>
              <div class="elemento_eliminar">
                <button class="elemento_eliminar_btn">
                  <ion-icon name="close-circle-outline" aria-hidden="true"></ion-icon>
                </button>
              </div>
            </div>
          </div> -->
          <!-- <div class="elemento limpiarEstilos">
            <div class="elemento_descripcion">Ropa</div>
            <div class="derecha limpiarEstilos">
              <div class="elemento_valor">-400.00</div>
              <div class="elemento_porcentaje">9%</div>
              <div class="elemento_eliminar">
                <button class="elemento_eliminar_btn">
                  <ion-icon name="close-circle-outline" aria-hidden="true"></ion-icon>
                </button>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>

    <script type="module" src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

    <script src="./js/Dato.js"></script>
    <script src="./js/Ingreso.js"></script>
    <script src="./js/Egreso.js"></script>
    <script src="./js/app.js"></script>

  </body>
</html>