r/learnjavascript • • May 18 '21

Started learning JS when lockdowns started last year. Finally finished this project to control the traffic flow at home.

http://www.trafficsignal.io/
147 Upvotes

43 comments sorted by

30

u/Joseph_Skycrest May 18 '21

Really clean design! Just as a heads up, the mobile hamburger menu doesn’t seem to be working for me

8

u/kwar May 18 '21

Oh thanks, will clean that up. One of the features wanted to add is the ability to retrieve your link via email, so right now the navbar doesn't include any of it since I haven't deployed an email server yet.

7

u/zapembarcodes May 18 '21

Didn't work for me either.

I use the duckduckgo browser for mobile.

Btw, it is indeed,a very neat project. Congratulations. I just started coding 2 months ago, hopefully by the time I hit the 1 year mark I can make stuff like this.

1

u/tboi28 May 18 '21

Same for me. It might be that the text area is covering the menu.

13

u/Strikerzzs May 19 '21

Not sure what this is for or how it works. Could you explain?

11

u/kwar May 19 '21

It's effectively just a system to know whether I can go into the living room or not. Instead of texting or knocking, this way you just know when it's clear to enter someone's workspace or not.

8

u/SoBoredAtWork May 19 '21

I was confused too. It could use some more explanation on the home page.

1

u/Strikerzzs May 19 '21

Oh I see, so it's a system to prevent people in your home accidentally coming into your meeting video call, haha. That's cool! Good work!

2

u/ashkanahmadi May 19 '21

same! i had to come back here to look for an explanation. couldn't figure out what problem it's addressing and solving

3

u/JCrez May 18 '21

Hey this looks fantastic, love the clean look to it too. Do you fancy sharing some of the resources you learnt with? At least that way I have a mild chance of being successful ha!

9

u/kwar May 18 '21 edited May 19 '21

Thanks! I have a background in coding in C++/Python for context, though not as a professional developer.

Skimmed through one web development course on Udemy to pick up some of the flow. I wanted something that covered the basics of the MERN stack. From there I basically just learned on several websites where I needed some help. Surprisingly html/css was the hardest part for me since styling is either not easy or I have a hard time with it. MDN was super helpful here. My partner also helped me with a lot of the design aspects + styling since she is a lot better than me. Otherwise stackoverflow/reddit forums for when I get really stuck.

Think I answered this quite a bit scattered but hopefully this helps. If there's one tip I could give, is to get a good grasp on plain JS first before venturing out to any framework or library.

5

u/tanahtanah May 18 '21

How did you learn CSS? Did you practice a lot?

JavaScript is so much easier for me than CSS, by lightyears.

3

u/kwar May 19 '21

Yeah I feel the same way. I did use Bootstrap 5.0 for this which made things a bit easier, but generally for CSS I think I just don't have the design talent for it. Had lots of help there from my partner on the CSS front.

2

u/rados_a51 May 19 '21

Man, you can learn CSS in few days. What are you stuggle with?

2

u/tanahtanah May 19 '21

Yeah I know CSS and have used them sparingly but I don't have any idea to build a webpage from scratch, even if it's just a simple page.

2

u/rados_a51 May 19 '21

I guess you have to be a designer or have a design first. It would be much harder without it if you are just a coder. Two different worlds.

This is also why CSS frameworks and pre-made components exists.

2

u/tanahtanah May 19 '21

I don't have problem with CSS frameworks and I use bootcamp and tailwind extensively. It's just pure CSS that hard for me.

2

u/RealJamo May 19 '21

+1 on that. Being able to write the cleanest and best performaning CSS is not that helpful if you can't create good designs. I'd suggest to jump into a Layout software like figma.com (free) or Adobe XD whatever in order to learn what works and what looks good. Once you manage that AND your CSS skills are on point, you can create stunning pages in minutes. Just my experience :)

2

u/BedlamiteSeer May 19 '21

So what does it actually... Do? I'm having trouble finding information on what it's purpose is, how it works, etc.

1

u/kwar May 19 '21

It's effectively just a system to know whether I can go into the living room or not. Instead of texting or knocking, this way you just know when it's clear to enter someone's workspace or not.

2

u/BedlamiteSeer May 19 '21

Oh! Cool!! I love the design of the site, it looks good.

3

u/bwray_sd May 18 '21

I’ve been a full time JS dev for 3 years, did freelance for a few and still haven’t actually completed a single personal project, so huge congratulations on doing the (IMO) impossible 😂

2

u/kwar May 19 '21

Thank you! Just wanted to learn front-end. Surprisingly the largest struggle was in the HTML/CSS part and not learning JS.

2

u/[deleted] May 19 '21

Is it really possible to be hired without any projects to show? So many people make it out to be a hard requirement, so I'm genuinely interested.

3

u/bwray_sd May 19 '21

Well, I had completed projects from freelancing, just no “fun” or “personal” projects.

It is definitely possible! I was 98% self taught, I had some freelance experience, mainly small business brochure sites. I was having trouble getting hired so I went to a bootcamp, but it’s a non-profit, short, foundational program, nothing like lambda or anything. The main reason the bootcamp was beneficial was just because I don’t have a degree, it also helped that it gave me some SPA/modern framework experience.

Just keep having fun, don’t go out looking for an elite FAANG position, the company I work for is relatively small but very successful, 5 developers on the team (2 when I started), they didn’t even ask to see previous work in an interview, they asked questions about fundamentals and how I learn. I guess I prob got lucky, but the opportunities do exist! Just have to find a company that hires based on your willingness to learn.

1

u/[deleted] May 19 '21

That's both interesting and encouraging! Sounds like just like any occupation, sometimes the guy with less "experience" sometimes gets the job if he is the better go-getter!

Do you remember what some of the more difficult questions you got asked were?

And yes, I'm definitely big on willingness to learn. And not just for profit - learning JS just like any other programming is almost like learning magic to me, really fun and you can't wait to keep expanding your skills!

1

u/bwray_sd May 19 '21

That’s the exact same attitude I had.

Most of the questions they asked had to do with don manipulation and event handling in JS. They knew I had no experience with Vue in my interview so I think that’s why they didn’t ask framework specific questions.

My coworker says part of the reason i was hired was because I wasn’t afraid to say I didn’t know something rather than BS’ing. I would say “I’m not positive, but I believe it’s xyz”.

6

u/spinelust May 18 '21

Pretty useful if you are sharing the house.

1

u/sanampakuwal May 20 '21

URL in HTTP format is generated while clicking Get Traffic Light, You can enhance by making HTTPS.. it's secure.

1

u/kwar May 20 '21

Thank you. Someone also pointed that out that https://www.trafficsignal.io/ also works. I did not know myself!

2

u/smithm4949 May 19 '21

Looks pretty, doesn’t work on mobile at all. Main CTA and hamburger menu don’t work for me so I’m stuck. I assume you mean traffic metaphorically like internet traffic and it’s a schedule tool but I didn’t get further than that... congrats on your progress though! Looking forward to viewing the project when I can. Don’t be discouraged by bugs, take them in stride. They’ll happen all the time

2

u/MasterNorvilleRogers May 19 '21

lol is brilliant

2

u/17silencedogood52 May 19 '21

This is awesome! It is totally common for me to walk into room now with everyone studying/working from home only to awkwardly show up on their zoom cam in front of class. I also feel bad disrupting people when they are doing serious work only because I did not know know what they were doing. This is why programming exists - to engineer solutions that make life easier, safer, more productive, more advanced, etc. Really cool stuff and super inspiring! This made my day!

1

u/jojopadz May 18 '21

Looks awesome keep it up!

1

u/supperfield May 19 '21

Hmm, looks cool. But when I click "Get traffic light signals" on mobile, the page just reloads

1

u/thunderknox May 20 '21

wow you learned all this during lockdown? good on you im still learning javascript and feel hopeless , very good idea nice one

-1

u/asterik-x May 19 '21

Great !! Way to go !! Bye the way what is JS?

1

u/Strikerzzs May 19 '21

JS is short form of JavaScript

1

u/asterik-x May 19 '21

Gratebangon

0

u/[deleted] May 20 '21

[deleted]

1

u/kwar May 20 '21

Thank you! To be honest, didn't know it was possible.

2

u/sanampakuwal May 21 '21

No problem 🙂

You can learn more here: https://www.youtube.com/watch?v=hExRDVZHhig

1

u/sanampakuwal May 21 '21

By the way, HTTP and HTTPS stands for:

HTTP : Hypertext Transfer Protocol

HTTPS : Secure Hypertext Transfer Protocol