Merge pull request #219 from khushi-purwar/dev-khushi

Added Image finder

Author: Ayushparikh-code

Index.md

@@ -59,8 +59,9 @@
 | [ConnectFour](https://github.com/Shauryaditya/Web-dev-mini-projects/tree/main/ConnectFour)                                  |  This is a simple game which can be played between two players.The player who connects the four bubbles first wins the game . The bubbles could be connected horizontally , vertically or diagonally.The players have to be together since multiplayer feature is not available .|
 | [Expand Button](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Expand-Button) |It is a basic website with an expanding button on it. As we click on the button it expands and shrinks after 5 seconds. |
 | [Color Guessing Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/color-guessor) |It is a basic color guessing game where the player is given a rgb value and he has to guess the color from that.|
-| [Double Vertical Slider](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Double-Vertical-Slider)                           | This App helps to Slide the two different parts of the webpage content at the same time .|     
-| [Compound Interest Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Compound%20Interest%20Calculator)                 |  A basic gradient Background Generator which allows you to create a background by selecting your required colors. This will make up a gradient mix and provide you the code line so that you can use it in your Website  |
+| [Double Vertical Slider](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Double-Vertical-Slider)                           | This App helps to Slide the two different parts of the webpage content at the same time . |       
+| [Compound Interest Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Compound%20Interest%20Calculator)                 |  A basic gradient Background Generator which allows you to create a background by selecting your required colors. This will make up a gradient mix and provide you the code line so that you can use it in your Website  | 
+| [Image Finder](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/image-finder-app)            |A single page web application that uses the PixaBay API to display the images according to user search. |
 | [Youtube UI Clone](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Youtube-Clone)                 |  A project which aims to clone YouTube UI with responsiveness by using HTML & CSS.  |
 | [Blog Application](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/Blog%20Application)                 |  Blog Application is an application where user can add a new blog, edit it, delete it as well as view other blogs and make changes in them.  |
 | [Typing Speed Test Website](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/Typing%20Speed%20Test%20Website)                 |  This website is used to check the typing speed of the user. It will the give the information of how many seconds require for typing the particular sentence.  |

image-finder-app/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

image-finder-app/README.md

@@ -0,0 +1,46 @@
+# Image Finder - React Application   
+
+## About the Project
+A single page web application that uses the PixaBay API to display the images according to user search.
+
+## Technologies Used
+
+- React
+  - Hooks
+  - Components
+- CSS
+- Javascript
+  - Axios
+  - ES6
+- API
+- MaterialUI
+ 
+
+## API Used
+PixaBay API
+
+Link : https://pixabay.com/api/
+
+## How to use the Project
+
+1. Download or clone the repository `git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git`
+2. Go to the directory
+3. Open the terminal, and type `npm start`
+4. After application opens, there are two search input, one is asking for image title and second one is for number of images.
+5. If number of images less than 3 or more than 200 , it will show a message to the user.
+
+
+## Screenshots
+
+Initial UI looks like:
+
+<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/dev-khushi/image-finder-app/Screenshots/ss1.png" />
+
+After user search for a image:
+
+<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/dev-khushi/image-finder-app/Screenshots/ss2.png" />
+
+A message will be shown if user search for a image and number of images are less than 3 or more than 200:
+
+<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/dev-khushi/image-finder-app/Screenshots/ss3.png" />
+