![THE WEB DESIGNER](/img/default-banner.jpg)
- 679
- 463 278
THE WEB DESIGNER
India
Приєднався 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.
ImageBackground React Native | How to add text to an image in React Native?
Beginner React Js Projects :-ua-cam.com/video/19uBgPfy988/v-deo.html
React Blog Project :-ua-cam.com/video/osoRStkJirU/v-deo.html
Javascript Beginner Project :- ua-cam.com/video/nxOEa7DQmrE/v-deo.html
HTML & CSS Beginner Project :-ua-cam.com/video/4xTSfXlY33Q/v-deo.html
JS Plugin You Will love :-ua-cam.com/video/ECD52fW6W8c/v-deo.html
imagebackground react native,
image background react native,
react native background image full screen,
react native image background full screen,
gradient background react native,
react native image background,
image background in react native,
animated background react native,
run app in background react native,
set background image in react native
React Blog Project :-ua-cam.com/video/osoRStkJirU/v-deo.html
Javascript Beginner Project :- ua-cam.com/video/nxOEa7DQmrE/v-deo.html
HTML & CSS Beginner Project :-ua-cam.com/video/4xTSfXlY33Q/v-deo.html
JS Plugin You Will love :-ua-cam.com/video/ECD52fW6W8c/v-deo.html
imagebackground react native,
image background react native,
react native background image full screen,
react native image background full screen,
gradient background react native,
react native image background,
image background in react native,
animated background react native,
run app in background react native,
set background image in react native
Переглядів: 6
Відео
Image - React Native | Displaying images with the React Native Image component | Part 12
Переглядів 82 години тому
Beginner React Js Projects :-ua-cam.com/video/19uBgPfy988/v-deo.html React Blog Project :-ua-cam.com/video/osoRStkJirU/v-deo.html Javascript Beginner Project :- ua-cam.com/video/nxOEa7DQmrE/v-deo.html HTML & CSS Beginner Project :-ua-cam.com/video/4xTSfXlY33Q/v-deo.html JS Plugin You Will love :-ua-cam.com/video/ECD52fW6W8c/v-deo.html images with the react native, images in react native, react ...
What are the differences between props and state | Part 11
Переглядів 84 години тому
Beginner React Js Projects :-ua-cam.com/video/19uBgPfy988/v-deo.html React Blog Project :-ua-cam.com/video/osoRStkJirU/v-deo.html Javascript Beginner Project :- ua-cam.com/video/nxOEa7DQmrE/v-deo.html HTML & CSS Beginner Project :-ua-cam.com/video/4xTSfXlY33Q/v-deo.html JS Plugin You Will love :-ua-cam.com/video/ECD52fW6W8c/v-deo.html what are the differences between props and state, difference...
State in React Native | Function component | Part 10
Переглядів 167 годин тому
Beginner React Js Projects :-ua-cam.com/video/19uBgPfy988/v-deo.html React Blog Project :-ua-cam.com/video/osoRStkJirU/v-deo.html Javascript Beginner Project :- ua-cam.com/video/nxOEa7DQmrE/v-deo.html HTML & CSS Beginner Project :-ua-cam.com/video/4xTSfXlY33Q/v-deo.html JS Plugin You Will love :-ua-cam.com/video/ECD52fW6W8c/v-deo.html function based component state react native, functional comp...
State In React Native | Class based component State | Part 9
Переглядів 109 годин тому
Beginner React Js Projects :-ua-cam.com/video/19uBgPfy988/v-deo.html React Blog Project :-ua-cam.com/video/osoRStkJirU/v-deo.html Javascript Beginner Project :- ua-cam.com/video/nxOEa7DQmrE/v-deo.html HTML & CSS Beginner Project :-ua-cam.com/video/4xTSfXlY33Q/v-deo.html JS Plugin You Will love :-ua-cam.com/video/ECD52fW6W8c/v-deo.html class based component state react native, class component re...
Props in Class components | React Native Props | Part 8
Переглядів 1112 годин тому
Beginner React Js Projects :-ua-cam.com/video/19uBgPfy988/v-deo.html React Blog Project :-ua-cam.com/video/osoRStkJirU/v-deo.html Javascript Beginner Project :- ua-cam.com/video/nxOEa7DQmrE/v-deo.html HTML & CSS Beginner Project :-ua-cam.com/video/4xTSfXlY33Q/v-deo.html JS Plugin You Will love :-ua-cam.com/video/ECD52fW6W8c/v-deo.html props in functional components, props in functional componen...
Props in functional components | React Native Props | Part 7
Переглядів 814 годин тому
Beginner React Js Projects :-ua-cam.com/video/19uBgPfy988/v-deo.html React Blog Project :-ua-cam.com/video/osoRStkJirU/v-deo.html Javascript Beginner Project :- ua-cam.com/video/nxOEa7DQmrE/v-deo.html HTML & CSS Beginner Project :-ua-cam.com/video/4xTSfXlY33Q/v-deo.html JS Plugin You Will love :-ua-cam.com/video/ECD52fW6W8c/v-deo.html props in functional components, props in functional componen...
React Native Styling | External File CSS | Part 6
Переглядів 1216 годин тому
Beginner React Js Projects :-ua-cam.com/video/19uBgPfy988/v-deo.html React Blog Project :-ua-cam.com/video/osoRStkJirU/v-deo.html Javascript Beginner Project :- ua-cam.com/video/nxOEa7DQmrE/v-deo.html HTML & CSS Beginner Project :-ua-cam.com/video/4xTSfXlY33Q/v-deo.html JS Plugin You Will love :-ua-cam.com/video/ECD52fW6W8c/v-deo.html react native styling,react native styling tutorial,react nat...
React Native Styling | StyleSheet Core Component | Part 5
Переглядів 1319 годин тому
Beginner React Js Projects :-ua-cam.com/video/19uBgPfy988/v-deo.html React Blog Project :-ua-cam.com/video/osoRStkJirU/v-deo.html Javascript Beginner Project :- ua-cam.com/video/nxOEa7DQmrE/v-deo.html HTML & CSS Beginner Project :-ua-cam.com/video/4xTSfXlY33Q/v-deo.html JS Plugin You Will love :-ua-cam.com/video/ECD52fW6W8c/v-deo.html react native styling,react native styling tutorial,react nat...
React Native Styling | Inline Style | Part 4
Переглядів 1521 годину тому
Beginner React Js Projects :-ua-cam.com/video/19uBgPfy988/v-deo.html React Blog Project :-ua-cam.com/video/osoRStkJirU/v-deo.html Javascript Beginner Project :- ua-cam.com/video/nxOEa7DQmrE/v-deo.html HTML & CSS Beginner Project :-ua-cam.com/video/4xTSfXlY33Q/v-deo.html JS Plugin You Will love :-ua-cam.com/video/ECD52fW6W8c/v-deo.html react native styling, react native styling tutorial, react n...
Function & Class Components in React Native | Core Component Text, View | Part 3
Переглядів 17День тому
Function & Class Components in React Native | Core Component Text, View | Part 3
Essential Requirements for React Native | React Native Prerequisites | Part 2
Переглядів 74День тому
Essential Requirements for React Native | React Native Prerequisites | Part 2
Get Started with React Native | Installation of React Native App | Part 1
Переглядів 77День тому
Get Started with React Native | Installation of React Native App | Part 1
CSS Animated Responsive Cards Hover Effects | Html & CSS
Переглядів 6014 днів тому
CSS Animated Responsive Cards Hover Effects | Html & CSS
How To Get The Length of a String in JavaScript | Mini Project JavaScript
Переглядів 2314 днів тому
How To Get The Length of a String in JavaScript | Mini Project JavaScript
Create A Glassmorphism Login Form in HTML and CSS
Переглядів 2,3 тис.14 днів тому
Create A Glassmorphism Login Form in HTML and CSS
Calculate days between two dates in JavaScript | JavaScript Date method
Переглядів 3814 днів тому
Calculate days between two dates in JavaScript | JavaScript Date method
How To Create a Contact Form with CSS | How To Create a Responsive Form with CSS
Переглядів 6021 день тому
How To Create a Contact Form with CSS | How To Create a Responsive Form with CSS
How to Create a Modal Box using HTML CSS and JavaScript
Переглядів 5121 день тому
How to Create a Modal Box using HTML CSS and JavaScript
How to Build an Accordion Menu Using HTML, CSS and JavaScript
Переглядів 2521 день тому
How to Build an Accordion Menu Using HTML, CSS and JavaScript
Bootstrap 5 card hover effect | border bottom change color on Hover
Переглядів 6321 день тому
Bootstrap 5 card hover effect | border bottom change color on Hover
How to build a React accordion menu from scratch | Download Free Code
Переглядів 10821 день тому
How to build a React accordion menu from scratch | Download Free Code
What is Counter-up and How to Implement it in ReactJS?
Переглядів 11621 день тому
What is Counter-up and How to Implement it in ReactJS?
OTP Generator in HTML CSS & JavaScript
Переглядів 6028 днів тому
OTP Generator in HTML CSS & JavaScript
React Big Calendar Crud App - Add, Update, Delete Event. Part 5
Переглядів 259Місяць тому
React Big Calendar Crud App - Add, Update, Delete Event. Part 5
React Big Calendar Crud App - Add, Update, Delete Event. Part 4
Переглядів 160Місяць тому
React Big Calendar Crud App - Add, Update, Delete Event. Part 4
React Big Calendar Crud App - Add, Update, Delete Event. Part 3
Переглядів 166Місяць тому
React Big Calendar Crud App - Add, Update, Delete Event. Part 3
React Big Calendar Crud App - Add, Update, Delete Event. Part 2
Переглядів 223Місяць тому
React Big Calendar Crud App - Add, Update, Delete Event. Part 2
React Big Calendar Crud App - Add, Update, Delete Event. Part 1
Переглядів 297Місяць тому
React Big Calendar Crud App - Add, Update, Delete Event. Part 1
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
Pura series upload karna bhai mujhe jarurat hai ❤pl,
Yes brother 💯
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 ...
My too🎉
Movie name
Golmaal returns
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, UA-cam and github.
🎉🎉
give github repo for this calendar
github.com/amolkapadi/React-big-calender-event-app/tree/main
Love it.. it's a simple way.. 🙌🏻.. but bg.. is scary 💀
this is me
🥰
🎉🎉
Thanks, source code?
github.com/amolkapadi/React-big-calender-event-app/tree/main
Please subscribe my channel ✨🥳
Thanks you very match. Your vidéo is best
🙌
Hi , can you send me this ui design link
github.com/amolkapadi/Boilerplate-TaskManager-RN
Nice video
Thank you so much.. please subscribe my channel 🥳🙌
source code?
github.com/amolkapadi/react-big-cal-crud-event
how you made this?
Go to play store and download vscode and screen recorder on mobile...
@@thewebdesigner i meant the code, I'm using select element but not getting this model kind of overlay
@haxer4283 www.w3schools.com/tags/tryit.asp?filename=tryhtml_select
Is it work with React.js or next.js for web development
Nope it's library only work with Native app .
ua-cam.com/play/PLZdBNNxWmMHgZAaZW2nWcFPqpPoR8KukX.html&si=mkAiZWV1CPDJxMdo
For react or next
@@thewebdesigner for react , I read gifted chart also available for web development
i have one question can i ask?
Yes sure
@@thewebdesigner the problem is that when start date and end date is same then only events are displaying in week view otherwise not const calendarsWithDateObjects = res?.map((calendar) => { const startDate = formatDate(calendar?.start); const endDate = formatDate(calendar?.end); const startTimeFormatted = convertTo24HourFormat(calendar?.program_start_time); const endTimeFormatted = convertTo24HourFormat(calendar?.program_end_time); const startDateTime = `${startDate}T${startTimeFormatted}`; const endDateTime = `${endDate}T${endTimeFormatted}`; const startTimeDate = new Date(startDateTime); const endTimeDate = new Date(endDateTime); if (startDate && endDate) { // Split date components const startDateComponents = startDate.split('-').map(Number); // Convert date string to array of numbers const endDateComponents = endDate.split('-').map(Number); // Convert date string to array of numbers // Initialize time components (handle undefined case) let startTimeComponents = [0, 0]; if (startTimeFormatted) { startTimeComponents = startTimeFormatted.split(':').map(Number); // Convert time string to array of numbers } // Initialize time components (handle undefined case) let endTimeComponents = [0, 0]; if (endTimeFormatted) { endTimeComponents = endTimeFormatted.split(':').map(Number); // Convert time string to array of numbers } // Construct Date objects const startTimeDates = new Date( startDateComponents[0], startDateComponents[1] - 1, startDateComponents[2], startTimeComponents[0], startTimeComponents[1], ); const endTimeDates = new Date( endDateComponents[0], endDateComponents[1] - 1, endDateComponents[2], endTimeComponents[0], endTimeComponents[1], ); console.log( 'startTimeDates', startDateComponents[0], startDateComponents[1] - 1, startDateComponents[2], startTimeComponents[0], startTimeComponents[1], ); // Output: Date object for the start date and time console.log(endTimeDates); // Output: Date object for the end date and time return { ...calendar, start: startDateTime ? new Date( startDateComponents[0], startDateComponents[1] - 1, startDateComponents[2], startTimeComponents[0], startTimeComponents[1], ) : null, end: new Date( endDateComponents[0], endDateComponents[1] - 1, endDateComponents[2], endTimeComponents[0], endTimeComponents[1], ), }; // return { // ...calendar, // start: new Date(2024, 7, 20, 2, 30,0), // end: new Date(2024, 9, 20, 3, 45,0), // }; } });
@@thewebdesigner the problem is that when start date and end date is same then only events are displaying in week view otherwise not const calendarsWithDateObjects = res?.map((calendar) => { const startDate = formatDate(calendar?.start); const endDate = formatDate(calendar?.end); const startTimeFormatted = convertTo24HourFormat(calendar?.program_start_time); const endTimeFormatted = convertTo24HourFormat(calendar?.program_end_time); const startDateTime = `${startDate}T${startTimeFormatted}`; const endDateTime = `${endDate}T${endTimeFormatted}`; const startTimeDate = new Date(startDateTime); const endTimeDate = new Date(endDateTime); if (startDate && endDate) { // Split date components const startDateComponents = startDate.split('-').map(Number); // Convert date string to array of numbers const endDateComponents = endDate.split('-').map(Number); // Convert date string to array of numbers // Initialize time components (handle undefined case) let startTimeComponents = [0, 0]; if (startTimeFormatted) { startTimeComponents = startTimeFormatted.split(':').map(Number); // Convert time string to array of numbers } // Initialize time components (handle undefined case) let endTimeComponents = [0, 0]; if (endTimeFormatted) { endTimeComponents = endTimeFormatted.split(':').map(Number); // Convert time string to array of numbers } // Construct Date objects const startTimeDates = new Date( startDateComponents[0], startDateComponents[1] - 1, startDateComponents[2], startTimeComponents[0], startTimeComponents[1], ); const endTimeDates = new Date( endDateComponents[0], endDateComponents[1] - 1, endDateComponents[2], endTimeComponents[0], endTimeComponents[1], ); console.log( 'startTimeDates', startDateComponents[0], startDateComponents[1] - 1, startDateComponents[2], startTimeComponents[0], startTimeComponents[1], ); // Output: Date object for the start date and time console.log(endTimeDates); // Output: Date object for the end date and time return { ...calendar, start: startDateTime ? new Date( startDateComponents[0], startDateComponents[1] - 1, startDateComponents[2], startTimeComponents[0], startTimeComponents[1], ) : null, end: new Date( endDateComponents[0], endDateComponents[1] - 1, endDateComponents[2], endTimeComponents[0], endTimeComponents[1], ), }; // return { // ...calendar, // start: new Date(2024, 7, 20, 2, 30,0), // end: new Date(2024, 9, 20, 3, 45,0), // }; } });
@@thewebdesigner the problem is that when start date and end date is same then only events are displaying in week view otherwise not const calendarsWithDateObjects = res?.map((calendar) => { const startDate = formatDate(calendar?.start); const endDate = formatDate(calendar?.end); const startTimeFormatted = convertTo24HourFormat(calendar?.program_start_time); const endTimeFormatted = convertTo24HourFormat(calendar?.program_end_time); const startDateTime = `${startDate}T${startTimeFormatted}`; const endDateTime = `${endDate}T${endTimeFormatted}`; const startTimeDate = new Date(startDateTime); const endTimeDate = new Date(endDateTime); if (startDate && endDate) { // Split date components const startDateComponents = startDate.split('-').map(Number); // Convert date string to array of numbers const endDateComponents = endDate.split('-').map(Number); // Convert date string to array of numbers // Initialize time components (handle undefined case) let startTimeComponents = [0, 0]; if (startTimeFormatted) { startTimeComponents = startTimeFormatted.split(':').map(Number); // Convert time string to array of numbers } // Initialize time components (handle undefined case) let endTimeComponents = [0, 0]; if (endTimeFormatted) { endTimeComponents = endTimeFormatted.split(':').map(Number); // Convert time string to array of numbers } // Construct Date objects const startTimeDates = new Date( startDateComponents[0], startDateComponents[1] - 1, startDateComponents[2], startTimeComponents[0], startTimeComponents[1], ); const endTimeDates = new Date( endDateComponents[0], endDateComponents[1] - 1, endDateComponents[2], endTimeComponents[0], endTimeComponents[1], ); console.log( 'startTimeDates', startDateComponents[0], startDateComponents[1] - 1, startDateComponents[2], startTimeComponents[0], startTimeComponents[1], ); // Output: Date object for the start date and time console.log(endTimeDates); // Output: Date object for the end date and time return { ...calendar, start: startDateTime ? new Date( startDateComponents[0], startDateComponents[1] - 1, startDateComponents[2], startTimeComponents[0], startTimeComponents[1], ) : null, end: new Date( endDateComponents[0], endDateComponents[1] - 1, endDateComponents[2], endTimeComponents[0], endTimeComponents[1], ), }; // return { // ...calendar, // start: new Date(2024, 7, 20, 2, 30,0), // end: new Date(2024, 9, 20, 3, 45,0), // }; } });
nice video
🎉🎉
😊🎉
❤🎉😊
import React from 'react'; import { View, Text, StyleSheet, Dimensions } from 'react-native'; import Carousel from 'react-native-snap-carousel'; const { width: screenWidth } = Dimensions.get('window'); const dummyData = [ { id: 1, title: 'Title 1' }, { id: 2, title: 'Title 2' }, { id: 3, title: 'Title 3' }, { id: 4, title: 'Title 4' }, { id: 5, title: 'Title 5' } ]; const MyCarousel = ({ data }) => { const renderItem = ({ item }) => ( <View style={styles.card}> <Text style={styles.title}>{item.title}</Text> </View> ); return ( <Carousel data={data} renderItem={renderItem} sliderWidth={screenWidth} itemWidth={screenWidth} layout={'default'} /> ); }; const Slider = () => { return ( <View style={styles.container}> <Text style={styles.text}>React Native carousel with react-native-snap-carousel</Text> <MyCarousel data={dummyData} /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', marginTop:20 }, text:{ fontSize:20, marginBottom:20, color:'#764ABC' }, card: { backgroundColor: '#764ABC', borderRadius: 10, padding: 20, justifyContent: 'center', alignItems: 'center', width: screenWidth - 40, marginHorizontal: 20 , height:200 }, title: { fontSize: 24, color:'white' } }); export default Slider; ERROR TypeError: Cannot read property 'style' of undefined, js engine: hermes solve this issue sir
Hey, I am trying this but getting these warnings, ERROR Warning: CountryItem: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. Warning: CountryModal: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
Does anyone know why I get this error: TypeError: Cannot read property 'style' of undefined, js engine: hermes
medium.com/@amolakapadi/react-native-carousel-with-react-native-snap-carousel-17eef107b27c
Please check this blog
Have you found any solutions, i have the same error too!
@MatiasOrlando-cz6fi medium.com/@amolakapadi/react-native-carousel-with-react-native-snap-carousel-17eef107b27c
@@thewebdesigner still the same error
🔥👍🏼👍🏼🥰
how to use this in any website through snippet