DEV Community

Cover image for My second vanilla JavaScript Project: using APIs, promises, classes, error handling, and more!

My second vanilla JavaScript Project: using APIs, promises, classes, error handling, and more!

Damian Demasi on September 16, 2021

Why did I choose to build this project? 🤔 This project was one of my favourite tools for breaking my way out of tutorial hell 👹. I also ...
Collapse
 
rahulbhooteshwar profile image
Rahul Bhooteshwar • Edited

That's really awesome and a lot of learning stuff here.

Just one thing I noticed (nothing to be offended but I am curious about the same). I tried to add my country India, & saw the following flag for it 👇
dev-to-uploads.s3.amazonaws.com/up...
I believe that's flag for British occupied India(not sure). That's surprisingly shocking, what API is using that flag after the 75years of Independence & so much contribution to world economy , innovation & what not!

I still need to explore the code & API you are using but yeah that's the first thing I noticed as a User.
As mentioned nothing to be offended here or your fault but it's surprising to see who is providing the modern API with modern technology to serve outdated information that too 75 years old!

Collapse
 
kevduc profile image
Kevin Duconge

Damian used restcountries.eu/, but it looks like he used partial matching to get the country flag (restcountries.eu/rest/v2/name/India), which returns the "British Indian Ocean Territory" as a first result when looking for India.
With the "fullText" flag to true for an exact match (restcountries.eu/rest/v2/name/Indi...) it returns the correct result.

Collapse
 
colocodes profile image
Damian Demasi

Exactly! Thanks for this.

Collapse
 
colocodes profile image
Damian Demasi

I noticed that issue with the flag as well. I think that is happening because I'm searching for the first ocurrence of the country name, and that weird "British occupied India" is comming up first. If I have time, I'll fix this in the future.

Thanks for the feedback! 😅

Collapse
 
dannyengelman profile image
Danny Engelman

Maybe use a native web component for flags, flagmeister.github.io

Collapse
 
kwiat1990 profile image
Mateusz Kwiatkowski

It is interesting how you approached the problem and thought about it. I like the entire preparation process and your tool chain. Also the idea with clockify seems to be nice in terms of knowing how much time you spent (do you also know how much time did single festures take?).

Collapse
 
colocodes profile image
Damian Demasi

I'm glad you find it useful! Yes, I set Clockify up with more detailed tracking but is a bit cumbersome to explain it all. In retrospect, I should have used tags on that app so I could get better statistics.

Collapse
 
tommyli743 profile image
tommyli743

Hi Damian, great work. I love the way you give us the chance to follow your thoughts and solutions. I will check it in detail soon.
One shirt question: which tool did you use for the workflow graph?
Regards Thomas

Collapse
 
colocodes profile image
Damian Demasi

I'm glad you find it useful! 😄

I used this app for making the flow chart: app.diagrams.net/
It's very easy to use and you can save the chart on your GitHub repository 🤯

Collapse
 
peter_brown_cc2f497ac1175 profile image
Peter Brown

Congrats on flexing your skills without the use of libraries. This is exactly what I like to see from developers I hire. Although strong from a technical perspective, your politically charged data will only hurt your job prospects.

Collapse
 
colocodes profile image
Damian Demasi

Thanks for your feedback! One clarification here: it's not my data ;)

Collapse
 
kevduc profile image
Kevin Duconge

Pretty awesome work, I love seeing the process from a to z, and the design looks really nice, I love the colour palette!

Collapse
 
colocodes profile image
Damian Demasi

Thanks Kevin! 😄

Collapse
 
narenandu profile image
Narendra Kumar Vadapalli

What tools did you have to use for debugging CSS?

Collapse
 
colocodes profile image
Damian Demasi

What I usually do is this:

*, *:before, *:after {
    outline: 1px dashed blue; /* Debugging purposes */
}
Enter fullscreen mode Exit fullscreen mode

This will render a dashed blue line on all elements, so I can see their position and sizes.

The other tool I use is just the Chrome Developer Tools.

Collapse
 
lovemyway profile image
lovemyway

Nice work; the link to your application in Publishing section should be colo-codes.github.io/mini-projects...

Collapse
 
colocodes profile image
Damian Demasi

Thanks! I have corrected this now.

Collapse
 
luishron profile image
Luis Hernádez

Awesome! now I want to replicate it

Collapse
 
colocodes profile image
Damian Demasi

Go for it!

Collapse
 
kayodeadechinan profile image
Kayode Adechinan • Edited

That's really awesome Damian. The process was insightful and well organized.

Collapse
 
colocodes profile image
Damian Demasi

Thanks for your feedback! I'm glad you like it.

Collapse
 
shyam3050 profile image
Shyam3050

This is my next project starting very soon