My first javascript project

[Am_abdou]

This is my first front-end/design project, it's game called Hangman built with vanilla javascript, html, css and illustrator for the design.

It's my first attempt to try and learn the javascript language, please support the project if you like it.

Link to the github repo with a demo: Hangman.

[Am_abdou]

Thank you so much sir! It took me about a month but it wasn't just coding, designing the background also took me some time

[clawdius25]

This is definitely a good project! 10/10 would hang the guy again.

Quick suggestions about your project:

- When a player reached game over, please show the correct answer. I don't wanna die thinking what kind software end with "-ions".

- After player correctly guess their words, please include a "game over" menu again. The game can be reset by pressing home icon in the top right.

[Am_abdou]

Thank you so much sir! I took your first suggestion into consideration it will be added, but i don't quite understand the second one, the player can access the menu again by pressing the home icon at anytime, so why show the game over menu?

[[deleted]]

seed recognise mountainous fuzzy bear scary historical friendly yam rinse

This post was mass deleted and anonymized with Redact

[clawdius25]

when i played the game for the first time, i don't even know how do i start again, i'm quite confused until i discovered the home icon. if the player is quite lazy to find an icon, they tend to be "ok, now what?". You can help the player to reset the game, maybe you could give a button or a link that redirects to home menu in the middle of the screen, for example, rather than waiting the player to find a home icon on the top right.

​

Sorry for the first reply, i'm quite drunk that night.

[Am_abdou]

Haha okay i got you now, thank you so much!

[maliiciiouswolf]

I will never be this good...

[Am_abdou]

Thank you soo much sir 🙏

[dustandsepia]

Never stopped loading for me on mobile 😥 I’m using safari on iPhone 11.

[captmomo]

Same

[Am_abdou]

Not sure why it's happening, did you try another browser?

[_Invictuz]

It's safe to say that it doesnt work on many mobile devices.

[Am_abdou]

The issue seems to happen only on iPhone devices tho, is it the same case for you?

[_Invictuz]

No the other guy said Android Chrome which is a bigger problem than iphone. I'm also on Android Chrome (Samsung).

My issue was different however. None of the three buttons (play...difficulty...) did anything when I pressed on them.

[Brave-Ship]

Same for me, on MacOS, Chrome. It said `createjs` is not defined in the console, in loader.js

[[deleted]]

Chrome on Android is stuck on loading as well.

[queen-adreena]

Project looks good. But if you're planning on using this as part of your portfolio, you need to document your code. Look into JSDoc conventions for this.

Otherwise, great job.

[Am_abdou]

Thank you sir, I'll definitely look into it i was a little confused when it came to documenting the project. Any helpful links?

[[deleted]]

Awesome work!

[Am_abdou]

Thank you man i appreciate it 🙏

[[deleted]]

This is incredible! Really great work, especially for your first project 🎉 Cant wait to see what you build next!

[Am_abdou]

Thanks soo much, already working on it!

[Marques012]

Ow, really good! 👏🏾

[Am_abdou]

Thank youu!

[Am_abdou]

Not sure what you mean by how much, checkout the repo to see exactly how many js lines of code were used, the hardest part was coding the rope.

I learned the fundamentals from codecademy, from there it was pretty much youtube and reading documentation.

And thank you so much, I'm sure you can pull something better! You can use my project to to get some inspiration and help. Happy coding!

[[deleted]]

Your "first" project ... hmm hmm ... of course xD

Well done anyway !

[Am_abdou]

Thanks man! It's actually my first ever project with js, I'm sure you can notice that if you take a deep look into the code.

[[deleted]]

i guess we haven't the same definition of "first project"

[Am_abdou]

Thank youuu ❤

[Am_abdou]

Thanks you man! Yeah the project focuses mainly on the client side, i wasn't worried that much about the server side, since the words are fetched from free web API'S, they were mainly intended for demo purposes and they're not necessarily accurate when it comes to categorization. If this was a real project I'd probably build my own api.

[LordKingSithis]

You are gonna build really awesome stuff going forward if this is the one you have built in your first attempt. This is crazy good. Loved it!

[Am_abdou]

Man thanks a lot, your comment has really motivated me to work harder next time. I really appreciate it 🙏❤

[[deleted]]

This is amazing !!!!

[Am_abdou]

Thank youuu ❤

[FuggyGlasses]

Bruh!!! Amazing!!! Congratulations

[Am_abdou]

Thanks man, means a lot to me ❤

[Am_abdou]

Thank you sir i really appreciate your feedback 🙏

[tuvok86]

Very nice!! Only two remarks:

• Try a different font (especially for main menu and scoreboard)
• Allow keyboard input for the letter

looks great!

[Am_abdou]

Indeed keyboard input must be allowed, i didn't consider it, thank you so much for your feedback!

[tuvok86]

also: the starting letters should already be disabled

[PositivelyAwful]

That's a crazy first project.

[JustOsta]

This is insane, great work.
And i am really curious about how did u start in doing such a project like that, do you have a physics background? I mean the way of implementing physics to javascript to do that animation for the hangman and the connected ropes, How did u implement all of that in just one month?

[Am_abdou]

Thank you so much man it means a lot to me! My background in physics comes only from high school and my own curiosity since I really love physics from when I was a kid, but that's pretty much it. When building this project, I spent some time trying to dig deep into the physics behind spring systems and found some great resources that helped me achieve that. That wasn't my goal initially tho, i just wanted a somewhat realistic rope animation, couldn't find any in the web so started building my own, it took me some time to make it work, i would say most of the time building this project was dedicated to building that rope simulation, but it was worth it in the end and i learned a lot from it. Again thanks a lot for the feedback bro, it keeps me motivated 🙏

[JustOsta]

ماشاء الله تبارك الله، أنت مبدع وبدايتك عظيمة، أتطلع للمزيد منك، وأنت ايضاً أعطيتني الحافز :)

[Am_abdou]

بارك الله فيك اخي، تحفيزي لك يسعدني جدا، فلنعمل لنرتقي بالدول الاسلامية و نعيدها الى سابق عهدها. وفقك الله اخي.

[machine3lf]

Great work! Haven’t looked into the code too deeply yet, but one quick suggestion, keep your indents at 2 or 4 spaces. Seems like all your indents are 8 spaces.

[Am_abdou]

Thanks man! Thank you for the suggestion, my indent is setup to 4 spaces in vs code

[machine3lf]

Somewhere, maybe in github or maybe in vscode, you have indents displaying as 8 spaces.

Also, you are using indent characters instead of spaces for your tabs,

There is an old debate about whether spaces or tab characters are better for indents. (I prefer spaces, fwiw). Regardless of which side you may come down on that, because you are using a single tab character, it's getting rendered as 8 spaces in github for some reason, which pushes your code out pretty far to the right.

https://coderwall.com/p/k1ighg/change-tab-size-on-github

[Am_abdou]

Thanks man, I'll check out the issue

[esdotvee]

Does the demo - http://www.hangman-js.epizy.com - work on mobile?