My Random Quote Machine- Project Feedback

Project Feedback
#1

Hello, i just finished and am happy to introduce you to My Random Quote Machine Project and would love to hear some opinions and suggestions. I mostly kept things simple while trying to use different skills i was introduced by the curriculum so far.

This is my first project where i get the chance to use JS and manipulate my HTML and CSS code and it was really exciting.
It uses jQuery for the majority of the code. There were some Bootstrap and Sass functionalities i tried to utilize, but then reverted, seeing they dont justify their use other then me becoming familiar with them. For example i started with Sass variables, but you cant rely on them for making the document responsive, the way regular css variables do.
I used some Font Awesome icons and also tried to implement some basic animation along the on click functions, but thats something ill need to improve for future.
I also used the chance to get more familiar with the CSS grid pattern, which i havent in the past(i prefered flex a lot more), altho it wasnt appropriate approach for this project.

1 Like
#2

From someone who hasn’t learned JS yet, it looks great! I like how the color changes each time a new quote is generated. I have one question though, after a new quote is generated everything inside the main div fades out and fades back in. Is that intentional?

#3

Congrats on finishing your first project! Overall this looks very good but I do have a few suggestions:

  • The URL for your twitter link is href="twitter.com/intent/tweet". You need to add https:// to the beginning of that. Leaving it off means your browswer will treat it as relative the current URL.
  • You might consider using the <blockquote> tag for the quote, or even wrap the whole thing in a <figure>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
  • Just curious why you shift the buttons above the quote on narrow view ports?
  • Concerning your JS, naming a function n is probably not a good idea. And then you did it again inside of the colorGen function. I would recommend you create one generic random number generating function and then pass in the max value to that function.
  • Also, I’m old, so maybe I’m just not cool any more (if I ever was) but I don’t like this trend of not using semi-colons.
1 Like
#4

but semicolons are optional for Javascript, still i think it is a good idea to use them anyway :+1:

#5

You youngins go ahead and keep dropping those semicolons. It provides me a good chuckle when you eventually get burned by it. We oldies need all the laughs we can get :slight_smile:

2 Likes
#6

Haha… that’s true.

When I first started learning javascript I barely used semicolons because javascript didn’t yell at me for not using them.

But when I learned C in cs50, I would always get compile errors all for missing semicolons.

So I learned the lesson the hard way :sweat_smile:

#7

Hi @Sylvant!

I think your project looks good.

The colors are nice and I think you did a good job with the javascript.

Have fun with the markdown previewer!

#8

Love the warcraft theme!

1 Like
#9

Hello, thanks for your feedback and looking at my code so thoroughly!
I did not know about the blockquote tag and was oblivious about the http absence.

I decided to move the buttons for smaller screens on the top, because i find this to be more convenient for phone users, where the content of the block might go down and the buttons can become hidden(in case of larger quote) so that way the buttons should be always visible regardless. This wont be a concern on large screens. Also i wanted to utilize the grid potential.
I did allow myself to use n for name, knowing my code wont be large and i should be able to keep track of things and not mess up something regarding local and global variables. I like the idea of actually making the random number function accept different parameters. Was thinking to do something similar with the hsl color generator and pass on default parameters, but decided it would be a stretch.
Regarding semicolons i used to be very strict regarding them and some punctuations in general, but then i realize code editors doesnt require them and after i was introduced to the ES6 simplified syntax, i adopted this approach to try and simplify wherever possible, to make code look more collected. Occasionally id utilize semicolons when i want to fit few pieces of short code in one line. Well i still havent set my mind if i wanna be strict with semicolons or not(and other style variations regarding writing my code).

#10

Hello Jalal, i strongly suggest you reach the JS curriculum and have fun in bringing logic in your page code :slight_smile:
Yes, the fade animation was intentional choice, altho also product by the lack of experience making a better effect. I wanted to include some animation in my page and this was what i came up without spending too long exploring other options.

#11

Thanks!
So far the markdown previewer seems a party-killer lol; im having trouble grasping the concept and how to bring it to live

#12

Nice quote generator, loved the Warcraft quotes !!

#13

Reviewing this lesson should help

#14

the react foundation is not my issue. I was able to make the skeleton for the project(i was actually hoping the do it in jquery, but im having issues updating the page content without refreshing it).
What bugged me was what markdown is and how to implement its ‘compilers’(?!) in my project. Apparently its some sort of formatting language.
In the end i was able figure out how to add a markdown compiler and after trying a few which codepen offered, i set on the one used by the example project and copied some of its functionalities(was some research regarding that scary dangerouslySetInnerHTML and other stuff).
Now im having headache from trying to manipulate my page appearance, where the textarea seem to have its own idea how to look, as well as the the other front-end frameworks and its a mess :wink: