Creative JS Coder
Creative JS Coder
  • 277
  • 685 937
Country State City Dropdown List in React JS and Tailwind CSS
In this tutorial, I'm going to show you how to create a Country State City dropdown list in React JS without fetching API. For the design part I used Tailwind CSS. This video will be very helpful for the React JS developer. I'm going to code step by step in a very easy way.
Source Code:-
GitHub: github.com/Mohammed-Faysal/Country-state-city-dropdown-ReactJS.git
Keywords:-
Country State City Dropdown List in React JS and Tailwind CSS,
react js tutorial,
react js projects,
react js,
raw react js,
fetch api in react js,
tailwind css,
tailwind css tutorial,
country state city dropdown list,
react js beginner projects
มุมมอง: 342

วีดีโอ

Responsive Hospital Website using HTML, CSS, Bootstrap5 and JavaScript
มุมมอง 16214 วันที่ผ่านมา
This is a website for Hospital. This website has different sections ( Home, about, services, department, doctors, appointment, review, contact us and footer section). This website is fully responsive for all devices. Here, I used HTML, CSS, Bootstrap 5, and few lines of JavaScript code. Hope this project will be beginner friendly. If you Like this, subscribe my channel "Creative JS Coder" Keywo...
Build a Dynamic React To-Do App with Local Storage | useState & useEffect Hooks Tutorial
มุมมอง 310หลายเดือนก่อน
Build a Dynamic React To-Do App with Local Storage | useState & useEffect Hooks Tutorial
Customize Bootstrap5 DataTables to Create Complete CRUD Operations | CRUD in Bootstrap5 DataTables
มุมมอง 350หลายเดือนก่อน
Customize Bootstrap5 DataTables to Create Complete CRUD Operations | CRUD in Bootstrap5 DataTables
Responsive & Animated Movie Website Landing Page in HTML CSS & JavaScript | Creative JS Coder
มุมมอง 8192 หลายเดือนก่อน
Responsive & Animated Movie Website Landing Page in HTML CSS & JavaScript | Creative JS Coder
Mastering the JavaScript Fetch API: .then() vs. async/await
มุมมอง 1573 หลายเดือนก่อน
Mastering the JavaScript Fetch API: .then() vs. async/await
Complete Responsive Personal Portfolio Website using HTML CSS & JavaScript #part1
มุมมอง 1.1K3 หลายเดือนก่อน
Complete Responsive Personal Portfolio Website using HTML CSS & JavaScript #part1
SVG Moving Border Animation in HTML and CSS
มุมมอง 1873 หลายเดือนก่อน
SVG Moving Border Animation in HTML and CSS
Expandable Animated Flex Cards in HTML and CSS only | With Free Source Code
มุมมอง 5873 หลายเดือนก่อน
Expandable Animated Flex Cards in HTML and CSS only | With Free Source Code
Responsive CSS Flexbox Layout Design | Review Section in HTML & CSS | Responsive Design
มุมมอง 3033 หลายเดือนก่อน
Responsive CSS Flexbox Layout Design | Review Section in HTML & CSS | Responsive Design
How to Detect Any Key's Code of the Keyboard #javascriptprojects
มุมมอง 743 หลายเดือนก่อน
How to Detect Any Key's Code of the Keyboard #javascriptprojects
Multiple Typing Text Animation & Effect in HTML and CSS only | Auto Typing Text Effect
มุมมอง 2793 หลายเดือนก่อน
Multiple Typing Text Animation & Effect in HTML and CSS only | Auto Typing Text Effect
Responsive OWL Carousel Slider in HTML & CSS
มุมมอง 1.4K4 หลายเดือนก่อน
Responsive OWL Carousel Slider in HTML & CSS
How to make Line Progress bar with Counter Up in HTML CSS & JavaScript | Skills Bar
มุมมอง 1844 หลายเดือนก่อน
How to make Line Progress bar with Counter Up in HTML CSS & JavaScript | Skills Bar
Infinite Scroll using Only HTML and CSS
มุมมอง 3524 หลายเดือนก่อน
Infinite Scroll using Only HTML and CSS
Magic of CSS Flexbox | Responsive CSS Flexbox Layout | Learn CSS Flexbox
มุมมอง 1884 หลายเดือนก่อน
Magic of CSS Flexbox | Responsive CSS Flexbox Layout | Learn CSS Flexbox
Use of conic-gradient in CSS | Multicolor Border Design in CSS | CSS Gradient Color
มุมมอง 1334 หลายเดือนก่อน
Use of conic-gradient in CSS | Multicolor Border Design in CSS | CSS Gradient Color
Hamburger Menu Design in HTML & CSS only. | Creative JS Coder
มุมมอง 1774 หลายเดือนก่อน
Hamburger Menu Design in HTML & CSS only. | Creative JS Coder
Awesome Sign Up Form in HTML CSS and JavaScript | Form Validation in HTML CSS and JS
มุมมอง 2974 หลายเดือนก่อน
Awesome Sign Up Form in HTML CSS and JavaScript | Form Validation in HTML CSS and JS
Responsive Card Slider using HTML CSS and Swiper JS | With free source code
มุมมอง 3624 หลายเดือนก่อน
Responsive Card Slider using HTML CSS and Swiper JS | With free source code
Responsive Form Design in HTML and CSS only | With free source code | HTML Form | Creative JS Coder
มุมมอง 2914 หลายเดือนก่อน
Responsive Form Design in HTML and CSS only | With free source code | HTML Form | Creative JS Coder
Create a Sticky Responsive Navbar with Dropdown Menu | HTML CSS & JavaScript | With free source code
มุมมอง 1315 หลายเดือนก่อน
Create a Sticky Responsive Navbar with Dropdown Menu | HTML CSS & JavaScript | With free source code
Responsive Auto Play Movie suggestion Slider in HTML CSS & JavaScript | Swiper Js |Creative JS Coder
มุมมอง 1K5 หลายเดือนก่อน
Responsive Auto Play Movie suggestion Slider in HTML CSS & JavaScript | Swiper Js |Creative JS Coder
Complete Tic Tac Toe Game with Timer in HTML CSS & JavaScript | Game in JavaScript.
มุมมอง 1.1K5 หลายเดือนก่อน
Complete Tic Tac Toe Game with Timer in HTML CSS & JavaScript | Game in JavaScript.
Important JavaScript Local Storage Projects | HTML, CSS & JavaScript | #localstorage
มุมมอง 1375 หลายเดือนก่อน
Important JavaScript Local Storage Projects | HTML, CSS & JavaScript | #localstorage
Important JavaScript API Projects | JavaScript Fetch API | Country State City API #creativejscoder
มุมมอง 1365 หลายเดือนก่อน
Important JavaScript API Projects | JavaScript Fetch API | Country State City API #creativejscoder
10 important JavaScript Projects with Free Source Code | Creative JS Coder
มุมมอง 3545 หลายเดือนก่อน
10 important JavaScript Projects with Free Source Code | Creative JS Coder
Customize jQuery Bootstrap5 Data Table | CRUD operation | HTML, CSS & JavaScript Local Storage
มุมมอง 3.6K5 หลายเดือนก่อน
Customize jQuery Bootstrap5 Data Table | CRUD operation | HTML, CSS & JavaScript Local Storage
Responsive Team Section using Owl Carousel Slider | HTML, CSS and JavaScript | Free Source Code
มุมมอง 1.1K6 หลายเดือนก่อน
Responsive Team Section using Owl Carousel Slider | HTML, CSS and JavaScript | Free Source Code
Random Quote Generator using HTML, CSS and JavaScript with Free Source Code | API Project
มุมมอง 1706 หลายเดือนก่อน
Random Quote Generator using HTML, CSS and JavaScript with Free Source Code | API Project

ความคิดเห็น

  • @menitz1281
    @menitz1281 2 ชั่วโมงที่ผ่านมา

    Source code please

  • @NishanCW
    @NishanCW วันที่ผ่านมา

    Amazing carousel brother. Keep up the good work!

  • @kiranarana7274
    @kiranarana7274 2 วันที่ผ่านมา

    Please help it’s possible to save the data on ms access❤

  • @krazy_lukhnow
    @krazy_lukhnow 3 วันที่ผ่านมา

    sir you can make such a awaesome effect ///.......I REALLY LIKE THIS AND FEEL BETTER AFTER MAKE TYHIS ...../////

  • @kiranarana7274
    @kiranarana7274 3 วันที่ผ่านมา

    Please help where the data coming from it's possible to connect with ms access

    • @creativejscoder
      @creativejscoder 2 วันที่ผ่านมา

      Here I used Localstorage

  • @kiranarana7274
    @kiranarana7274 3 วันที่ผ่านมา

    please help where the data saved

    • @creativejscoder
      @creativejscoder 2 วันที่ผ่านมา

      Here I used Local Storage to store data. You can try firebase

  • @agusarianto7484
    @agusarianto7484 7 วันที่ผ่านมา

    thanks bro

  • @kineticsand001
    @kineticsand001 7 วันที่ผ่านมา

    source code mil sakta hai ?

  • @GarrettMcFarlane
    @GarrettMcFarlane 10 วันที่ผ่านมา

    brilliant,

  • @allbeastt367
    @allbeastt367 10 วันที่ผ่านมา

    From where did you get the images

  • @GezahegnakliluDule
    @GezahegnakliluDule 11 วันที่ผ่านมา

    ❤❤❤😮😮😮

  • @AshirAr8
    @AshirAr8 11 วันที่ผ่านมา

    What a wonderful design. I might make one like this, inshallah. Keep it up. 😁🤝

  • @bern2022
    @bern2022 13 วันที่ผ่านมา

    thank you!

  • @OussamaHakkane-yj4yj
    @OussamaHakkane-yj4yj 13 วันที่ผ่านมา

    Thank you for this video and source code -_<

  • @kushikumar7192
    @kushikumar7192 18 วันที่ผ่านมา

    Bro pls send the source code...

    • @creativejscoder
      @creativejscoder 17 วันที่ผ่านมา

      Watch This: th-cam.com/video/LbeXz6p7GGA/w-d-xo.html

  • @MuhammedjamiuAbdulhaqq
    @MuhammedjamiuAbdulhaqq 21 วันที่ผ่านมา

    Boss 💪❤

  • @puhly2256
    @puhly2256 22 วันที่ผ่านมา

    code pls, cause its hidden behind text

    • @creativejscoder
      @creativejscoder 22 วันที่ผ่านมา

      Watch this: th-cam.com/video/NyGpJ9HCCV8/w-d-xo.html

    • @puhly2256
      @puhly2256 22 วันที่ผ่านมา

      @creativejscoder thx

  • @fionabruce2009
    @fionabruce2009 27 วันที่ผ่านมา

    @Creativejscoder pls is there a way of using this on the top of the page instead of the whole page

    • @creativejscoder
      @creativejscoder 27 วันที่ผ่านมา

      Yes, you have to change, height weight and position of the slider.

    • @fionabruce2009
      @fionabruce2009 25 วันที่ผ่านมา

      @@creativejscoder which of the css do i need to change and also I tried the animation for next and previous button does not work at all i tried with the script in github didn't work and also followed what you did none of them worked for me at all. Please can you help me out. Can I email you my scripts if you don't mind

    • @creativejscoder
      @creativejscoder 25 วันที่ผ่านมา

      @@fionabruce2009 is there showing any error in the console?? just let me know.

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

    Please can you give the name of music used?

  • @aboda-01212
    @aboda-01212 หลายเดือนก่อน

    The Java code is not working for me and form is not doing animation like the video. What is the reason?

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

      here I used JavaScript not Java. Is there showing any error? Let me know.

    • @aboda-01212
      @aboda-01212 หลายเดือนก่อน

      @creativejscoder It doesn't produce an error. When I click on sign up or login, it doesn't do any movement or anything comes up

    • @aboda-01212
      @aboda-01212 หลายเดือนก่อน

      @creativejscoder Is it possible for me to communicate with you?

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

    Halo bro, can you share source code, your project was amazing

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

      Ok. I will share.

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

      Thank you, i will waiting for it. ​@@creativejscoder

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

    Your animation is truly awesome and unique. It's impressive to see such creative work! You are indeed a professional coder.

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

    Sauce code?

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

      Long Video Link: th-cam.com/video/OTjmnF27ADk/w-d-xo.html

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

    Cool slider, but spoilt by the fact that it doesn't expand evenly imo. Hits the top first

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

    where is the github link?

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

    Amazing! Just a quick question: Why did you use var instead of let or const? I've heard that let and const are generally preferred for better code readability. Thanks

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

      Yes, you are right. But, The main advantage of using var in JavaScript is its function-scoping and hoisting behavior.

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

    I've waited several hours but i haven't received Api key What can i do

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

      country info: th-cam.com/video/6_0AFZcTRGw/w-d-xo.html watch this tutorial. here I used another API. You won't need any API key.

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

      And Country, State, City name you can try this: www.universal-tutorial.com/rest-apis/free-rest-api-for-country-state-city

  • @МухлисаХамдамова-т9ф
    @МухлисаХамдамова-т9ф หลายเดือนก่อน

    it is very beautiful😍

  • @MRB-k1y
    @MRB-k1y หลายเดือนก่อน

    Wow good job so kep going

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

    nice

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

    Code please

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

      Watch the tutorial: th-cam.com/video/iHO7g4WhZ1E/w-d-xo.html

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

    Perfecto 🛸👌🏼

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

    Perfect 👌🏼🛸

  • @Bro.Mobile
    @Bro.Mobile หลายเดือนก่อน

    57:58

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

    I didn't see the buttons at the end of the tutorial either. I followed your tutorial exactly, but in the last step, when I edited the code in the app.js file, the buttons didn't show up. It's frustrating. Please, which library should I replace with which one? Or - can you provide a working code?

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

      Listen, I uploaded the github link. download the code and try this. Maybe Button not showing only for bootstrap version.

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

    this is great but i have a question, how do you put a link in the see more button because i tried to put some more info in it by using <a> tag but it doesnt work pretty well the first slide respond but the others doesnt. pls answer

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

    thanks a lot sir, this is such a nice work

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

    Is there any tutorial of this effect mate?

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

      Yes, A long video is available in this channel.

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

      watch this: th-cam.com/video/EpzdGYuYlwc/w-d-xo.html

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

    please image Link...

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

      I provided the github link in the description box. All the images are available there.

  • @AdeMuhammed-p3q
    @AdeMuhammed-p3q หลายเดือนก่อน

    nice, with this video i tried it and it was awesome ,Thanks 😎😎😎😎😎😎

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

    Bro isss code mujha send kara sakta ho ❤

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

      Source code link is available in the description box.

  • @User2.o
    @User2.o หลายเดือนก่อน

    hey thanks! do you know how can we make one in which there are prev next arrows but we can ALSO click on the images and it will become the background. Edit: Also for anyone who is coding this nd wondering why the "see more" button do not have the fading effect.. in style sheet, /* animation text in first item */ .slider .list .item:nth-child(1) .content .buttons has button"s" but in html button class there is no s , so the fading effect is not visible for the button, i removed the s from buttons and it worked for me.(only ik how much time i ve wasted for such a trivial issue)

  • @Mr.Amba5353
    @Mr.Amba5353 หลายเดือนก่อน

    source code pls

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

    This is insane!!! omg !! wooowwww like and subscriber

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

    Mostly awaited video brooooo❤❤❤

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

    Wonderful creation! Could you demonstrate this with bootsrap5 ?

  • @MdShamim-n1x1x
    @MdShamim-n1x1x 2 หลายเดือนก่อน

    give me your projeict cover photo

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

      Already I provided the github link in the description box.

  • @MdShamim-n1x1x
    @MdShamim-n1x1x 2 หลายเดือนก่อน

    Hi iam shamim give me sum this code images😢

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

    Why js isnt working 😾 My next and previous button not working

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

      Is there showing any error?

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

      call the script for linking the javascript file add thison your HTML <script src="index.js"></script>

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

    Big thanks you. It's amazing and I've really appreciate your teaching method ✅