Видео

Welcome 😊

Great Idea, I will make it soon Thank you. 😊

@@geek_24 thank you 😊 🙏 like voxqube or rask ia

I'm glad it helped you. :)

Thank you :)

I'm glad it helped 😊

Hi, yes, this API is free to use, but after a certain period, you need to regenerate the keys to continue using it.

Thank you so much :)

Hi there! Thank you so much for your support and for reaching out with your question. Regarding your question about why I used React-Bootstrap version 2.0 instead of the latest version, let me explain. During the creation of these videos, my aim was to demonstrate how to utilize UI kits and templates to build admin dashboards. Unfortunately, the templates I wanted to use were built using the older version of React-Bootstrap. While there may not be significant differences between the versions in terms of core functionality, I understand the importance of staying updated. If you prefer to use the latest version, I encourage you to do so! The concepts and techniques covered in the videos should still provide a solid foundation, and transitioning to the newer version shouldn't be too challenging, especially with the help of React-Bootstrap documentation. I apologize for not being able to complete the series as intended, but I hope the content provided still proves helpful to you. If you have any further questions or need clarification on anything, feel free to ask. Have a good day :)

@@geek_24 thank you so much sir for replying and giving a thorough explanation for my doubt. You seem like a good person and i pray to god that you may achieve all the greatness that you desire in your life.

Hi, you're right, it's not responsive at the moment. Since this tutorial was aimed at beginners, I didn't focus much on responsiveness. However, I'll update the code on GitHub to make it mobile-responsive soon.

Thank you so much. Your comment means a lot to me. Your words are more precious to me than a million subscriptions. ❤️❤️

Hi, unfortunately, I do not have such a video. However, if you can explain your requirement or what you mean by a dynamically created tooltip, I can help you.

Hi there! No worries, happy to help you out with this. 1. Centering the Title:To center your Offcanvas title, you can directly apply the Bootstrap class text-center to the title element. Here's how you can do it: <Offcanvas.Title className="text-center">Your Title</Offcanvas.Title> 2. Applying Bootstrap Classes:For customizing the entire canvas and its contents, you can apply Bootstrap classes directly to the elements inside the Offcanvas component. Here's an example where I've applied classes for text color and background color: <Offcanvas.Title className="text-center">Title</Offcanvas.Title> <Offcanvas.Body className="text-white bg-dark"> {/* Your content here */} </Offcanvas.Body> 3. Container Styling:If you're facing issues with centering due to container styling, you might need to adjust the container's CSS separately. Inspect the elements using your browser's developer tools to identify the relevant container and then apply custom CSS or additional Bootstrap classes as needed. 4. Div Wrapping:While wrapping content in divs and applying classes is common, make sure you're applying classes to the correct elements within the Offcanvas component. Sometimes, applying classes directly to the component's elements might yield better results than wrapping them in additional divs. By following these steps, you should be able to customize the styling of your React Bootstrap Offcanvas component effectively. If you encounter any specific issues or need further assistance, feel free to ask!

@@geek_24 I´ve done it like this: return ( <> <Offcanvas className="bg-dark" show={show} onHide={handleClose} {...props} backdrop={true} placement="end" name="End"> <Offcanvas.Header closeButton> <Offcanvas.Title className="text-center text-white"> Terms of use </Offcanvas.Title> </Offcanvas.Header> <Offcanvas.Body className="text-white bg-primary"> By using this site, you agree to refrain from using profanity, racism, or any form of offensive language when creating or commenting on recipes. We promote a respectful and inclusive community environment. </Offcanvas.Body> </Offcanvas> </> ); Still the title inside the header of the canvas is not centered. If i put the text-center directly into the offcanvas (where "bg-dark " is, only the text inside the body gets centered but not the title. I think the problem could be the closeButton in the header. But these are the things which confuse me a little as i´m new to programming in general :D EDIT: The closeButton is a flex element and seems to have around 232 margin to the left, which i think prevents the title on the left to be moved to the right.

❣Thank you.

You're welcome! :)

Thank you :)

😊 Thank you.

Hey there! That's awesome to hear that you're considering getting into SaaS! Starting with web development is definitely a solid move. Here's a step-by-step guide to help you get started: Learn the Basics of Web Development: Begin with HTML, CSS, and JavaScript. These are the building blocks of web development. You can find numerous tutorials on RUclips, or you might want to consider online courses like those offered on Codecademy or freeCodeCamp. you can watch my videos as well :) Choose Your Tech Stack: Decide on the technologies you want to work with. For SaaS, you'll probably need to learn a backend language/framework such as Node.js, Django, or Javs SpringBoot, along with database management (SQL or NoSQL). Build Projects: Practice is key! Start building small projects. Try to recreate popular web apps like a to-do list, a blog, or a simple e-commerce site. This will help you solidify your learning and gain practical experience. Learn about SaaS: Understand the principles of Software as a Service. Learn about subscription models, user management, data security, and scalability. There are many great resources available online and in books. Work on Your SaaS Idea: Start brainstorming and refining your SaaS idea. Consider the problem you're solving, your target market, and what makes your solution unique. Refine your idea through market research and competitor analysis. Prototype and MVP: Build a prototype or Minimum Viable Product (MVP) of your SaaS idea. Keep it simple and focus on the core functionality. This will help you validate your idea and get feedback from potential users. Launch and Iterate: Once you have your MVP, launch it! Gather feedback from your users and continue to iterate and improve your product based on that feedback. Keep Learning: Web development and SaaS are continually evolving fields. Keep learning and stay updated with the latest technologies and trends.

@@geek_24 thanks for all this information brother! Finished relearning html and almost done with css and will start javascript soon! I started with replicating above project first and didn't knew much and now understand almost a lot of things haha! Btw Any way we can connect?

@@aryanimagine Glad to hear you found the information helpful! You can connect with me on Instagram at @chitrang_sharma__

Hi, I don't have a video for that but adding zoom is very simple, you just need to define one property i.e zoomType:x (for zoom in x axis) Here is a simple example that might be helpful for you. Code: Highcharts.chart('container', { chart: { type: 'line', zoomType: 'x' }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); You can try this. Let me know if you have any questions I will try to answer them as soon as possible.

@@geek_24 Thanks bro. Do you know about the Range selector in highcharts which can work dynamically (I have an api that gives constant data )?

​@@suyogdhadwe3625 If you want to make a range slider, similar to what we make using <input type="range"/> in html, then yes you can make it using "rangeSelector" type of chart available in highCharts, You can check this example: Highcharts.stockChart('container', { rangeSelector: { selected: 1 }, title: { text: 'Dynamic Range Selector Example' }, series: [{ name: 'Data', data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] // Sample data }] }); Just put your constant data in the data array. I hope this helps :)

@@geek_24 Thanks you bro 😇. I really need these in the project.

Thank you so much 😊 Would you be interested in more tutorials on Highcharts?

Thank you, sure will do! Stay tuned :)

Hi there, For IntelliSense and class completion using ctrl+space, you need to install the Tailwind CSS IntelliSense plugin in your VS Code text editor. Once you install it, you will be able to add classes and get auto-completion. Additionally, I have provided another video link of mine with a timestamp of 12:26 where I demonstrate how to install the extension. You can watch it here: ruclips.net/video/z7xpDnHQO_A/видео.htmlsi=dIdfMX0DYjsbl69O. Let me know if you have any further questions.

Thank you so much :)

😊Thanks a lot

Sure I'll make a short on that maybe. But thank you for the comment 😊

@@geek_24 Thannk you ! Looking forward to it.

You're welcome 😊

That's Amazing 🤩

Then i asked GPT he said "It seems like your page is going blank because you're trying to access properties of weatherData without ensuring that it exists. When your component first renders, weatherData is initialized to null, and accessing properties of null will throw an error, causing your application to crash. To fix this issue, you need to add a conditional check to ensure that weatherData exists before accessing its properties. Here's how you can modify your Temprature component to handle this:" -----------Now tell me how i check weatherData is exist or not

Hi. Sorry for the confusion. I would request you to please continue following the video around 1:01:34. I have explained why this is happening and how to resolve it. I hope that will help.

😃I'm glad it helped

Glad it was helpful!

​@@geek_24 How can I customise close button

@@rajchowhan8132 To customize the close button in the React Bootstrap Offcanvas component, you can use the Offcanvas.Header component and provide your own custom close button within it. Here's how you can modify your code to achieve this: <Offcanvas.Header closeButton> <Offcanvas.Title>Offcanvas</Offcanvas.Title> {/* Custom close button */} <button className="btn-close" onClick={handleClose} aria-label="Close"></button> </Offcanvas.Header>

😊Thank you so much. I'm Glad it helped you.

Thank you for the comment! You're absolutely right. As this is a beginner-level tutorial, I haven't implemented debounce functionality in this video. However, I appreciate your insight, and I'll definitely consider incorporating it into future videos to enhance the application's performance. Your feedback is valuable, and I'm grateful for your helpful suggestions. Thanks again for taking the time to share your thoughts!

😊 Thanks a lot

😄

Most Welcome.😊

Thank you so much 😊

Hey, don't worry please tell me the exact timestamp in the video and what exact error you are getting on console.

Bro it solved thanks for your your beautiful tutorial I help me a lot

@@govindsharma973 Thank you, you made my day ❣

Thank you so much 😀

@@geek_24 waiting for more react project and you should try giving assential information from shorts as I'm beginning i want good advices

@@Code_loading Thank you so much for your comment! I want to let you know that I have a dedicated playlist of beginner-level React projects that you might find helpful. You can explore it here: ruclips.net/p/PLaBxiuYBVOR3OJoWUuNTEFTnTvvRcd3Gh I will soon add more projects to this list. And I truly appreciate your feedback, and I'll definitely take your suggestions into consideration for future content. Thanks again for your support and encouragement-it means a lot! 😊

@@geek_24 yes I'm exploring your channel you explain nicely just keep it up one day ur channel will also be highlighted

😃

Hello, sir mene wordpress ke sath integrate kar k try toh nahi kra hae. lekin jitna mujhe lagta hae, ye thoda complex hoga. Apko thoda bht php code bhi likha padega. But ye steps agr aap try kar skte hae toh possible hae k ye work kre. Otherwise I will try to look into it and if I got success I will try to make a video on this topic. But abhi toh aap in steps se smjh skte hae. 1. Create a Custom Page Template or Post Type Template: Create a new PHP file in your theme directory (e.g., custom-upload-template.php) and add a custom template header. Alternatively, if you're using a custom post type, you can create a custom template for that post type. 2. Embed PHP Code to Handle Upload and API Call: Inside your custom template file, add PHP code to handle file upload, call the API, and display the result. 3. Embed WordPress Functions to Render the Form: Use WordPress's built-in functions (such as wp_nonce_field() and wp_upload_dir()) to render the form for file upload. 4. Display the Result to the User: After calling the API and getting the result, display the modified image to the user. Here's a basic example of how your custom template file might look: <?php /* Template Name: Custom Upload Template */ // Add header, sidebar, footer, etc. if needed // Handle form submission if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['image_file'])) { // Handle file upload and API call // Implement your file upload and API call logic here } // Render form for file upload ?> <div class="container mt-4"> <div class="row mt-4"> <div class="col-md-12 card mt-4"> <form id="bg-removal-form" method="post" enctype="multipart/form-data"> <?php wp_nonce_field('bg_removal_nonce', 'bg_removal_nonce_field'); ?> <div class="form-group"> <label for="fileInput">Select a File: </label> <input id="fileInput" name="image_file" class="form-control" type="file"> </div> <input class="btn btn-primary m-1" type="submit" value="Upload"> </form> </div> </div> </div> <?php // Display the modified image to the user if available ?> <?php if (isset($modified_image_url)): ?> <div class="container mt-4"> <div class="row mt-4"> <div class="col-md-12 card mt-4"> <img src="<?php echo esc_url($modified_image_url); ?>" alt="Modified Image"> </div> </div> </div> <?php endif; ?> <?php?> The template handles form submission, including file upload and API call (you need to implement this logic). The form is rendered using WordPress's wp_nonce_field() function to add a security token. The modified image (if available) is displayed to the user using an <img> tag. You'll need to set $modified_image_url with the URL of the modified image after calling the API. Remember to replace the placeholder logic with your actual file upload handling and API call logic. Additionally, ensure proper error handling and validation for file uploads and API responses.

Thank you so much for your kind words! I truly appreciate your support and am glad to hear that you find my videos helpful. If you have any specific topics or questions you'd like me to cover in future videos, feel free to let me know. 😊

Thank you 😊

Most Welcome :)

Thank you Manish 😃😃

😃 Thank you so much and Welcome. I will post more project videos soon stay tuned ❤