THE WEB DESIGNER
THE WEB DESIGNER
  • Видео 683
  • Просмотров 509 029
React Custom Hook for Counter | Increment, Decrement, and Reset with Conditional Logic
📢 In this video, learn how to build a reusable counter component in React using a custom hook!
We'll cover:
✅ Creating a custom hook for counter functionality (increment, decrement, reset)
✅ Adding conditional logic to prevent negative values using an if statement
✅ Styling the counter using external CSS for a professional design
✅ Making the component reusable and clean for any React project
🔧 Topics Covered:
React useState for state management
Custom hooks in React
Conditional rendering in React
External CSS for styling
💻 Code Walkthrough:
Step-by-step explanation of the logic and code for the counter functionality.
🎨 Features:
Increment Button
Decrement Button (stops at 0)
Reset Button
Centered and res...
Просмотров: 9

Видео

OTP Generator in React.js - A Beginner-Friendly Mini Project 🚀 | download free code
Просмотров 159 часов назад
Dive into the world of React.js with this simple yet functional OTP Generator project! 🎉 This project demonstrates how to use React’s powerful state management to build a dynamic OTP generator with a modern, responsive design. 🔑 Key Features: Generates a random 6-digit OTP with a single click. Dynamically updates the UI using React useState. Clean and responsive interface styled with CSS. Begin...
JavaScript Text Transformer Project | Uppercase, Lowercase, Reverse, and Clear Text | download code
Просмотров 2814 часов назад
we’ll create a simple Text Transformer App using HTML, CSS, and JavaScript! This project is perfect for beginners looking to practice DOM manipulation and styling with CSS. We’ll build a text area where users can enter any text and then transform it with four different buttons: Uppercase: Convert text to uppercase. Lowercase: Convert text to lowercase. Reverse: Reverse the text. Clear: Clear th...
How to Calculate the Number of Days Between Two Dates in React | Download free code
Просмотров 1921 час назад
In this tutorial, we’ll show you how to create a simple React app that calculates the number of days between two selected dates. Using React’s useState hook and JavaScript’s Date object, we’ll walk through how to handle user input, perform date calculations, and display the result on the screen. Whether you’re new to React or just looking for a practical example, this video will help you get st...
Build a Text Transformation Tool with React | Beginner Project Tutorial | Download free code
Просмотров 23День назад
“In this beginner-friendly React tutorial, we’ll create a powerful Text Transformation Tool from scratch! 🚀 Learn how to build a sleek app with a gradient background and a central card design that includes four essential text functions: uppercase, lowercase, reverse, and clear text. With easy-to-follow steps, you’ll master state management and styling in React, all while building a practical pr...
Building a Dynamic Range Slider with HTML, CSS, and JavaScript | Download Free Code
Просмотров 16День назад
In this mini-project, I created a simple and stylish range slider using only HTML, CSS, and JavaScript. This slider allows users to adjust a value between 0 and 100, with the current value displayed dynamically in real-time at the center of the card. The project is perfect for beginners looking to practice their front-end skills, as it covers essential concepts like styling with CSS, using Java...
⏳ Built a Countdown Timer with HTML, CSS, and JavaScript! Download free Code
Просмотров 2914 дней назад
“Excited to share my latest mini-project: a simple yet functional countdown timer created using HTML, CSS, and JavaScript! 🕒 This timer lets users enter a duration in seconds, then counts down in real-time, displaying the remaining time in a clear MM:SS format. Once the countdown completes, it alerts the user and resets the input field for the next entry. This project helped me deepen my unders...
Building a Simple Login Form with Show Password Toggle in React 🚀 | Download Free Code
Просмотров 3014 дней назад
I just wrapped up creating a clean and functional login form in React! This form includes a “Show Password” toggle to enhance user experience and automatically clears the input fields upon submission. Leveraging controlled components and conditional rendering, this project was a great exercise in managing form state effectively in React. #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment...
Build a Responsive Login Form with Show/Hide Password Toggle | HTML, CSS & JavaScript
Просмотров 2714 дней назад
“Learn how to create a responsive login form with HTML, CSS, and JavaScript! In this tutorial, we’ll center the form on the page, style it beautifully, and add a show/hide password toggle feature for a smoother user experience. Perfect for beginners looking to enhance their web development skills!” Check Live : amolkapadi.github.io/show-hide-password-js/ Download Free Code : medium.com/@amolaka...
Create a simple Contact Book app using React JS | Download free code
Просмотров 104Месяц назад
Beginner React Js Projects :-ruclips.net/video/19uBgPfy988/видео.html React Blog Project :-ruclips.net/video/osoRStkJirU/видео.html Javascript Beginner Project :- ruclips.net/video/nxOEa7DQmrE/видео.html HTML & CSS Beginner Project :-ruclips.net/video/4xTSfXlY33Q/видео.html JS Plugin You Will love :-ruclips.net/video/ECD52fW6W8c/видео.html save contact in react js, add and remove class in react...
Pure CSS3 Water Wave Text Animation Effects Using CSS
Просмотров 82Месяц назад
Beginner React Js Projects :-ruclips.net/video/19uBgPfy988/видео.html React Blog Project :-ruclips.net/video/osoRStkJirU/видео.html Javascript Beginner Project :- ruclips.net/video/nxOEa7DQmrE/видео.html HTML & CSS Beginner Project :-ruclips.net/video/4xTSfXlY33Q/видео.html JS Plugin You Will love :-ruclips.net/video/ECD52fW6W8c/видео.html pure css3 water wave text animation effects using css, ...
Build an ADVANCED Todo App in React JS Like a Pro!
Просмотров 101Месяц назад
Build an ADVANCED Todo App in React JS Like a Pro!
CREATE Stunning Animated Login and Signup Forms in 2024!
Просмотров 327Месяц назад
CREATE Stunning Animated Login and Signup Forms in 2024!
Build a Simple Notes App Using HTML, CSS and Javascript | How To Build Notes App using Javascript
Просмотров 109Месяц назад
Build a Simple Notes App Using HTML, CSS and Javascript | How To Build Notes App using Javascript
Building a Simple To-Do Notes App with React-Quill | Quill - Your powerful rich text editor
Просмотров 2542 месяца назад
Building a Simple To-Do Notes App with React-Quill | Quill - Your powerful rich text editor
How to make ScrollView horizontal in react native | Part 22
Просмотров 892 месяца назад
How to make ScrollView horizontal in react native | Part 22
React Native ScrollView vertical Core Component | Part 21
Просмотров 712 месяца назад
React Native ScrollView vertical Core Component | Part 21
Array of object in react native | How to use Array of Object | Part 20
Просмотров 1252 месяца назад
Array of object in react native | How to use Array of Object | Part 20
React Native Array Functions | How to use Array in React Native | Part 19
Просмотров 1052 месяца назад
React Native Array Functions | How to use Array in React Native | Part 19
Pressable react native | How to use Pressable in React Native Core Component | Part 18
Просмотров 1072 месяца назад
Pressable react native | How to use Pressable in React Native Core Component | Part 18
TouchableNativeFeedback - React Native | How to use TouchableNativeFeedback | Part 17
Просмотров 1062 месяца назад
TouchableNativeFeedback - React Native | How to use TouchableNativeFeedback | Part 17
touchablewithoutfeedback in react native | Part 16
Просмотров 1092 месяца назад
touchablewithoutfeedback in react native | Part 16
What is the TouchableHighlight in react native | Part 15
Просмотров 992 месяца назад
What is the TouchableHighlight in react native | Part 15
TouchableOpacity in React Native | Build custom Button in React Native
Просмотров 1182 месяца назад
TouchableOpacity in React Native | Build custom Button in React Native
ImageBackground React Native | How to add text to an image in React Native?
Просмотров 1012 месяца назад
ImageBackground React Native | How to add text to an image in React Native?
Image - React Native | Displaying images with the React Native Image component | Part 12
Просмотров 772 месяца назад
Image - React Native | Displaying images with the React Native Image component | Part 12
What are the differences between props and state | Part 11
Просмотров 672 месяца назад
What are the differences between props and state | Part 11
State in React Native | Function component | Part 10
Просмотров 693 месяца назад
State in React Native | Function component | Part 10
State In React Native | Class based component State | Part 9
Просмотров 563 месяца назад
State In React Native | Class based component State | Part 9
Props in Class components | React Native Props | Part 8
Просмотров 503 месяца назад
Props in Class components | React Native Props | Part 8

Комментарии

  • @raihanrintoandiansyah5692
    @raihanrintoandiansyah5692 4 дня назад

    Safety in OTP is send to right people with registered data. So, It's not how it is going.

  • @krishmajain4463
    @krishmajain4463 8 дней назад

    Sir Please source code

    • @thewebdesigner
      @thewebdesigner 8 дней назад

      github.com/amolkapadi/Jewelry-Store-project/tree/main

  • @205_nitishrawat4
    @205_nitishrawat4 8 дней назад

    hey can we integerated APi here ? can we make data dyamically?

    • @thewebdesigner
      @thewebdesigner 8 дней назад

      In this vedio not integrated any API it's static..yes we can make data dynamically form api

  • @vigneshwarank4668
    @vigneshwarank4668 13 дней назад

    Thanks bro ✨

  • @Racine14
    @Racine14 13 дней назад

    Thank you for this video dear

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

    Biroktokor music diye rakhcen

  • @Tohid_Abdulla
    @Tohid_Abdulla 19 дней назад

    as we have 100.000 data's how can i do it? explain it pleasy

  • @YogeshBadatya
    @YogeshBadatya 20 дней назад

    Hey bro can you share any git repo or code ? Nice Its very helpful

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

    Very educational video set. Can you share the source code

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

      github.com/amolkapadi/Boilerplate-TaskManager-RN

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

    GitHub link send me

  • @حسنزال-ي7ح
    @حسنزال-ي7ح 28 дней назад

    Really pleasent for me that was my first time to use swiper.

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

    wow

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

    Hey @THE WEB DESIGNER.. can you please built a app for me.. ❤

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

    thankk youuu for ur video

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

      Thanks for watching vedio 🫶🏻🥰

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

    hey can i get this code?

  • @ЮлияЮлина-л5г
    @ЮлияЮлина-л5г Месяц назад

    how todo the same but for only one item during you adding it?

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

    how to export excel with exactly same UI ? ( width, group ...)

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

    hello it is nace

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

    Does it uses expo ? , can you give us source code github url ?

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

      "Thanks for your comment! My project is built without Expo. I don’t have an updated GitHub link right now because the project isn’t fully completed

    • @Learning-Turn
      @Learning-Turn 14 дней назад

      @@thewebdesigner is it completed ?

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

    Why there is extra button with the selected date shown instead of showing the calendar directly in iOS?

  • @alec-dora
    @alec-dora 2 месяца назад

    repo link

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

    please share the code github repo

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

    Si presentan el error de style al compilar el proyecto sigan estos pasos :3 1.- Instalar el packete deprecated-react-native-prop-types 2.- Instalar el parche : yarn add patch-package postinstall-postinstall 4: agrega en el packejson en el scripts : "postinstall": "patch-package" 5.- Modificar en node modules el paquete react-native-snap-carousel: los archivos Js Carousel pagination parallax modificar exactamente ViewPrototypes eliminamos el de react native y sustituimos por : import { ViewPropTypes} from "deprecated-react-native-prop-types"; 6.- Compilamos el parche : npx patch-package react-native-snap-carousel utiliza npx ya que yarn no lo parchea 7: Listo no olvides agradecerme de parte de una compañera programadora ;3

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

    😅

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

    THE WEB DESIGNER, I really enjoyed this video, so I hit the like button!

  • @afrikanking4022
    @afrikanking4022 3 месяца назад

    Thank you for the tutorial. I am having issues.Module parse failed: Unexpected token (563:18) You may need an appropriate loader to handle this file type. | }; | class DatasetController { > static defaults = {}; | static datasetElementType = null; | static dataElementType = null;

  • @Lifeupdate673
    @Lifeupdate673 3 месяца назад

    Very class explain easy to understand.. please continue the series

  • @SnehaKarmakar-f2d
    @SnehaKarmakar-f2d 3 месяца назад

    Please don't give such loud background music, it's distracting

    • @thewebdesigner
      @thewebdesigner 3 месяца назад

      Sorry for that I will change music asap..

  • @codewithroman8180
    @codewithroman8180 3 месяца назад

    Food App firestore plz

  • @rutikrasal7040
    @rutikrasal7040 3 месяца назад

    Thank you so much Very helpful

  • @KrishnaRohan-l7o
    @KrishnaRohan-l7o 3 месяца назад

    Nice😢😢😢😢😢

  • @JavierBautistaOrtigosa
    @JavierBautistaOrtigosa 3 месяца назад

    Thanks so much for this tutorial! Great for understanding BrowserRouter, Route and Routes!

  • @ahmedsadeek6355
    @ahmedsadeek6355 3 месяца назад

    hey bro i need the assests

  • @AdlejandroP
    @AdlejandroP 3 месяца назад

    how do you test this with jest

  • @ali-wz6nz
    @ali-wz6nz 3 месяца назад

    Bro use your voice that make more sense.

    • @thewebdesigner
      @thewebdesigner 3 месяца назад

      Yes bro I have plan to upload video with voice ...

  • @HaseebSaleem-w4d
    @HaseebSaleem-w4d 3 месяца назад

    Nice bhai ,currently I am learning web development from coding with harry in my summer vacations. Also doing IT.After learning inshallah I will follow your projects

  • @MuhammadFaraz-m9y
    @MuhammadFaraz-m9y 3 месяца назад

    Is it (web development) good for generating a small income with freelancing

  • @MuhammadFaraz-m9y
    @MuhammadFaraz-m9y 3 месяца назад

    Hey dood very nice video it is Can you help me in my decision to learn web development after 12 class I am from Pakistan and 18 years old I have just intermediate education Kindly help me by giving your answer

    • @thewebdesigner
      @thewebdesigner 3 месяца назад

      Sure how can I help you

    • @MuhammadFaraz-m9y
      @MuhammadFaraz-m9y 3 месяца назад

      You can help me by telling me that should I learn web development or not Is it best field for starting in 2024( August)

    • @arslanbabar729
      @arslanbabar729 3 месяца назад

      ​@@MuhammadFaraz-m9y if you have an interest in web development you should really work for it. Web development is worth learning The future is all about coding. This is golden time for you to pick up the best skill for your future.

  • @shibnathroy106
    @shibnathroy106 3 месяца назад

    Good job bro

  • @oussemaa7894
    @oussemaa7894 3 месяца назад

    ty bruh <3

    • @thewebdesigner
      @thewebdesigner 3 месяца назад

      Please subscribe my channel..💥

  • @ranbijoychakraborty3170
    @ranbijoychakraborty3170 3 месяца назад

    Others at 19 🍾🍻🍷 Him at 19 hacking 😅

  • @Musico2Ai
    @Musico2Ai 3 месяца назад

    Firebase ata hai 😂😂 Ya database impliment kar lete ho 🗿 agar nahi 🤡

  • @Musico2Ai
    @Musico2Ai 3 месяца назад

    Bhai ke suggestion du React js use karo website ke liye Bache bache ko html css or js ati hai😂😂😂

    • @thewebdesigner
      @thewebdesigner 3 месяца назад

      🤣🤣🤣 thanks for suggestion

  • @Musico2Ai
    @Musico2Ai 3 месяца назад

    Bhai mere l**d lelo Website design or backend mene 16 ki age me kar liya tha or abhi me app dev. or game dev. karta hu 😂😂😂

  • @basil_inventors
    @basil_inventors 3 месяца назад

    it's about me

  • @Freakyisnotgay
    @Freakyisnotgay 3 месяца назад

    Don’t believe in luck believe in your hard work 🔥🔥🔥🔥🔥😮‍💨😮‍💨

  • @franckngoubounkou9930
    @franckngoubounkou9930 3 месяца назад

    Good merci

  • @swamisamarth7294
    @swamisamarth7294 3 месяца назад

    🎉🎉

  • @pedromanuelcamargomendez6520
    @pedromanuelcamargomendez6520 3 месяца назад

    Hi, when will you continue with the project? Please. Thank you very much for sharing your knowledge.

  • @swamisamarth7294
    @swamisamarth7294 3 месяца назад

    🎉🎉