Random quote machine feedback using react

Link - https://sxnaprkhr.github.io/random-quote-machine/
Code - https://github.com/sxnaprkhr/random-quote-machine

I didn’t add the background transition because I’ve still got to learn that ReactTransitions

1 Like

MY EYES!!! :confounded: You gotta change that color bud. Also would be nice if the box stayed the same size, the button keeps jumping away :slight_smile:

You should also use pointer cursor for the button and clickable elements by using the cursor property in css.

@yousef_040 @ezfuse @camperextraordinaire
Yeah will change that minor css things for now but I wanted reviews about the actual javascript code if it was spaghetti or not.

The language percentage on github doesn’t show css percentage, anything wrong with that structure?

The design is pretty good. I’m really bad at CSS. How can you center the quote container vertically? Any good resources? I’ve read several articles for some issues I faced but I still don’t understand how alignment works so most of the time I only copied it. Should I re-learn CSS?

It seems the random algorithm is similar to me. It never gets the same quote consecutively, but in my app, sometimes I get the same quote. Does number of quotes available affect the randomness? Because I made my own array of quotes and there are only seven quotes.

I was also in a similar situation as you are of now. I was really bad at CSS, like really BAD. The main reason was that I was moving way too fast in web development. I did all the important things that one must learn in CSS but never implemented many of them like I heard of flexbox and grid for alignment, learned them in a day but never used in any actual CSS code for alignment of different elements. I would say rather than learning from a ton of resources, start building something and then asking people for reviews like on this platform which is very good or on any slack groups. It would really help you.

For vertically centering the container, the CSS code is as follows:

.parent-div {
min-height:100vh;                //describing the min-height of the parent div
display:flex;                    //simply applying flexbox
flex-direction:column;           //setting flex-direction to be col
justify-content:center;          // aligning items on the main axis at center
align-items:center;              // aligning items on the axis other than main axis at the center which will make the child-div at the vertically and horizontally center