Flujo de funciones para encapsular algoritmos

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

Contenido del curso

Introducción a los algoritmos

Tipos de datos y operadores lógicos

Estructuras de control

Encapsula tu código en funciones

Traduce tus algoritmos a lenguajes de programación

Conclusiones

47
Próximos pasos para aprender programación profesionalmente
00:29 min

Tomar examen

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.

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

Carlos Machado

Omar Daniel Centeno

Stivaly Gómez

Facundo Rombola

Christopher Diez G.

Iván Garcia

Erick Eduardo Díaz Carreón

Erick Armando Sánchez Flores

Luis Daniel Feliciano Manzo

IRIS ESTRADA NAVA

Richard Alexander Ayza Ureña

Jhon Esneider Gonzalez Ramos

Luis Angel Pasos Montalvo

Juan Jose Gonzalez Alvarado

Ramón MP

Luis Miguel Bolaños Chacon

Jonathan Acosta

Fernando Otzoy

Nadia Lorena Tinoco Ricapa

Juan Diego Galindo Velazquez

Segundo Juan

Aldo Mixtli Rivera Ruelas

Carlos Eduardo Gomez García

teacher•

Jorge Alberto Mora Mora

Alejandro Ramos

Anthony Ismael Manotoa Moreno

Edison Manrique

David Prada

Juliana Vega

David Casas

DAVID GONZALO MESA PERDOMO

Gustav Caves

Heros Leonel Noriega Juárez

Mauricio Carrasco

Ismael Moya Espín

Octavio Hurtado

Eliot Herrera Samano

Fernando Fabricio Feijoo Feijoo

Juan Diego Acosta Saenz

Luis Alejandro Vera Hernandez

Juan Carlos Ortiz Romero

Yesenia Nazareno

Joaquin esteban

Flujo de funciones para encapsular algoritmos

Introducción a los algoritmos

¿Qué aprenderás sobre algoritmos y pensamiento lógico?

La importancia de entrenar tu pensamiento lógico

¿Qué entiende una computadora?

¿Qué es el sistema binario?

Metodología para construir un algoritmo: requerimientos y proceso mental

Tipos de datos y operadores lógicos

¿Qué son variables y constantes?

¿Qué son Bits y Bytes?

Identifica las variables según los requerimientos de negocio

Strings (texto) y concatenación

Números y operaciones matemáticas básicas

Operaciones matemáticas compuestas: paréntesis y orden de evaluación

True y false: booleanos y tablas de la verdad

Arrays y funciones sobre arrays

¿Cómo diseñar algoritmos con diagramas de flujo?

Define el tipo de dato según los requerimientos de negocio

Estructuras de control

If y Else: condicionales y comparaciones para proteger tus algoritmos

Switch y Case: condicionales en forma de casos

Excepciones y errores: Throw y Try Catch

¿Qué es un ciclo? While, For y Do While

Diagrama de flujo con condicionales

Diagrama de flujo con ciclos

Tutorial de algoritmos de programación

Diseña algoritmos para resolver problemas de tu vida diaria

Encapsula tu código en funciones

¿Cómo desarrollar tu lógica de programación?

¿Qué es una función?

Modularización de código