#3 of 25 Beginner Projects -  HTML, CSS, & JavaScript - Random Quote Generator ( Responsive Design )

#3 of 25 Beginner Projects - HTML, CSS, & JavaScript - Random Quote Generator ( Responsive Design )

Web Dev Tutorials

3 года назад

35,822 Просмотров

How to build an HTML random quote generator app from scratch using JavaScript? In this project we create a program that generates random quotes on the click of a button. To solve this problem, we create a dictionary. We use the authors as the keys and the quotes as the values. We grab a random key and generate the quote associated with that key.

Try it before your build it ( Hosted with GitHub Pages):
https://miguelznunez.github.io/Random-Quote-Generator/

GitHub Repository ( Don't forget to star !):
https://github.com/miguelznunez/Random-Quote-Generator.git

Sponsor me on GitHub!
https://github.com/sponsors/miguelznunez

Follow my blog:
https://medium.com/@miguelznunez

Email : [email protected]
Medium : https://medium.com/@miguelznunez
Codepen : https://codepen.io/miguelznunez
GitHub : https://github.com/miguelznunez

Тэги:

#get_a_new_quote_on_click_of_button_javascript #change_quote_on_button_click_javascript #click_a_button_and_get_a_random_quote_javascript #generate_a_random_quote_on_click_of_button_javascript #generate_random_quotes_javascript #random_quote_generator_project_javascript #how_to_create_a_random_quote_generator_project_javascript_html_css
Ссылки и html тэги не поддерживаются


Комментарии:

Clifford John Balquin
Clifford John Balquin - 24.10.2023 12:47

thanks man

Ответить
Ma Puot
Ma Puot - 05.10.2023 19:15

Great!Thank you. Can you let me know why do you have div and then another div inside the first div. What is the purpose of it? Thank you

Ответить
Fariz Şirbidov
Fariz Şirbidov - 04.10.2023 08:57

Good

Ответить
Hassan Syed
Hassan Syed - 21.09.2023 22:20

Hey Miguel,
Firstly, thank you so much for creating these. It's really helpful for people trying to put the pieces together after taking the beginner course for JS.

When it comes to JS, I am mainly having trouble understanding as to what I should be thinking about next while writing the JS logic.

For example, as you are writing the logic, you have a clear understanding of what you need next to code the feature you want to make. This could be as little as putting a 0 inside a square bracket [0], all the way to writing dot notation and choosing a specific method.

I just need a word by word breakdown as to WHY you're thinking what you're thinking and how you come to the conclusion of what you're writing next.

Ответить
Grand_ Master
Grand_ Master - 18.09.2023 02:45

Not working errors everywhere

Ответить
Jahshi
Jahshi - 01.09.2023 21:02

I somehow managed to screw up my function call in index.html file. I called onClick=“generate” instead of onClick=“generate()”
I will not forget that ever again!

Ответить
1000subs with no video
1000subs with no video - 21.06.2023 22:09

Hey bro, I am also a content coder creator. Plzz tell me that how yiu put that last ending video with specific name

Ответить
Cat Woman
Cat Woman - 12.06.2023 09:55

Thank you so much! This is a really interesting project!

Ответить
2nci el krom malzeme
2nci el krom malzeme - 08.06.2023 22:34

did you forget especialy the generate button.. in css

Ответить
D i l i g e n t i u s
D i l i g e n t i u s - 03.05.2023 02:25

how do I make the button closer to the author name? The way it's outside of the first container feels off, any solution?

Ответить
Hatem Darghouth
Hatem Darghouth - 01.05.2023 17:44

Thanks bro, i've been looking for videos like this in a while, very helpful with great explanation

Ответить
harun amin
harun amin - 13.04.2023 05:10

THANK YOU SO USEFUL PLEASE DO MORE JAVASCRIPT PROJECT

Ответить
Gian Santos
Gian Santos - 12.04.2023 08:08

Alot of my mistakes are Typo and comma that was suppose to be there. But checking inspect and errors that shows, you can troubleshoot it.

Thanks a lot!!!

Ответить
Muhammed_77
Muhammed_77 - 25.03.2023 12:49

Thank u bro, these videos help me a lot.

Ответить
Pesimistic Peep
Pesimistic Peep - 13.02.2023 10:14

actually i watched ur first video about button and doublechecked this video too for why i was getting error and why it was not generating quote i rewrote button code then i noticed something wrong in javascript when we called function name Generate i had accidently wrote function Genereate instead of function Generate so thats why it was not generating quote for me i fixed that and button works properly now

Ответить
THISIZAVIAN
THISIZAVIAN - 01.02.2023 00:37

I keep getting: (index):21 Uncaught ReferenceError: generate is not defined
at HTMLButtonElement.onclick

Ответить
Arthab Hunter
Arthab Hunter - 22.01.2023 11:13

please make a video on js how does this dom work how did u really acces in html using js ... plz make a video in which u clear my confusion

Ответить
Arthab Hunter
Arthab Hunter - 22.01.2023 11:08

i didnt understood and confuse == when you give a varaible name same which you use in html .. and comming to javascript does javascript look it as a key and goes to html or js define its a random var .. for eg( when you declare a function like onclick =" myfunction()' and u come to js a write myfunction() and here u go u acces the html so i am confuse ) i think it will be difficulty for u to understand my english .. cause i am from nepal and its also hard for us to talk in english.... but i have this dought and please try hard to understand what i am questioning ..

Ответить
Danny Lopez
Danny Lopez - 10.01.2023 02:02

When I click the button it doesn’t say the quotes it says Undefined [objects HTMLHEADINGElement] Any tips on fix this issue ?

Ответить