TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: A simple world flags game, my first web dev project as a beginner

238 pointsby nickybuzzover 2 years ago

60 comments

pantulisover 2 years ago
Well executed! Just as a suggestion, incorrect answers could be displayed more prominently so one has more visual feedback about what to learn.<p>Does not look like a beginner&#x27;s project to me, congrats again!
评论 #34519035 未加载
评论 #34520005 未加载
评论 #34522575 未加载
评论 #34518437 未加载
评论 #34519970 未加载
评论 #34519891 未加载
agentwigglesover 2 years ago
Despite any mild clunkiness in the actual game (which has been thoroughly covered in other comments, so I won&#x27;t repeat it), I just wanted to say this is a really nice looking project.<p>I have a complex about my inability to do nice design, I really need to just start doing it on the side I think, as I&#x27;m sure I&#x27;d get better with practice. But I&#x27;m always impressed when stuff looks good as a result of my own inability. So nice work! Keep learning!
评论 #34519936 未加载
chadlaviover 2 years ago
This game was fun and made me wonder: have I ever seen a damn flag in my life? Seems like a simple thing, then you get in there and don&#x27;t know most of them.
评论 #34519347 未加载
评论 #34523858 未加载
评论 #34520009 未加载
franciscopover 2 years ago
It crops up for me (and doesn&#x27;t allow me to scroll down) so I couldn&#x27;t see the feedback of whether it was correct or not.
评论 #34519433 未加载
theonethingover 2 years ago
After a few minutes of playing, I finally noticed that after you answer, the country of the flag is highlighted on the spinning globe. It&#x27;s a nice touch. But it only happens if the country is within view range. I think a nice stretch goal would be to make the globe quickly rotate to the country as well.<p>Overall, great job!
taldoover 2 years ago
Nice little game for curious people. Hard mode: picking the alternatives among geographically-close countries, or countries with similar-looking flags.
dtagamesover 2 years ago
This is fantastic and highly addictive! My only suggestion (as others have said) would be to indicate the CORRECT flag&#x27;s name clearly and give the user a chance to absorb it before going onto the next one. Maybe a box around the right choice or the country name near the flag? Something like that.<p>The design does make me want to &quot;get &#x27;em all&quot; and learn them correctly and that little change would help.<p>Kudos on a fantastic first app which is very professional and usable!
评论 #34519840 未加载
goolzover 2 years ago
Instant bookmark, well done.<p>A nice little exercise when I need to get me head out of the IDE. You should be really proud of this, god, my first site. . .<p>Well, anyway, have a nice day and keep it up!
评论 #34519566 未加载
bumpkinjunkieover 2 years ago
Pretty cool, love that it keeps track of your score at the bottom. One comment is that the user feedback when answering incorrectly displays the name of the correct country, not the incorrectly guessed country.<p>Example: Flag is Brazil. Finland is guessed by user. Message to user: &quot;You guessed Brazil incorrectly&quot;.
评论 #34519155 未加载
评论 #34519642 未加载
rementover 2 years ago
Awesome little project! I went through the US state flags and found that you are using the old Mississippi flag.<p><a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Flag_of_Mississippi" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Flag_of_Mississippi</a>
评论 #34523879 未加载
评论 #34525602 未加载
albert_eover 2 years ago
Excellent!<p>If this is really a &quot;beginner&quot; project -- you have a very bright future. Kudos!<p>If you care to, it would be great to see your learning approach &#x2F; experience &#x2F; git repo &#x2F; tutorial for building the same or something similar.<p>Idea:<p>Add a &quot;HINT&quot; button that will gradually reveal more info --<p>- turn the globe background towards the said country<p>- highlight the &quot;continent&quot; the country belongs to<p>- highlight the country itself<p>Or: - or strike-off a few of the incorrect choices<p>Also: - Correct answers and wrong answers could be highlighted on he globe with green and red colors for countries<p>EDIT: I just noticed that you are already doing the last part (albeit with a temporary red&#x2F;green circle that vanishes -- instead of a permanent coloring of the country). Wow and great work!
BaudouinVHover 2 years ago
on my 1366 x 768 screen I cannot see the bottow row, only the first - hope it helps<p>here is a screenshot : <a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;Jx1qyNF.png" rel="nofollow">https:&#x2F;&#x2F;i.imgur.com&#x2F;Jx1qyNF.png</a> - I&#x27;m running MX Linux
评论 #34519740 未加载
评论 #34519439 未加载
kyberiasover 2 years ago
When I answer incorrectly, it tells me I selected some totally other country incorrectly.
评论 #34518456 未加载
belinderover 2 years ago
Bottom two options don&#x27;t show on my screen. I am on 1920x1080 with 150% scaling
评论 #34519904 未加载
snozolliover 2 years ago
I can&#x27;t use the page on my Samsung S20:<p><i>Your current dimensions are not supported</i><p>It sure looks like it&#x27;s rendering just fine:<p><a href="https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;zwzyCx6" rel="nofollow">https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;zwzyCx6</a>
评论 #34525623 未加载
stefncbover 2 years ago
This is what I see: <a href="https:&#x2F;&#x2F;0x0.st&#x2F;oFPu.png" rel="nofollow">https:&#x2F;&#x2F;0x0.st&#x2F;oFPu.png</a><p>The bottom row gets cropped. Resolution is 1366x768. Let me know if you need additional info.<p>The UI looks great though!
评论 #34519929 未加载
r00fusover 2 years ago
My daughter is a huge fan of flags so we&#x27;ll be doing a lot of trying this out!<p>Any way you can configure the number of possible answers? I think 10 options is a bit much (as a clueless American).
评论 #34527970 未加载
SamBamover 2 years ago
Neat!<p>It would be nice to have the option to focus on a single content. It&#x27;s much easier to learn things if you can go back and repeat, but repetition is prohibitive if you have to do the whole world again.<p>As a small comment, I went to click on a flag on mobile to see if I could see it bigger, and the name of the file came up, with the country&#x27;s two-letter code, giving away the answer. I&#x27;d make it so the flag doesn&#x27;t respond to touch&#x2F;mouse events.
评论 #34519819 未加载
etermover 2 years ago
Wow, that was a real grind to finish, including a lot of test of memory filtering out countries I&#x27;d guessed correctly previously.<p>It still took me an incredibly long time, with dozens of wrong guesses for the same flags over and over.<p>I finally finished with Khazakstan, I wish the stats showed how many guesses total, even if I can work it out from the accuracy I suppose.<p>193 world flags multiple choice finished in 43:07 42% accuracy
评论 #34525480 未加载
bbxover 2 years ago
Very nice! I like how the last guessed country is displayed in the map in the back. It&#x27;s a shame it doesn&#x27;t pan to that location, because it&#x27;s often located outside the viewport. It would be useful to have a way to zoom out and view the whole map, because it would teach the user about the country&#x27;s location as well.<p>It&#x27;s a fun and well executed project, congrats!
评论 #34519560 未加载
insane_dreamerover 2 years ago
Nice. I thought I was pretty good at country flags, but it turns out I&#x27;m not :)<p>For practice, it might be nice to have some filter options where it only shows you flags from a subset of countries, i.e.,<p>- continents - largest 50 &#x2F; 100 &#x2F; 150 &#x2F; 200 countries by population<p>the latter would be nice because it&#x27;s hard to remember all the small island nations
评论 #34525631 未加载
andnandover 2 years ago
Very neat! Can someone explain the json is being rendered? I had no idea json could be rendered as an image? <a href="https:&#x2F;&#x2F;github.com&#x2F;billywojcicki&#x2F;vexillologist&#x2F;blob&#x2F;master&#x2F;world-110m.json">https:&#x2F;&#x2F;github.com&#x2F;billywojcicki&#x2F;vexillologist&#x2F;blob&#x2F;master&#x2F;w...</a>
评论 #34518920 未加载
评论 #34518931 未加载
swyxover 2 years ago
nice touch i liked - you can click the background and rotate the earth for apparently no reason. thats fun!
评论 #34525637 未加载
_justinfunkover 2 years ago
So many comments in your Javascript. You are clearly a beginner. &#x2F;s<p>Nice work, the code was very readable and reasonable.
评论 #34519632 未加载
defenestrationover 2 years ago
That’s lovely and frustrating. 1) The right answer could be visualized higher on the screen, to reduce eye movement. 2) My 15 minute progress was erased after checking the settings and trying out the options. Argh! But overall well done on this project!
评论 #34519675 未加载
albert_eover 2 years ago
Slightly Off-topic:<p>Is there any &quot;clustering&quot; of flags into visually similar designs?<p>Telling similar flags apart and correctly naming the country when the other option is presented as choice ... must be harder work and should ideally have more points :)
dieselgateover 2 years ago
Oh my gosh - the touch movement of the globe on mobile is one of the coolest things I’ve seen in a while. I hate smart phones and apps and this is a really good website implementation on mobile.<p>Well done even though the game is super difficult!
评论 #34527925 未加载
marchie_ukover 2 years ago
Great fun - bravo!<p>One observation from me, using Firefox on a 2019 MacBook Pro: my computer got very warm while playing, and the cooling fans were running much higher than normal. It looks like the page is using a lot of CPU.
smclover 2 years ago
Nicely done! 11 mins 4 seconds with 97% accuracy (my apologies to some smaller caribbean and pacific islands for forgetting your flag, and for mixing up whether Indo or Singapore had the crescent moon + stars)
评论 #34519775 未加载
Hittonover 2 years ago
Not bad. I think it could be nice if there was possibility of mode with just more or lesser known flag. Like only countries with &gt; 1 million population or 20 or more percentile of countries by population.
heresjohnnyover 2 years ago
This is really cool! Nice touch with the moving globe behind the question. Maybe create a page showing the flags and their countries the user got wrong, for reviewing purposes?
Benjammerover 2 years ago
Does this show a random flag each time? You could use a spaced-repitition algorithm to pick which flag to show based on correct&#x2F;incorrect previous answers.
评论 #34525669 未加载
cryptoboy2283over 2 years ago
Small suggestion to obfuscate image names, because:<p>Right-click on the flag -&gt; Open image in a new tab -&gt; ISO-2 code image file<p>Makes it easier to narrow it down to correct answer.
jll29over 2 years ago
Fun demo!<p>When you get it wrong, show the correct country name under the flag. Optionally, show the flag of the country you got wrong and your wrong guess underneth.
readneyover 2 years ago
Wrong flag for Afghanistan, recently famously updated
评论 #34518991 未加载
评论 #34519889 未加载
rdlwover 2 years ago
Is the order randomized at the start? I keep getting runs of almost-alphabetical countries starting with A, B, or C when I restart.
评论 #34525533 未加载
artificialover 2 years ago
Great job! What did you enjoy most about this project? Were there any aspects that were satisfying once the concepts clicked?
评论 #34525706 未加载
thealch3m1stover 2 years ago
Sheldon Cooper would be excited about this one
spookybonesover 2 years ago
Congrats! This is great. What resources are you using to learn web dev? I ask because I&#x27;m also a beginner.
评论 #34539359 未加载
simlevesqueover 2 years ago
Idea: I&#x27;d like to be able to select only countries who speak spanish to practice my knowledge of latinoamerica.
评论 #34525642 未加载
nothrowawaysover 2 years ago
Fun with flags.<p><a href="https:&#x2F;&#x2F;youtu.be&#x2F;_e8PGPrPlwA" rel="nofollow">https:&#x2F;&#x2F;youtu.be&#x2F;_e8PGPrPlwA</a>
gdsdfeover 2 years ago
there might be a bug in there, I&#x27;m clicking a country and it says you clicked another country my mistake
FatActorover 2 years ago
It says &quot;Learn the flags...&quot;<p>But doesn&#x27;t give me the correct answer when I&#x27;m wrong, so I can&#x27;t learn.
评论 #34520271 未加载
ggopover 2 years ago
Great game. One suggestion is to present fake flags as another toggle. Helps spot real vs fake flags
xupybdover 2 years ago
What a stunning project, it&#x27;s beyond a beginner result. It&#x27;s polished and fun to play.<p>Excellent work!
Symbioteover 2 years ago
I had a whole series in alphabetical order by ISO 3166 code, which made that section easier.
x-complexityover 2 years ago
Oh boy, this takes me back to Playfish&#x27;s Geo Challenge. Man, that game was fun...
anonairover 2 years ago
There should be a reverse version also, with a nation in top and choose a flag below
评论 #34523443 未加载
sedatkover 2 years ago
Very nice. The text goes out of the page on Zoom levels above 100% though.
greenpeasover 2 years ago
The image for the flag of Micronesia (.&#x2F;flags&#x2F;fm.png) is missing.
评论 #34519418 未加载
MattyMcover 2 years ago
Fabulous job! Love the scrolling background and the cute buttons!
themoonisacheesover 2 years ago
Love it, absolutely love the scrollable earth behind as well!
评论 #34525538 未加载
mayormcmattover 2 years ago
Thanks, I need&#x2F;want to learn more flags! Great project.
mkoryakover 2 years ago
this is pretty cool. I think you have a big opportunity here to have an easter egg if you detect someone holding down a number key for over 10 seconds as I did.
评论 #34519473 未加载
intelVISAover 2 years ago
Nice! Quite fun, hope you keep building things :)
评论 #34519467 未加载
HanClintoover 2 years ago
This is really really well done! Awesome work!
评论 #34519958 未加载
komeover 2 years ago
cool, well done!<p>but it doesn&#x27;t fit my screen size. Perhaps you need to fix this, i&#x27;m not the only one here with this problem.
评论 #34519379 未加载
quickthrower2over 2 years ago
Nice, reminds me of kahoot
flyinglizardover 2 years ago
This needs a leaderboard!
Georgelementalover 2 years ago
Be wary of <a href="https:&#x2F;&#x2F;xkcd.com&#x2F;787&#x2F;" rel="nofollow">https:&#x2F;&#x2F;xkcd.com&#x2F;787&#x2F;</a> … People can get worked up over what is a &quot;real&quot; country, and what the &quot;real&quot; flags are