Flujo de funciones para encapsular algoritmos

Clase 27 de 47 • Curso Básico de Algoritmos y Pensamiento Lógico

Ahora que ya has aprendido cómo se crean las funciones, te reto a resolver los siguientes ejercicios donde encontrarás requerimientos muy puntuales para que los conviertas en algoritmos y los pases a funciones que realicen la actividad.

¡Déjame tus resultados en los comentarios! Estaré encantada de ver tu crecimiento.

Venta de tiquetes

En una empresa de viajes se requiere realizar la venta de tiquetes teniendo en cuenta las siguientes consideraciones:

Cada tiquete incluye ciudad de origen, ciudad de destino, fecha, hora, cantidad de puestos y datos del pasajero.
Cada autobús o avión tiene una capacidad máxima de pasajeros, debo avisar cuando se hayan llenado los cupos.
Debes asignar los puestos de cada medio de transporte conforme al orden de compra.

Pagar en una tienda

En una tienda de ropa se necesita registrar el precio de cada prenda seleccionada y almacenarlo en una única cuenta de cobro por cliente.

Cada cuenta de cobro debe indicar:

Nombre del cliente
Cantidad de prendas
Tipo de prenda
Valor unitario
Valor total (valor unitario de la prenda multiplicado por la cantidad escogida)
Valor total a pagar

Envío de correos

Debes crear un sistema que permita enviar correos electrónicos masivamente, necesita recibir la lista de destinatarios, el asunto y cuerpo del mensaje; al finalizar el envío, debe mostrar un mensaje de confirmación si todo se ejecutó correctamente.

Toma de pedidos

Se desea automatizar la toma de pedidos en un restaurante. El pedido debe llegar a la cocina indicando la información de la mesa a la que se le tomó el pedido, el nombre del cliente, los productos que solicitó, la cantidad y la fecha y hora. Cada pedido debe ser despachado en el orden en que fue tomado.

Locker para bicicletas

En un sistema de locker donde puedes guardar tu bicicleta de manera segura, debes crear un sistema que registre el nombre del usuario, el número de casillero donde se guardó la bicicleta, la fecha y hora de entrada, la fecha y hora de salida y el valor por día de almacenamiento o por horas; al final, debe mostrar el monto a pagar por el tiempo que estuvo guardada en el casillero y notificar la liberación de este espacio.

Carlos Machado

student•

Hola, espero se encuentren aprendiendo muchísimo. Yo me demoré unas dos horas con un solo ejercicio que es el que voy a adjuntar. No entendia muy bien todo, y tuve dificultades para entender al principio. Pero hice un repaso de los temas, e incluso en youtube vi algunos videos. Y me di cuenta que la clave en sí para que todo tenga sentido es la modularización antes del desarrollo del diagrama de flujo. Ya que si no tenemos claros los pasos no sabremos como va a seguir nuestro diagrama y nuestro código. No se programar aún y veo que muchos suben su código avanzado y demás. Pero les digo a los que no saben programar aún. No se intimiden, El código no esmás que una herramienta para interpretar nuestros algoritmos. Lo importante son los fundamentos que definen la lógica bajo la cual vamos a programar.

Les dejo estos links en donde encontré algunas cositas para repasar si quieren: Modularización: https://www.youtube.com/watch?v=s15A8o_fmrY Algoritmos1: https://www.youtube.com/watch?v=Tu9OQSff-gw Algoritmos2: https://www.youtube.com/watch?v=SDv2vOIFIj8 Funciones: https://www.youtube.com/watch?v=MiH3pbP4EFc

He aquí mi ejercicio: :D Tickets de avión:

Diagrama de flujo:
Modularización y pseudocódigo: No se si el planteamiento del código esté bien. Pero le heché ganas. Fueron más de dos horas pensando y ejecutando. "TODO ESTO ESTÁ HECHO A MANO, Espero entiendan y si me pueden brindar algo de feedback lo aceptaré con muchísimo gusto"

Omar Daniel Centeno

student•

¡Hola! . Es una excelente manera de ver las cosas. Lo importante es ver que podemos dar un paso más para poder entender cada tema a nuestro ritmo y de la manera que sea más clara para cada persona. Gracias por los recursos y tu experiencia compartida, estoy seguro de que le sirve a muchísimas personas. . ¡Nunca pares de aprender!

Carlos Machado

student•

Y eso que siento que aún falta, se que aún falta profundidad en algunos temas, pero para eso estamos. Para ayudarnos los unos a los otros. No olviden si no entienden algo buscar afuera. Platzi es una gran herramienta para darte cuenta de las cosas que no sabes y buscar por tu cuenta.

Un abrazo a todos.

Stivaly Gómez

student•

Hola, estos ejercicios son sumamente difíciles para un principiante, me tomó 3 horas realizar solamente el primero. Ojalá renueven esta escuela, porque de verdad cuesta muchísimo entender con ejemplos tan robóticos, pero logrando investigar y ver muchos más ejemplos creo haber entendido como funciona y les dejo acá el único que logré hacer. Ojalá me den feedback para saber si voy bien o no, ya que cuesta bastante entender este tema y mucho más todavía ponerlo en práctica. Es mejor darle botón derecho y abrir en nueva pestaña para que puedan hacerle zoom. Saludos!

Facundo Rombola

student•

y nadie de platzi te contesto, dejan mucho que desear en cierto sentido.

Christopher Diez G.

student•

Oiga, alguien contéstele pues.

Iván Garcia

student•

Venta de tickets

⠀⠀⠀⠀⠀⠀⠀⠀

Interfaz

⠀⠀⠀⠀⠀⠀⠀⠀

Código (JavaScript)

⠀⠀⠀⠀⠀⠀⠀⠀

class Ticket {
  constructor(origin, destiny, date) {
    this.ciudadDeOrigen = origin;
    this.ciudadDeDestino = destiny;
    this.fechaDeViaje = date;
  }
}
class Cliente {
  constructor(name, email, pay) {
    this.nombre = name;
    this.email = email;
    this.formaDePago = pay;
  }
}

let capacidadDelBus = 5;

// Componente botón.
var sendData = document.getElementById("enviar");
sendData.addEventListener("click", capturarFormulario);

// Componente Formulario.
var ciudadOrigen = document.getElementById("origen");
var ciudadDestino = document.getElementById("destino");
var fechaDeViaje = document.getElementById("fecha");

// Componente Formulario del Cliente.
var nombreDeCliente = document.getElementById("nombre");
var correoElectronico = document.getElementById("correo");
var suFormaDePago = document.getElementById("pago");

// Logica y captura de datos del formulario
function capturarFormulario() {
  nuevoTicket = new Ticket(
    ciudadOrigen.value,
    ciudadDestino.value,
    fechaDeViaje.value
  );
  clienteRegistrado = new Cliente(
    nombreDeCliente.value,
    correoElectronico.value,
    suFormaDePago.value
  );
  numeroDeTickets.push(1);
  comprandoBoleto()
}

// Tickets comprados

let numeroDeTickets = [];

function comprandoBoleto() {
  if (capacidadDelBus < numeroDeTickets.length) {
    alert("sorry ya no hay espacio");
  } else {
    alert(`Gracias! tu no. de asiento es ${numeroDeTickets.length}`);
  }
}

La interfaz esta hecha con HTML y CSS, en JavaScript utilicé clases, arrays, manipulación del DOM y condicionales. Los datos del formulario se pueden almacenar en la ram en forma de objeto e ir descontando los asientos conformen van aumentando los boletos vendidos. Quien guste puede optimizarlo. ⠀⠀⠀⠀⠀⠀⠀⠀

HTML y CSS

⠀⠀⠀⠀⠀⠀⠀⠀

<!DOCTYPE html>
<html lang="en">
  <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>Venta de tickets</title>
    <style>
      * {
        margin: 0;
        box-sizing: border-box;
      }
      body {
        background: rgb(37, 37, 37);
        color: white;
        font-weight: 300;
        font-family: Arial, Helvetica, sans-serif;
      }

      main {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      form {
        display: flex;
        flex-direction: column;
        width: 200px;
        height: 650px;
      }

      section {
        width: 250px;
        height: 600px;
        border: solid 1px white;
        border-radius: 15px;
        padding: 60px 10px 10px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
      }

      h2 {
        margin-bottom: 20px;
      }

      input {
        outline: none;
        background: transparent;
        border: none;
        border-bottom: solid 1px white;
        color: white;
        font-size: 14px;
        margin-bottom: 30px;
        height: 40px;
        padding: 3px;
      }

      button {
        width: 80%;
        cursor: pointer;
        background: transparent;
        font-weight: bold;
        color: white;
        border: 1px white solid;
        height: 40px;
        border-radius: 15px;
        outline: none;
        margin-bottom: 30px;
      }

      button {
        transition: background-color 0.6s;
      }

      button:hover {
        background-color: rgb(82, 82, 82);
      }
    </style>
  </head>
  <body>
    <main>
      <section>
        <h3>Compra tu ticket</h3>
        <form action="">
          <input type="text" id="origen" placeholder="Ciudad de origen" />
          <input type="text" id="destino" placeholder="Ciudad de destino" />
          <input type="text" id="fecha" placeholder="Fecha" />
          <input type="text" id="nombre" placeholder="Nombre" />
          <input type="text" id="correo" placeholder="Email" />
          <input type="text" id="pago" placeholder="Forma de pago" />
        </form>
        <button id="enviar" type="button">Enviar</button>
      </section>
    </main>
    <script src="ticket.js"></script>
  </body>
</html>

Erick Eduardo Díaz Carreón

student•

Genial! Gran aporte, aunque me cuesta mucho programar objetos. Necesito practicar mucho mas para entenderlo, pero gracias a tu código puedo entender un poco mejor. Yo pensé que crear objetos para este ejemplo era la mejor alternativa, pero me animé a realizarlo todo en una función. Saludos

Iván Garcia

student•

Hola @ErickDC gracias por tu comentario. 😁 ⠀ En efecto, es cuestión de práctica. Pero siguiendo la ruta de desarrollo web y practicando como lo mencionas irás dominando cada una de las funcionalidades (en este caso de JavaScript) a mi también se me dificulta aún, aprovechemos la oportunidad de practicar en cada ejercicio, saludos! 😊

Erick Armando Sánchez Flores

student•

Venta de tiquetes

var limitAvion = 250;
var limitAutobus = 40;

var numeroAsientosAvion = 250;
var numeroAsientosAutobus = 40;


var need = prompt("Bienvenido a nuestro sistema de ticketmaster ¿Desea comprar algun ticket?  (S/N)");

if(need == 'S'){
  compratickets();
}else{
  alert("Gracias por usar nuestro sistema :) Que siga teniendo un excelente dia.");
}

function compratickets(){
  var transporte = parseInt(prompt("Que medio desea tomar?\n 1. Avion\n 2. Autobus"));
  
  if(transporte == 1){
    var ciudadOrigen = prompt("Seleccione su ciudad de origen:\n 1. Aguascalientes\n 2. Monterrey");
    var ciudadDestino = prompt("Selecciones su ciudad de destino:\n 1. Aguascalientes\n 2. Monterrey");
    var cantidadPuestos = parseInt(prompt("¿Cuantos boletos desea adquirir?"));         
    if((numeroAsientosAvion - cantidadPuestos) <= 0){
      alert("Lo sentimos el avion no cuenta con suficientes asientos disponibles. \n # asientos disponibles: " + numeroAsientosAvion);
    }else{
      numeroAsientosAvion = numeroAsientosAvion - cantidadPuestos;
      var datosPasajero = prompt("Por favor ingrese su nombre completo");
      var fechaHora = new Date();
      alert("Compra exitosa. De clic para ver los detalles de su ticket");
      alert("Fecha y hora de compra: " + fechaHora+ "\n Ciudad de Origen: " + ciudadOrigen + "\n Ciudad de Destino: " + ciudadDestino);
    }        
  }if (transporte == 2){
    var ciudadOrigen = prompt("Seleccione su ciudad de origen:\n 1. Aguascalientes\n 2. Monterrey");
    var ciudadDestino = prompt("Selecciones su ciudad de destino:\n 1. Aguascalientes\n 2. Monterrey");
    var cantidadPuestos = parseInt(prompt("¿Cuantos boletos desea adquirir?"));
    var datosPasajero = prompt("Por favor ingrese su nombre completo");
    var fechaHora = new Date();
  }
  if(transporte != 1 && transporte != 2){
    alert("Lo sentimos, los datos ingresados son incorrectos :c");
  }
}

Luis Daniel Feliciano Manzo

student•

¿En qué app o extensión haces esto?

IRIS ESTRADA NAVA

student•

ME PARECE ES JAVASCRIPT EN VISUAL STUDIO CODE 😉

Richard Alexander Ayza Ureña

student•

No entiendo muy bien como hacer estos ejercicios si alguien pudiera guiarme se lo agradecería. 😭 Pdta: Soy nuevo programando

Jhon Esneider Gonzalez Ramos

student•

jajajja yo también he estado echándole cabeza , mira aun que no sepas de codigo, imagina crear una carpeta que te guarde los datos de los tiquetes , y otro que guarde la capacidad del vehiculo. entonces cuando llamas al algoritmo , en un proceso llamas la capeta. si alguien tiene una mejor explicacion pls regalala :D

Luis Angel Pasos Montalvo

student•

Yo estoy repasando desde lo básico nuevamente y para este punto, para alguien que empieza desde el principio no tendrá ninguna idea de como hacerlo en código, sin embargo la instrucción es hacerlo mediante un diagrama de flujo y crear las funciones que consideres son necesarias para ejecutar las instrucciones, por lo que esas situaciones si se pueden realizar con lo visto hasta el momento,

En resumen, realizar los diagramas de flujo, y propuestas de funciones (Sin tener en consideración el código puede ser meramente escrito)

Daren Cujaban

student•

Estos son los algoritmos que hice para esta práctica. No son perfectos, pero espero que sirvan de guía!

VENTA DE TIQUETES
PAGAR EN UNA TIENDA
ENVÍO DE CORREOS
TOMA DE PEDIDOS
LOCKER PARA BICICLETAS

Enmanuel Josue Sarmiento Benitez

student•

Amigo me sirvieron mucho los dos últimos para poder resolverlos, muchas gracias !!

Emely Gabriela Mendieta Cabrera

student•

Mis respetos capo, y mis diagramas del tamaño de una hoja de cuaderno pequeña😓. JAJAJA ya me vere haciendo yo esos largos diagrama😄

Juan Jose Gonzalez Alvarado

student•

No pues la verdad siento que me estoy perdiendo una clase o que tenía que traer algún curso de antemano porque cada explicación son unos 5 minutos de teoría corta y los ejercicios son sobre calcular la masa solar. Cómo vamos a modularizar y redactar posibles soluciones si no tenemos ejemplos concretos o soluciones del profesor? Y antes que me manden a YouTube, les recuerdo que no estamos estudiando en Youtube, sino en Platzi y por lo tanto es justo esperar las herramientas necesarias por parte del curso para afrontar estos problemas. Los aportes de la comunidad? Me dejan 3 veces más confundido y es de personas que claramente tienen habilidad de programación. Estoy muy perdido.

Ramón MP

student•

Hola Juan José Entiendo tu punto, creo que para una persona que va totalmente desde 0 quizás sea complicado realizar los ejercicios solamente con la teoría que dan en los videos, pero desde mi punto de vista los conceptos explicados en los videos son recapitulados en los comentarios de forma muy completa. Quizás si vuelves a leer un resumen de la clase en el foro se te haga más comprensible el tema, ya que si lees un comentario que sea de un ejercicio resuelto lo más probable es que no lo entiendas, porque necesitas entender bien las bases.

Ramón MP

student•

Otra cosa que quería añadir es que no está mal que no le entiendas a la primera, cada quien lleva su ritmo y casi siempre es necesario volver a repasar el tema para comprenderlo bien. Te iba a dejar unos videos de YT como guía, pero ya vi que no quieres jeje y está bien, se respeta.

Luis Miguel Bolaños Chacon

student•

por fin quedo 😁😁😁

Jonathan Acosta

student•

Este ejemplo si me ayudo mas, gracias.

Fernando Otzoy

student•

Gracias por compartir el ejercicio ..! Me ayudo a entender mas la clase ..!

Nadia Lorena Tinoco Ricapa

student•

Ejercicio: TOMA DE PEDIDOS Realizado con C++

#include<iostream>
#include <string>
#include <time.h>

using namespace std;
class Mesa{
	string nombre;
	string apellido;
	string producto;
	int cantidad;
	short dia;
	short mes;
	short anio;
	short min;
public:

	Mesa(short minutos) {

		cout << "Digame su nombre: "; cin>>nombre;
		cout << "Digame su apellido: "; cin >> apellido;
		cout << "¿Que producto llevara?: "; cin >> producto;
		cout << "¿Cuantas porciones?: "; cin >> cantidad;
		dia = 5; mes = 2 ; anio = 2021;
		min = minutos;
	}
	void Imprime() {
		cout << "\tUsuario: " << nombre <<" "<<apellido<< endl;
		cout << "\tProducto: " << producto << endl;
		cout << "\tPorciones: " << cantidad << endl;
		cout << "\tFecha: " << dia << " / " << mes << " / " << anio << endl;
		cout << "\tHora: 4"<<" : "<< this->min;

	}
};
class Clientes {
	Mesa** arreglo;
	int cant;
public:
	Clientes() {
		arreglo = nullptr;
		cant = 0;
	}
	~Clientes() {
		if (arreglo != nullptr)
		{
			for (int i = 0; i < cant; i++)
				delete arreglo[i];
			delete[] arreglo;
		}
	}
	void Agregar(short min) {
		Mesa** aux = new Mesa * [cant + 1];
		Mesa* nuevo = new Mesa(min);
		for (int i = 0; i < cant; i++)
			aux[i] = arreglo[i];

		aux[cant] = nuevo;

		if (arreglo != nullptr)
			delete[] arreglo;
		arreglo = aux;
		cant++;
	}
	void Mostrar() {
		cout << "--------Orden de Despacho-----------" << endl;
		for (int i = 0; i < cant; i++)
		{
			cout << "Mesa #" << i + 1 << endl; arreglo[i]->Imprime();cout << endl;
		}
	}
};

int main() {

	setlocale(LC_ALL,"es");
	short tiempo = 0;
	clock_t start = clock();
	Clientes* e = new Clientes();
	unsigned short op;
	do {
		cout << "\t\t*********************************************" << endl;
		cout << "\t\t*                 MENU                      *" << endl;
		cout << "\t\t*                                           *" << endl;
		cout << "\t\t*          1.Agregar cliente                *" << endl;
		cout << "\t\t*          2.Ver lista de clientes          *" << endl;
		cout << "\t\t*          0.Salir                          *" << endl;
		cout << "\t\t*                                           *" << endl;
		cout << "\t\t*********************************************" << endl;
		cout << "\t\tIngrese la opcion deseada: ";
		cin >> op;
		system("cls");
		if (clock() - start >= CLOCKS_PER_SEC)
		{
			tiempo++;
			start = clock();
		}
		switch (op)
		{
		case 0: exit(0);  break;
		case 1: {	
			e->Agregar(tiempo);
			break;
		}
		case 2:	e->Mostrar(); break;
		}
		system("pause>0");
		system("cls");

	} while (op != 0);
	
	delete e;
	return 0;
}

Resultado:

Pd: No se como poner la fecha y hora actual, si alguien sabe seria genial que lo edite y agregue.

IRIS ESTRADA NAVA

student•

AY QUE SAD NO ENTENDER C++ AUN...#JUSTSAYIMG

Alexis Daniel Sanchez Arias

student•

oye mano pudiste haberlo hecho en JavaScript para que fuera mas entendible no en C++ que feos modos jejeje

Juan Diego Galindo Velazquez

student•

Hola

Segundo Juan

student•

<hola>

Aldo Mixtli Rivera Ruelas

student•

Estoy teniendo muchos problemas para realizar las actividades... Por lo tanto creo que las dejare en stand by o simplemente continuare con el resto del curso, porque cada vez me estoy perdiendo mas. Las peticiones están algo ambiguas y de tanto analizar y analizar, se me esta yendo el rollo.

Cuantos camiones o aviones debes tener?
Cuantos destinos?
Cuantos espacios por camión o avión?
Cuales datos de pasajero?
Hay un menú?
Directamente vendes boletos hasta que pase... que pase que?

No es que sea muy bueno analizando, pero se me vienen todas esas preguntas y mas. Y no solo me esta pasando con el primer ejercicio, sino también con los demás, veo a los demás compañeros que han podido resolver, pero a mi me da muchas vueltas la cabeza, porque esta bastante extenso y se deja al pensamiento... Se me esta complicando muchísimo.

Carlos Eduardo Gomez García

teacher•

¡Hola! No te preocupes por ello, está bien que lo sobre pienses así, porque así es como vas desarrollando más tu lógica, pero para estos ejercicios tú tienes que aplicar tu creatividad, decídelo tú, decide cuantos aviones o camiones quieres tener, decide cuantos destinos quieres ofrecer, aplica tu creatividad para este punto :D

No hay una respuesta correcta ni incorrecta, simplemente hazlo a como te lo imagines, así lo hicimos todo :D

Jorge Alberto Mora Mora

student•

Estoy totalmente de acuerdo contigo Aldo, al ver todo esto abruma hace pensar que me he saltado clases o en su defecto no he aprendido nada. Y algunos compañeros con sus aportes en vez de ayudarnos, no hacen preguntarnos ¿donde se ha visto todo eso?, deberían ser mas específicos los ejercicios y como estos deben ser desarrollados pues algunos aportan cosas que en este curso no se han visto y uno queda :O

Alejandro Ramos

student•

Estimados señores Platzi, debería existir una pestaña dónde se encuentre la solución del profesor, de lo contrario la educación personalizada que promueven, no existe y quedan en simples videos.

Anthony Ismael Manotoa Moreno

student•

Hola :)

Aquí es donde entra la comunidad. Si revisas los comentarios, verás que están compartidas ahí las respuestas correctas e incluso alternativas creativas para llegar a la misma solución. Claro que también hay muchos cursos que se deja el reto y en la siguiente clase se ve la solución junto al profesor

Edison Manrique

student•

Si no se quieren estresar sin necesidad les aconsejo: Vean urgentemente el curso de prog. Basica primero.

David Prada

student•

Amigo, ¿hiciste primero el curso gratis de programación básica y después hiciste este curso? Al momento de hacer estos ejercicios, te parecieron sencillos?

Juliana Vega

student•

Totalmente de acuerdo

David Casas

student•

Recomiendo fuertemente leer "Fundamentos de Programacion - Un enfoque practico." me sirvio demasiado. Abajo el link. Salludos!

https://fisme.untrm.edu.pe/uploads/Fundamentos%20de%20Programaci%C3%B3n%20-%20Un%20enfoque%20pr%C3%A1ctico.pdf

DAVID GONZALO MESA PERDOMO

student•

muchas gracias amigo, me sirvió muchísimo!!!!

Gustav Caves

student•

Super genial aporte....

gonzalo jordan

student•

code HTML

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@1,600&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@1&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <h1 class="title">tiket</h2>
    </header>
    <main>
        <!-- TODO: aqui va todos los  input -->
        <form action="" class="container-input">
            <!-- FIXME: input name -->
            <label for="name">name</label>
            <input class="item" type="text" id="name" placeholder="nombres completos">
            <!-- FIXME: input origen -->
            <label for="origen">origen</label>
            <input class="item" type="text" id="origen" placeholder=" ciudad de  origen">
            <!-- FIXME: input destino -->
            <label for="destino">destino</label>
            <input class="item" type="text" id="destino" placeholder="ciudad de destino">
            <!-- FIXME: input time -->
            <label for="time">time </label>
            <input class="item" type="datetime-local" id="time">
            <!-- FIXME: input submit -->
            <input class="button" type="submit" value="comprar"  >
        </form>
        <!-- TODO: aqui van los tiket (template) -->
        <section class="container">
            <!-- FIXME: poner templates  -->
        </section>
        <section class="image">

        </section>
    </main>
    <!-- TODO: template -->
    <template id="template">
        <article class="wrap-tiket">
            <h3 class="font">name</h4>
            <p  class="name"></p>
            <h3 class="font"> origen</h4>
            <p class="source"></p>
            <h3 class="font">destino</h4>
            <p class="destination"></p>
            <h3 class="font">time</h4>
            <p class="time"></p>
            <h3 class="font">number asiento</h4>
            <p class="seat" ></p>
            <!-- FIXME: buttom elimina todo el template -->
           <button class="delete" name="eliminar">delete</button>
        </article>
    </template>
    <script type="module" src="./index.js"></script>
</body>
</html>

** code CSS**

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'IBM Plex Mono', monospace;
    outline: none;
}

body{
    background-color: #000000;
    background-image: linear-gradient(315deg, #000000 0%, #414141 74%);
}
.title{
    text-align: center;
    color: white;
    font-size: 17px;
}
.container-input{
    display:flex;
    flex-direction: column;
    background-color: #00D2FC;
    width: 300px;
    height: 280px;
    padding: 2px;
    border-radius: 20px;
    text-align: center;
    font-family: 'Roboto Mono', monospace;
    align-items: center;
    flex-wrap: wrap;
    margin: auto;
    font-size: 12px;
}
.button{
    width: 60px;
    margin: 10px;
    margin-bottom: 3px;
    background-color: #845EC2;
    color: white;
    border-radius: 2px;
    outline: none;
   

}
.delete{
    border-radius: 5px;
    background-color: #0934ac;
    color: white;
}
.item{
    text-align: center;
    margin: 5px;
    width: 250px;
    border-radius: 5px;
    border: none;
}
.container{
    display: flex;
}
.wrap-tiket{
    border: 1px solid blue;
    width: 200px;
    height: 200px;
    padding: 10px;
    margin: 5px;
    border-radius:10px ;
    text-align: center;
    background-color: #845EC2;
    color:  rgba(255, 255, 255, 0.9);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
}
.font{
    color: black;
}
.alert{
    background-color: red;
    color: white;
    height: 50px;
    font-size: 15px;
    border-radius: 5px;
    font-weight: 900;
}

** code JS**

class DataUser{
    constructor(name,source,destination,time,seat){
        this.name = name
        this.source = source
        this.destination = destination
        this.time = time
        this.seat = seat
    }
}
class IU{
    pushTiket(obj){
        let {name,source,destination,time,seat} = obj
        const d = document
        const $template = d.getElementById("template").content
        const $containerTiket = d.querySelector(".container")
        const $fragmento = d.createDocumentFragment()
        $template.querySelector(".name").textContent = name
        $template.querySelector(".source").textContent = source
        $template.querySelector(".destination").textContent = destination
        $template.querySelector(".time").textContent = time
        $template.querySelector(".seat").textContent = seat
        const $clon = d.importNode($template,true)
        $fragmento.append($clon)
        $containerTiket.append($fragmento)
    }
    resetForm(){
        document.querySelector(".container-input").reset()
    }
}
let arr = []
let  limitSeat = 5
function capturar(item) {
    if (arr.length === limitSeat ) {
        const d = document
        const div = d.createElement("div")
        const h2 = d.createElement("h2").textContent = `lo sentimos ya se agotaron los asientos 🥺 `
        const $refe = d.querySelector(".button")
        div.append(h2)
        div.className = `alert`
        $refe.insertAdjacentElement("afterend",div)
        $refe.setAttribute("disabled","")
    } else {
        arr.push(1)
        return arr.length
    }
}
const d = document
d.addEventListener("submit",(e)=>{
    const name = e.path[0][0].value
    const source = e.path[0][1].value
    const destination = e.path[0][2].value
    const time = e.path[0][3].value
    const seat = capturar()
    const data = new DataUser(name,source,destination,time,seat)
    const iu = new IU()
    iu.pushTiket(data)
    iu.resetForm()
    e.preventDefault()
})

Alexis Daniel Sanchez Arias

student•

Chevere que le hayas agregado muchas funciones :D tambien que hayas practicado tu css y js. sigue mejorando, me daban ganas de hacerlo responsive y darle otras apariencias pero esta bueno para empezar

Heros Leonel Noriega Juárez

student•

Mauricio Carrasco

student•

Venta de Tickets

. Creo que he hecho una mezcla rara y fea de diferentes lenguajes, así que lo más probable es que esté mal la mayoría de cosas. Lo hice en el bloc de notas.

var int capacidad_maxima;
var int asientos_ocupados = 0;
var int cantidad_asientos_escogidos;
var char hora_viaje;
var char dia_viaje;

function tiquete(char origen, char destino)
{
	return "Origen: origen",
		"Destino: destino",
		"Fecha: dia_viaje",
		"Hora: hora_viaje,	
}

function fecha(int dia, int mes, int año)
{
	dia_viaje = dia + "/" + mes + "/" + año;
	return dia_viaje;
}

function tiempo(int hora, int minutos)
{
	hora_viaje= hora + ":" + minutos; 
	return hora_viaje;
}

function datos_pasajero(char nombre, int edad, char sexo)
{
	return "Nombre: nombre",
		"Edad: edad",
		"Sexo: sexo";
}

function numero_de_puesto(int orden_compra)
{
	puesto_asignado = orden_compra;
	return "Puesto: puesto_asignado";	
}

function proceso_tiquete(capacidad_maxima, cantidad_asientos_escogidos)
{
	if (capacidad_maxima - asientos_ocupados > cantidad_asientos_escogidos)	
	{
		capacidad_maxima -= cantidad_asientos_escogidos; 
		asientos_ocupados += cantidad_asientos_escogidos;
		printf("Puede comprar tiquet");

		return capacidad_maxima, asientos_ocupados;
	}
	else
	{
		printf("No hay asientos disponibles. Disculpe");

		return capacidad_maxima					
	}
}

printf("Venta de tiquetes

");

# Primero ingrese tiempo y fecha
# Ahora a crear el tiquete
# 	Ingrese datos del pasajero
#		Ingrese datos del tiquete
# Ingrese los datos para el proceso de tiquete
# Por ultimo ingrese el numero de puesto

# Ejm:

tiempo(11, 40);
fecha(11, 02, 2021);

printf("Creacion del tiquete
");

datos_pasajero("Mauricio", 18, "Masculino");
tiquete("Peru", "Canada");

proceso_tiquete(100, 1)

# Listo :D

Ismael Moya Espín

student•

Cuando una variable (tiquete) contiene muchos datos en su interior, es interesante crear un objeto. Por el momento está bien que practiques funciones, pero llegado a un nivel un poco más avanzado del curso podrías contener toda la información de ltiquete dentro de una clase:

Octavio Hurtado

student•

Me parece que para esta cantidad de ejercicios deberían profundizar mas en lo técnico y no solo en la teoría, ya que están explicando como hacer una función de 2 + 2 y la practica dejan algo totalmente diferente y mas complejo. Acuérdense que son fundamentos, es mi humilde opinión.

Eliot Herrera Samano

student•

concuerdo completamente, que horror la verdad

Fernando Fabricio Feijoo Feijoo

student•

Ejercicio de Venta de Tiquetes resulto en PSeInt:

Algoritmo ventaTiquetes
	autoBus = 2
	avion = 1
	contadorBus = 1
	contadorAvion = 1
	contadorPuestosBus = 1
	contadorPuestosAvion = 1
	Repetir
	Borrar Pantalla
	Escribir 'Medio de transporte: Bús o Avion'
	Leer transporte
	Escribir 'Ciudad de origen:'
	Leer ciudadOrigen
	Escribir 'Ciudad de destino:'
	Leer ciudadDestino
	Escribir 'Datos del pasajero:'
	Leer datPasajero
	Escribir 'ingresar fecha:'
	Leer fecha
	Escribir 'Ingresar hora en formato 24H:'
	Leer hora
	Si transporte = 'Bus' O transporte = 'bus' O transporte = 'Bús' O transporte = 'bús' Entonces
		Borrar Pantalla
		autoBusDis = autoBus - contadorPuestosBus
		Escribir Sin Saltar 'Ciudad de origen: ',ciudadOrigen,' a ',ciudadDestino,'.','             Autobús #',contadorBus
		Escribir ''
		Escribir Sin saltar 'Fecha: ',fecha,' - ',hora,'    cantidad de puestos disponibles: 00',autoBusDis,' - 00',contadorPuestosBus,' <- Su asiento.'
		Escribir ''
		Escribir 'Pasajero: ',datPasajero
		Si autoBusDis = 0 Entonces
			Escribir 'Autobús #',contadorBus,' completo.'
		FinSi
		contadorPuestosBus = contadorPuestosBus + 1
		Si contadorPuestosBus > autoBus Entonces
			contadorBus = contadorBus + 1
			contadorPuestosBus = 1
			autoBusDis = 0
		FinSi
	SiNo
		Borrar Pantalla
		avionDis = avion - contadorPuestosAvion
		Escribir Sin Saltar 'Ciudad de origen: ',ciudadOrigen,' a ',ciudadDestino,'.','             Avion #',contadorAvion
		Escribir ''
		Escribir Sin saltar 'Fecha: ',fecha,' - ',hora,'    cantidad de puestos disponibles: 00',avionDis,' - 00',contadorPuestosAvion,' <- Su asiento.'
		Escribir ''
		Escribir 'Pasajero: ',datPasajero
		Si avion = contadorPuestosAvion Entonces
			Escribir 'Autobús #',contadorAvion,' completo.'
		FinSi
		contadorPuestosAvion = contadorPuestosAvion + 1
		Si contadorPuestosAvion > avion Entonces
			contadorAvion = contadorAvion + 1
			contadorPuestosAvion = 1
			avionDis = 0
		FinSi
	FinSi
	Escribir ''
	Escribir ''
	Escribir 'Ingresar nuevo pasajero presione enter, (para salir [s/salir])'
	Leer respuesta
	Hasta Que respuesta = 's' O respuesta = 'salir' O respuesta = 'S'
FinAlgoritmo

Claro que se puede aumentar el número de asientos del Bus en la constante superior o del Avión, puse bajos con fines de testing. Saludos desde Ecuador.

Juan Diego Acosta Saenz

student•

Como lo pusiste en negro?

Luis Alejandro Vera Hernandez

student•

Saludos desde Manta, gracias por tu aporte en pseudocodigo 👍

Juan Carlos Ortiz Romero

student•

Yo estoy repasando desde lo básico nuevamente y para este punto, pero para alguien que empieza desde el principio le costará un poco, sin embargo la instrucción es hacerlo mediante un diagrama de flujo y crear las funciones que consideres son necesarias para ejecutar las instrucciones, por lo que esas situaciones si se pueden realizar con lo visto hasta el momento, En resumen, realizar los diagramas de flujo, y propuestas de funciones.