- Fork or download the .zip file
- Unzip the file
- Open the folder in VS Code, make sure you install
live-server
Extension.
- 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
- Enter the movie title to search
- Press either [Enter] key or click search button
- If the movie title exists in the database, movie information will be displayed.
- If not, then it will feedback to the user about the result.
- 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 is designed using Figma
- Link to the figma file: UI Design (figma.com)
- Font : Heebo (source: Google)
- Font Weights used:
300
& 400
Color |
Hex |
Background |
#F5F6F5 |
Card Background |
#D0DDD0 |
Input Field |
#FDFDFD |
CTA |
#83C683 |
Text |
#15291E |
How does it work?(ScreenShots)
![](https://github.com/theriyazo/UI-Developer-Front-End-Assignment/raw/main/Assets/senario%201.png?raw=true)
2️⃣ After Successful API fetch
![](https://github.com/theriyazo/UI-Developer-Front-End-Assignment/raw/main/Assets/senario%202.png)
3️⃣ If the user clicks the search button or [Enter] key.
![](https://github.com/theriyazo/UI-Developer-Front-End-Assignment/raw/main/Assets/senario%203.png)
4️⃣ If the Movie is not found.
![](https://github.com/theriyazo/UI-Developer-Front-End-Assignment/raw/main/Assets/senario%204.png)
Designed and Developed by RiyazAhamad (theriyazo)
LinkedIn • Twitter