Reto 4: algoritmo de un reloj

El diagrama que aparece en el minuto 5 no está del todo bien, ya que conecta nuevamente con la inicialización de las variables H, M y S, en el caso de que al incrementar los segundos estos no sean iguales a 60. Se crearía un bucle en el que la variable S alterna entre 0 y 1 continuamente.

Comparto mi diagrama de flujo de un reloj que se reinicia al completar el día. Está hecho en Raptor (https://raptor.martincarlisle.com/). Pueden usar ese programa para crear y probar que sus diagramas de flujo funcionen, ya que también los ejecuta y es bien fácil de entender.
Otro programa parecido es PSeInt (https://pseint.uptodown.com/windows o en la página oficial), más bonito y un poco más complejo. 🙂

Esta fue mi práctica antes del video, pero me di cuenta de que tiene unos errores, como que imprime el 60, Creo que con este ciclo no lo lograré, probé varias cosas y no lo logro.

Comparto mi diagrama, les pido por favor que comente y me corrigan si es necesario, aunque yo lo entendi de esta manera con las herramientas que nos brinda la profe a lo largo de los curso, sin buscar otra simbologia que nos podria ayudar a optimizar dicho flujo planteado.
Saludos a todos!!

⚡Diagrama de flujo del reloj realizado en PseInt
En este caso se pide al usuario que ingrese las horas, minutos y segundos actuales, a partir de dicha hora empezará a contar el reloj y una vez que este llegue a 23:59:59 se reiniciará nuevamente en 00:00:00 y así seguirá el loop. El reloj finalizará solamente si el usuario ingresa una hora superior a las 23, ya que estaría fuera del ciclo

👉Pseudocódigo del diagrama de flujo

Algoritmo reloj
	Definir hora,minuto,segundoss Como Entero
	Escribir 'Ingrese la hora '
	Leer hora
	Escribir 'Ingrese los minutos '
	Leer minuto
	Escribir 'Ingrese los segundos '
	Leer segundoss
	Mientras hora<=23 Hacer
		Mientras minuto<=59 Hacer
			Mientras segundoss<=59 Hacer
				Borrar Pantalla
				Si hora>9 Entonces
					Escribir hora Sin Saltar
				SiNo
					Escribir '0',hora Sin Saltar
				FinSi
				Si minuto>9 Entonces
					Escribir ':',minuto Sin Saltar
				SiNo
					Escribir ':0',minuto Sin Saltar
				FinSi
				Si segundoss>9 Entonces
					Escribir ':',segundoss
				SiNo
					Escribir ':0',segundoss
				FinSi
				segundoss <- segundoss+1
				Esperar 1 segundo
			FinMientras
			segundoss <- 0
			minuto <- minuto+1
		FinMientras
		minuto <- 0
		hora <- hora+1
		Si hora==24 Entonces
			hora <- 0
		FinSi
	FinMientras
FinAlgoritmo

Yo volvería al principio si se trata de un caso de uso continuo, pero si su uso va a ser como el de un cronómetro para casos específicos si terminaría el flujo.

se podría añadir un condicional al diagrama de si h > 12 == pm sino == am

Comparto mi algoritmo realizado a lápiz con algunas pruebas de escritorio para facilitarme el entendimiento

Pues así nomas quedo …!!!

Hola!, les dejo este proceso a nivel de código.

Técnicamente nunca llegará a 24 horas, porque cuando esté en 23:59:59 automáticamente se reinicia todo el 0:0:0

H = horas = 0
M = minutos= 0
S = segundos = 0
paso 1: creo un ciclo me diga que sume 1 a S hasta llegar a 60

paso 2:y cuando S llegue a 60 que le sume 1 a M

paso 3 : cuando M llegue a 60 que le sume una a H

paso 4: cuado H se le sume uno se repita otravez S

mi diagrama(

Hice este reloj en python pero corre a la velocidad de la luz (Aún no sé como poner retraso entre cada ejecución del loop)

h = 0
m = 0
s = 0

while s < 60:
    s = s + 1
    if s == 60:
        s = 0
        m = m + 1
        if m == 60:
            m = 0
            h = h + 1
            if h == 24:
                h = 0
    print(h, m, s)

No se asusten por ver código de Javascript pero les servirán en un futuro si quieren comparar resultados cuando quieran plasmar este ejercicio cuando aprendan Javascript. Recuerden que <todos los distintos caminos llevan a Roma>

<let hrs = 24;
let min = 60;
let seg = 60;

for (let indexH = 0; indexH < hrs; indexH++) {
    console.log(indexH + 'hrs ');
    
    for (let indexM = 0; indexM < min; indexM++) {
        console.log(indexH + 'hrs ' + indexM + 'min' );

        for (let indexS = 0; indexS < seg; indexS++) {
            console.log(indexH + 'hrs ' + indexM + 'min ' + indexS + 'seg');
        }
    }
}

> 

se puede hacer un bucle infinito, pero yo lo hice, una vez ingresada la hora, mostrarla una vez transcurrido un segundo. Si queremos de practica podemos usar un bucle for i=1 , hasta 2, sumar 1
se terminara el programa cuando pase 24 horas.

Mi reto #4 😄

Hola buenas tardes, despues de 3 horas en el computador realice el ejercicio de la siguiente manera. Espero sus correciones. Gracias!

Algoritmo sin_titulo
h <- 0
m <- 0
s <- 0
Repetir
s <- s+1
Escribir ‘Son las ‘,h,’:’,m,’:’,s
si s=59 Entonces
m=m+1
s=0
Escribir ‘Son las ‘,h,’:’,m,’:’,s
FinSi
si m=59 Entonces
h=h+1
m=0
Escribir ‘Son las ‘,h,’:’,m,’:’,s
FinSi
Hasta Que m=59 o s=59 o h=24
FinAlgoritmo

😄 ¡Este es mi diagrama!

Aquí una forma de hacerlo en PSeInt, me basé en el ejemplo de Vivian Daniela.

Algoritmo:

Diagrama de Flujo:

Comparto el que realice.

DIAGRAMA SIMPLE:

HORA Y MINUTOS

***Pero como es un ciclo sin fin, no sabría donde poner el Fin dentro del diagrama

Lo plasme en codigo JavaScript
Me cuesta aun plasmar el algoritmo en codigo, pero estoy practicando. Si alguien lo puede mejorar, escriba un comentario abajo.
Archivo HTML5:

<!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="shortcut icon" href="./android-chrome-192x192.png" type="image/x-icon"> -->
    <title>Counter</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="date">
        <div class="hour">
            <span id="hour">00:</span>
        </div>
        <div class="minute">
            <span id="minute">00:</span>
        </div>
        <div class="seconds">
            <span id="seconds">00</span>
            <br>
        </div>

        <button type="button" id="btn">INICIAR</button>
        <h2>Message: <span id="day"></span></h2>
    </section>


    <script src="index.js"></script>
</body>
</html>

Archivos JavaScript

//Referencias a hora, minuto, segundo y boton el el DOM
let hour = document.getElementById('hour');
let minute = document.getElementById('minute');
let seconds = document.getElementById('seconds');
let day = document.getElementById('day');
let btn = document.getElementById('btn');

//Al realizar click en el boton se ejecuta la funcion iniciar
btn.addEventListener('click', iniciar)

//variables para almacenar valores de la funcion
let hora = 0;
let minuto = 0;
let segundo = 0;
let dia = 0;

//funcion que contiene la logica de contador
function iniciar () {
    //si el segundo es menor a 60 se suma los segundos
    if(segundo < 60) {
        setTimeout(() => {
            seconds.innerHTML = `<span>Segundos:${segundo}</span>`;
            segundo++;
            console.log(`Segundos: ${segundo}`)
            iniciar();
        }, 1000);
    // cuando el segundo sea 60 el minuto es 1, y el segundo se reinicia en 0
    }else if (segundo === 60) {
            segundo = 0;
            minuto++;
            minute.innerHTML = `<span>Minutos:${minuto}</span>`;
            console.log(`Minutos: ${minuto}`);;
            // cuando el minuto valga 60, el segundo valdra 61 para ejecutar la siguiente condicional
            if(minuto === 60) {
                segundo = 61;
                iniciar();
            }
            iniciar()
    // cuando el segundo sea 61 y minuto sea 60,  hora valdra 1, y segundo y minuto se resetea en 0 
    }else if (segundo === 61 && minuto === 60) {
        segundo = 0;
        minuto = 0;
        hora++;
        hour.innerHTML = `<span>Hora:${hora}</span>`;
        console.log(`Hora: ${hora}`);
        //cuando hora sea 24, segundo valdra 61, y minuto sera 61 para que la funcion finalize 
        if(hora === 24) {
            segundo = 61;
            minuto = 61;
            iniciar();
        }
        iniciar();
    } 
    // se ejecuta cuando segundo sea 61 y minuto 61
    else {
        day.innerHTML = `<span>Finished</span>`
        console.log('finished')
    }
}

RE-SUBIDO: