-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathappGastos.html
116 lines (115 loc) · 7.5 KB
/
appGastos.html
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
<!DOCTYPE html>
<html lang="es">
<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" />
<title>App Gastos</title>
<!-- BOOTSTRAP -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<!-- CSS -->
<link rel="stylesheet" href="appGastos.css" />
</head>
<body>
<!-- FONDO -->
<div class="wave0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#eed2d1" fill-opacity="1" d="M0,256L9.6,213.3C19.2,171,38,85,58,53.3C76.8,21,96,43,115,85.3C134.4,128,154,192,173,186.7C192,181,211,107,230,106.7C249.6,107,269,181,288,192C307.2,203,326,149,346,122.7C364.8,96,384,96,403,112C422.4,128,442,160,461,165.3C480,171,499,149,518,144C537.6,139,557,149,576,181.3C595.2,213,614,267,634,266.7C652.8,267,672,213,691,213.3C710.4,213,730,267,749,277.3C768,288,787,256,806,229.3C825.6,203,845,181,864,186.7C883.2,192,902,224,922,224C940.8,224,960,192,979,170.7C998.4,149,1018,139,1037,144C1056,149,1075,171,1094,202.7C1113.6,235,1133,277,1152,261.3C1171.2,245,1190,171,1210,133.3C1228.8,96,1248,96,1267,85.3C1286.4,75,1306,53,1325,74.7C1344,96,1363,160,1382,176C1401.6,192,1421,160,1430,144L1440,128L1440,0L1430.4,0C1420.8,0,1402,0,1382,0C1363.2,0,1344,0,1325,0C1305.6,0,1286,0,1267,0C1248,0,1229,0,1210,0C1190.4,0,1171,0,1152,0C1132.8,0,1114,0,1094,0C1075.2,0,1056,0,1037,0C1017.6,0,998,0,979,0C960,0,941,0,922,0C902.4,0,883,0,864,0C844.8,0,826,0,806,0C787.2,0,768,0,749,0C729.6,0,710,0,691,0C672,0,653,0,634,0C614.4,0,595,0,576,0C556.8,0,538,0,518,0C499.2,0,480,0,461,0C441.6,0,422,0,403,0C384,0,365,0,346,0C326.4,0,307,0,288,0C268.8,0,250,0,230,0C211.2,0,192,0,173,0C153.6,0,134,0,115,0C96,0,77,0,58,0C38.4,0,19,0,10,0L0,0Z"></path>
</svg>
</div>
<div class="wave1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
fill="#a1e5c6"
fill-opacity="1"
d="M0,288L16,240C32,192,64,96,96,80C128,64,160,128,192,149.3C224,171,256,149,288,122.7C320,96,352,64,384,42.7C416,21,448,11,480,26.7C512,43,544,85,576,90.7C608,96,640,64,672,64C704,64,736,96,768,90.7C800,85,832,43,864,48C896,53,928,107,960,117.3C992,128,1024,96,1056,85.3C1088,75,1120,85,1152,90.7C1184,96,1216,96,1248,96C1280,96,1312,96,1344,106.7C1376,117,1408,139,1424,149.3L1440,160L1440,320L1424,320C1408,320,1376,320,1344,320C1312,320,1280,320,1248,320C1216,320,1184,320,1152,320C1120,320,1088,320,1056,320C1024,320,992,320,960,320C928,320,896,320,864,320C832,320,800,320,768,320C736,320,704,320,672,320C640,320,608,320,576,320C544,320,512,320,480,320C448,320,416,320,384,320C352,320,320,320,288,320C256,320,224,320,192,320C160,320,128,320,96,320C64,320,32,320,16,320L0,320Z"
></path>
</svg>
</div>
<div class="wave2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
fill="#A4A5"
fill-opacity="1"
d="M0,128L18.5,154.7C36.9,181,74,235,111,240C147.7,245,185,203,222,202.7C258.5,203,295,245,332,234.7C369.2,224,406,160,443,112C480,64,517,32,554,48C590.8,64,628,128,665,170.7C701.5,213,738,235,775,224C812.3,213,849,171,886,154.7C923.1,139,960,149,997,154.7C1033.8,160,1071,160,1108,154.7C1144.6,149,1182,139,1218,149.3C1255.4,160,1292,192,1329,192C1366.2,192,1403,160,1422,144L1440,128L1440,320L1421.5,320C1403.1,320,1366,320,1329,320C1292.3,320,1255,320,1218,320C1181.5,320,1145,320,1108,320C1070.8,320,1034,320,997,320C960,320,923,320,886,320C849.2,320,812,320,775,320C738.5,320,702,320,665,320C627.7,320,591,320,554,320C516.9,320,480,320,443,320C406.2,320,369,320,332,320C295.4,320,258,320,222,320C184.6,320,148,320,111,320C73.8,320,37,320,18,320L0,320Z"
></path>
</svg>
</div>
<div class="wave3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
fill="#AAEE88"
fill-opacity="1"
d="M0,256L9.6,213.3C19.2,171,38,85,58,53.3C76.8,21,96,43,115,85.3C134.4,128,154,192,173,186.7C192,181,211,107,230,106.7C249.6,107,269,181,288,192C307.2,203,326,149,346,122.7C364.8,96,384,96,403,112C422.4,128,442,160,461,165.3C480,171,499,149,518,144C537.6,139,557,149,576,181.3C595.2,213,614,267,634,266.7C652.8,267,672,213,691,213.3C710.4,213,730,267,749,277.3C768,288,787,256,806,229.3C825.6,203,845,181,864,186.7C883.2,192,902,224,922,224C940.8,224,960,192,979,170.7C998.4,149,1018,139,1037,144C1056,149,1075,171,1094,202.7C1113.6,235,1133,277,1152,261.3C1171.2,245,1190,171,1210,133.3C1228.8,96,1248,96,1267,85.3C1286.4,75,1306,53,1325,74.7C1344,96,1363,160,1382,176C1401.6,192,1421,160,1430,144L1440,128L1440,320L1430.4,320C1420.8,320,1402,320,1382,320C1363.2,320,1344,320,1325,320C1305.6,320,1286,320,1267,320C1248,320,1229,320,1210,320C1190.4,320,1171,320,1152,320C1132.8,320,1114,320,1094,320C1075.2,320,1056,320,1037,320C1017.6,320,998,320,979,320C960,320,941,320,922,320C902.4,320,883,320,864,320C844.8,320,826,320,806,320C787.2,320,768,320,749,320C729.6,320,710,320,691,320C672,320,653,320,634,320C614.4,320,595,320,576,320C556.8,320,538,320,518,320C499.2,320,480,320,461,320C441.6,320,422,320,403,320C384,320,365,320,346,320C326.4,320,307,320,288,320C268.8,320,250,320,230,320C211.2,320,192,320,173,320C153.6,320,134,320,115,320C96,320,77,320,58,320C38.4,320,19,320,10,320L0,320Z"
></path>
</svg>
</div>
<!-- CUERPO -->
<div class="container-fluid p-S text-center">
<h1 class="p-1">Expension</h1>
<p class="border-bottom pb-2">
Ahora dividir los gastos es mucho más fácil y sencillo. Ingresá cuánto
gastó cada uno y la app hace la cuenta de cuánto tienen que pagar.
</p>
</div>
<div class="container-fluid">
<form>
<div class="row">
<div class="col-auto m-1">
<input
id="nombre"
type="text"
class="form-control"
placeholder="Nombre"
/>
</div>
<div class="col-auto m-1">
<input
id="pago"
type="number"
class="form-control"
placeholder="¿Cuánto gastó?"
/>
</div>
<div class="col-auto m-1">
<div>
<button
type="button"
class="btn btn-outline-dark"
onclick="repartirGastos()"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-arrow-right"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"
/>
</svg>
</button>
</div>
</div>
</div>
</form>
<ul id="list-group" class="list-group"></ul>
<div id="total" type="text"></div>
</div>
<!-- JAVASCRIPT -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
<script src="appGastos.js"></script>
</body>
</html>