Skip to content
View GemmaClaverodelMoral's full-sized avatar
👩‍🎓
Actualizandome en Programación
👩‍🎓
Actualizandome en Programación

Block or report GemmaClaverodelMoral

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse

About GEMMA CLAVERO DEL MORAL 👋

About me

  • 🌱 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

REPOSITORY SUMMARY

eCommece Practice - eCommerce practice with React / Vite / TailwindCss

eCommerce "simulation" with React, Vite & TailwanCSS

¿Que contiene este proyecto?

  • 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,

¿Qué se usó?

  • 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

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.

Challenges adicionales

... por todos conocido
学习中GIF

Ejercicio de FIZZBUZZ pero mas elegante del que hice hace meses.

FIZZ BUZZ ELEGANTE

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

Popular repositories Loading

  1. Weekly-Challenge-2022-Kotlin Weekly-Challenge-2022-Kotlin Public

    Forked from mouredev/Weekly-Challenge-2022-Kotlin

    Ejercicios de código semanales en 2022 de la comunidad MoureDev para practicar lógica en cualquier lenguaje de programación.

    Kotlin 1

  2. Quotes-Machine Quotes-Machine Public

    Pagina que muestra citas aleatorias sacadas de una API y en cada click se actualiza y tambien cambia de colores.

    HTML 1

  3. Calculadora-Sencilla Calculadora-Sencilla Public

    JavaScript 1

  4. FizzBuzz FizzBuzz Public

    HTML 1

  5. GemmaClaverodelMoral GemmaClaverodelMoral Public

  6. prueba-react prueba-react Public

    JavaScript