Creative JS Coder
Creative JS Coder
  • Видео 257
  • Просмотров 622 292
Build a Dynamic React To-Do App with Local Storage | useState & useEffect Hooks Tutorial
"🚀 Learn React by Building a Complete To-Do App!
In this tutorial, you'll create a feature-rich To-Do application using React JS. This app allows users to add, edit, delete, and filter tasks (all, completed, or pending). Plus, the tasks are saved in the browser using JavaScript Local Storage, so they persist even after refreshing the page.
📌 What you'll learn in this video:
1️⃣ How to use useState and useEffect hooks effectively.
2️⃣ Managing state and implementing CRUD operations in React.
3️⃣ Working with JavaScript Local Storage for persistent data.
4️⃣ Creating dynamic filtering options for tasks (All, Complete, Pending).
5️⃣ Building a clean and responsive UI for a practical project.
🎓 Wheth...
Просмотров: 117

Видео

Customize Bootstrap5 DataTables to Create Complete CRUD Operations | CRUD in Bootstrap5 DataTables
Просмотров 18621 час назад
In this tutorial, we’ll dive into creating a complete CRUD (Create, Read, Update, Delete) application using a customized Bootstrap 5 DataTable with a strong focus on handling unique form inputs. Learn how to integrate images, radio values, and checkbox selections directly into a DataTable, making it easy to manage employee data all in one place. I’ll walk you through each step of building a for...
Responsive & Animated Movie Website Landing Page in HTML CSS & JavaScript | Creative JS Coder
Просмотров 516Месяц назад
In this tutorial, I'll show you how to create a stunning, responsive, and animated movie website landing page using HTML, CSS, and JavaScript! In this project, I’ve integrated an exciting Materialize carousel to suggest movies, and the best part is: when you click on a movie thumbnail, it dynamically reveals important details like the release date, movie duration, and whether it's from Hollywoo...
Mastering the JavaScript Fetch API: .then() vs. async/await
Просмотров 140Месяц назад
In this tutorial, you will learn how to use the JavaScript Fetch API for making HTTP requests, a powerful feature that allows you to interact with servers and retrieve data from web APIs. We will cover two popular methods for handling the asynchronous nature of Fetch API: Using .then(): A conventional approach where we chain promise-based methods to handle asynchronous operations. Using async/a...
Complete Responsive Personal Portfolio Website using HTML CSS & JavaScript #part1
Просмотров 955Месяц назад
Responsive Portfolio Website Tutorial | HTML, CSS & JavaScript: In this video, I’ll walk you through building a fully responsive portfolio website from scratch using HTML, CSS, and JavaScript. This tutorial is perfect for anyone looking to create a personal or professional portfolio to showcase their projects, skills, and achievements. Whether you’re a beginner or looking to improve your web de...
SVG Moving Border Animation in HTML and CSS
Просмотров 164Месяц назад
In this tutorial, I'm going to create a SVG Moving Border Animation using HTML and CSS only. Watching this tutorial, you can make this nice animation by yourself. I'm going to code step by step. So, this tutorial will be helpful for developers. If you like this project, subscribe my channel "Creative JS Coder" Source Code Link:- Github: github.com/Mohammed-Faysal/SVG-Moving-border-animation-htm...
Expandable Animated Flex Cards in HTML and CSS only | With Free Source Code
Просмотров 4722 месяца назад
In this tutorial, I'm going to create a simple CSS project and that is Expandable Animated Cards using only HTML and CSS Flexbox. By doing this project, you will get a clear concept about CSS Flexbox. Hope this project will be helpful for the beginner web developers. If you like this, Subscribe My Channel "Creative JS Coder" Source Code Link:- Github: github.com/Mohammed-Faysal/Expandable-css-c...
Responsive CSS Flexbox Layout Design | Review Section in HTML & CSS | Responsive Design
Просмотров 2502 месяца назад
In this tutorial, I'm going to create a Responsive Review Section and going to show you how to use CSS Flexbox effectively to create any responsive layout. By using CSS Flexbox you can design a layout very easily within very less time. Hope this tutorial will be helpful for the beginner developers to understand all about css flexbox. Source Code Link:- Codepen: github.com/Mohammed-Faysal/Respon...
How to Detect Any Key's Code of the Keyboard #javascriptprojects
Просмотров 542 месяца назад
In the tutorial, I'm going to create a simple JavaScript project and this is Keyboard key code Finder. Using this, you can Detect any key's code of the keyboard. It's going to be an awesome JavaScript project. If you like this, Subscribe my channel "Creative JS Coder" Other Projects: Multi level signin signup form: codepen.io/CreativeCoder111/pen/YzRVXVO Country Guide App using JavaScript fetch...
Multiple Typing Text Animation & Effect in HTML and CSS only | Auto Typing Text Effect
Просмотров 2622 месяца назад
Multiple Typing Text Animation & Effect in HTML and CSS only | Auto Typing Text Effect
How to make Line Progress bar with Counter Up in HTML CSS & JavaScript | Skills Bar
Просмотров 1492 месяца назад
How to make Line Progress bar with Counter Up in HTML CSS & JavaScript | Skills Bar
Infinite Scroll using Only HTML and CSS
Просмотров 3052 месяца назад
Infinite Scroll using Only HTML and CSS
Magic of CSS Flexbox | Responsive CSS Flexbox Layout | Learn CSS Flexbox
Просмотров 1582 месяца назад
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
Просмотров 1182 месяца назад
Use of conic-gradient in CSS | Multicolor Border Design in CSS | CSS Gradient Color
Hamburger Menu Design in HTML & CSS only. | Creative JS Coder
Просмотров 1593 месяца назад
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
Просмотров 2553 месяца назад
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
Просмотров 3043 месяца назад
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
Просмотров 2593 месяца назад
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
Просмотров 1163 месяца назад
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
Просмотров 8753 месяца назад
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 тыс.3 месяца назад
Complete Tic Tac Toe Game with Timer in HTML CSS & JavaScript | Game in JavaScript.
Important JavaScript Local Storage Projects | HTML, CSS & JavaScript | #localstorage
Просмотров 1243 месяца назад
Important JavaScript Local Storage Projects | HTML, CSS & JavaScript | #localstorage
Important JavaScript API Projects | JavaScript Fetch API | Country State City API #creativejscoder
Просмотров 1043 месяца назад
Important JavaScript API Projects | JavaScript Fetch API | Country State City API #creativejscoder
10 important JavaScript Projects with Free Source Code | Creative JS Coder
Просмотров 3303 месяца назад
10 important JavaScript Projects with Free Source Code | Creative JS Coder
Customize jQuery Bootstrap5 Data Table | CRUD operation | HTML, CSS & JavaScript Local Storage
Просмотров 3,4 тыс.4 месяца назад
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
Просмотров 8834 месяца назад
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
Просмотров 1624 месяца назад
Random Quote Generator using HTML, CSS and JavaScript with Free Source Code | API Project
Finix, A Business Website using HTML, CSS, Bootstrap5, JavaScript, jQuery | Fully Responsive. #Part1
Просмотров 6275 месяцев назад
Finix, A Business Website using HTML, CSS, Bootstrap5, JavaScript, jQuery | Fully Responsive. #Part1
Analog Clock with Sound Effect in HTML, CSS and JavaScript | Free source code.
Просмотров 1,7 тыс.5 месяцев назад
Analog Clock with Sound Effect in HTML, CSS and JavaScript | Free source code.
Responsive CSS Flexbox Layout design #cssflexbox
Просмотров 2305 месяцев назад
Responsive CSS Flexbox Layout design #cssflexbox

Комментарии

  • @kevalshah5778
    @kevalshah5778 Час назад

    Is there any tutorial of this effect mate?

  • @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 2 дня назад

    Bro isss code mujha send kara sakta ho ❤

    • @creativejscoder
      @creativejscoder 2 дня назад

      Source code link is available in the description box.

  • @User2.o
    @User2.o 2 дня назад

    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 5 дней назад

    source code pls

  • @rubenmontani7487
    @rubenmontani7487 9 дней назад

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

  • @MohamedArafathCanada
    @MohamedArafathCanada 9 дней назад

    Mostly awaited video brooooo❤❤❤

  • @hamrozjumaev
    @hamrozjumaev 12 дней назад

    Wonderful creation! Could you demonstrate this with bootsrap5 ?

  • @MdShamim-n1x1x
    @MdShamim-n1x1x 15 дней назад

    give me your projeict cover photo

    • @creativejscoder
      @creativejscoder 15 дней назад

      Already I provided the github link in the description box.

  • @MdShamim-n1x1x
    @MdShamim-n1x1x 16 дней назад

    Hi iam shamim give me sum this code images😢

  • @yesiam5449
    @yesiam5449 16 дней назад

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

    • @creativejscoder
      @creativejscoder 16 дней назад

      Is there showing any error?

    • @drlnvl8133
      @drlnvl8133 6 дней назад

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

  • @japanimeworld7806
    @japanimeworld7806 23 дня назад

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

  • @swifttech5851
    @swifttech5851 24 дня назад

    Good. Why is it not working in a react project? everything becomes null but if you disable js file on first load then enable it, this work untill the page loads and an error occurs

  • @HaniaKhan-z5f
    @HaniaKhan-z5f 25 дней назад

    is this working with shopify?

    • @creativejscoder
      @creativejscoder 25 дней назад

      I didn't try. you can check. It should be working

  • @Allprogramin1Channel
    @Allprogramin1Channel 29 дней назад

    CSS all animation totorial upload please bro

  • @code-with-jimy
    @code-with-jimy Месяц назад

    amazing brother

  • @lokajarion6789
    @lokajarion6789 Месяц назад

    I like this one 😊

  • @gujjargaming594
    @gujjargaming594 Месяц назад

    Pls teach me

  • @gujjargaming594
    @gujjargaming594 Месяц назад

    @creativejscoder can you teach me pls

  • @emmyboi3426
    @emmyboi3426 Месяц назад

    Source Code?

  • @bazichill
    @bazichill Месяц назад

    ❤❤❤❤

  • @Vanced2Dua
    @Vanced2Dua Месяц назад

    Can you share CSS html and javascript file

  • @miroframe
    @miroframe Месяц назад

    Your project is exactly what I need for my website. Would it be possible to buy the source code from you? Thank you for your reply.

    • @creativejscoder
      @creativejscoder Месяц назад

      No need to buy. I will provide you soon.

    • @miroframe
      @miroframe Месяц назад

      ​@@creativejscoderThank you very much.

    • @miroframe
      @miroframe Месяц назад

      you must be busy, I understand, I just wanted to remind and ask when you could send me that source code? Thank you very much. Best regards, Miro@@creativejscoder

    • @creativejscoder
      @creativejscoder Месяц назад

      @@miroframe Check the description box now. Subscribe the Channel and stay tuned.

    • @miroframe
      @miroframe Месяц назад

      @@creativejscoder Thank you very much. I will try using my own knowledge to connect the table to my own MySQL database. I hope I can do it. Thanks again for your willingness. Miro

  • @siddiqk5619
    @siddiqk5619 Месяц назад

    Cant we Do this without JS..??

  • @Serviciii
    @Serviciii Месяц назад

    thank you bro

  • @FutureEducation-f8q
    @FutureEducation-f8q Месяц назад

    thank you so much

  • @Rplabiezz
    @Rplabiezz Месяц назад

    i want to ask you. Approximately, what the size is each photo and can i use landscape photo before displaying them?

    • @creativejscoder
      @creativejscoder Месяц назад

      you can display for the whole screen. So, I will suggest you to maintain 1920px (width) and 1080px (height). And If you use Landscape photo before displaying, the animation will not be proper. And I think it's unnecessary.

  • @riyajmujawar007
    @riyajmujawar007 Месяц назад

    For skills Do You Used Meter tag??

    • @creativejscoder
      @creativejscoder Месяц назад

      No.

    • @riyajmujawar007
      @riyajmujawar007 Месяц назад

      @@creativejscoder which Tag is used for showing The Percentage of Skills??

    • @creativejscoder
      @creativejscoder Месяц назад

      @@riyajmujawar007 div/p many other tags you can use here. But I'm showing the percentage dynamically using JavaScript. In The part2 I will show this.

    • @riyajmujawar007
      @riyajmujawar007 Месяц назад

      @@creativejscoder Ok bro🤍

  • @segarinojay-elparmis2776
    @segarinojay-elparmis2776 Месяц назад

    Like your video

  • @zohaibfarooq8482
    @zohaibfarooq8482 Месяц назад

    Can anybody copy the same code in his laptop by watching this video ?

    • @creativejscoder
      @creativejscoder Месяц назад

      Yes, you can. But you will not get any benefits by copying this code. Better try to understand.

    • @zohaibfarooq8482
      @zohaibfarooq8482 Месяц назад

      @@creativejscoder Bro by copying I'll understand as well. For an instance I can't understand any coding if I don't. copy that. Can you share code with me ?

    • @creativejscoder
      @creativejscoder Месяц назад

      @@zohaibfarooq8482 Ok, I'm giving the source code in the description box.

    • @creativejscoder
      @creativejscoder Месяц назад

      ruclips.net/video/KtO7GspJlp0/видео.html In the description box, source code is available.

  • @orbejoanarosed.6507
    @orbejoanarosed.6507 Месяц назад

    What is the solution why I don't have the buttons?

  • @MahiAbdallah-k8d
    @MahiAbdallah-k8d Месяц назад

    THIS IS ABSOLUTELY AMAZING. I may not use RUclips, and I am in a country where I cannot give online donations, but I did subscribe in hopes that my subscription makes up for your kindness and making the code opensource. TRULY APRICIATE YOU BRU.

  • @dosenfauzi
    @dosenfauzi Месяц назад

    I see there is no js code, sir, please provide a solution.

    • @creativejscoder
      @creativejscoder Месяц назад

      I made this using only HTML and CSS. There is no need to use JavaScript.

    • @dosenfauzi
      @dosenfauzi Месяц назад

      Can it be applied to Google Apps script, sir?

    • @creativejscoder
      @creativejscoder Месяц назад

      @@dosenfauzi Google Apps Script does not directly support HTML and CSS in the same way a regular web application would.

    • @dosenfauzi
      @dosenfauzi Месяц назад

      @@creativejscoder okey thanks sir

  • @_azu7
    @_azu7 Месяц назад

    Omg thanks, so much deserve more subs

  • @FMFT
    @FMFT Месяц назад

    Interesting. I created something a bit different. A Library Management System in 15 KB. You can import and export data into a CSV file. Just HTML5 and JavaScript. Have a look at my channel if you want to give It a try. Books 3.0 is available in 22 languages. Just 15 KB. Free. No installation. Code available.

  • @bhavikgoyal9927
    @bhavikgoyal9927 Месяц назад

    Very Great and Helpful video

  • @sanaa4102
    @sanaa4102 Месяц назад

    its just copy paste from Lun Dev ruclips.net/video/j7GG009J9uc/видео.html

  • @vnm8322
    @vnm8322 2 месяца назад

    Bro . I just used your source code . But the image should be little shake when the image zoom out. Tell me a way clear this error.

    • @creativejscoder
      @creativejscoder Месяц назад

      Zoom out means??? Can you clear the problem?

    • @Tacky.t
      @Tacky.t Месяц назад

      ​@@creativejscoder it's shaking when it's changing to another image it's not smooth as Ur please how can I fix

    • @creativejscoder
      @creativejscoder Месяц назад

      @@Tacky.t Mab be for transition. Let me see

  • @امیرعباسویادگیری
    @امیرعباسویادگیری 2 месяца назад

    Thank you ❤

  • @marouasedoud7033
    @marouasedoud7033 2 месяца назад

    perfection 🤝

  • @FMFT
    @FMFT 2 месяца назад

    Interesting. I created something a bit different. A Library Management System in 15 KB. You can import and export data into a CSV file. Just HTML5 and JavaScript. Have a look at my channel if you want to give It a try. Books 3.0 is available in 23 languages. Just 15 KB. Free. No installation. Code available.

  • @امیرعباسویادگیری
    @امیرعباسویادگیری 2 месяца назад

    You are the best ❤ Other Channels copy your content But you continue❤ Thank U Please give us a donation crypto wallet for donate

    • @creativejscoder
      @creativejscoder 2 месяца назад

      Yes some other channels did this.

    • @technicalrider6196
      @technicalrider6196 21 день назад

      source code pls

    • @creativejscoder
      @creativejscoder 21 день назад

      @@technicalrider6196 a complete tutorial available in this channel. You are requested to check the tutorial. Source code available in the description box.

  • @winnerdacruz9625
    @winnerdacruz9625 2 месяца назад

    Muito bom 🎉

  • @newworldschangings7309
    @newworldschangings7309 2 месяца назад

    Thanks a lot ❤

  • @vindyadhariishadhara9952
    @vindyadhariishadhara9952 2 месяца назад

    ❤🧡💛💚💙💜🤎🤍

  • @YouInsta01
    @YouInsta01 2 месяца назад

    Thankyou so much bro, it helped a lot❤‍🩹

  • @ekansh6267
    @ekansh6267 2 месяца назад

    it works 🔥🔥🔥

  • @ahmedjar-gv7de
    @ahmedjar-gv7de 2 месяца назад

    Good job sir If you connected to a database it will perfect

  • @user-gj2qw2zv4z
    @user-gj2qw2zv4z 2 месяца назад

    I saw this video in telegram

    • @creativejscoder
      @creativejscoder 2 месяца назад

      May be someone copied this tutorial.

    • @user-gj2qw2zv4z
      @user-gj2qw2zv4z 2 месяца назад

      @@creativejscoder ok bro, that's helpful Good tutorial it helps lots so much