Build A Random Quote Generator in HTML CSS & JavaScript

Build A Random Quote Generator in HTML CSS & JavaScript
In this video, I have shown you how to Build A Random Quote Generator in HTML CSS & JavaScript. In this quote app, each time you click on the new quote button you'll get a new quote. You can also convert a quote to speech, copy a quote, or share a quote on Twitter by clicking the given button.
🗂️ Get Source Code of this Random Quote Generator
➤ buymeacoffee.com/codingnepal/...
🌐 Visit CodingNepal for helpful coding projects
➤ www.codingnepalweb.com
⭐ Hire me on Fiverr
➤ www.fiverr.com/prakashahi
📷 Follow me on Instagram
➤ / coding.np
🤝 Support my work
➤ buymeacoffee.com/codingnepal
Music Credit:
Ikson - Anywhere [Official]
• #66 Anywhere (Official)
Something 'bout July (Instrumental) by RYYZN
Free Download / Stream: bit.ly/-_something-bout-july
Music promoted by Audio Library • Something 'bout July (...
Deep Sea by Vendredi
Free Download / Stream: bit.ly/-deep-sea
Music promoted by Audio Library • Deep Sea - Vendredi (N...

Пікірлер: 125

  • @MrAlvaro1900
    @MrAlvaro19002 жыл бұрын

    I love CodingNepal, I am learning a lot with you; greetings from Bolivia !!!!!

  • @nishthasainger4862
    @nishthasainger48622 жыл бұрын

    This is so amazing. Specially the speech part, truly amazed!

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Glad you like it : )

  • @prachivaishya4267
    @prachivaishya4267 Жыл бұрын

    Thanks for this video. It was really helpful. I learnt fetching API alongwith converting text to speech

  • @ndimoforaretasndimofor7734
    @ndimoforaretasndimofor77342 жыл бұрын

    This is better than I thought it would be! Especially the Speech synthesis! I just learned something new to add to my JavaScript toolbox. Thank you very much!🙏🏾

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Glad it was helpful!

  • @Rain_berries

    @Rain_berries

    Жыл бұрын

    @@faronmentink bro chill out 😂😂🤣💀

  • @ashishsahuT
    @ashishsahuT2 жыл бұрын

    Lovely Projects bro, thanks for uploading

  • @junaidtahir3958
    @junaidtahir395810 ай бұрын

    Hats off! You're doing a great job.

  • @astawesegngetachew9071
    @astawesegngetachew90712 жыл бұрын

    always nice work. thank you

  • @learn_with_rashed40
    @learn_with_rashed402 жыл бұрын

    you are a inteligent brother.thanks for help us.thank you very very much much much much

  • @CreativeTutorialsWeb
    @CreativeTutorialsWeb2 жыл бұрын

    Very beautiful design and Great Project Build by CodingNepal, keep it up

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thank you, I will

  • @giovannibarros2079
    @giovannibarros2079 Жыл бұрын

    thanks a lot for the content dude! it helped me a lot! cheers!

  • @whysoserious1054
    @whysoserious1054 Жыл бұрын

    Really Thanks Bro!!! One of the best channels!!!!!!!!!!!!!!!!!!!!!!

  • @aminebouzaid5971
    @aminebouzaid5971 Жыл бұрын

    Your vidéos understandable without speech 😅 you are perfecto ♥️😚

  • @CodingPorium
    @CodingPorium2 жыл бұрын

    Awesome project sir and nice design!

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Happy to hear that!

  • @Destiny4CODERS
    @Destiny4CODERS5 ай бұрын

    Love from India ❤!

  • @CodingUG
    @CodingUG2 жыл бұрын

    Thank you🙏🙏 Mainly for the speech api I had very long code for it but yours is just in 3 lines 🤔 Thank you Nepal we love you ❤️❤️❤️

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Glad it was helpful :)

  • @recsng
    @recsng2 жыл бұрын

    I follow your tutorial.Ut projects r awsm.

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thanks a lot 😊

  • @user-jc1mq7kl3r
    @user-jc1mq7kl3r2 жыл бұрын

    Hi your videos are great. Can you make a tutorial for making a website where we can upload blogs/articles.

  • @solankiketindra4919
    @solankiketindra49192 жыл бұрын

    Thank You so much... great Information sir

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Most welcome

  • @binayrajbanshi7849
    @binayrajbanshi78492 жыл бұрын

    no jibber jabber all on points loved it react based tutorials needed

  • @allgameplay4188
    @allgameplay41882 жыл бұрын

    This is awesome 👏

  • @WebDesignTuts
    @WebDesignTuts2 жыл бұрын

    That's a nice exercise

  • @diwakar_tsn
    @diwakar_tsn2 жыл бұрын

    Daju dammi project leya ra aaunu bhayo. Thank you😍❤️❤️💖

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    You're most welcome

  • @Rajnishdangar
    @Rajnishdangar2 жыл бұрын

    thanks bro,Love from India🇮🇳

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Keep loving bro

  • @zakariabokhtiar4157
    @zakariabokhtiar41572 жыл бұрын

    Thnx dear for the amazing teach.

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    It's my pleasure

  • @nileshsonawane3093
    @nileshsonawane30932 жыл бұрын

    Bro excellent work 👍👍...bro please make festival wishing script with different sharing options...😅

  • @binayrajbanshi7849

    @binayrajbanshi7849

    2 жыл бұрын

    concept is same just fetch data from other festival wishing slogan api

  • @CodingUG
    @CodingUG2 жыл бұрын

    Please would it be possible for you to make another tutorial on speech to text api Will be grateful 🙏

  • @jeenitprajapati3449
    @jeenitprajapati34492 жыл бұрын

    Excellent

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thank you so much 😀

  • @omm7078
    @omm7078 Жыл бұрын

    I deployed it on Netlify but api doesn't work there. Please help me

  • @bitashahsavan7993
    @bitashahsavan799322 күн бұрын

    That was soooo good and usefull

  • @CodingNepal

    @CodingNepal

    15 күн бұрын

    Happy to hear that :) Keep watching.

  • @burgasdragonheirsilentgods
    @burgasdragonheirsilentgods2 жыл бұрын

    Nice generator mate !

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thank you so much!

  • @TesahJDM
    @TesahJDM Жыл бұрын

    how do I do it so I can customize all my own quotes? sorry I'm still a beginner.

  • @juguetestoys1137
    @juguetestoys11372 жыл бұрын

    hi master ! Can you build a simple flashcards ?

  • @minakshimehta5175
    @minakshimehta51752 жыл бұрын

    Legend

  • @thearticlehindi
    @thearticlehindi2 жыл бұрын

    Make a video on how to create multi page college website with dropdown menu and login signup page on top with fully responsive header and image logo. Also create footer and contact us page.

  • @justChuka
    @justChuka2 жыл бұрын

    Great!

  • @minakshimehta5175
    @minakshimehta51752 жыл бұрын

    Awesome

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thank you

  • @mdshihab8384
    @mdshihab83842 жыл бұрын

    What will be url if I want to do the same thing but in likedin not on Twitter?

  • @stephenasiedu76
    @stephenasiedu762 жыл бұрын

    Please my copy is not working when I click on it .It copies quoteText.innerText

  • @ayushop0075
    @ayushop00752 жыл бұрын

    Bro can you make a video on how to use google cloud vision API?

  • @thejandanindu1272
    @thejandanindu12722 жыл бұрын

    Can you create a highlighter to make users to highlight important facts in our website

  • @ShivamMishra-no5ss
    @ShivamMishra-no5ss2 жыл бұрын

    Sir please make a video on typing test website😊

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Ok soon

  • @nayaablakhani716
    @nayaablakhani716 Жыл бұрын

    Everytime a new quote appears the wrapper box changes its size according to the quote length.How to keep the height and width fixed ?

  • @fabbahiense

    @fabbahiense

    Жыл бұрын

    you could guess or test a min-height to the Quote Area that feels ok to you, and then make the .quote align-self in center.

  • @ashishsahuT
    @ashishsahuT2 жыл бұрын

    Is you are on LinkedIn or anywhere, just want to connect.

  • @yumje3377
    @yumje3377 Жыл бұрын

    Thanks❤

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Welcome!

  • @minakshimehta5175
    @minakshimehta51752 жыл бұрын

    God bro

  • @jobianstechie
    @jobianstechie2 жыл бұрын

    Please make video on how you design your video thumbnail

  • @itxHuman
    @itxHuman2 жыл бұрын

    Plz make a live video streaming + chat project in php

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Okay

  • @itxHuman

    @itxHuman

    2 жыл бұрын

    @@CodingNepal thanks

  • @riyazmohamed6532
    @riyazmohamed65322 жыл бұрын

    Super

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thanks

  • @frieeezy6680
    @frieeezy66802 жыл бұрын

    Hey bro, can you create a video about how to post in a website?

  • @petchimuthup2174
    @petchimuthup2174 Жыл бұрын

    Sir Please help me how to upload my html and js files in Site i have bought domain and how to host my files

  • @sungamshrestha7084
    @sungamshrestha7084 Жыл бұрын

    Bro it is working fine with xampp but when i upload it in my website it doesn't work Stuck in loading quote plz help

  • @Ahm3dAshour
    @Ahm3dAshour2 жыл бұрын

    Thanks pro

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thank you

  • @barbaad7694
    @barbaad76942 жыл бұрын

    It's totally awesome bro, but when I hosted it in heroku and click on new quote it doesn't work. Please help me .

  • @stun4k967
    @stun4k9672 жыл бұрын

    Your experience is what in years

  • @abishekkhanal1493
    @abishekkhanal14932 жыл бұрын

    Please make video on website visitors counter.. and provide source code...

  • @farhankalwarkalwar1577
    @farhankalwarkalwar15772 жыл бұрын

    Hi,sir l following you I watch your quiz app video and it is good but it show cannot read property of null (reading 'querySelector') please help me sir🙏🙏🙏

  • @franciscojunior8066
    @franciscojunior80662 жыл бұрын

    Como traduzir as frases para o Português, professor? Obrigado e parabéns!

  • @Thom.Zille.

    @Thom.Zille.

    2 жыл бұрын

    Ele não vai saber responder isso. Tente encontrar um random quote em português.

  • @mrrhornkh3334
    @mrrhornkh33342 жыл бұрын

    Can you a complete website front-end & back-end tutorial I feel sad without your tutorial

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    For this type of website, I need to write many lines of code and without the explanation/voice-over, I don't think viewers will show interest to watch it.

  • @mrrhornkh3334

    @mrrhornkh3334

    2 жыл бұрын

    @@CodingNepal I going to like and share to my friend and more if you tutorial front-end + back-end using php & mysql

  • @diwakar_tsn
    @diwakar_tsn2 жыл бұрын

    Voice over ma video upload garnu na😍😊🤗🤗

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Okay, ma try garnexu

  • @jiya3881
    @jiya3881 Жыл бұрын

    What if we want to add some specific quotes which we like ? how will i add them??

  • @baazigar5

    @baazigar5

    Жыл бұрын

    make an array and add your quotes inside it and use those quotes with array indexing

  • @lambo-ca
    @lambo-ca9 ай бұрын

    For me, the copy&paste is not working. Any idea that why?

  • @hackeditz2.0
    @hackeditz2.02 жыл бұрын

    Ossom😍😍

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thank you

  • @NEProb
    @NEProb2 жыл бұрын

    Good yara 🤣😘

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Welcome

  • @shoumikkumbhakar6375
    @shoumikkumbhakar63752 жыл бұрын

    idk why the flex-end doesnt work for me

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Make sure you've added display: flex;

  • @minakshimehta5175
    @minakshimehta51752 жыл бұрын

    Op

  • @faisal8936
    @faisal89362 жыл бұрын

    Bro my speak function is not working. SpeechSynthesisUtterance is not working ,it is showing a reference error in console. Bro plz can you help me with this problem.

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Make sure you've written: let utterance = new SpeechSynthesisUtterance(`${quoteText.innerText} by ${authorName.innerText}`); // make sure quoteText.innerText & authorName.innerText is returning the string speechSynthesis.speak(utterance);

  • @faisal8936

    @faisal8936

    2 жыл бұрын

    Thanks bro , it worked.

  • @solankiketindra4919
    @solankiketindra49192 жыл бұрын

    Sir how to same style use in Google Excel

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    I didn't understand. Can you explain more?

  • @solankiketindra4919

    @solankiketindra4919

    2 жыл бұрын

    Sir, random code generate in Google Excel data Use Google Excel data

  • @qudus2
    @qudus2 Жыл бұрын

    can someone explain where the quotation icons came from in the html?

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    If you look at line.10 in html file there I've imported FontAwesome and the quotation icons are came from there.

  • @돌솥국밥
    @돌솥국밥2 жыл бұрын

    "never gonna give you up"

  • @funnyanimals6414
    @funnyanimals64142 жыл бұрын

    please I need that for wordpress

  • @MoteeullahAzmi
    @MoteeullahAzmi11 ай бұрын

    how to add one more feathure is your loacation track after translate auto. ex you in banglore translate in kanada langugae

  • @OshekharO
    @OshekharO2 жыл бұрын

    Source code uploaded?

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    No, the video is recently uploaded so source codes will be uploaded in 2 to 3 days.

  • @lynxxd3997
    @lynxxd39972 жыл бұрын

    Next sourcode

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Get from here: www.codingnepalweb.com/random-quote-generator-html-javascript/

  • @omm7078
    @omm7078 Жыл бұрын

    Hi

  • @clutchdiamond8891
    @clutchdiamond88912 жыл бұрын

    Pls provide download source codes link

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Download from here: www.codingnepalweb.com/random-quote-generator-html-javascript/

  • @user-ce1rz7xx6t
    @user-ce1rz7xx6t2 жыл бұрын

    wow 🤔😱😳😳😳

  • @everythingissimple1966
    @everythingissimple19662 жыл бұрын

    India and nepal best

  • @arjunsitaula4460
    @arjunsitaula44602 жыл бұрын

    first

  • @minakshimehta5175
    @minakshimehta51752 жыл бұрын

    Muast

  • @Gbw99
    @Gbw992 жыл бұрын

    Hello, can you answer to my comment on your like button video plz?

  • @aadizzz3042
    @aadizzz3042 Жыл бұрын

    Wow it was very very not helpful 😮

  • @my_awsome_edits
    @my_awsome_edits8 ай бұрын

    Imagine a like and reply from @CodingNepal

  • @CodingNepal

    @CodingNepal

    8 ай бұрын

    ❤️❤️

  • @my_awsome_edits

    @my_awsome_edits

    8 ай бұрын

    Yay! Got a heart and a reply, Love your work CodingNepal! :)

  • @cleaningspy
    @cleaningspy2 жыл бұрын

    Awesome

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thank you

Келесі