Tag: Web Development

In today’s digital world, having a functional and user-friendly contact form on your website is crucial. It’s the bridge that connects you with your audience, allowing them to reach out with questions, feedback, or inquiries. But building a dynamic contact form that’s both visually appealing and seamlessly integrates with your website can seem daunting, especially if you’re new to React JS. This tutorial will guide you through the process of building a simple, yet effective, interactive contact form using React, making it easy for your website visitors to get in touch with you.

Why React for a Contact Form?

React JS is a powerful JavaScript library for building user interfaces. Its component-based architecture and efficient rendering make it an excellent choice for creating interactive elements like contact forms. Here’s why React is a great fit:

• Component-Based: React allows you to break down your UI into reusable components. This means you can create a `ContactForm` component and easily reuse it across different pages of your website.
• Virtual DOM: React uses a virtual DOM to efficiently update the actual DOM, leading to faster performance and a smoother user experience.
• State Management: React’s state management capabilities make it easy to handle user input and update the form’s display accordingly.
• JSX: React uses JSX, a syntax extension to JavaScript, which allows you to write HTML-like structures within your JavaScript code, making your UI code more readable and maintainable.

Setting Up Your React Project

Before we dive into the code, let’s set up a basic React project. We’ll use Create React App, a popular tool that simplifies the process of creating a new React application. If you have Node.js and npm (Node Package Manager) or yarn installed, you can create a new React app by running the following command in your terminal:

npx create-react-app contact-form-app
cd contact-form-app

This command creates a new directory called `contact-form-app` and sets up a basic React project with all the necessary dependencies. Navigate into the project directory using `cd contact-form-app`. Now, let’s start the development server:

npm start

This will start the development server, and your React app should open in your web browser at `http://localhost:3000` (or a different port if 3000 is already in use). You should see the default React app’s welcome screen. Now, let’s clean up the default code and prepare our project for the contact form.

Creating the Contact Form Component

Inside the `src` folder, you’ll find an `App.js` file. This is where we’ll build our contact form component. Open `App.js` and replace its contents with the following code:

import React, { useState } from 'react';
import './App.css';

function App() {
  // State for form fields and submission status
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [submitted, setSubmitted] = useState(false);

  // Handle input changes
  const handleNameChange = (e) => {
    setName(e.target.value);
  };

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handleMessageChange = (e) => {
    setMessage(e.target.value);
  };

  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    // Simulate sending data (replace with actual API call)
    console.log('Form submitted:', { name, email, message });
    setSubmitted(true);
    // Reset form after a delay (optional)
    setTimeout(() => {
      setSubmitted(false);
      setName('');
      setEmail('');
      setMessage('');
    }, 3000);
  };

  return (
    <div>
      <h2>Contact Us</h2>
      {submitted ? (
        <div>
          Thank you for your message!
        </div>
      ) : (
        
          <div>
            <label>Name:</label>
            
          </div>
          <div>
            <label>Email:</label>
            
          </div>
          <div>
            <label>Message:</label>
            <textarea id="message" name="message" rows="5"></textarea>
          </div>
          <button type="submit">Submit</button>
        
      )}
    </div>
  );
}

export default App;

Let’s break down this code:

• Import React and useState: We import the `React` library and the `useState` hook, which allows us to manage the form’s state.
• State Variables: We define state variables to store the values of the form fields (`name`, `email`, `message`) and a boolean to track submission status (`submitted`).
• Event Handlers: We create event handlers (`handleNameChange`, `handleEmailChange`, `handleMessageChange`) to update the state variables whenever the user types in the input fields.
• handleSubmit Function: This function is triggered when the form is submitted. It prevents the default form submission behavior (which would refresh the page), logs the form data to the console (you would replace this with an API call to send the data to your backend), sets the `submitted` state to `true`, and optionally resets the form after a delay.
• JSX Structure: The JSX code defines the structure of the contact form, including the labels, input fields, and submit button. It uses conditional rendering to display a success message after the form is submitted.

Now, let’s add some basic styling to make our form look presentable. Create a file named `App.css` in the `src` directory and add the following CSS:

.container {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

textarea {
  resize: vertical;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.success-message {
  padding: 10px;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  border-radius: 4px;
  margin-bottom: 15px;
}

Make sure to import this CSS file into your `App.js` file: `import ‘./App.css’;` at the top. Save both files, and your contact form should now be visible in your browser. You can test it by entering some information and clicking the submit button. You should see the “Thank you for your message!” success message appear.

Step-by-Step Instructions

Here’s a detailed breakdown of the steps involved in building the contact form:

1. Project Setup: Use `create-react-app` to set up a new React project (as shown above).
2. Component Structure: Create an `App.js` file to hold the main component.
3. State Management: Use the `useState` hook to manage the form fields’ values and submission status.
4. Input Handling: Create event handler functions (`handleNameChange`, `handleEmailChange`, `handleMessageChange`) to update the state when the user types in the input fields.
5. Form Submission: Create a `handleSubmit` function to handle form submission, which would typically involve sending data to a backend server. In this example, we log the data to the console.
6. JSX Rendering: Use JSX to define the structure of the form, including labels, input fields, and a submit button. Use conditional rendering to display a success message after the form is submitted.
7. Styling: Create an `App.css` file to add basic styling to the form (optional).
8. Testing: Test the form by entering values and submitting it. Verify that the values are captured correctly and that the success message appears.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

• Not Handling Input Changes: If the input fields don’t update when you type, you likely forgot to attach the `onChange` event handler to each input. Make sure your input elements have an `onChange` prop that calls the corresponding handler function (e.g., `onChange={handleNameChange}`).
• Missing `required` Attribute: If you want to make certain fields mandatory, add the `required` attribute to your input and textarea elements (e.g., “). This will prevent the form from submitting if the user leaves a required field blank.
• Incorrect State Updates: Make sure you are correctly updating the state variables within your event handler functions. For example, use `setName(e.target.value)` to update the `name` state when the user types in the name field.
• Form Not Submitting: If the form isn’t submitting, check whether you’ve included the `onSubmit` event handler on your “ tag and that the `handleSubmit` function is correctly defined and called. Also, make sure you’re not accidentally preventing the default form submission behavior (e.g., using `e.preventDefault()` in the wrong place).
• CSS Issues: If your form looks unstyled or doesn’t display correctly, check your CSS file (`App.css`) and make sure the styles are being applied correctly. Double-check that you’ve imported the CSS file into your `App.js` component.

Adding Validation (Intermediate)

To enhance the user experience and ensure data quality, you can add validation to your contact form. This involves checking the user’s input before submitting the form. Here’s an example of how to add basic email validation:

import React, { useState } from 'react';
import './App.css';

function App() {
  // ... (existing state and handlers)

  const [emailError, setEmailError] = useState('');

  const handleEmailChange = (e) => {
    const emailValue = e.target.value;
    setEmail(emailValue);

    // Email validation using a regular expression
    if (!/^[w-.]+@([w-]+.)+[w-]{2,4}$/.test(emailValue)) {
      setEmailError('Please enter a valid email address.');
    } else {
      setEmailError('');
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (emailError) {
      alert('Please correct the email address.');
      return;
    }

    // ... (rest of the handleSubmit logic)
  };

  return (
    <div>
      <h2>Contact Us</h2>
      {submitted ? (
        <div>
          Thank you for your message!
        </div>
      ) : (
        
          {/* ... (other form fields) */}
          <div>
            <label>Email:</label>
            
            {emailError && <div>{emailError}</div>}
          </div>
          {/* ... (other form fields) */}
          <button type="submit">Submit</button>
        
      )}
    </div>
  );
}

export default App;

In this example:

• We add a new state variable, `emailError`, to store any email validation errors.
• The `handleEmailChange` function now validates the email address using a regular expression. If the email is invalid, it sets the `emailError` state.
• The `handleSubmit` function checks for any email errors before submitting the form. If there’s an error, it alerts the user and prevents submission.
• We conditionally render an error message below the email input field if `emailError` has a value.

You can extend this approach to validate other fields (e.g., name, message) and provide more specific error messages to the user. This makes your form more robust and user-friendly.

Sending Data to a Backend (Advanced)

The current example logs the form data to the console. In a real-world scenario, you’ll want to send this data to a backend server. Here’s a simplified example using the `fetch` API:

const handleSubmit = async (e) => {
  e.preventDefault();
  // ... (validation checks)

  try {
    const response = await fetch('/api/contact', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name, email, message }),
    });

    if (response.ok) {
      // Handle successful submission (e.g., show success message)
      console.log('Form submitted successfully!');
      setSubmitted(true);
      setTimeout(() => {
        setSubmitted(false);
        setName('');
        setEmail('');
        setMessage('');
      }, 3000);
    } else {
      // Handle errors (e.g., display error message)
      console.error('Form submission failed:', response.status);
      alert('There was a problem submitting the form. Please try again.');
    }
  } catch (error) {
    // Handle network errors
    console.error('Network error:', error);
    alert('There was a network error. Please try again later.');
  }
};

In this example:

• We use `fetch` to send a POST request to a backend API endpoint (`/api/contact`).
• We set the `Content-Type` header to `application/json` to indicate that we’re sending JSON data.
• We use `JSON.stringify()` to convert the form data into a JSON string.
• We handle the response from the server. If the submission is successful (response.ok is true), we show a success message. Otherwise, we display an error message.
• We handle potential errors using a `try…catch` block.

Important: You’ll need to set up a backend server (e.g., using Node.js with Express, Python with Django/Flask, etc.) to handle the API endpoint (`/api/contact`) and process the form data. The backend would typically store the data in a database or send an email. This is outside the scope of this tutorial, but there are many resources available online to help you with backend development.

Key Takeaways

• React is a powerful library for building interactive user interfaces, including contact forms.
• The `useState` hook is essential for managing the state of form fields.
• Event handlers are used to update the state when the user interacts with the form.
• JSX allows you to write HTML-like structures within your JavaScript code.
• Consider adding form validation to improve the user experience and data quality.
• To send form data to a backend, use the `fetch` API or a similar method.

FAQ

1. Can I use this contact form on any website? Yes, you can adapt this code and use it on any website where you can integrate React components. However, you’ll need to modify the form submission logic to send the data to your specific backend server.
2. How do I style the contact form? You can style the contact form using CSS. You can either write inline styles, use a separate CSS file (as shown in this tutorial), or use a CSS-in-JS library like Styled Components or Emotion.
3. What if I don’t want to use `create-react-app`? You can still build a React contact form without using `create-react-app`. However, you’ll need to set up the build process yourself (e.g., using Webpack or Parcel) and manage your dependencies. `create-react-app` simplifies this process significantly.
4. How do I handle file uploads in the contact form? Handling file uploads is more complex and typically requires a backend server to receive and store the files. You’ll need to use the `FormData` object in JavaScript to send the file data to the server. You can find many tutorials on file uploads with React and backend frameworks.
5. How can I improve the form’s accessibility? To improve accessibility, make sure your form has appropriate labels for each input field using the `for` attribute that matches the `id` of the input. Use semantic HTML elements (e.g., ``, ``) and provide clear error messages for invalid input. Consider using ARIA attributes for more complex interactions.</li> </ol> <p>By following these steps, you’ve successfully created a functional and interactive contact form using React JS. Remember that this is a starting point, and you can customize it further to meet your specific needs. You can add more features, such as more complex validation rules, file uploads, and integration with third-party services. The key is to break down the problem into smaller, manageable components and to test your code frequently. With practice, you’ll be able to build increasingly complex and sophisticated React components. Embrace the iterative process of development, continuously refining your skills and expanding your knowledge to create web applications that are both functional and user-friendly. The journey of learning React, like any coding endeavor, is a continuous one, filled with challenges and triumphs. The ability to adapt to new technologies and integrate them into your projects is what defines a successful developer, so keep experimenting and keep building.</p> </div> <div style="margin-top:var(--wp--preset--spacing--40)" class="wp-block-post-date has-small-font-size"><a href="https://javascriptfundamentals.com/build-a-dynamic-react-js-component-for-a-simple-interactive-contact-form/"><time datetime="2026-02-23T00:59:54+00:00">February 23, 2026</time></a></div> </div> </li><li class="wp-block-post post-1417 post type-post status-publish format-standard hentry category-react-js tag-beginners tag-javascript tag-programming tag-react tag-tic-tac-toe tag-tutorial tag-web-development"> <div class="wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"> <h2 class="wp-block-post-title has-x-large-font-size"><a href="https://javascriptfundamentals.com/build-a-dynamic-react-js-component-for-a-simple-interactive-tic-tac-toe-game/" target="_self" >Build a Dynamic React JS Component for a Simple Interactive Tic-Tac-Toe Game</a></h2> <div class="entry-content alignfull wp-block-post-content has-medium-font-size has-global-padding is-layout-constrained wp-block-post-content-is-layout-constrained"><p>Ever felt the thrill of a Tic-Tac-Toe match? It’s a classic game, simple in concept, yet endlessly engaging. In the world of web development, we often face challenges that, like Tic-Tac-Toe, seem straightforward on the surface but require thoughtful execution. This tutorial will guide you through building a dynamic, interactive Tic-Tac-Toe game using React JS. We’ll break down the process step-by-step, making it easy to understand even if you’re new to React. By the end, you’ll not only have a functional game but also a solid grasp of React components, state management, and event handling.</p> <h2>Why Build a Tic-Tac-Toe Game with React?</h2> <p>React is a powerful JavaScript library for building user interfaces. It allows us to create interactive and dynamic web applications with ease. Building a Tic-Tac-Toe game is an excellent way to learn fundamental React concepts, such as:</p> <ul> <li><b>Components:</b> Breaking down the UI into reusable pieces.</li> <li><b>State:</b> Managing the game’s data (board, turn, winner).</li> <li><b>Event Handling:</b> Responding to user interactions (clicks).</li> <li><b>Conditional Rendering:</b> Displaying different content based on the game’s state.</li> </ul> <p>Moreover, building a game like Tic-Tac-Toe provides a practical application of these concepts, making the learning process more engaging and memorable.</p> <h2>Setting Up Your React Project</h2> <p>Before we dive into the code, let’s set up our development environment. We’ll use Create React App, a popular tool that simplifies the process of creating a React project. If you don’t have Node.js and npm (Node Package Manager) installed, you’ll need to install them first. You can download them from the official Node.js website.</p> <p>Once you have Node.js and npm installed, open your terminal or command prompt and run the following command to create a new React project:</p> <pre><code class="language-bash" data-line="">npx create-react-app tic-tac-toe-react</code></pre> <p>This command will create a new directory called `tic-tac-toe-react` with all the necessary files and dependencies. Navigate into the project directory:</p> <pre><code class="language-bash" data-line="">cd tic-tac-toe-react</code></pre> <p>Now, start the development server:</p> <pre><code class="language-bash" data-line="">npm start</code></pre> <p>This will open your React app in your web browser, usually at `http://localhost:3000`. You should see the default React app’s welcome screen. We’ll replace the content of the `src/App.js` file with our Tic-Tac-Toe game code.</p> <h2>Building the Game Components</h2> <p>Our Tic-Tac-Toe game will be composed of several components:</p> <ul> <li><b>Square:</b> Represents a single square on the board.</li> <li><b>Board:</b> Represents the entire game board, composed of nine squares.</li> <li><b>Game:</b> Manages the game’s overall state and logic.</li> </ul> <h3>The Square Component</h3> <p>Let’s start with the `Square` component. This component will render a single square on the Tic-Tac-Toe board. Create a new file named `src/Square.js` and add the following code:</p> <pre><code class="language-jsx" data-line="">import React from 'react'; function Square(props) { return ( <button> {props.value} </button> ); } export default Square;</code></pre> <p>Let’s break down this code:</p> <ul> <li>We import `React` from the ‘react’ library.</li> <li>The `Square` function component takes `props` as an argument. Props are how we pass data from parent components to child components.</li> <li>The component returns a `<button>` element with the class name “square”. We’ll style this later.</li> <li>`onClick={props.onClick}`: This assigns a function (passed as a prop) to the button’s `onClick` event. When the button is clicked, this function will be called.</li> <li>`{props.value}`: This displays the value of the square (either ‘X’, ‘O’, or null).</li> </ul> <p>Now, let’s add some basic styling to `src/index.css` to make the squares look like a Tic-Tac-Toe board:</p> <pre><code class="language-css" data-line="">.square { width: 75px; height: 75px; background: #fff; border: 1px solid #999; font-size: 24px; font-weight: bold; line-height: 34px; text-align: center; padding: 0; cursor: pointer; } .square:focus { outline: none; } .board-row:after { clear: both; content: ""; display: table; } </code></pre> <h3>The Board Component</h3> <p>The `Board` component will render the nine `Square` components. Create a new file named `src/Board.js` and add the following code:</p> <pre><code class="language-jsx" data-line="">import React from 'react'; import Square from './Square'; function Board(props) { function renderSquare(i) { return ( props.onClick(i)} /> ); } return ( <div> <div> {renderSquare(0)}{renderSquare(1)}{renderSquare(2)} </div> <div> {renderSquare(3)}{renderSquare(4)}{renderSquare(5)} </div> <div> {renderSquare(6)}{renderSquare(7)}{renderSquare(8)} </div> </div> ); } export default Board;</code></pre> <p>Here’s what’s happening:</p> <ul> <li>We import `Square` from `src/Square.js`.</li> <li>The `Board` function component takes `props` as an argument.</li> <li>`renderSquare(i)`: This function renders a single `Square` component. It receives the index `i` of the square.</li> <li>`value={props.squares[i]}`: This passes the value of the square (from the `squares` array in the `props`) to the `Square` component.</li> <li>`onClick={() => props.onClick(i)}`: This passes a function to the `Square` component’s `onClick` prop. When the square is clicked, this function calls the `onClick` function that was passed as a prop from the `Game` component, passing the square’s index `i`.</li> <li>The component returns a ` <div>` element containing three rows, each with three `Square` components.</li> </ul> <h3>The Game Component</h3> <p>The `Game` component is the parent component that manages the game’s state and logic. It keeps track of the board’s squares, the current player’s turn, and the game’s winner. Replace the content of `src/App.js` with the following code:</p> <pre><code class="language-jsx" data-line="">import React, { useState } from 'react'; import Board from './Board'; function calculateWinner(squares) { const lines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6], ]; for (let i = 0; i { if (winner || squares[i]) { return; } const nextSquares = squares.slice(); nextSquares[i] = xIsNext ? 'X' : 'O'; setSquares(nextSquares); setXIsNext(!xIsNext); }; const status = winner ? 'Winner: ' + winner : 'Next player: ' + (xIsNext ? 'X' : 'O'); return ( <div> <div> </div> <div>{status}</div> </div> ); } export default Game;</code></pre> <p>Let’s break down the `Game` component:</p> <ul> <li><b>Import Statements:</b> We import `React` and the `useState` hook from ‘react’, and `Board` from ‘./Board’.</li> <li><b>`calculateWinner(squares)`:</b> This function checks if there’s a winner based on the current state of the `squares` array.</li> <li><b>`useState` Hooks:</b> <ul> <li>`const [squares, setSquares] = useState(Array(9).fill(null));`: This initializes the `squares` state variable. It’s an array of 9 elements, each initialized to `null`. This array represents the Tic-Tac-Toe board.</li> <li>`const [xIsNext, setXIsNext] = useState(true);`: This initializes the `xIsNext` state variable to `true`, indicating that ‘X’ is the first player.</li> </ul> </li> <li><b>`handleClick(i)`:</b> This function is called when a square is clicked. <ul> <li>It checks if there’s a winner or if the clicked square already has a value. If so, it returns early.</li> <li>`const nextSquares = squares.slice();`: Creates a copy of the `squares` array to avoid directly modifying the state. This is important for immutability.</li> <li>`nextSquares[i] = xIsNext ? ‘X’ : ‘O’;`: Sets the value of the clicked square to ‘X’ or ‘O’ based on whose turn it is.</li> <li>`setSquares(nextSquares);`: Updates the `squares` state with the modified array, triggering a re-render.</li> <li>`setXIsNext(!xIsNext);`: Switches the turn to the other player.</li> </ul> </li> <li><b>`status` variable:</b> Determines the game status message (e.g., “Next player: X” or “Winner: X”).</li> <li><b>Return Statement:</b> Renders the `Board` component, passing the `squares` array and the `handleClick` function as props. It also displays the game status.</li> </ul> <h2>Putting It All Together</h2> <p>Now that we have all the components, let’s see how they interact. The `Game` component manages the overall game state. When a square is clicked, the `handleClick` function is called, which updates the `squares` state. The `Board` component receives the `squares` state and renders the `Square` components accordingly. The `Square` components display the value of the corresponding square (‘X’, ‘O’, or null).</p> <p>To run the game, start the development server using `npm start` in your terminal. You should see the Tic-Tac-Toe board in your browser. Click on the squares to play the game!</p> <h2>Common Mistakes and How to Fix Them</h2> <p>Here are some common mistakes beginners make when building React applications, along with how to avoid or fix them:</p> <ul> <li><b>Directly Modifying State:</b> One of the most common mistakes is directly modifying the state variables instead of creating a copy and updating the copy. This can lead to unexpected behavior and make it difficult to track changes. Always use the `slice()` method or the spread operator (`…`) to create a copy of the array or object before modifying it.</li> <pre><code class="language-jsx" data-line="">// Incorrect: Directly modifying the state const nextSquares = squares; nextSquares[i] = 'X'; setSquares(nextSquares); // Correct: Creating a copy and modifying the copy const nextSquares = squares.slice(); nextSquares[i] = 'X'; setSquares(nextSquares); </code></pre> <li><b>Forgetting to Update State:</b> React components don’t automatically re-render when the underlying data changes. You need to use the `setState` function (or the `set…` function from the `useState` hook) to tell React that the state has changed and that it needs to re-render the component.</li> <li><b>Incorrectly Passing Props:</b> Make sure you’re passing the correct props to your child components. Double-check the prop names and the data types you’re passing.</li> <li><b>Not Handling Events Correctly:</b> When handling events (like clicks), make sure you’re passing the correct event handler function and that you’re preventing the default behavior if necessary.</li> <li><b>Ignoring Immutability:</b> Always treat state as immutable. Never modify the state directly. Instead, create a copy and modify that. This helps React efficiently track changes and re-render only when necessary.</li> </ul> <h2>Adding More Features (Optional)</h2> <p>Once you’ve built the basic Tic-Tac-Toe game, you can add more features to enhance it. Here are some ideas:</p> <ul> <li><b>Game History:</b> Implement a game history feature that allows players to see the moves made in the game. You can add a button to go back and forth between moves.</li> <li><b>Reset Button:</b> Add a reset button to restart the game.</li> <li><b>Player Names:</b> Allow players to enter their names.</li> <li><b>Scoreboard:</b> Keep track of the players’ scores.</li> <li><b>AI Opponent:</b> Implement an AI opponent to play against.</li> <li><b>Responsive Design:</b> Make the game responsive so that it looks good on different screen sizes.</li> </ul> <h2>Key Takeaways</h2> <p>In this tutorial, we’ve built a fully functional Tic-Tac-Toe game using React. We’ve covered the fundamental concepts of React components, state management, event handling, and conditional rendering. You’ve also learned how to break down a complex UI into smaller, reusable components. By understanding these concepts, you’re well on your way to building more complex and interactive web applications with React.</p> <h2>FAQ</h2> <p>Here are some frequently asked questions about building a Tic-Tac-Toe game with React:</p> <ol> <li><b>How do I handle the click event in the Square component?</b> <p>In the `Square` component, you use the `onClick` prop to assign a function to the button’s click event. This function is passed down from the `Board` component, which in turn receives it from the `Game` component. When the button is clicked, this function is executed, which calls the `handleClick` function in the `Game` component, passing the index of the clicked square.</p> </li> <li><b>How do I determine the winner?</b> <p>The `calculateWinner` function checks all possible winning combinations (rows, columns, and diagonals) to see if any player has won. It iterates through the `lines` array, which contains all the winning combinations. For each combination, it checks if the squares at those indices have the same value (either ‘X’ or ‘O’) and are not null. If a winning combination is found, the function returns the value of the winning player (‘X’ or ‘O’).</p> </li> <li><b>Why is it important to create a copy of the state before modifying it?</b> <p>Directly modifying the state in React can lead to unexpected behavior and make it difficult to track changes. React uses a virtual DOM to efficiently update the UI. When you update the state, React compares the current state with the previous state to determine what needs to be re-rendered. If you directly modify the state, React might not detect the changes, and the UI might not update correctly. Creating a copy of the state ensures that React can accurately detect the changes and re-render the component when necessary. It also helps with debugging and prevents potential side effects.</p> </li> <li><b>How can I add game history?</b> <p>To add game history, you would need to store the state of the board after each move. You can create an array to store the squares array after each move. When a player makes a move, you add the current state of the board to this array. You can then add buttons to allow the user to go back and forth through the game history, and update the display accordingly.</p> </li> </ol> <p>Developing this Tic-Tac-Toe game provides a solid foundation for understanding React fundamentals. From here, you can explore more advanced React concepts, such as using external libraries or integrating APIs. The most important thing is to keep practicing and building projects. Every line of code written, every bug fixed, brings you closer to becoming a proficient React developer. The principles you’ve learned here—components, state, and event handling—are the building blocks of almost any interactive web application. So, keep experimenting, keep learning, and most importantly, keep building. The journey of a thousand lines of code begins with a single click, or in this case, a single square.</p> </div> <div style="margin-top:var(--wp--preset--spacing--40)" class="wp-block-post-date has-small-font-size"><a href="https://javascriptfundamentals.com/build-a-dynamic-react-js-component-for-a-simple-interactive-tic-tac-toe-game/"><time datetime="2026-02-23T00:54:30+00:00">February 23, 2026</time></a></div> </div> </li><li class="wp-block-post post-1414 post type-post status-publish format-standard hentry category-react-js tag-beginner tag-component tag-event-handling tag-interactive tag-javascript tag-react tag-state-management tag-tutorial tag-typing-game tag-web-development"> <div class="wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"> <h2 class="wp-block-post-title has-x-large-font-size"><a href="https://javascriptfundamentals.com/build-a-dynamic-react-component-for-a-simple-interactive-typing-game/" target="_self" >Build a Dynamic React Component for a Simple Interactive Typing Game</a></h2> <div class="entry-content alignfull wp-block-post-content has-medium-font-size has-global-padding is-layout-constrained wp-block-post-content-is-layout-constrained"><p>Are you a developer looking to sharpen your React skills while building something fun and engaging? Do you want to move beyond basic tutorials and create a dynamic, interactive web application? If so, you’re in the right place. In this comprehensive guide, we’ll walk through the process of building a simple, yet effective, typing game using React. This project offers a fantastic opportunity to solidify your understanding of React components, state management, event handling, and conditional rendering – all essential skills for any modern web developer.</p> <h2>Why Build a Typing Game with React?</h2> <p>Typing games are more than just a nostalgic pastime; they’re excellent learning tools. For developers, building one offers several benefits:</p> <ul> <li><b>Practical Application:</b> You’ll apply fundamental React concepts in a real-world scenario.</li> <li><b>Skill Enhancement:</b> You’ll improve your ability to manage state, handle user input, and update the UI dynamically.</li> <li><b>Portfolio Piece:</b> A typing game can be a great addition to your portfolio, showcasing your ability to build interactive applications.</li> <li><b>Fun Factor:</b> It’s a fun project! Learning is more enjoyable when you’re building something you can actually use and share.</li> </ul> <p>We’ll break down the process into manageable steps, explaining each concept in detail and providing clear, commented code examples. By the end of this tutorial, you’ll have a fully functional typing game and a solid understanding of how to build interactive React applications.</p> <h2>Prerequisites</h2> <p>Before we begin, make sure you have the following:</p> <ul> <li><b>Node.js and npm (or yarn) installed:</b> These are essential for managing project dependencies and running the development server.</li> <li><b>A basic understanding of HTML, CSS, and JavaScript:</b> Familiarity with these languages will make it easier to follow along.</li> <li><b>A text editor or IDE:</b> Choose your preferred editor (VS Code, Sublime Text, Atom, etc.)</li> <li><b>React knowledge:</b> While this tutorial is geared towards beginners, some familiarity with React components, JSX, and props will be helpful.</li> </ul> <h2>Setting Up the React Project</h2> <p>Let’s get started by creating a new React project. Open your terminal and run the following command:</p> <pre><code class="language-bash" data-line="">npx create-react-app typing-game cd typing-game</code></pre> <p>This command uses Create React App to set up a new React project with all the necessary configurations. Once the project is created, navigate into the project directory using <code class="" data-line="">cd typing-game</code>.</p> <h2>Project Structure</h2> <p>Create React App generates a basic project structure. We’ll be working primarily in the <code class="" data-line="">src</code> directory. Here’s a simplified view of the structure we’ll be using:</p> <pre><code class="language-bash" data-line="">typing-game/ ├── src/ │ ├── components/ │ │ ├── TypingArea.js │ │ ├── Stats.js │ │ └── Timer.js │ ├── App.js │ ├── App.css │ └── index.js ├── public/ └── package.json</code></pre> <p>Inside the <code class="" data-line="">src/components</code> directory, we’ll create three components:</p> <ul> <li><code class="" data-line="">TypingArea.js</code>: This component will handle the typing input and display the text.</li> <li><code class="" data-line="">Stats.js</code>: This component will display the game statistics (WPM, accuracy, etc.).</li> <li><code class="" data-line="">Timer.js</code>: This component will display and manage the game timer.</li> </ul> <h2>Building the TypingArea Component</h2> <p>Let’s start by creating the <code class="" data-line="">TypingArea.js</code> component. This component will be responsible for displaying the text to be typed, handling user input, and providing feedback (e.g., highlighting correct and incorrect characters).</p> <p>Create a new file named <code class="" data-line="">TypingArea.js</code> inside the <code class="" data-line="">src/components</code> directory and add the following code:</p> <pre><code class="language-jsx" data-line="">import React, { useState, useEffect } from 'react'; import './TypingArea.css'; // Import the CSS file function TypingArea({ text, onComplete }) { const [userInput, setUserInput] = useState(''); const [currentIndex, setCurrentIndex] = useState(0); const [startTime, setStartTime] = useState(null); const [endTime, setEndTime] = useState(null); const [isGameComplete, setIsGameComplete] = useState(false); useEffect(() => { if (isGameComplete) { onComplete(calculateWPM(), calculateAccuracy()); } }, [isGameComplete, onComplete]); const handleInputChange = (event) => { const inputText = event.target.value; setUserInput(inputText); if (!startTime) { setStartTime(new Date()); } if (inputText === text.substring(0, inputText.length)) { // Correct typing setCurrentIndex(inputText.length); } else { // Incorrect typing // No need to adjust currentIndex, it will be handled by the styling. } if (inputText === text) { setEndTime(new Date()); setIsGameComplete(true); } }; const calculateWPM = () => { if (!startTime || !endTime) return 0; const durationInMinutes = (endTime.getTime() - startTime.getTime()) / 60000; const wordsTyped = text.split(' ').length; return Math.round(wordsTyped / durationInMinutes); }; const calculateAccuracy = () => { if (!startTime || !endTime) return 0; let correctChars = 0; for (let i = 0; i < userInput.length; i++) { if (userInput[i] === text[i]) { correctChars++; } } return Math.round((correctChars / userInput.length) * 100) || 0; }; const renderText = () => { if (!text) return null; return ( <div className="typing-text"> {text.split('').map((char, index) => { let className = ''; if (index < currentIndex) { className = userInput[index] === char ? 'correct' : 'incorrect'; } return ( <span key={index} className={className}> {char} </span> ); })} </div> ); }; return ( <div className="typing-area"> {renderText()} <input type="text" value={userInput} onChange={handleInputChange} disabled={isGameComplete} autoFocus /> </div> ); } export default TypingArea; </code></pre> <p>Now, create <code class="" data-line="">TypingArea.css</code> inside the <code class="" data-line="">src</code> directory and add the following CSS styles:</p> <pre><code class="language-css" data-line="">.typing-area { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; } .typing-text { font-size: 1.5rem; margin-bottom: 10px; word-break: break-word; width: 80%; text-align: left; } .typing-text span { padding: 0 2px; } .correct { color: green; } .incorrect { color: red; text-decoration: underline; } .typing-area input { padding: 10px; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; width: 80%; } .typing-area input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); } </code></pre> <p>Let’s break down this component:</p> <ul> <li><b>State Variables:</b> <ul> <li><code class="" data-line="">userInput</code>: Stores the text the user has typed.</li> <li><code class="" data-line="">currentIndex</code>: Keeps track of the current character the user is typing.</li> <li><code class="" data-line="">startTime</code>: Records the start time of the game.</li> <li><code class="" data-line="">endTime</code>: Records the end time of the game.</li> <li><code class="" data-line="">isGameComplete</code>: A boolean to check if the game is over.</li> </ul> <li><b><code class="" data-line="">useEffect</code> Hook:</b> <ul> <li>This hook is used to trigger the calculations and call the <code class="" data-line="">onComplete</code> prop function when the game is complete.</li> </ul> </li> <li><b><code class="" data-line="">handleInputChange</code> Function:</b> <ul> <li>This function is called whenever the user types in the input field.</li> <li>It updates the <code class="" data-line="">userInput</code> state.</li> <li>It starts the timer when the user types the first character.</li> <li>It checks if the typed characters match the text and updates the <code class="" data-line="">currentIndex</code>.</li> <li>It sets <code class="" data-line="">isGameComplete</code> to true when the user has typed the entire text.</li> </ul> </li> <li><b><code class="" data-line="">calculateWPM</code> Function:</b> <ul> <li>Calculates the Words Per Minute (WPM) based on the start and end times, and the number of words in the text.</li> </ul> </li> <li><b><code class="" data-line="">calculateAccuracy</code> Function:</b> <ul> <li>Calculates the typing accuracy based on the user input and the original text.</li> </ul> </li> <li><b><code class="" data-line="">renderText</code> Function:</b> <ul> <li>Renders the text to be typed, highlighting correct and incorrect characters based on the user’s input.</li> </ul> </li> <li><b>JSX Structure:</b> <ul> <li>Displays the text to be typed.</li> <li>Renders an input field where the user can type. The input field is disabled when the game is complete.</li> </ul> </li> </ul> <h2>Creating the Stats Component</h2> <p>The <code class="" data-line="">Stats.js</code> component will display the game statistics such as Words Per Minute (WPM) and accuracy. Create a file named <code class="" data-line="">Stats.js</code> inside the <code class="" data-line="">src/components</code> directory and add the following code:</p> <pre><code class="language-jsx" data-line="">import React from 'react'; import './Stats.css'; function Stats({ wpm, accuracy }) { return ( <div className="stats"> <p>WPM: {wpm}</p> <p>Accuracy: {accuracy}%</p> </div> ); } export default Stats; </code></pre> <p>Now, create <code class="" data-line="">Stats.css</code> inside the <code class="" data-line="">src</code> directory and add the following CSS styles:</p> <pre><code class="language-css" data-line="">.stats { margin-bottom: 20px; text-align: center; } .stats p { font-size: 1.2rem; margin: 5px 0; } </code></pre> <p>This component is relatively simple. It receives <code class="" data-line="">wpm</code> and <code class="" data-line="">accuracy</code> as props and displays them in a formatted way.</p> <h2>Building the Timer Component</h2> <p>The Timer.js component will display and manage the game timer. Create a file named <code class="" data-line="">Timer.js</code> inside the <code class="" data-line="">src/components</code> directory and add the following code:</p> <pre><code class="language-jsx" data-line="">import React, { useState, useEffect } from 'react'; import './Timer.css'; function Timer({ startTime, endTime }) { const [timeElapsed, setTimeElapsed] = useState(0); useEffect(() => { let intervalId; if (startTime && !endTime) { intervalId = setInterval(() => { const now = new Date(); setTimeElapsed(Math.floor((now.getTime() - startTime.getTime()) / 1000)); }, 1000); } return () => { clearInterval(intervalId); }; }, [startTime, endTime]); const formatTime = (seconds) => { const minutes = Math.floor(seconds / 60); const remainingSeconds = seconds % 60; return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`; }; return ( <div className="timer"> {endTime ? 'Finished!' : formatTime(timeElapsed)} </div> ); } export default Timer; </code></pre> <p>Now, create <code class="" data-line="">Timer.css</code> inside the <code class="" data-line="">src</code> directory and add the following CSS styles:</p> <pre><code class="language-css" data-line="">.timer { font-size: 1.2rem; text-align: center; margin-bottom: 10px; } </code></pre> <p>Here’s how this component works:</p> <ul> <li><b>State Variable:</b> <ul> <li><code class="" data-line="">timeElapsed</code>: Stores the elapsed time in seconds.</li> </ul> </li> <li><b><code class="" data-line="">useEffect</code> Hook:</b> <ul> <li>This hook starts a timer when the <code class="" data-line="">startTime</code> prop is provided and <code class="" data-line="">endTime</code> is not.</li> <li>It updates the <code class="" data-line="">timeElapsed</code> state every second.</li> <li>It clears the interval when the component unmounts or when <code class="" data-line="">endTime</code> is provided.</li> </ul> </li> <li><b><code class="" data-line="">formatTime</code> Function:</b> <ul> <li>Formats the elapsed time into minutes and seconds.</li> </ul> </li> <li><b>JSX Structure:</b> <ul> <li>Displays the formatted time or “Finished!” when the game is complete.</li> </ul> </li> </ul> <h2>Integrating the Components in App.js</h2> <p>Now, let’s put all these components together in <code class="" data-line="">App.js</code>. Open <code class="" data-line="">src/App.js</code> and replace the existing code with the following:</p> <pre><code class="language-jsx" data-line="">import React, { useState } from 'react'; import TypingArea from './components/TypingArea'; import Stats from './components/Stats'; import Timer from './components/Timer'; import './App.css'; function App() { const [wpm, setWpm] = useState(0); const [accuracy, setAccuracy] = useState(0); const [text, setText] = useState( "The quick brown rabbit jumps over the lazy frogs with a smile." ); const [gameStartTime, setGameStartTime] = useState(null); const [gameEndTime, setGameEndTime] = useState(null); const handleGameComplete = (wpm, accuracy) => { setWpm(wpm); setAccuracy(accuracy); setGameEndTime(new Date()); }; const handleGameStart = () => { setGameStartTime(new Date()); setGameEndTime(null); setWpm(0); setAccuracy(0); }; return ( <div className="app"> <h1>Typing Game</h1> <Timer startTime={gameStartTime} endTime={gameEndTime} /> <TypingArea text={text} onComplete={handleGameComplete} /> <Stats wpm={wpm} accuracy={accuracy} /> <button onClick={handleGameStart} disabled={!gameEndTime}> {gameEndTime ? 'Play Again' : 'Start Game'} </button> </div> ); } export default App; </code></pre> <p>And then add the following CSS to <code class="" data-line="">App.css</code>:</p> <pre><code class="language-css" data-line=""> .app { text-align: center; padding: 20px; font-family: sans-serif; } .app h1 { margin-bottom: 20px; } button { padding: 10px 20px; font-size: 1rem; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; } button:hover { background-color: #0056b3; } button:disabled { background-color: #cccccc; cursor: not-allowed; } </code></pre> <p>In this component:</p> <ul> <li>We import the <code class="" data-line="">TypingArea</code>, <code class="" data-line="">Stats</code>, and <code class="" data-line="">Timer</code> components.</li> <li>We define state variables for WPM, accuracy, the text to be typed, and game start and end times.</li> <li><code class="" data-line="">handleGameComplete</code> is a function that receives WPM and accuracy from the <code class="" data-line="">TypingArea</code> component, updates the state, and sets the end time.</li> <li><code class="" data-line="">handleGameStart</code> is a function that resets the game state.</li> <li>We render the components, passing the necessary props.</li> <li>A ‘Start Game’ or ‘Play Again’ button is displayed and enabled/disabled appropriately.</li> </ul> <h2>Running the Application</h2> <p>Now that we’ve built all the components, let’s run the application. In your terminal, make sure you’re in the project directory (<code class="" data-line="">typing-game</code>) and run the following command:</p> <pre><code class="language-bash" data-line="">npm start</code></pre> <p>This command will start the development server, and your typing game should open in your web browser at <code class="" data-line="">http://localhost:3000</code> (or a different port if 3000 is unavailable).</p> <h2>Common Mistakes and How to Fix Them</h2> <p>Here are some common mistakes and how to fix them:</p> <ul> <li><b>Incorrect Character Highlighting:</b> If the highlighting of correct/incorrect characters isn’t working correctly, double-check the logic in the <code class="" data-line="">renderText</code> function within the <code class="" data-line="">TypingArea</code> component. Make sure you’re comparing the user’s input with the correct characters from the original text. Also, verify that the <code class="" data-line="">currentIndex</code> is being updated correctly.</li> <li><b>Timer Issues:</b> If the timer isn’t starting, stopping, or updating correctly, check the <code class="" data-line="">useEffect</code> hook in the <code class="" data-line="">Timer</code> component. Make sure the dependencies (<code class="" data-line="">startTime</code> and <code class="" data-line="">endTime</code>) are correctly set and that the interval is being cleared when the game ends.</li> <li><b>WPM and Accuracy Calculation Errors:</b> If the WPM or accuracy calculations seem off, carefully review the formulas in the <code class="" data-line="">calculateWPM</code> and <code class="" data-line="">calculateAccuracy</code> functions within the <code class="" data-line="">TypingArea</code> component. Ensure you’re using the correct values (start time, end time, number of words, correct characters, etc.) in your calculations.</li> <li><b>Input Field Not Focusing:</b> The <code class="" data-line="">autoFocus</code> attribute on the input field in the <code class="" data-line="">TypingArea</code> component ensures that the input field is automatically focused when the game starts. If it isn’t working, make sure the attribute is correctly placed and that the component is rendered properly.</li> <li><b>CSS Styling Issues:</b> If the styling doesn’t appear as expected, check the import paths in the component files and ensure that the CSS files are correctly linked. Also, use your browser’s developer tools (right-click, ‘Inspect’) to check for any CSS errors or conflicts.</li> </ul> <h2>Enhancements and Next Steps</h2> <p>Here are some ideas to enhance your typing game:</p> <ul> <li><b>Different Difficulty Levels:</b> Allow users to select different difficulty levels (e.g., easy, medium, hard) by changing the text length or complexity.</li> <li><b>Customizable Text:</b> Enable users to type their own text or choose from a list of pre-defined texts.</li> <li><b>Sound Effects:</b> Add sound effects for correct and incorrect key presses, and for the game over event.</li> <li><b>Scoreboard:</b> Implement a scoreboard to track high scores.</li> <li><b>User Authentication:</b> Allow users to create accounts and save their scores.</li> <li><b>Responsive Design:</b> Ensure the game looks good on different screen sizes.</li> </ul> <h2>Summary / Key Takeaways</h2> <p>Congratulations! You’ve successfully built a dynamic typing game with React. You’ve learned how to:</p> <ul> <li>Set up a React project using Create React App.</li> <li>Create and structure React components.</li> <li>Manage component state using the <code class="" data-line="">useState</code> hook.</li> <li>Handle user input and events.</li> <li>Use the <code class="" data-line="">useEffect</code> hook for side effects (timer).</li> <li>Implement conditional rendering.</li> <li>Calculate and display game statistics.</li> </ul> <p>This project is an excellent foundation for building more complex interactive web applications. You can adapt the concepts learned here to create other types of games or interactive tools. Remember to practice regularly, experiment with different features, and explore the vast possibilities that React offers.</p> <h2>FAQ</h2> <p><b>Q: How can I change the text that is being typed?</b></p> <p>A: You can change the text by modifying the <code class="" data-line="">text</code> state variable in the <code class="" data-line="">App.js</code> component. You could also fetch text from an API to make it dynamic.</p> <p><b>Q: How do I add sound effects?</b></p> <p>A: You can add sound effects by using the HTML5 <code class="" data-line=""><audio></code> element or a JavaScript audio library. Trigger the sounds based on events (e.g., correct/incorrect key presses, game over).</p> <p><b>Q: How can I improve the accuracy calculation?</b></p> <p>A: You could refine the accuracy calculation to handle backspaces or other editing actions more gracefully. For example, you might choose to only count the characters that are matched correctly, and ignore backspaces. You could also include a penalty for incorrect characters typed.</p> <p><b>Q: How do I deploy this application?</b></p> <p>A: You can deploy your React application to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide free hosting and make it easy to deploy your projects.</p> <p>Building this typing game is a significant step in your React journey. It combines fundamental concepts in a way that’s both educational and engaging. By understanding how the components interact, how state is managed, and how user input is handled, you’ve gained valuable skills that will serve you well in future React projects. Keep experimenting, keep learning, and most importantly, keep building. The world of React development is vast and exciting, and with each project, you’ll become more proficient and confident in your abilities.</p> </div> <div style="margin-top:var(--wp--preset--spacing--40)" class="wp-block-post-date has-small-font-size"><a href="https://javascriptfundamentals.com/build-a-dynamic-react-component-for-a-simple-interactive-typing-game/"><time datetime="2026-02-23T00:47:30+00:00">February 23, 2026</time></a></div> </div> </li><li class="wp-block-post post-1412 post type-post status-publish format-standard hentry category-react-js tag-beginner tag-coding tag-component tag-front-end tag-image-carousel tag-intermediate tag-javascript tag-reactjs tag-tutorial tag-web-development"> <div class="wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"> <h2 class="wp-block-post-title has-x-large-font-size"><a href="https://javascriptfundamentals.com/build-a-dynamic-react-component-for-a-simple-interactive-image-carousel/" target="_self" >Build a Dynamic React Component for a Simple Interactive Image Carousel</a></h2> <div class="entry-content alignfull wp-block-post-content has-medium-font-size has-global-padding is-layout-constrained wp-block-post-content-is-layout-constrained"><p>In today’s visually driven world, image carousels are ubiquitous. From e-commerce sites showcasing products to blogs highlighting featured content, they provide a dynamic and engaging way to present multiple images within a limited space. As a senior software engineer, I’ll guide you through building a simple, yet functional, interactive image carousel component using ReactJS. This tutorial is designed for beginners and intermediate developers, focusing on clarity, practical application, and best practices. We’ll explore the core concepts, address common pitfalls, and ensure your component is both performant and user-friendly. By the end, you’ll have a reusable component you can integrate into your projects.</p> <h2>Why Build an Image Carousel?</h2> <p>Image carousels offer several advantages. They:</p> <ul> <li><strong>Enhance User Engagement:</strong> They grab the user’s attention and encourage them to explore multiple images.</li> <li><strong>Optimize Space:</strong> They allow you to display multiple images in a compact area, crucial for responsive design.</li> <li><strong>Improve Content Organization:</strong> They help organize and categorize related images, improving the user experience.</li> <li><strong>Increase Conversion Rates:</strong> On e-commerce sites, they can showcase product variations or different angles, potentially leading to higher sales.</li> </ul> <p>Building your own carousel provides you with complete control over its functionality, styling, and integration with your specific application. You’re not limited by the constraints or features of third-party libraries. This tutorial empowers you to create a tailored solution that fits your precise needs.</p> <h2>Prerequisites</h2> <p>To follow this tutorial, you should have a basic understanding of:</p> <ul> <li>HTML and CSS</li> <li>JavaScript (ES6+)</li> <li>React fundamentals (components, JSX, state, props)</li> <li>Node.js and npm (or yarn) installed on your system</li> </ul> <p>If you’re new to React, consider completing a basic React tutorial before starting this one. This will help you understand the concepts more effectively.</p> <h2>Setting Up Your React Project</h2> <p>Let’s start by creating a new React project using Create React App. Open your terminal and run the following commands:</p> <pre><code class="language-bash" data-line="">npx create-react-app image-carousel-tutorial cd image-carousel-tutorial </code></pre> <p>This will create a new React project named “image-carousel-tutorial.” Navigate into the project directory. Next, clean up the boilerplate code. Open the `src/App.js` file and replace its contents with the following:</p> <pre><code class="language-jsx" data-line="">import React from 'react'; import './App.css'; function App() { return ( <div className="App"> <h1>Image Carousel Tutorial</h1> <!-- Your Carousel Component will go here --> </div> ); } export default App; </code></pre> <p>Also, clear the contents of `src/App.css` and `src/index.css`. We’ll add our styles later.</p> <h2>Creating the Image Carousel Component</h2> <p>Create a new file named `src/ImageCarousel.js` to contain our carousel component. This is where the core logic will reside. We’ll start with the basic structure:</p> <pre><code class="language-jsx" data-line="">import React, { useState } from 'react'; import './ImageCarousel.css'; function ImageCarousel({ images }) { const [currentImageIndex, setCurrentImageIndex] = useState(0); return ( <div className="image-carousel"> <img src={images[currentImageIndex]} alt="Carousel Image" /> </div> ); } export default ImageCarousel; </code></pre> <p>Let’s break down this code:</p> <ul> <li><strong>Imports:</strong> We import `useState` from React for managing the component’s state and `ImageCarousel.css` for styling.</li> <li><strong>Component Definition:</strong> We define a functional component called `ImageCarousel` that accepts an `images` prop (an array of image URLs).</li> <li><strong>State:</strong> We use the `useState` hook to manage `currentImageIndex`. This state variable keeps track of the index of the currently displayed image. It’s initialized to `0`, meaning the first image in the array will be displayed initially.</li> <li><strong>JSX:</strong> The component renders a `div` with the class name “image-carousel” and an `img` tag. The `src` attribute of the `img` tag is dynamically set to the image URL at the `currentImageIndex` within the `images` array. The `alt` attribute provides alternative text for accessibility.</li> </ul> <p>Now, let’s create the `ImageCarousel.css` file in the `src` directory and add some basic styling:</p> <pre><code class="language-css" data-line="">.image-carousel { width: 500px; height: 300px; overflow: hidden; position: relative; border: 1px solid #ccc; } .image-carousel img { width: 100%; height: 100%; object-fit: cover; display: block; } </code></pre> <p>This CSS sets a fixed width and height for the carousel, hides any overflowing content, and styles the images to fit within the container. `object-fit: cover;` ensures the images fill the container without distortion.</p> <h2>Adding Navigation Controls</h2> <p>To make the carousel interactive, we need navigation controls (e.g., “Previous” and “Next” buttons). Let’s modify the `ImageCarousel.js` file:</p> <pre><code class="language-jsx" data-line="">import React, { useState } from 'react'; import './ImageCarousel.css'; function ImageCarousel({ images }) { const [currentImageIndex, setCurrentImageIndex] = useState(0); const goToPrevious = () => { setCurrentImageIndex((prevIndex) => (prevIndex === 0 ? images.length - 1 : prevIndex - 1)); }; const goToNext = () => { setCurrentImageIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1)); }; return ( <div className="image-carousel"> <img src={images[currentImageIndex]} alt="Carousel Image" /> <button className="carousel-button prev-button" onClick={goToPrevious}>< </button> <button className="carousel-button next-button" onClick={goToNext}>> >/button> </div> ); } export default ImageCarousel; </code></pre> <p>Here’s what’s new:</p> <ul> <li><strong>`goToPrevious` Function:</strong> This function updates the `currentImageIndex` to the previous image. It uses a ternary operator to handle the case where the current image is the first one (index 0), in which case it wraps around to the last image.</li> <li><strong>`goToNext` Function:</strong> This function updates the `currentImageIndex` to the next image. It uses a ternary operator to handle the case where the current image is the last one, in which case it wraps around to the first image.</li> <li><strong>Buttons:</strong> Two `button` elements are added for navigation. They have the class “carousel-button” and specific classes (“prev-button” and “next-button”) for styling. The `onClick` event handlers call `goToPrevious` and `goToNext`, respectively.</li> </ul> <p>Let’s add some styling for the buttons in `ImageCarousel.css`:</p> <pre><code class="language-css" data-line=""> .carousel-button { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px; cursor: pointer; font-size: 1.2rem; z-index: 10; } .prev-button { left: 10px; } .next-button { right: 10px; } </code></pre> <p>This CSS positions the buttons absolutely within the carousel container, places them vertically centered, and styles them with a semi-transparent background, white text, and a pointer cursor.</p> <h2>Integrating the Carousel into Your App</h2> <p>Now, let’s integrate the `ImageCarousel` component into our `App.js` file. First, import the component and provide it with an array of image URLs:</p> <pre><code class="language-jsx" data-line="">import React from 'react'; import './App.css'; import ImageCarousel from './ImageCarousel'; function App() { const images = [ 'https://via.placeholder.com/500x300?text=Image+1', 'https://via.placeholder.com/500x300?text=Image+2', 'https://via.placeholder.com/500x300?text=Image+3', 'https://via.placeholder.com/500x300?text=Image+4', ]; return ( <div className="App"> <h1>Image Carousel Tutorial</h1> <ImageCarousel images={images} /> </div> ); } export default App; </code></pre> <p>Here, we:</p> <ul> <li>Import the `ImageCarousel` component.</li> <li>Create an `images` array containing placeholder image URLs (you can replace these with your actual image URLs).</li> <li>Pass the `images` array as a prop to the `ImageCarousel` component.</li> </ul> <p>Run your application using `npm start` or `yarn start`. You should see the image carousel with navigation buttons. Clicking the buttons should cycle through the images.</p> <h2>Adding Indicators (Dots)</h2> <p>Indicators (dots) provide visual feedback on which image is currently displayed. Let’s add them to our carousel. Modify `ImageCarousel.js`:</p> <pre><code class="language-jsx" data-line="">import React, { useState } from 'react'; import './ImageCarousel.css'; function ImageCarousel({ images }) { const [currentImageIndex, setCurrentImageIndex] = useState(0); const goToPrevious = () => { setCurrentImageIndex((prevIndex) => (prevIndex === 0 ? images.length - 1 : prevIndex - 1)); }; const goToNext = () => { setCurrentImageIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1)); }; return ( <div className="image-carousel"> <img src={images[currentImageIndex]} alt="Carousel Image" /> <button className="carousel-button prev-button" onClick={goToPrevious}>< </button> <button className="carousel-button next-button" onClick={goToNext}>> >/button> <div className="carousel-indicators"> {images.map((_, index) => ( <span key={index} className={`carousel-indicator ${index === currentImageIndex ? 'active' : ''}`} onClick={() => setCurrentImageIndex(index)} >•</span> ))} </div> </div> ); } export default ImageCarousel; </code></pre> <p>Here, we added:</p> <ul> <li><strong>`carousel-indicators` div:</strong> A container for the indicator dots.</li> <li><strong>`map` function:</strong> We use the `map` function to iterate over the `images` array and create a `span` element for each image.</li> <li><strong>`key` prop:</strong> We provide a unique `key` prop (the index) for each `span` element, which is essential for React to efficiently update the DOM.</li> <li><strong>Conditional Class:</strong> The `className` of each `span` includes the “carousel-indicator” class and, conditionally, the “active” class if the current index matches the index of the dot.</li> <li><strong>`onClick` Handler:</strong> Each indicator dot has an `onClick` handler that updates the `currentImageIndex` to the corresponding image’s index.</li> </ul> <p>Add the following CSS to `ImageCarousel.css`:</p> <pre><code class="language-css" data-line=""> .carousel-indicators { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; } .carousel-indicator { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; } .carousel-indicator.active { background-color: white; } </code></pre> <p>This CSS positions the indicators at the bottom center of the carousel, styles them as circles, and highlights the active indicator with a white background.</p> <h2>Adding Automatic Slideshow (Autoplay)</h2> <p>To make the carousel automatically cycle through images, we’ll implement an autoplay feature. Modify `ImageCarousel.js`:</p> <pre><code class="language-jsx" data-line="">import React, { useState, useEffect } from 'react'; import './ImageCarousel.css'; function ImageCarousel({ images, autoPlay = true, interval = 3000 }) { const [currentImageIndex, setCurrentImageIndex] = useState(0); const goToPrevious = () => { setCurrentImageIndex((prevIndex) => (prevIndex === 0 ? images.length - 1 : prevIndex - 1)); }; const goToNext = () => { setCurrentImageIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1)); }; useEffect(() => { let intervalId; if (autoPlay) { intervalId = setInterval(() => { goToNext(); }, interval); } // Cleanup on unmount or when autoplay is disabled return () => { clearInterval(intervalId); }; }, [currentImageIndex, autoPlay, interval]); return ( <div className="image-carousel"> <img src={images[currentImageIndex]} alt="Carousel Image" /> <button className="carousel-button prev-button" onClick={goToPrevious}>< </button> <button className="carousel-button next-button" onClick={goToNext}>> >/button> <div className="carousel-indicators"> {images.map((_, index) => ( <span key={index} className={`carousel-indicator ${index === currentImageIndex ? 'active' : ''}`} onClick={() => setCurrentImageIndex(index)} >•</span> ))} </div> </div> ); } export default ImageCarousel; </code></pre> <p>Here’s what changed:</p> <ul> <li><strong>`useEffect` Hook:</strong> We use the `useEffect` hook to manage the autoplay behavior. This hook runs after the component renders and whenever its dependencies change.</li> <li><strong>`autoPlay` and `interval` Props:</strong> We add `autoPlay` (boolean, defaults to `true`) and `interval` (milliseconds, defaults to 3000) props to control the autoplay behavior and the interval between image changes.</li> <li><strong>`setInterval` and `clearInterval`:</strong> Inside the `useEffect` hook, we use `setInterval` to call `goToNext()` at the specified interval. The `clearInterval` function is used in the cleanup function (returned by `useEffect`) to stop the interval when the component unmounts or when `autoPlay` is set to `false`. This prevents memory leaks. The dependency array `[currentImageIndex, autoPlay, interval]` ensures that the effect re-runs when `currentImageIndex`, `autoPlay`, or `interval` changes.</li> </ul> <p>Now, the carousel will automatically cycle through the images every 3 seconds (or the interval you specify). You can disable autoplay by passing `autoPlay={false}` as a prop to the `ImageCarousel` component in `App.js`.</p> <h2>Common Mistakes and How to Fix Them</h2> <p>Here are some common mistakes developers make when building image carousels and how to avoid them:</p> <ul> <li><strong>Incorrect Image Paths:</strong> Ensure your image paths are correct. Use relative paths if the images are in the same directory as your component or absolute URLs for images hosted online. Verify that the image URLs are accessible.</li> <li><strong>Missing `alt` Attributes:</strong> Always include the `alt` attribute in your `img` tags. This provides alternative text for screen readers and improves accessibility.</li> <li><strong>Performance Issues:</strong> Loading all images at once can slow down your application, especially if you have many large images. Consider these optimizations: <ul> <li><strong>Lazy Loading:</strong> Load images only when they are about to be displayed in the viewport. Libraries like `react-lazyload` can help with this.</li> <li><strong>Image Optimization:</strong> Compress your images to reduce file sizes without significantly impacting quality. Tools like TinyPNG or ImageOptim can help.</li> <li><strong>Use WebP format:</strong> WebP is a modern image format that provides superior compression and quality.</li> </ul> </li> <li><strong>Accessibility Issues:</strong> Ensure your carousel is accessible to users with disabilities: <ul> <li><strong>Keyboard Navigation:</strong> Provide keyboard navigation for the carousel controls (buttons, indicators). You can add `tabindex` attributes to the buttons.</li> <li><strong>Screen Reader Compatibility:</strong> Make sure the carousel is properly labeled for screen readers. Use `aria-label` or `aria-describedby` attributes to provide context.</li> <li><strong>Sufficient Color Contrast:</strong> Ensure enough contrast between text and background colors for readability.</li> </ul> </li> <li><strong>Ignoring Responsiveness:</strong> Make sure your carousel is responsive and adapts to different screen sizes. Use CSS media queries to adjust the carousel’s dimensions and layout.</li> <li><strong>Memory Leaks:</strong> If you’re using `setInterval` or `setTimeout`, always clear the interval or timeout in the component’s cleanup function (returned by `useEffect`) to prevent memory leaks.</li> </ul> <h2>Key Takeaways and Best Practices</h2> <p>Here’s a summary of the key takeaways and best practices we’ve covered:</p> <ul> <li><strong>Component Structure:</strong> Break down your carousel into logical components (e.g., ImageCarousel, NavigationButtons, Indicators) for better organization and reusability.</li> <li><strong>State Management:</strong> Use `useState` to manage the carousel’s state (e.g., `currentImageIndex`).</li> <li><strong>Props:</strong> Pass data (e.g., image URLs) as props to the component.</li> <li><strong>Event Handling:</strong> Use event handlers (e.g., `onClick`) to handle user interactions.</li> <li><strong>CSS Styling:</strong> Use CSS to style the carousel and make it visually appealing. Pay attention to responsiveness.</li> <li><strong>Accessibility:</strong> Prioritize accessibility by including `alt` attributes, providing keyboard navigation, and ensuring sufficient color contrast.</li> <li><strong>Performance Optimization:</strong> Implement lazy loading and image optimization to improve performance.</li> <li><strong>Autoplay with `useEffect`:</strong> Use the `useEffect` hook with `setInterval` to implement autoplay, remembering to clear the interval in the cleanup function.</li> <li><strong>Error Handling:</strong> Implement error handling (e.g., displaying a default image or an error message) if an image fails to load.</li> </ul> <h2>FAQ</h2> <p>Here are some frequently asked questions about building image carousels:</p> <ol> <li><strong>How can I customize the transition effect between images?</strong><br />You can use CSS transitions or animations on the image container to create different transition effects (e.g., fade, slide). You’ll need to add a class to the container when the image changes and style the transition in your CSS. Consider using a CSS framework like Styled Components or Tailwind CSS to simplify styling and animation.</li> <li><strong>How do I handle touch gestures for mobile devices?</strong><br />You can use libraries like `react-swipeable` or `react-touch` to detect touch gestures (e.g., swipe left/right) and trigger the carousel’s navigation. These libraries provide event listeners for touch events.</li> <li><strong>How can I make the carousel responsive?</strong><br />Use CSS media queries to adjust the carousel’s width, height, and layout based on the screen size. You can also adjust the font sizes and padding. Consider using a responsive design framework (e.g., Bootstrap, Material UI) to simplify the process.</li> <li><strong>How do I add captions or descriptions to each image?</strong><br />You can add a caption element (e.g., a `div` or ` <p>`) below the `img` tag and display the caption based on the `currentImageIndex`. You’ll need to store the captions in an array and pass them as a prop to the `ImageCarousel` component.</li> <li><strong>Can I use a third-party library instead of building my own carousel?</strong><br />Yes, there are many excellent React carousel libraries available (e.g., `react-slick`, `react-responsive-carousel`). Using a library can save you time and effort. However, building your own carousel gives you more control and allows you to customize it to your specific needs. Consider the size of the library and its dependencies before choosing a third-party option.</li> </ol> <p>Building an image carousel in React is a valuable skill for any front-end developer. This tutorial has provided a solid foundation for creating a dynamic and interactive carousel component. While we’ve covered the core functionality, there’s always room for improvement and customization. Experiment with different transition effects, add more features like infinite looping or video support, and consider integrating it into a larger project. The possibilities are endless. Keep practicing, and don’t be afraid to explore new techniques and libraries. With each project, you’ll refine your skills and become more proficient in React development. The journey of a thousand components begins with a single line of code, so keep building, keep learning, and keep creating. You are now equipped with the fundamental knowledge to create versatile and engaging image carousels, enhancing your projects and captivating your users. Remember to prioritize accessibility and performance, and you’ll be well on your way to crafting exceptional user experiences.</p> </div> <div style="margin-top:var(--wp--preset--spacing--40)" class="wp-block-post-date has-small-font-size"><a href="https://javascriptfundamentals.com/build-a-dynamic-react-component-for-a-simple-interactive-image-carousel/"><time datetime="2026-02-23T00:43:17+00:00">February 23, 2026</time></a></div> </div> </li></ul> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"> </div> <div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"> <nav class="alignwide wp-block-query-pagination is-content-justification-space-between is-layout-flex wp-container-core-query-pagination-is-layout-4dea2dca wp-block-query-pagination-is-layout-flex" aria-label="Pagination"> <a href="https://javascriptfundamentals.com/tag/web-development/page/8/" class="wp-block-query-pagination-previous"><span class='wp-block-query-pagination-previous-arrow is-arrow-arrow' aria-hidden='true'>←</span>Previous Page</a> <div class="wp-block-query-pagination-numbers"><a class="page-numbers" href="https://javascriptfundamentals.com/tag/web-development/">1</a> <span class="page-numbers dots">…</span> <a class="page-numbers" href="https://javascriptfundamentals.com/tag/web-development/page/7/">7</a> <a class="page-numbers" href="https://javascriptfundamentals.com/tag/web-development/page/8/">8</a> <span aria-current="page" class="page-numbers current">9</span> <a class="page-numbers" href="https://javascriptfundamentals.com/tag/web-development/page/10/">10</a> <a class="page-numbers" href="https://javascriptfundamentals.com/tag/web-development/page/11/">11</a> <span class="page-numbers dots">…</span> <a class="page-numbers" href="https://javascriptfundamentals.com/tag/web-development/page/28/">28</a></div> <a href="https://javascriptfundamentals.com/tag/web-development/page/10/" class="wp-block-query-pagination-next">Next Page<span class='wp-block-query-pagination-next-arrow is-arrow-arrow' aria-hidden='true'>→</span></a> </nav> </div> </div> </main> <footer class="wp-block-template-part"> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)"> <div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow"><div class="is-default-size wp-block-site-logo"><a href="https://javascriptfundamentals.com/" class="custom-logo-link" rel="home"><img width="431" height="287" src="https://javascriptfundamentals.com/wp-content/uploads/2026/02/ChatGPT_Image_Feb_13__2026__10_43_17_AM-removebg-preview-edited.png" class="custom-logo" alt="JavascriptFundamentals logo" decoding="async" fetchpriority="high" srcset="https://javascriptfundamentals.com/wp-content/uploads/2026/02/ChatGPT_Image_Feb_13__2026__10_43_17_AM-removebg-preview-edited.png 431w, https://javascriptfundamentals.com/wp-content/uploads/2026/02/ChatGPT_Image_Feb_13__2026__10_43_17_AM-removebg-preview-edited-300x200.png 300w" sizes="(max-width: 431px) 100vw, 431px" /></a></div> <div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-cf54d0a6 wp-block-group-is-layout-flex"> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"><h2 class="wp-block-site-title"><a href="https://javascriptfundamentals.com" target="_self" rel="home">Javascriptfundamentals</a></h2> <p class="wp-block-site-tagline">Strong Foundations. Smarter JavaScript.</p></div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div style="height:var(--wp--preset--spacing--40);width:0px" aria-hidden="true" class="wp-block-spacer"></div> </div> </div> </div> <div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-2ab8c7fb wp-block-group-is-layout-flex"> <p class="has-small-font-size wp-block-paragraph">© 2026 • JavascriptFundamentals</p> <p class="has-small-font-size wp-block-paragraph">Inquiries: <strong><a href="mailto:admin@codingeasypeasy.com">admin@javascriptfundamentals.com</a></strong></p> </div> </div> </div> </footer> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/twentytwentyfive/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <div class="wp-dark-mode-floating-switch wp-dark-mode-ignore wp-dark-mode-animation wp-dark-mode-animation-bounce " style="right: 10px; bottom: 10px;"> <!-- call to action --> <div class="wp-dark-mode-switch wp-dark-mode-ignore " tabindex="0" role="switch" aria-label="Dark Mode Toggle" aria-checked="false" data-style="1" data-size="1" data-text-light="" data-text-dark="" data-icon-light="" data-icon-dark=""></div></div><script data-wp-router-options="{"loadOnClientNavigation":true}" fetchpriority="low" id="@wordpress/block-library/navigation/view-js-module" src="https://javascriptfundamentals.com/wp-includes/js/dist/script-modules/block-library/navigation/view.min.js?ver=96a846e1d7b789c39ab9" type="module"></script> <!-- Koko Analytics v2.4.0 - https://www.kokoanalytics.com/ --> <script> (()=>{var e=window.koko_analytics,c=["utm_source","utm_medium","utm_campaign"];function d(){let t={},a=new URLSearchParams(window.location.search),s=new URLSearchParams(window.location.hash.substring(1));return c.forEach(i=>{let n=a.get(i)||s.get(i);n&&(t[i]=n)}),t}e.trackPageview=function(t,a){if(/bot|crawl|spider|seo|lighthouse|facebookexternalhit|preview|prerender/i.test(navigator.userAgent)||window._phantom||window.__nightmare||window.navigator.webdriver||window.Cypress){console.debug("Koko Analytics: Ignoring call to trackPageview because user agent is a bot or this is a headless browser.");return}navigator.sendBeacon(e.url,new URLSearchParams({action:"koko_analytics_collect",pa:t,po:a,r:document.referrer.indexOf(e.site_url)==0?"":document.referrer,m:e.use_cookie?"c":e.method[0],...d()}))};function o(){e.trackPageview(e.path,e.post_id)}function r(){e.autotracked||(o(),e.autotracked=!0)}document.visibilityState==="hidden"||document.visibilityState==="prerender"?document.addEventListener("visibilitychange",()=>{document.visibilityState==="visible"&&r()}):r();window.addEventListener("pageshow",t=>{t.persisted&&o()});})(); </script> <script>document.addEventListener("DOMContentLoaded", function() { // ---------- CONFIG ---------- const MONETAG_URL = "https://omg10.com/4/10781319"; const STORAGE_KEY = "monetagLastShown"; const COOLDOWN = 24*60*60*1000; // 24 hours // ---------- CREATE MODAL HTML ---------- const modalHTML = ` <div id="monetagModal" style=" position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; z-index:9999; visibility:hidden; opacity:0; transition: opacity 0.3s ease; "> <div style=" background:#fff; padding:25px; border-radius:10px; max-width:400px; text-align:center; box-shadow:0 4px 15px rgba(0,0,0,0.3); "> <h2>Welcome! 👋</h2> <p>Thanks for visiting! Before you continue, click the button below to unlock exclusive content and surprises just for you.</p> <button class="monetagBtn" style=" padding:10px 20px; background:#dc3545; color:#fff; border:none; border-radius:5px; cursor:pointer; margin-top:15px; ">Not Now</button> <button class="monetagBtn" style=" padding:10px 20px; background:#ff5722; color:#fff; border:none; border-radius:5px; cursor:pointer; margin-top:15px; ">Continue</button> </div> </div> `; document.body.insertAdjacentHTML("beforeend", modalHTML); // ---------- GET ELEMENTS ---------- const modal = document.getElementById("monetagModal"); const buttons = document.querySelectorAll(".monetagBtn"); // ---------- SHOW MODAL ON PAGE LOAD ---------- window.addEventListener("load", function(){ modal.style.visibility = "visible"; modal.style.opacity = "1"; }); // ---------- CHECK 24H COOLDOWN ---------- function canShow() { const last = localStorage.getItem(STORAGE_KEY); return !last || (Date.now() - parseInt(last)) > COOLDOWN; } // ---------- TRIGGER MONETAG ---------- buttons.forEach(btn => { btn.addEventListener("click", function(){ if(canShow()){ localStorage.setItem(STORAGE_KEY, Date.now()); window.open(MONETAG_URL,"_blank"); } // hide modal after click modal.style.opacity = "0"; setTimeout(()=>{ modal.style.visibility="hidden"; },300); }); }); });</script><script id="zoom-social-icons-widget-frontend-js" src="https://javascriptfundamentals.com/wp-content/plugins/social-icons-widget-by-wpzoom/assets/js/social-icons-widget-frontend.js?ver=1780124713"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://javascriptfundamentals.com/wp-includes/js/wp-emoji-release.min.js?ver=7.0"}} </script> <script type="module"> /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://javascriptfundamentals.com/wp-includes/js/wp-emoji-loader.min.js </script> <script> (function() { function applyScrollbarStyles() { if (!document.documentElement.hasAttribute('data-wp-dark-mode-active')) { document.documentElement.style.removeProperty('scrollbar-color'); return; } document.documentElement.style.setProperty('scrollbar-color', '#2E334D #1D2033', 'important'); // Find and remove dark mode engine scrollbar styles. var styles = document.querySelectorAll('style'); styles.forEach(function(style) { if (style.id === 'wp-dark-mode-scrollbar-custom') return; if (style.textContent && style.textContent.indexOf('::-webkit-scrollbar') !== -1 && style.textContent.indexOf('#1D2033') === -1) { style.textContent = style.textContent.replace(/::-webkit-scrollbar[^}]*\{[^}]*\}/g, ''); style.textContent = style.textContent.replace(/::-webkit-scrollbar-track[^}]*\{[^}]*\}/g, ''); style.textContent = style.textContent.replace(/::-webkit-scrollbar-thumb[^{]*\{[^}]*\}/g, ''); style.textContent = style.textContent.replace(/::-webkit-scrollbar-corner[^}]*\{[^}]*\}/g, ''); } }); // Inject our styles. var existing = document.getElementById('wp-dark-mode-scrollbar-custom'); if (!existing) { var customStyle = document.createElement('style'); customStyle.id = 'wp-dark-mode-scrollbar-custom'; customStyle.textContent = '::-webkit-scrollbar { width: 12px !important; height: 12px !important; background: #1D2033 !important; }' + '::-webkit-scrollbar-track { background: #1D2033 !important; }' + '::-webkit-scrollbar-thumb { background: #2E334D !important; border-radius: 6px; }' + '::-webkit-scrollbar-thumb:hover { filter: brightness(1.2); }' + '::-webkit-scrollbar-corner { background: #1D2033 !important; }'; document.body.appendChild(customStyle); } } // Listen for dark mode changes. document.addEventListener('wp_dark_mode', function(e) { setTimeout(applyScrollbarStyles, 100); setTimeout(applyScrollbarStyles, 500); setTimeout(applyScrollbarStyles, 1000); }); // Observe attribute changes. var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.attributeName === 'data-wp-dark-mode-active') { var existing = document.getElementById('wp-dark-mode-scrollbar-custom'); if (existing && !document.documentElement.hasAttribute('data-wp-dark-mode-active')) { existing.remove(); } setTimeout(applyScrollbarStyles, 100); setTimeout(applyScrollbarStyles, 500); } }); }); observer.observe(document.documentElement, { attributes: true }); // Initial apply. setTimeout(applyScrollbarStyles, 100); setTimeout(applyScrollbarStyles, 500); setTimeout(applyScrollbarStyles, 1000); })(); </script> </body> </html>