push changes

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.parcel-cache
+.DS_Store

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}

README.md

@@ -0,0 +1,203 @@
+<div id="top"></div>
+
+![HTML](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
+![CSS](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
+![Sass](https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white)
+![JS](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
+![NPM](https://img.shields.io/badge/NPM-%23000000.svg?style=for-the-badge&logo=npm&logoColor=white)
+![Babel](https://img.shields.io/badge/Babel-F9DC3e?style=for-the-badge&logo=babel&logoColor=black)
+![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)
+
+<!-- PROJECT LOGO -->
+<br />
+<div align="center">
+  <a href="https://modern-forkify.vercel.app/">
+    <img src="./src/img/favicon.png" alt="Logo" height="80"  >
+  </a>
+  <h1 align="center">Forkify</h1>
+
+  <p align="center">
+    <a href="https://modern-forkify.vercel.app/">View Demo</a>
+    ·
+    <a href="https://github.com/ahmedalam98/Forkify/issues">Report Bug</a>
+  </p>
+</div>
+
+<!-- TABLE OF CONTENTS -->
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#about-the-project">About The Project</a>
+      <ul>
+        <li><a href="#features">Features</a></li>
+        <li><a href="#built-with">Built With</a></li>
+        <li><a href="#flowchart">Flowchart</a></li>
+        <li><a href="#architecture">Architecture</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#installation">Installation</a></li>
+        <li><a href="#tree-structure">Tree Structure</a></li>
+      </ul>
+    </li>
+    <li><a href="#contributing">Contributing</a></li>
+    <li><a href="#acknowledgments">Acknowledgments</a></li>
+  </ol>
+</details>
+
+<!-- ABOUT THE PROJECT -->
+
+## About The Project
+
+Forkify is a recipe web app using the [Forkify API](https://forkify-api.herokuapp.com/v2) to allow users to search, view, modify, bookmark and add recipes.
+
+- Available search queries : [Queries](https://forkify-api.herokuapp.com/phrases.html)
+
+![Forkify preview](./src/img/preview.png)
+
+### Features
+
+| User Stories                                                               | Features                                                                                                                                                                              |
+| -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Search for recipes                                                         | <ul><li>functionality: input field to send request to API with searched keywords<li>Display results with pagination<li>Display recipe with cooking time, serving and ingredients</ul> |
+| Update the number of servings                                              | <ul><li>Change serving functionality: update all ingredients according ro current number of servings</ul>                                                                             |
+| Bookmark recipes                                                           | <ul><li>Bookmarking functionality: display list of all bookmarked recipes</ul>                                                                                                        |
+| Create recipes                                                             | <ul><li>Users can upload their own recipes</li><li>User recipes will automatically be bookmarked<li>User can only see their own recipes, not recipes from other users</ul>            |
+| Access to bookmarks and recipes when leaving the app and coming back later | <ul><li>Store bookmark data in the browser using "local storage"</ul>                                                                                                                 |
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+---
+
+### Built With
+
+- HTML
+- CSS
+- SASS
+- JavaScript
+- Parcel
+- Babel
+- Forkify API
+- Libraries
+  - fractional
+
+---
+
+### Flowchart
+
+<img src='./src/img/forkify-flowchart.png' alt='flowchart' >
+
+### Architecture
+
+<img src='./src/img/forkify-architecture-recipe-loading.png' alt='architecture' >
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+---
+
+<!-- GETTING STARTED -->
+
+## Getting Started
+
+This project require some prequesites and dependenscies to be installed, you can view it online using this [demo](https://forkify-recipe.vercel.app). or you can find the instructions below
+
+> To get a local copy, follow these simple steps :
+
+### Installation
+
+1. Clone the repo
+   ```sh
+   git clone https://github.com/ahmedalam98/Forkify.git
+   ```
+2. Go to project folder
+
+```bash
+cd forkify
+```
+
+3. install dependencies
+
+```bash
+npm install
+```
+
+4. Run start script
+
+```bash
+npm start
+```
+
+#### Tree structure
+
+```
+forkify
+│   .gitignore
+│   .prettierrc
+│   index.html
+│   package-lock.json
+│   package.json
+│   README.md
+│
+└───src
+    ├───img
+    │       favicon.png
+    │       forkify-architecture-recipe-loading.png
+    │       forkify-flowchart.png
+    │       icons.svg
+    │       logo.png
+    │       preview.png
+    │
+    ├───js
+    │   │   config.js
+    │   │   controller.js
+    │   │   helpers.js
+    │   │   model.js
+    │   │
+    │   └───views
+    │           addRecipeView.js
+    │           bookmarksView.js
+    │           paginationView.js
+    │           previewView.js
+    │           recipeView.js
+    │           resultsView.js
+    │           searchView.js
+    │           View.js
+    │
+    └───sass
+            main.scss
+            _base.scss
+            _components.scss
+            _header.scss
+            _preview.scss
+            _recipe.scss
+            _searchResults.scss
+            _upload.scss
+```
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+<!-- CONTRIBUTING -->
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
+Don't forget to give the project a star! Thanks!
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+<!-- ACKNOWLEDGMENTS -->
+
+## Acknowledgments
+
+- [Jonas schmedtmann](https://github.com/jonasschmedtmann)