- Видео 683
- Просмотров 509 029
THE WEB DESIGNER
Индия
Добавлен 8 авг 2021
Hello Friends,
Welcome to my youtube channel "The Web Designer" ! I created this channel for to help you to learn web designing and development.
Tutorials from basic to advance of Html, css, javascript, Bootstrap, Reactjs, wordpress etc any many more...
Please subscribe my channel to receive notification of my new videos and learn new things.
Welcome to my youtube channel "The Web Designer" ! I created this channel for to help you to learn web designing and development.
Tutorials from basic to advance of Html, css, javascript, Bootstrap, Reactjs, wordpress etc any many more...
Please subscribe my channel to receive notification of my new videos and learn new things.
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...
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
Safety in OTP is send to right people with registered data. So, It's not how it is going.
Sir Please source code
github.com/amolkapadi/Jewelry-Store-project/tree/main
hey can we integerated APi here ? can we make data dyamically?
In this vedio not integrated any API it's static..yes we can make data dynamically form api
Thanks bro ✨
Thank you for this video dear
Thanks for watching ✨
Biroktokor music diye rakhcen
as we have 100.000 data's how can i do it? explain it pleasy
Hey bro can you share any git repo or code ? Nice Its very helpful
Very educational video set. Can you share the source code
github.com/amolkapadi/Boilerplate-TaskManager-RN
GitHub link send me
Really pleasent for me that was my first time to use swiper.
wow
Hey @THE WEB DESIGNER.. can you please built a app for me.. ❤
Yes sure
Give me details of the App
thankk youuu for ur video
Thanks for watching vedio 🫶🏻🥰
hey can i get this code?
github.com/tejaspawar2026/dropdown
how todo the same but for only one item during you adding it?
how to export excel with exactly same UI ? ( width, group ...)
hello it is nace
💯
Does it uses expo ? , can you give us source code github url ?
"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
@@thewebdesigner is it completed ?
Why there is extra button with the selected date shown instead of showing the calendar directly in iOS?
repo link
please share the code github repo
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
😅
THE WEB DESIGNER, I really enjoyed this video, so I hit the like button!
❤️
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;
Very class explain easy to understand.. please continue the series
Please don't give such loud background music, it's distracting
Sorry for that I will change music asap..
Food App firestore plz
Thank you so much Very helpful
Nice😢😢😢😢😢
Thanks so much for this tutorial! Great for understanding BrowserRouter, Route and Routes!
🙌😎😎
hey bro i need the assests
github.com/amolkapadi/animatedcardhtmlcss
Please checkout link
how do you test this with jest
Bro use your voice that make more sense.
Yes bro I have plan to upload video with voice ...
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
Sounds good bro...✨
Is it (web development) good for generating a small income with freelancing
Yes brother
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
Sure how can I help you
You can help me by telling me that should I learn web development or not Is it best field for starting in 2024( August)
@@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.
Good job bro
Thank you brother ✨
ty bruh <3
Please subscribe my channel..💥
Others at 19 🍾🍻🍷 Him at 19 hacking 😅
Firebase ata hai 😂😂 Ya database impliment kar lete ho 🗿 agar nahi 🤡
Bhai ke suggestion du React js use karo website ke liye Bache bache ko html css or js ati hai😂😂😂
🤣🤣🤣 thanks for suggestion
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 😂😂😂
it's about me
Don’t believe in luck believe in your hard work 🔥🔥🔥🔥🔥😮💨😮💨
Good merci
🥳
🎉🎉
Hi, when will you continue with the project? Please. Thank you very much for sharing your knowledge.
github.com/amolkapadi/React-big-calender-event-app/tree/main
Please check out the GitHub link and download the complete code with CRUD App ...
@@thewebdesigner thank you very much.
Yup... Please subscribe channel ✨🙌💯
@@thewebdesigner yes, RUclips and github.
🎉🎉