https://github.com/marocena26/angular-gifs-app
Angular: from zero to expert - Project03 - Angular Gifs App 🤖. Responsive 📱. Technologies used: HTML 5, Bootstrap, Typescript, Angular 16. Individual project.
https://github.com/marocena26/angular-gifs-app
angular bootstrap typescript
Last synced: about 2 months ago
JSON representation
Angular: from zero to expert - Project03 - Angular Gifs App 🤖. Responsive 📱. Technologies used: HTML 5, Bootstrap, Typescript, Angular 16. Individual project.
- Host: GitHub
- URL: https://github.com/marocena26/angular-gifs-app
- Owner: marocena26
- Created: 2024-01-09T09:54:03.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-03-05T09:44:31.000Z (over 2 years ago)
- Last Synced: 2025-03-11T01:27:07.634Z (over 1 year ago)
- Topics: angular, bootstrap, typescript
- Language: TypeScript
- Homepage: https://gifs-app-marocena26.netlify.app/
- Size: 274 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GifsApp project 🤖
## 👩🏻💻 Author
- **Elena Arocena: [@marocena26](https://github.com/marocena26)**
## 👉🏻 Hey, look here!
In the attached repository you will find all the challenges, just click [here](https://github.com/marocena26/Angular-from-zero-to-expert) 😋.
## 🚀 Introduction
In this repository you can find the files generated in the **Angular: de cero a experto** within **[Fernando Herrera Udemy](https://www.udemy.com/course/angular-fernando-herrera/)**.
Gif search application. The user will use a search bar to be able to see a maximum of 10 gifs of the searched item on the screen.
> **NOTE:** Direct link to the project by clicking on the following **[link](https://gifs-app-marocena26.netlify.app/)**.
## 🛠️ Tools
The following tools have been used when solving the project:
- **HTML**
- **Bootstrap**
- **GIT version control**
- **Typescript**
- Modularization of the application
- Structure of the large-scale media application
- Components
- ViewChild
- Services
- Search history
- Use of Api Keys
- LocalStorage
## 📖 What have I learned?
- Use of Api Keys
- ViewChild
## 💾 Steps to follow to use this project on your computer:
> This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.0.
1. Click on the top right corner > **Fork**.
2. It will ask you to choose which GitHub user you want to fork it to. **Choose your user**.
3. **Go to github.com/your-user/name-of-project**, **clone it** and do whatever you want, you can rename the repo, change the code, redeploy it to GitHub Pages...
4. **Finally** and for everything to work properly, **you must disable GitHub Pages and re-enable** it so that GitHub generates the new URL correctly.
### Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
## ✨ Credits
- [Angular: de cero a experto](https://www.udemy.com/course/angular-fernando-herrera/) - [@Klerith](https://github.com/Klerith)