Front-End-Assignment

How to run the app?

1. Fork or download the .zip file
2. Unzip the file
3. Open the folder in VS Code, make sure you install live-server Extension.
4. Press Go Live, at the lower right of the vs code.

• For Security resons the API Key is not specified in the code.
• Please copy-paste your OMDB API_KEY in the: script.js

How to Use the app?

1. Enter the movie title to search
2. Press either [Enter] key or click search button
3. If the movie title exists in the database, movie information will be displayed.
4. If not, then it will feedback to the user about the result.

Implimented Test cases

• Gives feedback when the user enters [Enter] or clicks search button
• Gives feedback when the user enters wrong movie title
• Removes extraa white spaces from the user enterd movie title

UI

• UI is designed using Figma
• Link to the figma file: UI Design (figma.com)

Typography

• Font : Heebo (source: Google)
• Font Weights used: 300 & 400

Color Scheme

Color	Hex
Background	#F5F6F5
Card Background	#D0DDD0
Input Field	#FDFDFD
CTA	#83C683
Text	#15291E

How does it Look?

How does it work?(ScreenShots)

1️⃣ Landing Page

2️⃣ After Successful API fetch

3️⃣ If the user clicks the search button or [Enter] key.

4️⃣ If the Movie is not found.

Credits:

Designed and Developed by RiyazAhamad (theriyazo)

LinkedIn • Twitter