gsg-g11 / imagesearch Goto Github PK

1.0 1.0 1.0 171 KB

Image search is an online portal and Web-based services that collect and indexes thousands of images available on the Internet and tagged with specific keywords.

Home Page: https://image-search-nada-mohammad.herokuapp.com/

HTML 70.50% CSS 9.84% JavaScript 19.66%

images imagesearch imageset

imagesearch's Introduction

ImageSearch

Description
Links
APIs
User Journey
User stories
Technology I used
Installing the project locally

✧ Description

Image search is an online portal and Web-based services that collect and indexes thousands of images available on the Internet and tagged with specific keywords.

✧ Links

Live link

✧ APIs

API	Description	Auth	HTTPS	CORS
Imsea	Free image search	No	Yes	Unknown
Lorem Picsum	Images from Unsplash	No	Yes	Unknown

✧ User Journey

The user will open the Image Search website, then the user will see an input which take a specific keyword to search, if he search about specific keyword will see all the images which related with.

✧ User stories

As a user, I want to be able to search of any specific keywords.
As a user, I want to be able to see all images that related with specific keyword.

✧ Technology and Tools that we used

HTML → to build the structure of the pages.
CSS → to style the application.
JS & DOM Manipulations → to create interaction between the page and the user.
Node → to build the server side.
Use APIs
Postman website link → to check the APIs.

✧ Installing the project locally

https://github.com/GSG-G11/ImageSearch
cd ImageSearch
code .

imagesearch's People

Contributors

Stargazers

Watchers

Forkers

mohammadalhabil

imagesearch's Issues

[JS] Handle not found & server error

Create 2 Files to handle errors [404,500]
Add the Functions in other handler files

Basic Rules

Color

<html lang="en" data-theme="light">

:root{
--white: #ffffff;
--main: #B12025;
--active-background: #111317;
--sec-background: #171A1F;
--background: #0A0B0D;
--title: #E1E6F0;
--sub-title: #8B919C;
--placeholder: #B8BFCC;
--border: #1B1F26;
--between-border: #242933;
--icon: #F7FAFC;
}

[data-theme="dark"] {
--black: #000000;
--main: #B12025;
--active-background: #FFFFFF;
--sec-background: #FAFAFA;
--background: #FFFFFF;
--title: #B8BFCC;
--sub-title: #8B919C;
--placeholder: #B8BFCC;
--border: #E1E6F0;
--between-border: #E1E6F0;
--icon: #F7FAFC;
}

Font

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Readex+Pro:wght@200;300;400;500;600;700&family=Yeseva+One&display=swap" rel="stylesheet">

Use this font in CSS

font-family: 'Readex Pro', sans-serif;

[HTML-CSS] Create not found page

Create not found page using HTML and CSS the handle 404 error

Get apiUrlPicsum and Create displayLoad function

Get apiUrlPicsum to render random images
Create displayLoad function

[JS] Get Images From External API

Get images from external API and send them to the client

server.js
router.js
handlerFile.js
handlerPublic.js

General Notes

What great work!! I am really impressed by the features you added. Some quick notes:

Great that you tried to test your router, you can also check if the response message or data are what you are expected or not.
Great work in the refactor, don't think that you can merge handleFile and handlePublic in one module? In addition to these two functions getImages, getPicsumImages, you can control the little difference through the arguments.
If you already handled the 404 error in handlePublic, then no need for this handler, since it didn't do any new functionality
```
const notFoundHandler = (response) => {
  handlePublic('notFound.html', response, 404);
};
```
I liked that you handled the loading and all features that you added to the website, keep up the good work.