Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/criscorreas/three-themed-calculator

Calculadora con tres temas diferentes, desarrollada con HTML, CSS y JS
https://github.com/criscorreas/three-themed-calculator

calcula css3 html5 javascrip theme-changer

Last synced: 5 days ago
JSON representation

Calculadora con tres temas diferentes, desarrollada con HTML, CSS y JS

Awesome Lists containing this project

README 

        
# ➗3️⃣ Calculadora con Tres Temas

![Badge en Desarollo](https://img.shields.io/badge/STATUS-FINALIZADO-violet)

License MIT 



html5

css3

javascript





[![Imagen de la calculadora con el primer tema](https://github.com/CrisCorreaS/three-themed-calculator/blob/main/img/visualizaci%C3%B3n/calculadora-vista1.png)](https://criscorreas.github.io/three-themed-calculator/)



Esta calculadora, inspirada en el ["Calculator App Challenge" de Frontend Mentor](https://www.frontendmentor.io/challenges/calculator-app-9lteq5N29), ha sido creada por **[Cristina Correa](https://www.linkedin.com/in/cristina-correa-segade/)**.



## 👀 Vista Previa



### ➡️ **Demo desplegada en GitHub Pages:** **[Haz click aquí](https://criscorreas.github.io/three-themed-calculator/)**



#### 1️⃣ Primer Tema:

![Vista previa del primer tema de la calculadora](https://github.com/CrisCorreaS/three-themed-calculator/blob/main/img/visualizaci%C3%B3n/calculadora-vista1.png)



#### 2️⃣ Segundo Tema:

![Vista previa del segundo tema de la calculadora](https://github.com/CrisCorreaS/three-themed-calculator/blob/main/img/visualizaci%C3%B3n/calculadora-vista2.png)



#### 3️⃣ Tercer Tema:

![Vista previa del tercer tema de la calculadora](https://github.com/CrisCorreaS/three-themed-calculator/blob/main/img/visualizaci%C3%B3n/calculadora-vista3.png)



## 💻📱 Responsive



#### Vista desde un ordenador

![Calculadora vista desde un Ordenador](https://github.com/CrisCorreaS/three-themed-calculator/blob/main/img/visualizaci%C3%B3n/calculadora-vista1.png)



#### Vista desde un teléfono

- Pixel 7 



![Calculadora vista desde un Google Pixel 7](https://github.com/CrisCorreaS/three-themed-calculator/blob/main/img/visualizaci%C3%B3n/calculadora-vista1-pixel7.png)







- iPhone SE 



![Calculadora vista desde un iPhone SE](https://github.com/CrisCorreaS/three-themed-calculator/blob/main/img/visualizaci%C3%B3n/calculadora-vista1-iphoneSE.png)



#### Vista desde una tablet

- Nest Hub Max 



![Calculadora vista desde un Nest Hub Max](https://github.com/CrisCorreaS/three-themed-calculator/blob/main/img/visualizaci%C3%B3n/calculadora-vista1-nestHubMax.png)







- iPad Mini 



![Calculadora vista desde un iPad Mini](https://github.com/CrisCorreaS/three-themed-calculator/blob/main/img/visualizaci%C3%B3n/calculadora-vista1-ipadMini.png)



## 🌱 Características



- **Interfaz:** Diseño sencillo y colorido adaptado a varios colores diferentes:

  - **Primer tema**: Verde, blanco y naranja

  - **Segundo tema**: Gris, rojo y violeta

  - **Tercero tema**: Azul, blanco y amarillo

- **Funciones Matemáticas Básicas:** Resuelve cualquier problema con suma, resta, multiplicación y división.

- **Correcciones** Si olvidaste alguna operación o cometiste un error al ingresar un número, puedes borrar todo o eliminar caracteres uno por uno.



## 🛠️ Tecnologías Utilizadas



- HTML

- CSS

- JavaScript



## 🔎💡 Información

> [!IMPORTANT]

> - Este es un proyecto para principiantes. No se requieren conocimientos avanzados de HTML, CSS o JavaScript.

> - Está desarrollado utilizando JavaScript Vanilla, así que no se utiliza ningún framework. Sin embargo, si estás buscando un poco más de desafío, ¡siéntete libre de explorar la posibilidad de integrar un framework!

> - **Nivel de dificultad del proyecto:** 🔴🔴⭕⭕⭕⭕⭕⭕⭕⭕ (2 sobre 10)



> [!TIP]

> A la hora de desarrollar el proyecto, te pueden venir bien los siguientes recursos:

> - [Frontend Mentor: Calculator App Challenge](https://www.frontendmentor.io/challenges/calculator-app-9lteq5N29)

> - [Online Tutorials: Day/Night Mode Switch Toggle](https://www.youtube.com/watch?v=hy27lzmButc)

> - HTML:

>    - [MDN Custom data Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*)

>    - [MDN Using data Attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes)

> - CSS:

>    - [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 

>    - [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) 

>    - [A Complete Guide to CSS Media Queries](https://css-tricks.com/a-complete-guide-to-css-media-queries/)

>    - [A (more) Modern CSS Reset by Andy Bell](https://piccalil.li/blog/a-more-modern-css-reset/)

>    - [Manz.Dev Lenguaje CSS](https://lenguajecss.com/css/)

> - JavaScript:

>    - [Manz.Dev Lenguaje Javascript](https://lenguajejs.com/javascript/)

>    - [JavaScript MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript)

> - Google Fonts:

>    -  [How to use Google Fonts](https://developers.google.com/fonts/docs/css2?hl=es-419)

>    - [FAQs about Google Fonts](https://developers.google.com/fonts/faq?hl=es-419)



## 📓 Cómo Usar



1. Descarga o clona este repositorio en tu máquina local.

2. Abre el archivo `index.html` en tu navegador web.



¡Y eso es todo! Ahora puedes realizar tus cálculos con una calculadora 3x1.



## ✨ Contribuciones



¡Las contribuciones son bienvenidas! Si deseas mejorar la calculadora existente, como agregar más contenido o mejorar el diseño, no dudes en enviar tus pull requests. También puedes sugerir nuevas funcionalidades o brindar retroalimentación para hacer que este proyecto sea aún mejor.



## 🎯 Propósito del Proyecto



Este proyecto tiene como objetivo principal el aprendizaje y la práctica del desarrollo web.



## ➡️ Licencia

Este proyecto está licenciado bajo [MIT License](https://opensource.org/license/mit/).