My First Jquery project- Random Quote Machine

Hello Seniors and Friends,
From today I started Front End Library projects. This is my first day project with Jquery. As this is the first time I wrote Jquery, Can you please advice me, the proper way to write Jquery codes? Here is the link of my Random Quote Project, I did it, but I am not sure about the way to write the code. Please advice me.

and one more thing, I am not able to remove the small dash in front of twitter icon.
Thank you.

The dash in front of the twitter icon comes from the following line:

 <a href="'.$page_link.'" target="_blank"><i class="fab fa-facebook-square"></i> </a>

Since you have a space in between the icon and the end of the anchor text, the underscore shows up. Just remove the space and it will no longer be seen.

1 Like

You can fix the dash by setting the icons <a> container to display: inline-block.

For the CSS:

  • I would remove the default margin on the body and give .r-q-project-wrapper height: 100vh.

  • Give the #quote-box a max-width instead of percentage width (say max-width: 760px) and some padding as well (like 20px).

  • Remove the width 100% on #social-share-new-quote-btn and use align-items: center on it. Then fix the button by giving it some padding.

For the JS:

  • First off you should declare all the variables inside the click handler. You can use const for all your variables.

  • I might suggest using an array of objects so you have the author and quote inside the same object, instead of using two different arrays.

  • Wrap all the code inside a document ready handler.

  • You might also “cache” (i.e. save) the selectors outside the click handler so you do not query the DOM more than needed.

1 Like

@RandellDawson Thank you very much sir. You are the one who always help me. I fixed it. I would love to get advice from you to write this in professional way. Sorry, I am little greedy to know. Thank you, the problem that i state is fixed now.

Thanks lots.

@lasjorg Thank you very much. I will try to do it and after done, I will let you check this again. Thank you very much.