Ejercicios Ionic

UNIVERSIDAD TECNOLOGICA DEL SUR DEL ESTADO DE MEXICO
TSU EN TECNOLOGÍAS DE LA INFORMACIÓN ÁREA DESARROLLO DE

SOFTWARE MULTIPLATAFORMA
DESARROLLO MOVIL MULTIPLATAFORMA
PROYECTO IONIC EJERCICIOS
DOCENTE: ARMANDO MENDOZA ZUÑIGA
ESTUDIANTE: BRYAN RAMOS SALVADOR
GRUPO: 501
QUINTO CUATRIMESTRE
FEBRERO 2023
EJERCICIO 1
ENUNCIADO
Determinar la cantidad de dinero que recibirá un trabajador por concepto de las horas
extras trabajadas en una empresa, sabiendo que cuando las horas de trabajo exceden de
40, el resto se consideran horas extras y que estas se pagan al doble de una hora normal
cuando no exceden de 8; si las horas extras exceden de 8 se pagan las primeras 8 al doble
de lo que se pagan las horas normales y el resto el triple.
DISEÑO
CODIFICACION
 HTML
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Ejercicio 1</ion-title>
</ion-toolbar>
</ion-header>
<div id="container">
Pago Por Hora: <input type="number" [(ngModel)]="PH">
<br>
<br>
Horas Trabajadas: <input type="number" [(ngModel)]="HT">
<br>
<br>
<input type="button" value="Calcular" (click)="Calcular()">
<br>
<br>
Resultado {{resultado}}
</div>
</ion-content>
 CSS
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
#container strong {
font-size: 20px;
line-height: 26px;
#container p {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
#container a {
text-decoration: none;
}
.txt{
color: red;
font-size: 18px;
font-weight: 800;
.caja{
background: black;
color: red;
border-radius: 10px;
text-align: center;
.boton{
background: black;
color: red;
font-weight: 600;
.boton:hover{
box-shadow: red 2px 2px 2px;
 }Controlador
export class HomePage {
PH: any;
HT: any;
resultado: any;
triples: any;
dobles: any;
constructor() { }
Calcular() {
if (this.HT > 48) {
this.triples = this.HT - 48;
this.resultado = 40 * this.PH + (8 * this.PH * 2) + (this.triples * this.PH * 3);
} else {
if (this.HT > 40) {
this.dobles = this.HT - 40;
this.resultado = 40 * this.PH + (this.dobles * this.PH * 2);
} else {
this.resultado = this.HT * this.PH;
PRUEBAS
EJERCICIO 2
ENUNCIADO
En una tienda de descuento se efectúa una promoción en la cual se hace un descuento

sobre el valor de la compra total según el color de la bolita que el cliente saque al pagar en
caja. si la bolita es de color no se le hara descuento alguno, si es verde se le hará un 10%
de descuento , si es amarilla un 25%, si es azul un 50% y si es roja un 100%. Determinar la
cantidad final que el cliente deberá pagar por su compra , se sabe que solo hay bolitas de
los colores mencionados.
PRUEBAS
CODIFICACION
 HTML
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Ejercicio 2</ion-title>
</ion-toolbar>
</ion-header>
<div id="container">
Total de la Compra: <input type="number" [(ngModel)]="compra">
<br>
<hr>
<select [(ngModel)]="operacion">
<option value="ninguno">Seleccione Una Bolita</option>
<option value="blanco">Blanco</option>
<option value="verde">Verde</option>
<option value="amarillo">Amarillo</option>
<option value="azul">Azul</option>
<option value="roja">Roja</option>
</select>
<hr>
<span [ngSwitch]="operacion">
<span *ngSwitchCase="'blanco'">A Pagar: ${{compra}}</span>
<span *ngSwitchCase="'verde'">A Pagar: ${{compra+((compra/100)*10)}}</span>
<span *ngSwitchCase="'amarillo'">A Pagar: ${{compra+((compra/100)*25)}}</span>
<span *ngSwitchCase="'azul'">A Pagar: ${{compra+((compra/100)*50)}}</span>
<span *ngSwitchCase="'roja'">A Pagar: $0</span>
</span>
</div>
</ion-content>
 CSS
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
#container strong {
font-size: 20px;
line-height: 26px;
#container p {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
#container a {
text-decoration: none;
.titulo{
font-size: 20px;
margin-bottom: 10px;
color: aqua;
font-weight: 800;
.caja{
background: black;
color: aqua;
text-align: center;
border-radius: 10px;
 }Controlador
export class HomePage {
compra : any;
operacion : any;
constructor() {}
PRUEBAS

Ejercicios Ionic

Cargado por

Copyright:

Formatos disponibles

Ejercicios Ionic

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Ejercicios Ionic

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD TECNOLOGICA DEL SUR DEL ESTADO DE MEXICO

TSU EN TECNOLOGÍAS DE LA INFORMACIÓN ÁREA DESARROLLO DE

PROYECTO IONIC EJERCICIOS

DOCENTE: ARMANDO MENDOZA ZUÑIGA

ESTUDIANTE: BRYAN RAMOS SALVADOR

<ion-title size="large">Ejercicio 1</ion-title>

Pago Por Hora: <input type="number" [(ngModel)]="PH">

Horas Trabajadas: <input type="number" [(ngModel)]="HT">

<input type="button" value="Calcular" (click)="Calcular()">

box-shadow: red 2px 2px 2px;

export class HomePage {

if (this.HT > 48) {

this.triples = this.HT - 48;

this.resultado = 40 * this.PH + (8 * this.PH * 2) + (this.triples * this.PH * 3);

if (this.HT > 40) {

this.dobles = this.HT - 40;

this.resultado = 40 * this.PH + (this.dobles * this.PH * 2);

this.resultado = this.HT * this.PH;

En una tienda de descuento se efectúa una promoción en la cual se hace un descuento

<ion-title size="large">Ejercicio 2</ion-title>

Total de la Compra: <input type="number" [(ngModel)]="compra">

<option value="ninguno">Seleccione Una Bolita</option>

<span *ngSwitchCase="'verde'">A Pagar: ${{compra+((compra/100)*10)}}</span>

<span *ngSwitchCase="'amarillo'">A Pagar: ${{compra+((compra/100)*25)}}</span>

<span *ngSwitchCase="'azul'">A Pagar: ${{compra+((compra/100)*50)}}</span>

<span *ngSwitchCase="'roja'">A Pagar: $0</span>

export class HomePage {

También podría gustarte

<span ngSwitchCase="'verde'">A Pagar: ${{compra+((compra/100)10)}}</span>

<span ngSwitchCase="'amarillo'">A Pagar: ${{compra+((compra/100)25)}}</span>

<span ngSwitchCase="'azul'">A Pagar: ${{compra+((compra/100)50)}}</span>