Skip to content

Commit c9dc1ac

Browse files
armincanoarmincano
committed
feat: add conditional prompts menu
1 parent b2c94d4 commit c9dc1ac

File tree

7 files changed

+330
-3
lines changed

7 files changed

+330
-3
lines changed

‎README.md

+7-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ Click to see the code in action 👉 [LIVE DEMO](https://armincano.github.io/ful
77
![HTML Badge](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
88
![CSS Badge](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
99
![Bootstrap Badge](https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white)
10+
![JavaScrip Badge](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E)
11+
![Git](https://img.shields.io/badge/GIT-E44C30?style=for-the-badge&logo=git&logoColor=white)
12+
![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)
13+
![VSCode](https://img.shields.io/badge/VSCode-0078D4?style=for-the-badge&logo=visual%20studio%20code&logoColor=white)
1014

1115
### HTML
1216

@@ -29,4 +33,6 @@ Click to see the code in action 👉 [LIVE DEMO](https://armincano.github.io/ful
2933

3034
### JavaScript
3135

32-
-[Compare numbers](./m2-front-end-101/s7-s8-javascript/browser-console/compare-numbers.html)
36+
- [Send doubts and navigate for a menu](./m2-front-end-101/s7-s8-javascript/browser-console/conditional-prompt/conditional-prompt.html)
37+
- [Calculate the total, VAT and discount](./m2-front-end-101/s7-s8-javascript/browser-console/calc-total-and-vat-and-discount/calc-total-and-vat-and-discount.html)
38+
- [Compare numbers](./m2-front-end-101/s7-s8-javascript/browser-console/compare-numbers.html)

‎m2-front-end-101/s7-s8-javascript/browser-console/calc-total-and-vat-and-discount/calc-total-and-vat-and-discount.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Browser console - Calculate the total, VAT and discount</title>
7+
</head>
8+
<body>
9+
10+
<script src="./script.js"></script>
11+
</body>
12+
</html>

‎m2-front-end-101/s7-s8-javascript/browser-console/calc-total-and-vat-and-discount/script.js

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/*
2+
1. Solicitar qué operación se desea realizar
3+
2. Solicitar la cantidad de artículos comprados
4+
3. Solicitar el precio de cada artículo
5+
4. Calcular el total sin IVA
6+
5. Calcular el total con IVA
7+
8+
- Calcular compra sin IVA
9+
6.1 Mostrar el total sin impuestos
10+
11+
- Calcular compra con IVA
12+
6.2 Mostrar el total con IVA incluido
13+
14+
- Calcular compra con descuento e IVA
15+
6.3.1 Solicitar el porcentaje de descuento a aplicar
16+
6.3.2 Mostrar el total con descuento y el total con IVA incluido */
17+
18+
const getUserPriceOrQuantityOrDiscountInput = (message) => {
19+
let userInput;
20+
do {
21+
userInput = prompt(message);
22+
if (userInput === null) {
23+
alert("Operación cancelada");
24+
return null;
25+
}
26+
} while (
27+
userInput.trim() == "" ||
28+
isNaN(parseInt(userInput)) ||
29+
parseInt(userInput) < 1
30+
);
31+
return parseInt(userInput);
32+
};
33+
34+
const getUserOperationInput = (message) => {
35+
let userInput;
36+
do {
37+
userInput = prompt(message);
38+
if (userInput === null) {
39+
alert("Operación cancelada");
40+
return null;
41+
}
42+
} while (
43+
userInput.trim() == "" ||
44+
isNaN(parseInt(userInput)) ||
45+
parseInt(userInput) < 1 ||
46+
parseInt(userInput) > 3
47+
);
48+
return parseInt(userInput);
49+
};
50+
51+
const calcIva = (total) => {
52+
return total * 0.19;
53+
};
54+
55+
const productCalc = () => {
56+
// ANCHOR 1. Get operation
57+
const operationNumber = getUserOperationInput(
58+
"Introduce el número de la operación que deseas realizar: \n 1. Calcular compra sin IVA \n 2. Calcular compra con IVA \n 3. Calcular compra con IVA menos descuento"
59+
);
60+
if (operationNumber === null) return;
61+
62+
// ANCHOR 2. Get product quantity and price
63+
const productQuantity = getUserPriceOrQuantityOrDiscountInput(
64+
"Introduce la cantidad de artículos comprados"
65+
);
66+
if (productQuantity === null) return;
67+
68+
// ANCHOR 3. Get single product price
69+
const productPrice = getUserPriceOrQuantityOrDiscountInput(
70+
"Introduce el precio individual de tus artículos"
71+
);
72+
if (productPrice === null) return;
73+
74+
// ANCHOR 4. Calculate total without IVA
75+
const total = productQuantity * productPrice;
76+
77+
// ANCHOR 5. Calculate total with IVA
78+
const totalWithIva = total + calcIva(total);
79+
80+
switch (operationNumber) {
81+
case 1:
82+
alert(`El total sin IVA es de ${total}`);
83+
break;
84+
85+
case 2:
86+
alert(`El total con IVA es de ${totalWithIva}`);
87+
break;
88+
89+
case 3:
90+
const discount = getUserPriceOrQuantityOrDiscountInput("Introduce el porcentaje de descuento a aplicar");
91+
let totalWithIvaMinusDiscount = totalWithIva - (totalWithIva * (discount / 100));
92+
alert(`El total con descuento e IVA es de ${totalWithIvaMinusDiscount}`);
93+
break;
94+
95+
default:
96+
alert("Operación no válida");
97+
break;
98+
}
99+
100+
};
101+
102+
productCalc();

‎m2-front-end-101/s7-s8-javascript/browser-console/compare-numbers.html renamed to ‎m2-front-end-101/s7-s8-javascript/browser-console/compare-number/compare-numbers.html

File renamed without changes.

‎m2-front-end-101/s7-s8-javascript/browser-console/script.js renamed to ‎m2-front-end-101/s7-s8-javascript/browser-console/compare-number/script.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ const getUserInput = (message) => {
22
let userInput;
33
do {
44
userInput = prompt(message);
5-
if (userInput === null) {
5+
if (userInput === null) { //When the cancel button is clicked, prompt() returns null.
66
alert("Operación cancelada");
77
return null;
88
}
9-
} while (isNaN(parseInt(userInput)) || userInput.trim() === ""); //lo parseado no es un número o está vacío
9+
} while (isNaN(parseInt(userInput)) || userInput.trim() === ""); //"" represents an empty string, which is a valid string value but contains no characters.
1010
return parseInt(userInput);
1111
};
1212

‎m2-front-end-101/s7-s8-javascript/browser-console/conditional-prompt/conditional-prompt.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=
8+
, initial-scale=1.0"
9+
/>
10+
<title>Browser console - Conditional prompts</title>
11+
</head>
12+
<body>
13+
<script src="./script.js"></script>
14+
</body>
15+
</html>

‎m2-front-end-101/s7-s8-javascript/browser-console/conditional-prompt/script.js

+192
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
/*
2+
1. welcome: Elegir opción - Validar número
3+
4+
2.1 receiptAndPayment/Boleta y pagos: Elegir opción + validar número
5+
2.1.1 Opción 1 - Mostrar mensaje
6+
2.1.2 Opción 2 - Mostrar mensaje
7+
8+
2.2 signalAndCallIssues/Señal y llamadas: Elegir opción + validar número
9+
2.2.1 Opción 1 - Escribir solicitud
10+
2.2.1.1 Mostrar solicitud
11+
2.2.2 Opción 2 - Escribir solicitud
12+
2.2.1.1 Mostrar solicitud
13+
14+
2.3 offers/Oferta comercial: Elegir opción + Validar Sí o No
15+
2.3.1 Sí - Mostrar mensaje
16+
2.3.2 No - Mostrar mensaje
17+
18+
2.4 miscDoubts/Otras consultas: Escribir solicitud
19+
2.4.1 Mostrar solicitud
20+
21+
2.5 Opción inválida: Mostrar mensaje */
22+
23+
//SECTION - Constants
24+
const DoHaveNewDoubt = "¿Tiene otra duda? Escriba 'Sí' o 'No'";
25+
26+
const invalidOptionMsg =
27+
"Opción inválida. Gracias por preferir nuestros servicios.";
28+
29+
const welcomeMsg =
30+
"¡Hola! Soy Eva, tu asistente virtual del Servicio al Cliente de Mentel. Estoy aquí para ayudarte en lo que necesides.\nEscribe el número de la opción que buscas: \n1.- Boletas y Pagos \n2.- Señal y llamadas \n3.- Oferta comercial \n4.- Otras consultas";
31+
32+
const receiptAndPayment1 =
33+
"Seleccione una opción\n1.- Ver Boleta\n2.- Pagar cuenta";
34+
const receiptAndPayment1i1 = "Haga clic aquí para descargar su boleta.";
35+
const receiptAndPayment1i2 =
36+
"Usted está siendo transferido. Espere por favor...";
37+
38+
const signalAndCallIssues2 =
39+
"Seleccione una opción\n1.- Problemas con la señal\n2.- Problemas con las llamadas";
40+
const signalAndCallIssues2a = "Problemas con la señal";
41+
const signalAndCallIssues2b = "Problemas con las llamadas";
42+
const signalAndCallIssues2i1 =
43+
"A continuación escriba detalles para su solicitud:";
44+
const signalAndCallIssues2i1i1Msg = (issue, details) =>
45+
`Estimado usuario, su solicitud: <${details}> relacionada con <${issue}>, ha sido ingresada con éxito.\nPronto será contactado por uno de nuestros ejecutivos.`;
46+
47+
const offers3 =
48+
"¡Mentel tiene una oferta comercial acorde a tus necesidades!\nPara conocer más información y ser asesorado personalmente por un ejecutivo escribe 'Sí' y un ejecutivo te llamará. De lo contrario ingrese 'NO'";
49+
const offers3i1 = "Un ejecutivo contactará con usted";
50+
const offers3i2 = "Gracias por preferir nuestros servicios";
51+
52+
const miscDoubts4 =
53+
"A continuación escriba detalles para su solicitud:";
54+
const miscDoubts4i1 = (details) => `Estimado usuario, su consulta: <${details}> ha sido ingresada con éxito. Pronto será contactado por uno de nuestros ejecutivos.`;
55+
56+
//!SECTION - Constants
57+
58+
//SECTION - Generic Functions
59+
60+
const writeNumberOption = (message) => {
61+
let userInput;
62+
do {
63+
userInput = prompt(message);
64+
if (userInput === null) return null;
65+
} while (
66+
isNaN(parseInt(userInput)) ||
67+
userInput.trim() === "" ||
68+
parseInt(userInput) < 1
69+
);
70+
return parseInt(userInput);
71+
};
72+
73+
const writeStringOption = (message) => {
74+
let userInput;
75+
do {
76+
userInput = prompt(message);
77+
if (userInput === null) return null;
78+
} while (userInput.trim() === "");
79+
return userInput;
80+
};
81+
//!SECTION - Generic Functions
82+
83+
//SECTION - L2 sections
84+
//SECTION - 1 - receiptAndPayment/Boleta y pagos
85+
const receiptAndPayment = () => {
86+
const userInput = writeNumberOption(receiptAndPayment1);
87+
if (userInput === null) return;
88+
89+
switch (userInput) {
90+
case 1:
91+
alert(receiptAndPayment1i1);
92+
break;
93+
case 2:
94+
alert(receiptAndPayment1i2);
95+
break;
96+
97+
default:
98+
alert(invalidOptionMsg);
99+
break;
100+
}
101+
};
102+
//!SECTION - 1 - receiptAndPayment/Boleta y pagos
103+
104+
//SECTION - 2 - signalAndCallIssues/Señal y llamadas
105+
const signalAndCallIssues = () => {
106+
let details;
107+
108+
const userInput = writeNumberOption(signalAndCallIssues2);
109+
if (userInput === null) return;
110+
111+
details = writeStringOption(signalAndCallIssues2i1);
112+
if (details === null) return;
113+
114+
switch (userInput) {
115+
case 1:
116+
alert(signalAndCallIssues2i1i1Msg(signalAndCallIssues2a, details));
117+
break;
118+
case 2:
119+
alert(signalAndCallIssues2i1i1Msg(signalAndCallIssues2b, details));
120+
break;
121+
default:
122+
alert(invalidOptionMsg);
123+
break;
124+
}
125+
};
126+
//!SECTION - 2 - signalAndCallIssues/Señal y llamadas
127+
128+
//SECTION - 3 - offers/Oferta comercial
129+
const offers = () => {
130+
let userInput = writeStringOption(offers3);
131+
if (userInput === null) return;
132+
133+
let normalizedUserInput = userInput.toLowerCase().trim().replace(/í/g, "i");
134+
switch (normalizedUserInput) {
135+
case "si":
136+
alert(offers3i1);
137+
break;
138+
case "no":
139+
alert(offers3i2);
140+
break;
141+
default:
142+
alert(invalidOptionMsg);
143+
break;
144+
}
145+
};
146+
//!SECTION - 3 - offers/Oferta comercial
147+
148+
//SECTION - 4 - miscDoubts/Otras consultas
149+
const miscDoubts = () => {
150+
let userInput = writeStringOption(miscDoubts4);
151+
if (userInput === null) return;
152+
153+
alert(miscDoubts4i1(userInput));
154+
};
155+
//!SECTION - 4 - miscDoubts/Otras consultas
156+
//!SECTION - L2 sections
157+
158+
//SECTION - L1 section: Main App
159+
const virtualBoxApp = () => {
160+
const userInput = writeNumberOption(welcomeMsg);
161+
if (userInput === null) return;
162+
163+
switch (userInput) {
164+
case 1:
165+
receiptAndPayment();
166+
break;
167+
168+
case 2:
169+
signalAndCallIssues();
170+
break;
171+
172+
case 3:
173+
offers();
174+
break;
175+
176+
case 4:
177+
miscDoubts();
178+
break;
179+
180+
default:
181+
alert(invalidOptionMsg);
182+
break;
183+
}
184+
185+
const doRepeatApp = prompt(DoHaveNewDoubt);
186+
if (doRepeatApp === null) return;
187+
let normalizedUserInput = doRepeatApp.toLowerCase().trim();
188+
(normalizedUserInput === "no") ? alert("Gracias por preferir nuestros servicios.") : virtualBoxApp();
189+
};
190+
191+
virtualBoxApp();
192+
//!SECTION - L1 section: Main App

0 commit comments

Comments
 (0)