Let's discuss your "Random Quote Machine"

Code Feedback
643

Hey guys check out my project please. I used quotes from a Game of Thrones API. The hardest part of this project for me is to understand the documentation of API. I had to study a bunch of random quote machines examples to have a sense of what to incorporate quotes with Ajax. Also, looking up each social media’s sharing button is quite exhausting. I think I’ll probably come back to this project to copy the codes next time I need it. Anyway, I had fun with this project! I’m also open to any comment and feedbacks!. Thanks
Project Link -https://codepen.io/zhoujr/pen/EwGbGX

644

Project Link - https://codepen.io/mdrisk/full/pWMwOd/

Tried using flex boxes with this, no dice on the tumble section.

645

Project Link - https://codepen.io/remeklavya/pen/gGyRBX

Please provide any feedback on how to build this smarter

646

I’m finally finished. Hopefully I got rid of all the little errors in detail too.
Tried to achieve similar effect as the example pen and I think I got pretty close.
Had to definitely peek over the code for the AJAX portion as I feel that wasn’t touched on very well.

What do you guys think? Any and all feedback is appreciated.

647

Project Link: https://codepen.io/roshankharel/full/RjPWRj

feedback needed!!! :grinning:

Here is my thread for more details

2 Likes
648

Project => https://jolav.me/freecodecamp/old/front-end/quote/quote.html

Feedback welcome

649

Project Link - https://codepen.io/JonathanBnn/pen/WXQzJY

Had to study AJAX and APIs on my own, I feel that there is a before and after “Random Quote Machines”, the project wasn’t important per se, what mattered was to find out how to get there and test my resilience. I was so happy when it worked! :slight_smile:

650

Here’s my Random Quote Machine https://codepen.io/rinem/full/xPwEWY/
I didn’t use any API , I was just trying to make it more responsive. Will try to add API once I finish other projects.
Feedback would be appreciated.

651

I did it!! Can’t believe that was so frustrating.
Any feedback will be appreciated:

652

I like it! Looks really neat and professional :))

653

Project Link - https://codepen.io/galexynye/full/eemEaj/

:slight_smile:

654

  • Love the styling, especially the oversized ”. Font/color combination is beautiful, too.

  • The first quote the user sees isn’t random; it’s hard-coded into the HTML. Might be better to call getNewQuote() on page load as well as in the click handler.

  • Your hard-coded quote has “—” before the author name, but none of your generated quotes do. If you want to use it, you could either concatenate in the JS or use a ::before pseudo-element in your CSS.

  • The hover effect on the button is a little weird/unnatural (changes the button’s silhouette), due to using outline rather than border. I’m guessing you did this to avoid the buttons moving on the page when hovered.

    It looks like there’s no standard way to do outline-radius in CSS, so the simplest fix is to change outline to border and then add a border: 1px solid transparent to the non-hovered elements.

  • Consider giving the user some form of feedback while the quote is being fetched. If there’s no feedback, the user clicks the button and nothing appears to happen for a short while, making them doubt whether their action was registered.

  • Nice, slick, and very colorful implementation.
  • Bear in mind that quotes are text, and text should be readable. There are two things that are hindering this at the moment:
    • Some of your colors are too bright. For accessibility, you want to be aiming for at least an AA rating (preferably AAA) on here: WebAIM: Contrast Checker
    • The animations are distracting and prevent the user from reading the quote while they run. Consider using something more subtle (fade in or slide in, same effect each time).
655

thanks for the feedback!! Great resource, didn’t know about that. I changed the background to black and adjusted the animation. https://codepen.io/galexynye/full/EbKwwQ/ There is a problem I can’t seem to figure out though with animate.css. It doesn’t seem like it is possible to retrigger the same animation with the removeClass and then addClass in jquery. Right now, I just have it toggling to do it every other time. If you or anyone out there has any ideas to do the same animation on every button click, I would loved to hear them!

656

Yeah, that’s much better.

I actually just made a color randomizer that randomizes the red, green, and blue values and always returns a combination compliant with the specified WCAG level.

This is because the JS code finishes executing before the CSS even gets a look in, so the CSS is never aware that a class has been added or removed.

A simple fix is to make it asynchronous with setTimeout(). Even setting a timeout of 0 is enough to force JS to execute it on a new thread, so CSS becomes aware that the class has been removed before it’s added again.

657

Hey there, I worked really hard on this app to make it fluid, smooth and responsive with a mixture of jQuery and CSS animations. I’ve noticed that CSS animations are a little buggy on mobile, especially old mobiles, but jquery animations seem to stay consistent. Anyway, I put a lot of the effort into styling. I’d like to know, for modern web apps is it more important to be feature rich with little animations and styling for performance purposes or to keep it as simple and slick as possible at the cost of less features. Here is my random quote machine.

1 Like
658

Here is my quote machine. If anyone could tell me how to get rid of the gray button border around the button I would love you forever. https://codepen.io/keither/full/PONWwz/

Feedback is appreciated.

Cheers :beers:

edit: I fixed the border. “border: none;” …duh

1 Like
659

here is my responsive quote machine

any feedback is much appreciated.

660

Color randomizer looks great, using the RGB values really let’s you randomizes things. Thanks a bunch for the setTimeout function! :slight_smile: That worked, I did have to set the time to at least 150 to still see the animation work, the faster the timeout the faster the animation runs in animate.css I guess. :man_shrugging:

661

If you take a look at the animate.css source, you’ll see that all the animations are set to run for 1s; setting timeouts in JS won’t affect that (all it affects is how long before the animation starts).

If it’s not working with a timeout of 0, I’m guessing it’s an implementation detail of different browsers.

This (closed) issue looks relevant:

662

Can someone please explain why I can’t properly mimic this exercise in CodePen? Clicking the button has no response, and the code is pulled exactly from here. JQuery and JQuery UI have been added to Javascript.

The jQuery in my Random Quote Machine was not displaying the quotes, and I’ve isolated the problem to something CodePen related…

Thank you!