gsg-g7 / discover-countries Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 2.0 5.67 MB

Autocomplete website - Discover Countries

Home Page: https://discover-countries.herokuapp.com/

CSS 18.68% HTML 12.52% JavaScript 68.79%

discover-countries's People

Contributors

Watchers

Forkers

asmaathabet maiubeid

discover-countries's Issues

make data.JSON handler

make handler for json file which contain data about countries and its cities and add it to index.js file in handler folder .

Make a good working production enviroment

Install the dotenv module and make the port hidden

the extension name

Discover-Countries/src/handlers/handleStatics.js

Line 6 in 33e8c4e

const extention = endpoint.split('.')[1];

You sure the index 1 include the extension name.
The files name maybe has two dots like index.class.js we need the last part in the split.
You can read about path.extname(the file path)
https://nodejs.org/api/path.html#path_path_extname_path

Style The Page

Make the slide down menu for the countries headings

Dom manipulation

-send xhr request

recive data from request

Test Our Function And Eslint Style Code

Make a test for the functions and make sure the code is not having any error messages with the Eslint code style

the error when reading file

Discover-Countries/src/handlers/handleStatics.js

Lines 17 to 20 in 33e8c4e

 if (error) { 

 res.writeHead(404, { 'Content-Type': 'text/html' }); 

 res.end('<h1>Page Not Found</h1>'); 

 } else {

.
The files not found is one case from several cases if you need to handle the not found files you must check the code in error object then send not found, the error may be from the server when reading the file or the path for directory not for the file there is a lot of situations.

{ Error: ENOENT: no such file or directory, open '****the file path***'
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '****the file path***' }

make HandleStatic file

make handle sratic page and put its reference to index.js file .

Response status

Hi,
Your code is good, but if you handle the other response status that would be better
if ( xhr.readyState === 4){
if ( xhr.status === 200){
}else if( ...){
}else{...}

Discover-Countries/public/js/script.js

Line 4 in 33e8c4e

if (xhr.readyState === 4 && xhr.status === 200) {

Make a timeout for the request

add a blank line in the end of the file

Discover-Countries/src/router.js

Line 17 in 33e8c4e

module.exports = router;

Filter data and auto complete in search

make file structure

Add project file structure .
add public folder that contains index.html ,css[style.css], js[scripts.js ,dom.js ],assets folders .
add src folder that contains server.js , router.js, handler folder and API folder .
add handler folder that contain handler files inside src route .
add API folder that conatin json file
add test folder for testing files
add eslint dev-dependency .
add tape dev-dependancy and tap-spec dev-dependancy .
add .gitignore file to ignore node-modules .

Make the list empty when input is empty

Good job

Heroku link !!!

just put it in the description of the project

the result of autocomplete

Discover-Countries/public/js/script.js

Line 16 in 33e8c4e

return item.toLowerCase().indexOf(value) === 0 ;

why the result restricts for the first chars.
the chars may be in the start or middle or end of the word

Descriptive names

Discover-Countries/src/handlers/handleAPI.js

Line 4 in 33e8c4e

const handleH = (res) => {

Discover-Countries/src/handlers/handleAPI.js

Line 5 in 33e8c4e

const homePath = path.join(__dirname, '..', 'API', 'data.json');

Discover-Countries/src/handlers/index.js

Line 3 in 33e8c4e

const handleD = require('./handleAPI');

Use descriptive yet relatively short names (based on the name) for your variables.

E.g. handleD would be handleApi

setTimeout !!!!!!

Discover-Countries/public/js/dom.js

Line 12 in 33e8c4e

t = setTimeout(() => {

I do not understand why to use setTimeout.
If you put it to make some delay when to fetch data you feel fast because of the data and the server in your own computer.
But when deploying the app there is enough delay without using setTimeout because of the speed of the internet and another issues.

your issues

why some of your issues are empty.
you must put a description to your issues to understand what these issues do

Good Job :)

really good job for all :)

XHR status code

Discover-Countries/public/js/script.js

Lines 4 to 7 in 33e8c4e

 if (xhr.readyState === 4 && xhr.status === 200) { 

 const data = JSON.parse(xhr.responseText); 

 callback(data); 

 }

where the handle another status code, I mentioned it in previous Thursday discussions and in the issue for another team
GSG-G7/read-the-movie#49

make simple Page structure

add html content , script links , css links for index.html .
add css initial style :
- add backgirund for the main page .
- add search input for search .
- add div for search results .

Write A Nice Readme

Write down things about the project

backtick notation

Hi again :),
I have a note, I guess the backtick notation not required here if you use the variable country directly without backtick, it will work.

Discover-Countries/public/js/dom.js

Line 39 in 33e8c4e

citiesList.id = `${country}`;

make handleHome file

make handle home page and put its reference to index.js file .

repeated line

Discover-Countries/public/js/dom.js

Line 19 in 33e8c4e

document.querySelector('.main__results').textContent = '';

Discover-Countries/public/js/dom.js

Line 36 in 33e8c4e

document.querySelector('.main__results').appendChild(countryBox);

instead, put document.querySelector('.main__results') in variable and call it

why additional file

Discover-Countries/src/handlers/index.js

Lines 1 to 4 in 33e8c4e

 const handleHome = require('./handleHome'); 

 const handleStatics = require('./handleStatics'); 

 const handleD = require('./handleAPI'); 

 module.exports = { handleHome, handleStatics, handleD };

What the benefits of making require for all handler files?
In my opinion, you can require the handlers files directly in router.js instead of export it then require then export then require.

Create Server.js for the node

too many, big requests

your file is 1.5mb
and u send it every key down every .8s, yes good job on this one, it greatly helped the server
but it gets pretty messy

imagine someone with 200kb/s using the website
it would take 7s to receive the file at that point, is that even autocomplete at this point?
BUT nevermind this, u dont have to change anything, but i had to point this out, so u imagine what unwanted effects this approach has

my suggestions, would be that u either send the file once, or handle the request in the server and send the user the name of the countries only, and when he clicks on a country, u make another request for that country cities

Create router.js

create router.js for the node .

	if (error) {
	res.writeHead(404, { 'Content-Type': 'text/html' });
	res.end('<h1>Page Not Found</h1>');
	} else {

	if (xhr.readyState === 4 && xhr.status === 200) {
	const data = JSON.parse(xhr.responseText);
	callback(data);
	}

	const handleHome = require('./handleHome');
	const handleStatics = require('./handleStatics');
	const handleD = require('./handleAPI');
	module.exports = { handleHome, handleStatics, handleD };

gsg-g7 / discover-countries Goto Github PK

discover-countries's People

Contributors

Watchers

Forkers

discover-countries's Issues

Recommend Projects

Recommend Topics

Recommend Org