GithubHelp home page GithubHelp logo

cromeoli / react-newton Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 3.02 MB

Test project with a pseudoclone of sites like "Symbolab" or "Wolphram Alpha" to explore the capabilities of react as well as to improve on core technologies like CSS, HTML and JS.

HTML 2.04% CSS 0.54% JavaScript 97.42%

react-newton's Introduction

imagen

Newton WebApp

Se ha hecho uso de Netlify debido a problemas con gitHub pages, su simpleza y el aprovechamiento de la función build de react para generar archivos optimizados para desplegar

Con uso de la API https://newton.vercel.app/

Intro

En resumen la web de newton es una calculadora simple que recibe operaciones en formato operación/Expresion y devuelve un resultado. Posee además funcionalidades clave de web y dispone de una documentación con buscador donde consultar los diferentes parámetros para usarla.

La estructura de la web es la siguiente:

  • Página principal
  • Account
    • Perfil
    • Seguridad
    • Opciones de pago
    • Ajustes
  • Donate
    • Overlay de donar con tarjeta clicando en "Credit card"
  • About
    • Docs
    • Contacto

Estas son algunas de las funcionalidades que se han implementado:

Login, registro y todos los campos con validaciones

Está implementada una simulación completa de login y registro donde puedes registrarte con una cuenta, desloguearte clicando en el texto del menú burguer y volverte a loguear con la cuenta que has introducido. Si cambias los datos en tu sección "account" podrás seguir haciendo log in y log out con los datos se hayan guardado.

sqqq

Actualización y completado de datos del usuario

En account, el usuario puede cambiar sus datos y añadir 2 campos nuevos a sus datos que se almacenan. En password puede cambiar su contraseña mediante la validación de su contraseña anterior y también se ha implementado una funcionalidad para cambiar la visibilidad de la contraseña (filtro de privacidad).

Docs

En la sección about/docs encontramos un buscador que filtra por descripción, código de operación, sección, nombre de la operación o término en alguna de estas partes y actualiza dinámicamente el contenido en función de la búsqueda.

Función "FastDocs"

Al mantener pulsado sobre uno de los botones de la calculadora durante más de 1 segundo, automáticamente nos llevará a la documentación estableciendo como placeholder el texto recomendado a buscar para encontrar el boton en la documentación.

Adicional

  • Al clicar en la caja de texto de la sección contacto, aparecerá un mensaje aleatorio como placeholder simpático.
  • En la sección account/settings se encuentra un botón de eliminar sobre el que debemos pulsar dos veces. Al hacerlo saldrá un menú de confirmación
  • Clicar en bizum en la sección donations/bizum nos abrirá un overlay de información
  • El icono copiar al portapapeles efectivamente copia al portapapeles
  • La barra posee una animación cuando recibe texto copiado directamente

Navegación

  • El menú burger es el eje de la navegación, se utiliza principalmente para movernos entre las distintas secciones.
  • Para cerrar el menú burger, debemos clicar fuera, pinchar en una sección para ir allí o hacer doble click en el botón burger. Los iconos de las redes sociales nos llevan a la red social en concreto. Clicar en el logo de newton nos llevará a la p

Información extra

La documentación puede generarse automáticamente con el comando "npm run doc".

Se ha utilizado la librería de componentes de react mui/materialUI para hacer ciertos elementos como el tooltip al copiar el texto:

https://mui.com/material-ui/react-autocomplete/#autocomplete-autofill

react-newton's People

Contributors

cromeoli 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.