- 🌱 I’m currently learning Html, CSS & JS
- 👯 I’m looking to collaborate on Programing Teams
- 📫 How to reach me: + 57 320-83427237 best wapp
- ⚡ Fun fact: I love programing learning now with more than 50 years old. I feel like a teenager!
- 🔭 Early: My first new programing work! Total convence
eCommece Practice - eCommerce practice with React / Vite / TailwindCss
- Acceso a base de datos asincronicamente: FireStore
- Filtros de productos por título (input) y categorías (navbar)
- Creacion y vistas de CheckOuts de Ordenes de compra y Show Pruduct
- Deploy a github
- Faltan muchas cosas pero hasta este punto era el ejercicio:
- Boton de whatsApp, Ampliacion de imagenes en detalle, que las 8 primeras fotos sean generales y de acceso a filtro, arreglar los componentes que se solapan, carrito de la compra,
- CSS, HTLM, JavaScrip, GiT y GitHub, manipulación del DOM, React, Vite con TailwindCSS
- Hooks: useState, useContext, useEffect, ReactRouter, Navlink, useLocation
TODO's List - Proyecto Introductorio a React.js
- 📖🗓️ Lista de Tareas / TO DO's Aplicacion Interactiva para Ingresar, eliminar, marcar tareas pendientes y ejecutadas. Adicional tiene un control de ventanas donde en caso de que dos usuarios/ventanas cambien el LocalStorage el resto de ventanas son invitadas a actualizar la pagina antes de seguir ( de hecho todo queda bloqueado hasta no hacerlo)
Usando y provando con:
- React (Componentes y demas)
- Persistencia de datos con LocalStorage.
- Manejo de carga y error
- Hooks: useState, useContext, useEffect
- Modals
APLICACION DE VALIDACION DE CLAVE usando tres formatos de manejo del estado:
- React Hooks: React.useState
- React Hook: React.useReduce
- Clases: React.component
Proyecto de codigos de seguridad donde se debe poder pedir un codigo de seguridad para confirmar poder hacer la accion. Pide codigo. Bien o mal<< Pide confirmacion . Si o no Y se hace la accion tener un undo para recuperar el estado anterior.
Se va a probar con los hooks React.useState y React.useReduce y con clases usando React.Component en la misma pantalla en paralelo para practicar las similitures y diferencias Caracteristicas de los estados en clases comparados con react hooks y para practicar como se pueden seguir estados complejos y declarativos usando Reduce.
- Usando
<NavLink>
no se necesita especificar /#/ - Ademas se puede llamar a funciones en los atributos de la etiqueta
- Para no repetir las propiedades que se repiten en cada ruta se crea un array de rutas
- Renderizacionde de rutas dinamicas :slug en las rutas usando useParams. Hook useNavigate: para cambiar de un componente a otro sin necesidad de link solo poniendo el slug en el hook
- Hook Oulet: ( nested routes )Para renderizar varias rutas a la vez. Cosas dentro de cosas (nested routes).
- Manejo de Autenticaciones: Creacion de useAuth: Manejo de rutas privadas. login y logout. uso de React.useNavigate
- evitar navegacion no autorizada desde Menu.js usando el atributo de las rutas: (route.hidden) y atrubutos del useAuth (!auth.user)
- evitar navegacion no autorizada desde Url creando un componente ProtectRoutes que proteja el llamado a las rutas en App.js.
- Manejo de Autorizaciones: Se crean boton de eliminacion en el componente BlogPost que solo se renderiza si eres administrador (!!auth.user?.isAdmin) o si eres creador del Post (auth.user?.userName === blogpost.author)
- Un ruta secreta solo se renderiza si el auth.user.userType es de administrador o superAdministradordesde el menu y desde la Url ademas de iniciar ocultamente.
- hacer el que boton de borrar Blogs funcione y borre el blog
- useLocation para poder devolvernos a la pagina en la que estabamos antes de hacer login o logout
- 1er mapa: se pinta una fugura geometrica con lineas
- 2do mapa: se pinta fugura con lineas succesivas usando:
- 🖥️ COMPUTADOR: Presion en las teclas del teclado
- 📲 CELULAR: Touch en unas imagenes de flechas ⬆️➡️⬇️⬅️
- 3er mapa: se pintas lineas curvas.
- 🖥️ COMPUTADOR: Con el mouse.
- 📲 CELULAR: Con el dedo.
- Extra CANVAS: La granja. manejo de imagenes en Canvas estaticas y con mov. La GRANJA
Juego Mokepon (click to link Video Simulation) - Responsive Version
Codigo de Juego multijugador programado en HTML, CSS y JS donde cada jugador conectado a un servidor desde su computador, dispositivo mobil o cualquier otro dispositivo conectado a la misma red local, puede entrar a elegir, buscar a traves de un mapa a su contrincante y mandar ataques con mokepones enemigos. Basicamente se hizo para poner en practica destrezas html, Css, Js y entender el manejo basico de servidor BackEnd con llamadas y respuestas al mismo. Muestro tres pantallas basicas.
*Si quieres jugar sigue las instrucciones del README del repositorio del juego
Pantalla en la que van saliendo diferentes frases celebres y se pueden hacer accesos a diferentes redes sociales para compartir las frases elegidas.
Ejercicio de FIZZBUZZ pero mas elegante del que hice hace meses.
Pongo el codigo JS aqui porque es la gracia de la mejora:
Programa que me da plata segun el valor entrado en un input y me dice cuatos billetes de cada clase me da. Aplicacion de practica para entender el uso de array de objetos y recorrerlo Tambien programe un ALERT personalizado (ya que no me gusta el que da el navegador Se probo con creacion de
's que se llenan en forma dinamica desde JS.
Codigo JS que determina si una persona puedo o no entrar a una fiesta y si debe de pagar. Se ejecuta para 3 personas.
Codigo JS para registrar la asistencia durante 30 dias de los n alumnos de una clase y reprovarlos en caso de mas de 18 inasistencias
Calculadora para hacer unas pruebas de JS de funciones flecha sencillas
Se juega contra la aletoriedad del computador con un edicion basica con prompts y alerts