Build A Random Quote Generator in HTML CSS & JavaScript | Step-By-Step Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 พ.ย. 2024

ความคิดเห็น • 125

  • @MrAlvaro1900
    @MrAlvaro1900 2 ปีที่แล้ว +2

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

  • @learn_with_rashed40
    @learn_with_rashed40 3 ปีที่แล้ว +2

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

  • @ndimoforaretasndimofor7734
    @ndimoforaretasndimofor7734 2 ปีที่แล้ว +4

    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!

    • @Salio_Mendes
      @Salio_Mendes ปีที่แล้ว

      @@faronmentink bro chill out 😂😂🤣💀

  • @Rajnishdangar
    @Rajnishdangar 2 ปีที่แล้ว

    thanks bro,Love from India🇮🇳

  • @recsng
    @recsng 3 ปีที่แล้ว +2

    I follow your tutorial.Ut projects r awsm.

  • @prachivaishya4267
    @prachivaishya4267 ปีที่แล้ว

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

  • @Destiny4CODERS
    @Destiny4CODERS 9 หลายเดือนก่อน

    Love from India ❤!

  • @STNshotz
    @STNshotz 3 ปีที่แล้ว +2

    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  3 ปีที่แล้ว +1

      Glad it was helpful :)

  • @CreativeTutorialsWeb
    @CreativeTutorialsWeb 3 ปีที่แล้ว +4

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

  • @solankiketindra4919
    @solankiketindra4919 3 ปีที่แล้ว +2

    Thank You so much... great Information sir

  • @aminebouzaid5971
    @aminebouzaid5971 2 ปีที่แล้ว

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

  • @whysoserious1054
    @whysoserious1054 ปีที่แล้ว

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

  • @diwakar_tsn
    @diwakar_tsn 3 ปีที่แล้ว +1

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

  • @a_leaf_shinobi
    @a_leaf_shinobi หลายเดือนก่อน

    Kindly Answer
    At first quote care got split into second line.
    Is there anything i can do to avoid it?

  • @nishthasainger4862
    @nishthasainger4862 2 ปีที่แล้ว +4

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

    • @CodingNepal
      @CodingNepal  2 ปีที่แล้ว +1

      Glad you like it : )

  • @ashishsahuT
    @ashishsahuT 3 ปีที่แล้ว +1

    Lovely Projects bro, thanks for uploading

  • @K123-j3p
    @K123-j3p 2 ปีที่แล้ว +1

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

  • @junaidtahir3958
    @junaidtahir3958 ปีที่แล้ว

    Hats off! You're doing a great job.

  • @zakariabokhtiar4157
    @zakariabokhtiar4157 2 ปีที่แล้ว

    Thnx dear for the amazing teach.

  • @WebDesignTuts
    @WebDesignTuts 3 ปีที่แล้ว +1

    That's a nice exercise

  • @CodingPorium
    @CodingPorium 3 ปีที่แล้ว +2

    Awesome project sir and nice design!

  • @astawesegngetachew9071
    @astawesegngetachew9071 3 ปีที่แล้ว +1

    always nice work. thank you

  • @nileshsonawane3093
    @nileshsonawane3093 3 ปีที่แล้ว

    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

  • @ShivamMishra-no5ss
    @ShivamMishra-no5ss 3 ปีที่แล้ว +1

    Sir please make a video on typing test website😊

  • @TesahJDM
    @TesahJDM 2 ปีที่แล้ว +2

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

  • @diwakar_tsn
    @diwakar_tsn 3 ปีที่แล้ว +1

    Voice over ma video upload garnu na😍😊🤗🤗

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

      Okay, ma try garnexu

  • @jeenitprajapati3449
    @jeenitprajapati3449 3 ปีที่แล้ว +2

    Excellent

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว +1

      Thank you so much 😀

  • @binayrajbanshi7849
    @binayrajbanshi7849 2 ปีที่แล้ว

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

  • @mrrhornkh3334
    @mrrhornkh3334 3 ปีที่แล้ว +1

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

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

      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 3 ปีที่แล้ว

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

  • @stephenasiedu76
    @stephenasiedu76 2 ปีที่แล้ว +1

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

  • @itxHuman
    @itxHuman 3 ปีที่แล้ว +2

    Plz make a live video streaming + chat project in php

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว +1

      Okay

    • @itxHuman
      @itxHuman 3 ปีที่แล้ว

      @@CodingNepal thanks

  • @barbaad7694
    @barbaad7694 2 ปีที่แล้ว

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

  • @omm7078
    @omm7078 ปีที่แล้ว +1

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

  • @bitashahsavan7993
    @bitashahsavan7993 4 หลายเดือนก่อน

    That was soooo good and usefull

    • @CodingNepal
      @CodingNepal  4 หลายเดือนก่อน

      Happy to hear that :) Keep watching.

  • @nayaablakhani716
    @nayaablakhani716 2 ปีที่แล้ว +1

    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 2 ปีที่แล้ว

      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.

  • @jobianstechie
    @jobianstechie 2 ปีที่แล้ว

    Please make video on how you design your video thumbnail

  • @thearticlehindi
    @thearticlehindi 2 ปีที่แล้ว

    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.

  • @giovannibarros2079
    @giovannibarros2079 ปีที่แล้ว

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

  • @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

  • @petchimuthup2174
    @petchimuthup2174 2 ปีที่แล้ว +1

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

  • @juguetestoys1137
    @juguetestoys1137 3 ปีที่แล้ว

    hi master !
    Can you build a simple flashcards ?

  • @STNshotz
    @STNshotz 3 ปีที่แล้ว

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

  • @burgasHoH
    @burgasHoH 3 ปีที่แล้ว +1

    Nice generator mate !

  • @thejandanindu1272
    @thejandanindu1272 3 ปีที่แล้ว +1

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

  • @riyazmohamed6532
    @riyazmohamed6532 3 ปีที่แล้ว +2

    Super

  • @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

  • @allgameplay4188
    @allgameplay4188 2 ปีที่แล้ว

    This is awesome 👏

  • @Qwerryy3i5
    @Qwerryy3i5 3 ปีที่แล้ว

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

  • @frieeezy6680
    @frieeezy6680 3 ปีที่แล้ว

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

  • @mdshihab8384
    @mdshihab8384 2 ปีที่แล้ว

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

  • @omm7078
    @omm7078 ปีที่แล้ว +1

    Hi

  • @lambo-ca
    @lambo-ca ปีที่แล้ว

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

  • @Ahm3dAshour
    @Ahm3dAshour 3 ปีที่แล้ว +1

    Thanks pro

  • @ashishsahuT
    @ashishsahuT 3 ปีที่แล้ว +1

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

  • @yumje3377
    @yumje3377 2 ปีที่แล้ว

    Thanks❤

  • @cleaningspy
    @cleaningspy 3 ปีที่แล้ว +1

    Awesome

  • @minakshimehta5175
    @minakshimehta5175 3 ปีที่แล้ว +1

    Legend

  • @farhankalwarkalwar1577
    @farhankalwarkalwar1577 3 ปีที่แล้ว

    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🙏🙏🙏

  • @solankiketindra4919
    @solankiketindra4919 3 ปีที่แล้ว +1

    Sir how to same style use in Google Excel

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว +2

      I didn't understand. Can you explain more?

    • @solankiketindra4919
      @solankiketindra4919 3 ปีที่แล้ว

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

  • @돌솥국밥
    @돌솥국밥 2 ปีที่แล้ว +1

    "never gonna give you up"

  • @stun4k967
    @stun4k967 3 ปีที่แล้ว

    Your experience is what in years

  • @minakshimehta5175
    @minakshimehta5175 3 ปีที่แล้ว +1

    God bro

  • @abishekkhanal1493
    @abishekkhanal1493 3 ปีที่แล้ว

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

  • @shoumikkumbhakar6375
    @shoumikkumbhakar6375 3 ปีที่แล้ว +1

    idk why the flex-end doesnt work for me

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

      Make sure you've added display: flex;

  • @faisal8936
    @faisal8936 3 ปีที่แล้ว +1

    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  3 ปีที่แล้ว

      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 3 ปีที่แล้ว

      Thanks bro , it worked.

  • @qudus2
    @qudus2 2 ปีที่แล้ว

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

    • @CodingNepal
      @CodingNepal  2 ปีที่แล้ว

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

  • @NEProb
    @NEProb 3 ปีที่แล้ว +1

    Good yara 🤣😘

  • @justChuka
    @justChuka 2 ปีที่แล้ว

    Great!

  • @franciscojunior8066
    @franciscojunior8066 3 ปีที่แล้ว +1

    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.

  • @funnyanimals6414
    @funnyanimals6414 2 ปีที่แล้ว

    please I need that for wordpress

  • @OshekharO
    @OshekharO 3 ปีที่แล้ว +1

    Source code uploaded?

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว +1

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

  • @hackeditz2.0
    @hackeditz2.0 3 ปีที่แล้ว +1

    Ossom😍😍

  • @lynxxd3997
    @lynxxd3997 3 ปีที่แล้ว +1

    Next sourcode

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

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

  • @clutchdiamond8891
    @clutchdiamond8891 3 ปีที่แล้ว +1

    Pls provide download source codes link

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

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

  • @everythingissimple1966
    @everythingissimple1966 2 ปีที่แล้ว

    India and nepal best

  • @minakshimehta5175
    @minakshimehta5175 3 ปีที่แล้ว +1

    Op

  • @MoteeullahAzmi
    @MoteeullahAzmi ปีที่แล้ว

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

  • @Gbw99
    @Gbw99 3 ปีที่แล้ว

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

  • @minakshimehta5175
    @minakshimehta5175 3 ปีที่แล้ว +1

    Muast

  • @my_awsome_edits
    @my_awsome_edits ปีที่แล้ว +1

    Imagine a like and reply from @CodingNepal

    • @CodingNepal
      @CodingNepal  ปีที่แล้ว

      ❤️❤️

    • @my_awsome_edits
      @my_awsome_edits ปีที่แล้ว

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

  • @arjunsitaula4460
    @arjunsitaula4460 2 ปีที่แล้ว +1

    first

  • @aadizzz3042
    @aadizzz3042 ปีที่แล้ว

    Wow it was very very not helpful 😮

  • @minakshimehta5175
    @minakshimehta5175 3 ปีที่แล้ว +2

    Awesome