I have NEVER done anything with code before and followed along. The ONLY difference I had was for some reason my colored boxes around my headers were way wider than my text but I’m so happy I could even follow along. Thanks so much
I had the same issue! I think it may depend on the version of Bootstrap you put into your href. I had those really wide boxes too with v5.1.3 I switched it to the v4.6.1 link on the website and my boxes looked like the one in the video. Hope this helps someone!
Hi! I m really grateful for your tutorial ! But I wonder how can I make quotes to not repeat, so they show up only once . I am new to programming cuz I made this quote machine just as a small present for my bf.
How do i get this project saved as a link i can send to people? I myself can use the link from the quote generator in the video, but no one else i send it to can open the link or use it.
Such a clear tutorial thanks so much! I was wondering how I could now upload these files onto a Wix project so that this website could go live. Would be great if anyone could help
Not sure why you would want to add custom code like this to a wix site but here is a way to add custom code from the Wix Help center. support.wix.com/en/article/embedding-custom-code-to-your-site
Brilliant video, very clear and easy to follow for beginners as I am a total noob and don't know what any of this stuff means hahaha I have managed to get everything working up until the point of actually getting the quotes to randomly generate. Not sure what I have done wrong but I am going to keep playing around with it. Do you have any further videos/tutorials/resources to recommend to take this project further in terms of actually getting a random generator into a functioning website?
No specific name but you would probably make a for loop to cycle through everything. Give it a half second delay and use document.getElementById and innerHTML to show each quote as it cycles.
There is no big difference between the name and using the hex value. The only difference is using the hex value you can get an exact color. But also, in a professional environment you will NEVER use the name. Always the value. So I try to help you get used to that. Keep doing amazing things!
@@roshanaryal310 if you are a beginner then I'd suggest you to check the tutorial provided by the TH-cam channel "Telusko".There things are explain in a simple way ,may be you'll find it easy there ✌ Ps- this is not at all any paid promotion
did you use the right button class? btn-large I am going to remake this video soon with more current techniques so I don't really remember everything. Just rewatched so I can see the code. also if you want to adjust the sizing, add that to the css in the class of .new-qoute-button That should allow you to change it but I don't know what you could have done to make the button the same size as the header.
@@DThompsonDev thank you for the reply. I am not sure what I changed but it is a small button now, but I had to center it. Everything worked in vscode but did not transfer well to codepen. When I removed the information in the head section(codepen only wants what is in the body) that is when everything shifted and is no longer centered) . I must center the divs now. I guess I could call myself a developer now? haha
There must be 100 posts now by me saying.... " Did the tutorial up to this point 21:36 and the code is not working" Maybe washing dishes at Red Lobster is my future.
It's all good! That is the best part! Debugging and finding your own mistakes! That is what you will have to do a developer in the industry as well. Happens to the best of us! But you figured it out and that is an EXCELLENT win! Great job Christopher!
I have NEVER done anything with code before and followed along. The ONLY difference I had was for some reason my colored boxes around my headers were way wider than my text but I’m so happy I could even follow along. Thanks so much
good going Hannah!
I had the same issue! I think it may depend on the version of Bootstrap you put into your href. I had those really wide boxes too with v5.1.3
I switched it to the v4.6.1 link on the website and my boxes looked like the one in the video.
Hope this helps someone!
Bruh, you quite literally saved me. I was stuck on the randomization part for a day and a half couldn't figure it out.
That is awesome! So glad that it helped!
As a teacher congratulations. Awesome class! Very well explained. I will follow you on twitter and podcast.
OML you helped me a lot! I was fallowing other tutorials but nothing worked, but yours worked and you explained it so well, thank you very much
Wow, i was just learning about numbers method and random number generation. And this project is worth making for learning
So glad that you like it! Going to be doing a lot more JavaScript projects soon! Recording the next one really soon!
I Understand very easy way, i will upload Github thanks DThompsonDev
Thanks for the excellent breakdown. Hope to learn more from your channel. Be well, stay healthy.
Thank you! Glad you liked it!
Hi! I m really grateful for your tutorial ! But I wonder how can I make quotes to not repeat, so they show up only once . I am new to programming cuz I made this quote machine just as a small present for my bf.
How do i get this project saved as a link i can send to people? I myself can use the link from the quote generator in the video, but no one else i send it to can open the link or use it.
Such a clear tutorial thanks so much! I was wondering how I could now upload these files onto a Wix project so that this website could go live. Would be great if anyone could help
Not sure why you would want to add custom code like this to a wix site but here is a way to add custom code from the Wix Help center. support.wix.com/en/article/embedding-custom-code-to-your-site
Brilliant video, very clear and easy to follow for beginners as I am a total noob and don't know what any of this stuff means hahaha
I have managed to get everything working up until the point of actually getting the quotes to randomly generate. Not sure what I have done wrong but I am going to keep playing around with it. Do you have any further videos/tutorials/resources to recommend to take this project further in terms of actually getting a random generator into a functioning website?
Love you bro ..., plz make more video about responsive css tutorials.
By the way I follow everywhere 😘
Thanks from Germany ! :)
Love from India 🇮🇳
Love from America!
Hey Danny, it's Yusef. I use atom to do my coding
Atom is cool too! I used to use it. Great features as well. We use VS Code at work so this is what I have gotten used to.
Code has never been explained so simpler than this
Is there a way to make the generator visibly shuffle through a list of options before finally selecting one?
Yes but that would be WAAAAAY bigger than what we are doing here. This is just a few lines of code, it would be significantly bigger to do that.
@@DThompsonDev Is there a specific name for that kind of feature? I've been trying to find something like it on Stack Overload, but to no avail. 😞
No specific name but you would probably make a for loop to cycle through everything. Give it a half second delay and use document.getElementById and innerHTML to show each quote as it cycles.
Thanks for the video man it was really helpful... but for some reason my button doesn't work and I can't find out why
Same
v late to this vid but this was so helpful thank you so much
Thank you for this!!! I have one question, when you use # for css colors is it different than using the actual color name?
There is no big difference between the name and using the hex value. The only difference is using the hex value you can get an exact color. But also, in a professional environment you will NEVER use the name. Always the value. So I try to help you get used to that.
Keep doing amazing things!
@@DThompsonDev Thanks for answering this, It's sometimes hard for me to remember all the hex values off the top of my head.
Wish you’d make a video using ReactJs to do this as well
I will make that video! give me some time. I have a few videos to make first, but I will make this using react.
@@DThompsonDev I think the javaScript ones are great because they help us take the next step to react
Sir will you do JS part in freecodecamp.
I am learning JS there and finding it really difficult
Yes I am. People asked for this which is why I did it since this is very simple. But I will do the entire Javascript section.
@@DThompsonDev thank you Sir.
Where can I learn JS for free other than FCC . I'm finding it too tough or is it normal?
@@roshanaryal310 if you are a beginner then I'd suggest you to check the tutorial provided by the TH-cam channel "Telusko".There things are explain in a simple way ,may be you'll find it easy there ✌
Ps- this is not at all any paid promotion
@@srishtigupta9900 Thank you Srishti!
@@DThompsonDev ah man say from video 80 - 111 in Basic JS section
my button is the same size as the header? How can I resize it to be smaller? I tried using css but it was ignored
did you use the right button class? btn-large I am going to remake this video soon with more current techniques so I don't really remember everything. Just rewatched so I can see the code. also if you want to adjust the sizing, add that to the css in the class of .new-qoute-button
That should allow you to change it but I don't know what you could have done to make the button the same size as the header.
@@DThompsonDev thank you for the reply. I am not sure what I changed but it is a small button now, but I had to center it. Everything worked in vscode but did not transfer well to codepen. When I removed the information in the head section(codepen only wants what is in the body) that is when everything shifted and is no longer centered) . I must center the divs now. I guess I could call myself a developer now? haha
in codepen you may need to apply bootstrap. That may be the big difference, it doesn't automatically apply bootstrap to the page. You must add it in.
There must be 100 posts now by me saying.... " Did the tutorial up to this point 21:36 and the code is not working"
Maybe washing dishes at Red Lobster is my future.
Then they are magically followed a few mins later by me saying I don't know how to spell. ;)
It's all good! That is the best part! Debugging and finding your own mistakes! That is what you will have to do a developer in the industry as well. Happens to the best of us! But you figured it out and that is an EXCELLENT win! Great job Christopher!
thank you so much
U should check it out, atom is good
why is this not working for me?
what isn't working?
@@DThompsonDev i did everything like you asked but maybe I'm missing something idk i tried like 5 times
you have to give me more information. like what is the error?
@@DThompsonDev the JavaScript i got it now it was the names i used upper case for same latters and i didn't see that and now it's working perfectly
Awesome!!! Great job!
Love you bro ..., plz make more video about responsive css tutorials.
By the way I follow everywhere 😘
pro trick: watch series at kaldroStream. Me and my gf have been using it for watching a lot of movies recently.
@Brooks Finnegan Yup, I have been watching on KaldroStream for years myself :D
@Brooks Finnegan yup, been using KaldroStream for years myself :)
@Brooks Finnegan Yup, I've been watching on Kaldrostream for months myself :)