My FCC programmers quote machine project - cyberpunk design

Hi here is my project [http://codepen.io/MarkoStefanovic/full/RGpjNQ/]
Should done code clean up, but left that for later.

  • I really tried hard for design, it has lots of subtle animations, should be something like cyberpunk theme.
  • All done in HTML, CSS an JS(no jQuery, no Bootstrap, no images)
  • It runs great in firefox, but some minor issues in chrome, opera and IE(will fix that later).
  • Your monitor is not broken its the background animations :slight_smile:
  • Any feedback from you is appriciated
13 Likes

Brilliant!! Tweet it to codepen, vet they will feature it!

This is the best I could ever see. :smiley: It must definitely be featured on Codepen as @AdventureBear said.

Unbelievably cool! Minor thing though: The tweet button doesn’t seem to work as you intended (running Chrome here). I get a twitter input field with only the URL, the quote seems to be missing.

1 Like

Hands down the most creative I’ve ever seen, and I’m not just some guy.

Best one yet. I think I went through every quote twice. :thumbsup:

Great work…very well done

Wow, it’s super cool and indeed has cyberpunk feeling.

To tell the truth background feels a bit hard on eyes with it’s animation if you look at it for longer time.

Really beautifully done!

Thanks friends,
@AdventureBear, @nawazishali will tweet it to codepen, never used twitter but opened today.
@sroelants fixed twitter button now works great.
@svmi3195 thanks for the info, I did lower alpha levels on background, and will try to make it more smoother.

Thanks again everyone, your comments and suggestions really means so much.
Updated project to version 1.1 :sunglasses:

@MarkoStefanovic
first of all aWsOmeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
and 2nd right now tweet option dont have quote authore name only the quote

Overall design is amazing and incredibly original. However it’s not very responsive, have to pinch and zoom all over the page to view the full quotes.

@mones-cse added author name in tweet, just to ask you because I just started using tweeter. When lets say a quote is larger than 140 characters is it practice to left user to short it and change it, or is it better to shorten it automatically with program?
@Joshuaswift I will work on responsiveness, can you tell me what browser are you using on mobile and does performance slows down, I am having some performance issues on my mobile.
Thanks for suggestions :smile:

I think the user should have the control besides if you change quote using the program it might represent miss leading information .

@MarkoStefanovic using chrome, but performance doesn’t slow down.

Very nice design! You may want to add reset button after “running out” of quotes :slight_smile:

Also look what happens when someone wants to tweet a quote with that sign: ".
Protip is encodeURIComponent :slight_smile:

What a creative approach! Looks very interesting, well done for going an extra mile to make it so interesting :+1:

I wonder myself how to go about with the quotes longer than 140 characters, because I would want to display only the quotes of that length, but so far I haven’t found a solution.

@GarrusNapp Thanks, yeah reset button good point, I will look into that bug and fix that, but when I finish twitch.tv app and done some design changes to weather app and wikipedia.

@Themalni glad you liked it, well you could just make user decide how he wants to shorten quote when he tweets and give him whole quote, or something like in truncate-a-string lesson look into that.