Code Monkey home page Code Monkey logo

fox-lazy-loading's Introduction

Fox Lazy Loading

Este es mi segundo proyecto utilizando JavaScript para manipular el DOM. Utiliza la API de Random Fox para mostrar bonitas imagenes de 馃

Para las imagenes se aplica uso de Lazy loading para cargar las im谩genes una vez que se muestran en pantalla.

Funcionalidades

  • Agregar im谩genes: El primer bot贸n permite agregar una imagen aleatoria de un bonito 馃 desde la API Random Fox.
  • Borrar im谩genes: El segundo bot贸n permite borrar todas las im谩genes agregadas.
  • Reporte en consola: En la consola se muestra un reporte del n煤mero total de im谩genes vs las im谩genes que se han cargado.

Tecnolog铆as utilizadas

  • HTML
  • CSS
  • JavaScript
  • API de Random Fox

Demo

Puedes ver una demostraci贸n de este proyecto en vivo aqu铆: https://fox-lazy-loading.vercel.app/

C贸mo ejecutar el proyecto

  1. Clonar este repositorio en tu computadora:
    git clone https://github.com/mrketchupp/fox-lazy-loading
  2. Ejecutar el siguiente comando en la terminal para iniciar la aplicaci贸n en modo de desarrollo:
    npm start
  3. Abre http://localhost:8080 en tu navegador para ver la aplicaci贸n.
  4. La p谩gina se actualizar谩 autom谩ticamente si realizas cambios en el c贸digo. Tambi茅n podr谩s ver los errores en la consola.
  5. Para generar una versi贸n est谩tica de la aplicaci贸n que se pueda desplegar, ejecuta el siguiente comando:
    npm run build
    
    La aplicaci贸n se generar谩 en la carpeta build/.

Autor

MrKetchupp

fox-lazy-loading's People

Contributors

mrketchupp avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    馃枛 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 馃搳馃搱馃帀

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google 鉂わ笍 Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.