Check out step #2 of this challenge where a toggle button is used to switch between displaying monthly and yearly values. Here's the accompanying code:
import { NavLink } from "react-router-dom";
import { useContext } from "react";
import data from "../Data";
import { dataContext } from "../context/DataContext";
export default function Plans() {
// Functionality for handling plan selection, billing cycle change, etc.
}
Data.json
// JSON data containing details about plans and addons
const data = {
plans: [
{
name: "Arcade",
img: "./assets/images/icon-arcade.svg",
monthlyPrice: 9,
yearlyPrice: 90,
},
// Additional plan objects with pricing information
],
addons: [
{
name: "Online service",
description: "Access to multiplayer games",
monthlyPrice: 1,
yearlyPrice: 10,
id: "service",
},
// Additional addon objects with pricing information
],
};
export default data;
DataContext.js
// Context provider setup for managing form state and steps
import { createContext, useState } from "react";
// Exporting context provider component
export { ContextProvider, dataContext };
CSS Styles
// Styling related to form layout and user interface components
.plans form > div {
// CSS styles for form container
}
.switch {
// CSS styles for toggle switch
}
.slider.round {
// Specific styling for round slider element
}
// More CSS styles for other elements in the form
Seeking assistance on the toggle button not aligning correctly when switching values.
Tried using onClick but the issue persists. Any suggestions?