Feedback Requested

Code Feedback
1

I spent WAAAAAYYYYY too much time on this. I had a really great plan for how this would work but the final result is a little meh.

Random Quote Machine

How this works

  • Apply a different CSS typographic treatment based on the quote that is generated
  • If the quote is short, use treatment 4
  • Break the quote into 5 lines. Two lines are only one word. This is to demonstrate the Hatchshow and the dynamic font size algorithm
    Otherwise randomly choose the font style based on 3 other options

This didn’t turn our nearly as cool as I had planned but it’s time to move on. Any feedback would be appreciated!!

Thanks.

2

Hi,

Congratulations for having finished the challenge ! I know that it isn’t always easy nor goes as planned.

It’s a good idea to randomly customize each quote. However, the font you use should be selected cautiously. Why ? The quote that start with “Suppose I showed you two rooms …”. It is difficult to read the quote when displayed with the font “Monsieur La Doulaise”.

Except that, nicely done.

3

Very nice. The variety adds a great deal of visual interest to the app and was a super cool idea. There were some readability issues for me, though. The first is simply with Monsieur La Doulaise (I’ve never been able to read blocs of handwritten fonts), and the other was when I got a black background with black font. I agree that you ought to move on, but I would encourage you to implement a way of displaying the content without reloading the entire page. This is important not only because of the doors it will open to you for future projects, but because it’s something employers will expect someone with your portfolio to know.

4

Your twitter button doesn’t actually function to tweet the quote… it just has a link to your pen. Take a look at the parameters you can pass here to see how you can get it working properly.

5

Thank you for the feedback. I agree “Monsieur La Doulaise” was a bad choice.

6

I have a question about not reloading the page. I agree that this not best practice. I’m pulling the quote from an API. I’m not sure how the user could load a new quote without the site calling the API and refreshing the page. Any direction you could give would be very appreciated.

7

Good catch. I will fix that.

8

This is actually what AJAX is all about. In the callback for you AJAX function, clear out the HTML you’re not using anymore:

$('.some-element').html('');

and then fill it with the new data

$('.some-element').html(data.quote);

In your case, you’ll also want to change the background color and add/remove some classes. You’ll want the jQuery docs.

1 Like
9

Congrats on the build. My only “critique” would be in regards to some of the styling on the darker pages and lettering. There is little contrast between the two and this makes it difficult to read about every third or fourth generated quote. Best of Luck!

10

Ok. I think it’s working properly now. The twitter-share-button doesn’t show up for me. However, after researching on stack overflow, it may be due to my firewall settings.

11

OMG I think I got it working!!! My code is a MESS!! I’m going to clean that up now.