https://github.com/newhub25/angular-calculator
Calculator using lastest technologies in CSS, build over Angular 18
https://github.com/newhub25/angular-calculator
angular18 css mathjs
Last synced: 3 months ago
JSON representation
Calculator using lastest technologies in CSS, build over Angular 18
- Host: GitHub
- URL: https://github.com/newhub25/angular-calculator
- Owner: NewHub25
- Created: 2024-06-12T01:49:15.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-09-25T17:33:11.000Z (8 months ago)
- Last Synced: 2025-01-10T06:48:28.659Z (4 months ago)
- Topics: angular18, css, mathjs
- Language: TypeScript
- Homepage: https://newhub25.github.io/angular-calculator/
- Size: 2.05 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Calculator
**Angular Calculator** es una SPA (Single Page Application) que integra una calculadora completamente funcional dentro de una landing page interactiva. Este proyecto destaca por el uso avanzado de **CSS**, **Angular**, y **TypeScript**, aprovechando sus últimas características y patrones de desarrollo.
## Características Principales
### CSS Avanzado
- **CSS Nesting**: Permite una estructura de estilos más organizada y legible.
- **Transformaciones 3D**: `transform-style: preserve-3d` aplicado al título para crear un efecto visual dinámico.
- **Pseudoelementos mejorados**: Con `contain: paint` se asegura que los pseudoelementos no interfieran con el layout principal.
- **Efecto de iluminación en botones**: Implementado con `background-attachment: fixed` para dar un efecto de luz en los bordes de las teclas de la calculadora.
- **Grid Layout**: Utilizado para una distribución flexible y limpia del contenido.
### Angular y TypeScript
- **Hook AfterViewInit**: Se utiliza para asegurar que el DOM esté completamente cargado antes de manipular elementos.
- **ViewChild & ElementRef**: Para una gestión eficiente de los elementos nativos en Angular.
- **CommonModule**: Permite el uso de directivas esenciales como `ngFor` para manejar bucles en la vista.
- **Decoradores de TypeScript**: Añaden metadatos a clases y métodos, optimizando el código.
### Funcionalidades Extras
- **Soporte para números negativos**: La calculadora está diseñada para manejar operaciones con números negativos sin problemas.
- **Drag-and-drop**: Las teclas de la calculadora pueden moverse dentro de la pantalla gracias a la integración con **GSAP**, proporcionando una experiencia interactiva única.
- **Copiar resultado**: El resultado de las operaciones se puede copiar fácilmente al portapapeles.
## Instalación
Sigue los pasos a continuación para clonar y ejecutar el proyecto localmente:
1. Clonar el repositorio:
```bash
git clone https://github.com/NewHub25/angular-calculator.git
```
2. Navegar al directorio del proyecto:
```bash
cd angular-calculator
```
3. Instalar las dependencias:
```bash
npm install
```
4. Ejecutar la aplicación en local:
```bash
npm run start
```
5. Abrir en el navegador:
Visita `http://localhost:4200` para ver la aplicación en ejecución.
## Tecnologías Utilizadas
- **Angular 18**: Para la creación de componentes reutilizables y manejo eficiente del DOM.
- **TypeScript**: Para escribir un código más robusto y tipado, incluyendo el uso de decoradores.
- **CSS**: Con técnicas avanzadas como Grid Layout, nesting, y animaciones para crear una interfaz de usuario interactiva.
- **GSAP**: Para animaciones fluidas y la funcionalidad drag-and-drop.