https://github.com/doaaosamak/pizzarecipe-frontend

This web application utilizes asynchronous JavaScript to fetch and dynamically display recipes from the Forkify API. Users can search for "pizza" recipes, which are then presented in an attractive format using CSS.
https://github.com/doaaosamak/pizzarecipe-frontend

api css html javascript practice

Last synced: 1 day ago
JSON representation

This web application utilizes asynchronous JavaScript to fetch and dynamically display recipes from the Forkify API. Users can search for "pizza" recipes, which are then presented in an attractive format using CSS.

• Host: GitHub
• URL: https://github.com/doaaosamak/pizzarecipe-frontend
• Owner: DoaaOsamaK
• Created: 2024-05-12T14:39:16.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-05-12T15:21:25.000Z (6 months ago)
• Last Synced: 2024-05-13T15:44:42.979Z (6 months ago)
• Topics: api, css, html, javascript, practice
• Language: CSS
• Homepage: https://doaaosamak.github.io/PizzaRecipe-Frontend/
• Size: 8.79 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🍽️ Recipe website 

## 📑 Project Overview 

This project is a simple web application that demonstrates the use of asynchronous JavaScript to fetch data from an external API and display it dynamically on the webpage. The application queries the Forkify API to fetch recipes based on a specified query ("pizza" in this case) and displays the results in a visually appealing format using CSS for styling.

![Macbook-Air-doaaosamak github io](https://github.com/DoaaOsamaK/PizzaRecipe-Frontend/assets/147305995/f184092e-341c-4818-8a78-3998662c5f09)

## 📚 Table of Contents

- [Project Overview](#project-overview-📑)

- [Technologies Used](#technologies-used-💻)

- [Demo](#demo-🔗)

- [Features](#features-✨)

- [Getting Started](#getting-started-🚀)

- [Contributing](#contributing-🤝)

- [Contact](#contact-📧)

## 💻 Technologies Used 

- HTML

- CSS

- JavaScript

- API: [Forkify API](https://forkify-api.herokuapp.com/)

## 🔗 Demo

[Live Demo](https://doaaosamak.github.io/PizzaRecipe-Frontend/)

## ✨ Features 

- **API Integration** 🛠️: Fetches recipe data in real-time from the Forkify API.

- **Dynamic Content Generation** 📝: Uses JavaScript to dynamically generate HTML content based on API response.

- **Responsive Design** 📱: Utilizes CSS Flexbox to ensure the layout is adaptable to various screen sizes.

- **Interactive UI** 🖱️: Includes hover effects for better user interaction.

## 🚀 Getting Started

To view and interact with the project, simply open the `index.html` file in a web browser.

## 🤝 Contributing

Contributions are welcome! If you'd like to contribute to the project, please follow these steps:

- Fork the repository

- Create your feature branch (`git checkout -b feature/YourFeature`)

- Commit your changes (`git commit -am 'Add some feature'`)

- Push to the branch (`git push origin feature/YourFeature`)

- Create a new Pull Request

## 📧 Contact

For any questions or feedback, feel free to contact [[email protected]](mailto:[email protected]).