Random Quote Machine - Feedback - Suggestions

I think I am open for some suggestions for the random quote machine. It’s intended to be working on a fullscreen one page set up. I would like to change the color of the iframe of the tweet section and I would like to change the size of the tweet button. But unfortunately I could not see how I could do it easy.

On that part of the topic I would like some suggestions. If you see some flaws in my code or some other things which are not clear to you, ask them or give suggestions:)

Thank you!

Mh, I think you should try to make something with that button container: the absolute position mess things up ( I guess that’s the reason behind the fullscreen specs ). Taking a look around i saw a display:flex, which is the good direction; you can even think about position:relative, anyway try to keep separate quotes and buttons^^
Another suggest I think it could be helpful: the font of the quote and even more the font of the author conflict a bit with the tiny, standard font of the buttons.
One last thing: once happened that the background was of the same colour of the quote section and everything visually melted together ^^

@Layer You are right, the reason for fullscreen specs is that I couldn’t get things in the right direction.

I have reorganized the dom and adjusted the css. So it should be somewhat responsive to different hardware/computer software.

The problem still exists that when you make the window of the screen less high things get messed around. It has to do with how I position the dom/css and how the screen hight then gets I believe.

I readjusted the size of the font for the quote so it should be less of a conflict. But I am open to resources where I could find some information about adjusting the iframe tweet button. I would like to adjust the color, the size and the font-type of it.

When I am able to adjust that color I could make the box a random color that is inverse of the outerbox color and adjust all the colors accordingly unfortunately I am not able to do it yet. But I am open to suggestions.

I am having trouble inserting the twitter button. Can you give me a link on how I can solve this?

@bradrar1 https://dev.twitter.com/web/tweet-button From sites like that. Don’t know anymore the correct site.

Thank you for the link,

Last question. did you solve “how the twitter button automatically tweet the quotes” on your own or did you learn it from some site? This really gave me a hard time. Would you like to see my code? https://codepen.io/bradrar1/pen/mLwWeP .
It’s not responsive though.

To be honest. The basic javascript I got from this site during a tutorial. I googled for some random json quote machine and implemented it in the javascript. Then I had to get around a corse problem which I solved from stackoverflow. The hexidecimal random color generator I got from some random site. It looked convenient for me.

And the tweet button things I figured out in the api of the tweets. Tried different things.

But I am still learning so If I want to do something I google it and then try to implement a stackoverflow solution.

Your quote machine is just random quotes hardcoded in the site. There exists random json quote machines around the internet, just google it. And try to implement it.

For the DOM you want to have the position of the parent dom relative and the dom of the children absolute to the parent dom I believe but I am not so sure, there I struggle a bit.

1 Like

Here few suggestion:

  • Twitter icon: At the moment I can’t see the twitter icon on your pen, but I read something about the iframe stuff…that’s the same tunnel I went in when i faced this challenge…to use it you should have a key to use twitter API and other things…
    It could be helpful to have a look here:
    font-awesome - twitter icon
    Using this resource allow you to use a good-looking twitter icon that can be wrapped in a anchor tag linked to twitter app ( here you can find some documentation: Twitter web intent

  • Positioning: Here a helpful link to dig a bit into the elements flow in a page: MDN Docs - positioning

Thank you for your suggestions. As far as I could see the example project is also not fully responsive. Since I didn’t want a changing new quote button neither a changing twitter button with its position. And setting the dom up so I did I don’t get a fully responsive website thing.

I have included the twitter awesome font and now I am able to change the colors somewhat random. Sometimes some of the settings get things glued together.

Also implemented a feature that doesn’t make quotes longer than the tweet function allows us.

@Layer Thank you for your suggestions once again. I reorganized the html(dom) and reorganized the css. On some specific points I placed the most important css rule at top of the other ones for an element. It results there in that the font size changes with the length of the text. This fixes my issues sort of. Also with long text it doesn’t override my buttons anymore on my computer and with the dev tools for some smartphones it works as well I think.

And now everything seems to be responsive as well with relatively fixed position of the new quote and tweet button.

The only thing I have to look into is sort of getting the right contrast on my page. This could be done with some filtering or mix blend modes. But it seems to be tricky. Don’t understand it yet.

1 Like