Create a toggle button in React JS

1.  import React, { useState } from 'react';
   
    const ToggleButton = () => {
      const [isToggled, setToggled] = useState(false);
   
      const handleToggle = () => {
        setToggled(!isToggled);
      };
   
      return (
        <div>
          <p>{isToggled ? 'Toggled ON' : 'Toggled OFF'}</p>
          <button onClick={handleToggle}>
            {isToggled ? 'Turn OFF' : 'Turn ON'}
          </button>
        </div>
      );
    };
   
    export default ToggleButton;
   

   The useState hook manages the button state, and a click toggles between 'ON' and 'OFF'. The component dynamically updates the button text and displays the current state.

2. Create a simple profile card with name, image and title using HTML and CSS

    <div class="profile-card">
      <img src="profile-image.jpg" alt="Profile Image">
      <h2>John Doe</h2>
      <p>Web Developer</p>
    </div>
   

    .profile-card {
      text-align: center;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
   
    .profile-card img {
      width: 100%;
      border-radius: 50%;
      margin-bottom: 10px;
    }
   

   Create a clean profile card using HTML and CSS with a rounded image, displaying the name 'John Doe' and the title 'Web Developer'. The card features a subtle box-shadow for a modern look.

3. Create a counter application using React JS (functional components)

    import React, { useState } from 'react';
   
    const CounterApp = () => {
      const [count, setCount] = useState(0);
      return (
        <div>
          <h2>Counter: {count}</h2>
          <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
      );
    };
   

4. Write a React component that renders a single span inside a single div?

    import React from 'react';
   
    const SimpleComponent = () => (
      <div>
        <span>Hello, World!</span>
      </div>
    );
   

5. Fetch API to retrieve a random quote from This API when the button is clicked using JavaScript .

   Enhance your coding skills by attempting this hands-on problem. Create a button that, when clicked, fetches a random quote from a given API and displays it. Use JavaScript's Fetch API and showcase your ability to handle asynchronous operations. Feel free to share your solutions or ask for assistance in the comments section.
   Happy coding!😊✨

6. Create a two text box with first name and last name when the button is clicked it should display first character of first name and last name respectively using HTML, CSS and JavaScript .

   Build a dynamic feature where, upon clicking a button, the first character of the entered first and last names is displayed. Use HTML for structure, CSS for styling, and JavaScript for functionality. Hint: Leverage document.getElementById() to access input values and manipulate the DOM. Happy coding!😊⭐

Thank you for taking the time to read! I hope this blog has been a valuable learning experience for you. Don't hesitate to share it with others, and remember, sharing knowledge is a powerful way to inspire and grow together. Keep the learning spirit alive! 😊🚀 #HappyCoding #KeepSharing