Aria | 下载可以很简单 | File Utils library

const addScript = () => {
    const script = document.createElement("script");
    script.src = '<url-of-the-script>';
    script.async = true;
    script.onload = function() {
        // Do something
    };
    document.head.appendChild(script);
}

useEffect(() => {
    addScript();
    return () => {
        // remove the script on component unmount
    };
}, []);

const addScript = () => {
    const script = document.createElement("script");
    script.src = '<url-of-the-script>';
    script.async = true;
    script.onload = function() {
        // Do something
    };
    document.head.appendChild(script);
}

useEffect(() => {
    addScript();
    return () => {
        // remove the script on component unmount
    };
}, []);

const [dbData,setDbData] = useState([]);

useEffect(()=>{
  const dbReqFunc = async () => {
    // req your dynamic data here and set the data fetched to dbData
    // using setDbData(...)
  };

  dbReqFunc();
},[]);  // Making the call on component loading (Modify accordingly based on 
        // needs)

useEffect(()=>{
  if(dbData.length>0){
    const elem = document.createElement('div');
    dbData.map(data=> {

        // based on data returned modify accordingly

        const script = document.createElement("script");
        script.src = '...script-url...';
        script.async = true;
        script.onload = function() {
          // Do something
        };
     
        //...other script fields...       

        elem.appendChild(script);
      });
     
     // attach elem to body
     document.body.appendChild(elem);

     return ()=>{
      // clean-up function
        document.body.removeChild(elem);
     };
  }

},[dbData]);

const [dbData,setDbData] = useState([]);

useEffect(()=>{
  const dbReqFunc = async () => {
    // req your dynamic data here and set the data fetched to dbData
    // using setDbData(...)
  };

  dbReqFunc();
},[]);  // Making the call on component loading (Modify accordingly based on 
        // needs)

useEffect(()=>{
  if(dbData.length>0){
    const elem = document.createElement('div');
    dbData.map(data=> {

        // based on data returned modify accordingly

        const script = document.createElement("script");
        script.src = '...script-url...';
        script.async = true;
        script.onload = function() {
          // Do something
        };
     
        //...other script fields...       

        elem.appendChild(script);
      });
     
     // attach elem to body
     document.body.appendChild(elem);

     return ()=>{
      // clean-up function
        document.body.removeChild(elem);
     };
  }

},[dbData]);

function App() {
  const ref = useRef();

  useEffect(() => {
    /* convert your HTML string into DocumentFragment*/
    const node = document.createRange().createContextualFragment(HTML);
    ref.current.appendChild(node);
  }, []);

  return (
    <div>
      <h1>HTML String</h1>
      <div>
        <div ref={ref}></div>
      </div>
    </div>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
  }

  componentDidMount() {
    const node = document.createRange().createContextualFragment(HTML);
    this.ref.current.appendChild(node);
  }

  render() {
    return (
      <div>
        <h1>HTML String</h1>
        <div>
          <div ref={this.ref}></div>
        </div>
      </div>
    );
  }
}

function App() {
  const ref = useRef();

  useEffect(() => {
    /* convert your HTML string into DocumentFragment*/
    const node = document.createRange().createContextualFragment(HTML);
    ref.current.appendChild(node);
  }, []);

  return (
    <div>
      <h1>HTML String</h1>
      <div>
        <div ref={ref}></div>
      </div>
    </div>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
  }

  componentDidMount() {
    const node = document.createRange().createContextualFragment(HTML);
    this.ref.current.appendChild(node);
  }

  render() {
    return (
      <div>
        <h1>HTML String</h1>
        <div>
          <div ref={this.ref}></div>
        </div>
      </div>
    );
  }
}

# Reprex adapted from https://shiny.rstudio.com/gallery/tabsets.html
library(shiny)
library(htmltools)

# Define UI for random distribution app ----
ui <- fluidPage(
  
  # App title ----
  titlePanel("Tabsets"),
  
  # Sidebar layout with input and output definitions ----
  sidebarLayout(
    
    # Sidebar panel for inputs ----
    {querySidebarPanel <- tagQuery(sidebarPanel(
      # Input: Select the random distribution type ----
      radioButtons("dist", "Distribution type:",
                   c("Normal" = "norm",
                     "Uniform" = "unif",
                     "Log-normal" = "lnorm",
                     "Exponential" = "exp")),
      
      # br() element to introduce extra vertical spacing ----
      br(),
      
      # Input: Slider for the number of observations to generate ----
      sliderInput("n",
                  "Number of observations:",
                  value = 500,
                  min = 1,
                  max = 1000)
    ))
    querySidebarPanel$find(".well")$removeAttrs("role")$addAttrs("role" = "none")$allTags()},
    
    # Main panel for displaying outputs ----
    mainPanel(
      
      # Output: Tabset w/ plot, summary, and table ----
      tabsetPanel(type = "tabs",
                  tabPanel("Plot", plotOutput("plot")),
                  tabPanel("Summary", verbatimTextOutput("summary")),
                  tabPanel("Table", tableOutput("table"))
      )
      
    )
  )
)

# Define server logic for random distribution app ----
server <- function(input, output) {
  
  # Reactive expression to generate the requested distribution ----
  d <- reactive({
    dist <- switch(input$dist,
                   norm = rnorm,
                   unif = runif,
                   lnorm = rlnorm,
                   exp = rexp,
                   rnorm)
    
    dist(input$n)
  })
  
  # Generate a plot of the data ----
  output$plot <- renderPlot({
    dist <- input$dist
    n <- input$n
    
    hist(d(),
         main = paste("r", dist, "(", n, ")", sep = ""),
         col = "#75AADB", border = "white")
  })
}

# Create Shiny app ----
shinyApp(ui, server)

import React from "react";
import axios from "axios";
import moment from "moment";

import "./styles.css";
// function to get data from API, taken it out since it 
// does not depend on state as such, we can pass date a param
const getData = (date) => {
  const config = {
    headers: {
      // can be taken from localStorage
      Authorization: `token 67f023b5e798b8e7217bffc4b74a23b40666c589`
    }
  };
  return axios
    .get(
      `https://shebirth.herokuapp.com/customer/Symptoms-GET/?date=${date}`,
      config
    )
    .then((res) => res.data)
    .catch((err) => {
      console.error("error ocurred while fetching data", err);
      return null;
    });
};

const SYMPTOMS_CATEGORIES = [
  { key: "Head", label: "Head" },
  { key: "Pelvis", label: "Pelvis" },
  { key: "Legs", label: "Legs" },
  { key: "Other", label: "Other" },
  { key: "Abdomen", label: "Abdomen" },
  { key: "Mental", label: "Mental Health" },
  { key: "Custom", label: "User Defined" }
];

const styles = {
  trgrid: {
    display: "grid",
    gridTemplateColumns: "1fr 1fr 1fr 1fr"
  },
  module: {
    position: "relative",
    // background: "rgb(76, 0, 61) none repeat scroll 0% 0%",
    background: "#ffffff1c 0% 0% no-repeat padding-box",
    margin: "0px 30px",
    borderRadius: "10px",
    padding: "0px 0px 20px 0px",
    height: "40rem",
    overflowY: "scroll",
    scrollbarWidth: "thin",
    marginbottom: "10px"
  },
  txt: {
    textAlign: "left"
  },
  btn: {
    border: "1px solid #974cae",
    padding: "5px 30px",
    background: "#974cae",
    fontSize: "12px"
  },
  left: {
    textAlign: "left"
  },
  boxstyle: {
    background: "#ffffff1c 0% 0% no-repeat padding-box",
    marginTop: "10px"
  },
  flex: {
    background: "#ffffff1c 0% 0% no-repeat padding-box",
    marginTop: "10px",
    display: "flex"
    // justifyContent: "space-evenly",
    //background: "#971cae",
  },
  subbtn: {
    background: "linear-gradient(90deg, #3a51a7 30%, #b53899)",
    padding: "10px 30px",
    border: "none",
    borderRadius: "10px",
    color: "#fff",
    cursor: "pointer",
    margin: "10px"
  },
  // NOTE: just for demo styling purpose for separate headings a bit!!
  // use your own styles!!!
  accordionItem: {
    marginTop: "10px",
    marginBottom: "10px"
  },
  accordionHeader: {
    fontWeight: "bold",
    cursor: "pointer",
    backgroundColor: "#7986cb",
    color: "#000",
    padding: "2px 4px"
  }
  // demo styles ends
};

const SymptomTracker = () => {
  const [state, setState] = React.useState({
    medicineOpen: true,
    medicineReady: true,
    symptomReady: false,
    items: [],
    dateState: [],
    custom: [],
    Head: false,
    Pelvis: false,
    Legs: false,
    Mental: false,
    Other: false,
    Custom: false,
    today: moment().format("YYYY-MM-DD"),
    report: [],
    allValues: {
      others: "",
      bloodSugar: "",
      bloodPressure: ""
    }
  });

  // const closeMedicine = () => {
  //   setState((prevState) => ({
  //     ...prevState,
  //     medicineOpen: !state.medicineOpen
  //   }));
  // };

  // const addMedicine = () => {
  //   setState((prevState) => ({
  //     ...prevState,
  //     medicineReady: !state.medicineReady
  //   }));
  // };

  const addSymptom = () => {
    setState((prevState) => ({
      ...prevState,
      symptomReady: !state.symptomReady
    }));
  };

  const navClose = (e) => {
    setState((prevState) => ({
      ...prevState,
      [e]: !prevState[e]
    }));
  };

  const onDateChange = (e) => {
    var dateSelected = e.target.value;
    var date = moment(dateSelected).format("YYYY-MM-DD");
    console.log({ date });
    setState((prevState) => ({ ...prevState, today: date }));
  };

  const handleCheckboxChange = (e, stateKey, itemId) => {
    const stateItems = state[stateKey];
    console.table(stateItems);
    console.log({ stateKey });
    const index = stateItems.findIndex((item) => item.id === itemId);

    console.log({ item: stateItems[index] });

    setState((prevState) => ({
      ...prevState,
      [stateKey]: [
        ...stateItems.slice(0, index),
        {
          ...stateItems[index],
          positive: e.target.checked
        },
        ...stateItems.slice(index + 1)
      ]
    }));
  };

  const changeHandler = (e) => {
    setState((prevState) => ({
      ...prevState,
      allValues: {
        ...prevState.allValues,
        [e.target.name]: e.target.value
      }
    }));
  };

  const getAccordionItem = ({ key, label }) => {
    const source = key === "Custom" ? "custom" : "items";

    return (
      <div className="accordion-item" style={styles.accordionItem} key={key}>
        <div
          className="accordion-title gradiantblur"
          style={styles.accordionHeader}
          onClick={() => navClose(key)}
        >
          {/* // onClick={setActiveCurrentIndex(item[0].date)}> */}
          <span>{label}</span>
          <i className="fa fa-plus" aria-hidden="true"></i>
        </div>
        {state[key] ? (
          <div className="accordion-content  tableforsymtm">
            {(source !== "custom"
              ? state[source].filter(
                  (item) => item.category === label || item.category === key
                )
              : state[source]
            ).map((item, index) => {
              const itemId = `${key}__${item.name}__${item.id}__${index}`;
              return (
                <span key={itemId} className="trforsymtm">
                  <td>
                    <input
                      // className="invinsiveinput"
                      data-id={item.id}
                      type="checkbox"
                      id={itemId}
                      checked={item && item.positive}
                      onChange={(e) => handleCheckboxChange(e, source, item.id)}
                    />
                  </td>
                  <td className="tdoneline">
                    <label htmlFor={itemId}>{item.name}</label>
                  </td>
                </span>
              );
            })}
          </div>
        ) : null}
      </div>
    );
  };

  // handle checked items submission
  const chekbox = (e) => {
    e.preventDefault();
    const headers = {
      // Authorization: `token ` + localStorage.getItem("token")
      Authorization: `token 67f023b5e798b8e7217bffc4b74a23b40666c589`
      // Authorization: `token 67f023b5e798b8e7217bffc4b74a23b40666c589`,
    };
    const data = [...state.items]
      // keep all items
      // .filter((item) => item.positive)
      .map((item) => ({
        date: state.today,
        symptom: item.id,
        positive: item.positive
      }));

    const custom = [...state.custom]
      // keep all items
      //.filter((item) => item.positive)
      .map((item) => ({
        date: state.today,
        symptom: item.id,
        positive: item.positive
      }));

    console.log(custom);
    // submit both requests parallelly and once both gets done
    // then only reload the page.
    Promise.all([
      axios.post(
        "https://shebirth.herokuapp.com/customer/symptoms-submit-multiple/",
        data,
        {
          headers: headers
        }
      ),
      axios.post(
        "https://shebirth.herokuapp.com/customer/submit-custom-symptom-multiple/",
        custom,
        {
          headers: headers
        }
      )
    ])
      .then(() => {
        alert("symptoms are submitted");
        window.location.reload();
      })
      .catch((error) => {
        alert("Cannot add symptoms again");
        console.error(error);
      });
  };

  const onSubmit = (e) => {
    e.preventDefault();

    const headers = {
      // Authorization: `token ` + localStorage.getItem("token")
      Authorization: `token 67f023b5e798b8e7217bffc4b74a23b40666c589`
    };

    // prepare data object
    const data = {
      others: state.allValues.others,
      bloodSugar: state.allValues.bloodSugar,
      bloodPressure: state.allValues.bloodPressure,
      date: state.today,
      // combining custom and normal items together, can be separated if you want
      // in their each keys
      items: [...state.items, ...state.custom]
        // keep all items
        // .filter((item) => item.positive)
        .map((item) => ({
          date: state.today,
          symptom: item.id,
          positive: item.positive
        }))
    };

    axios
      .patch("customer/submit-symptoms-with-input/", data, {
        headers: headers
      })
      .then(() => {
        alert("symptom was submitted");
        window.location.reload();
      })
      .catch((error) => {
        alert("Cannot add symptoms again");
      });
  };

  // this effect will fire once the component is mounted, and on `state.date` changes.
  React.useEffect(() => {
    (async () => {
      const data = await getData(state.today);
      // console.log({ data });

      if (data) {
        setState((prevState) => ({
          ...prevState,
          items: data.Symptoms,
          custom: data.customSymptom,
          allValues: data.symptomsWithIputs,
          report: data.last_week_symptom_report
        }));
      }
    })();
  }, [state.today]);

  return state.medicineOpen ? (
    <div className="symptom-container" style={styles.module}>
      <h2
        className="lightgradient"
        style={{
          borderBottom: "1px solid #fff",
          padding: "10px",
          margin: "0px",
          fontSize: "24px",
          // background: "#6f1f6d",
          borderTopLeftRadius: "10px",
          borderTopRightRadius: "10px"
        }}
      >
        Symptom Tracker
      </h2>

      <div style={styles.boxstyle}>
        <span style={{ fontSize: "16px" }}> Enter Date</span>
        <input
          type="date"
          className="calanderbutton"
          value={state.today}
          onChange={onDateChange}
        />

        {/* accordion */}
        <div className="accordion">
          {SYMPTOMS_CATEGORIES.map(getAccordionItem)}
        </div>
        <button type="Button" className="pinkbutton" onClick={chekbox}>
          submit check boxes
        </button>
        {/* form */}
        <form onSubmit={onSubmit}>
          <div style={styles.flex}>
            <div
              className="marign-5"
              style={{
                transform: "rotate(90deg)",
                fontSize: "4rem",
                padding: "15px"
              }}
            >
              {/* <img src={img1} /> */}
              {/* <i className="fa fa-pencil"></i> */}
            </div>
            <div className="marign-5" style={{ padding: "10px" }}>
              <strong>Enter your weight</strong>
              <br />
              <br />

              <input
                className="inputofsymtum"
                style={{ float: "left" }}
                name="others"
                placeholder="Kg"
                onChange={changeHandler}
                defaultValue={state.allValues && state.allValues.others}
                type="text"
                // placeholder="Description"
              />
            </div>
          </div>
          <div style={styles.flex}>
            <div
              className="marign-5"
              style={{ fontSize: "4rem", padding: "15px" }}
            >
              {/* <img src={img2} /> */}
              {/* <i className="fa fa-level-up"></i> */}
            </div>
            <div className="marign-5" style={{ padding: "10px" }}>
              <strong>Enter your blood sugar level</strong>
              <br />
              <br />
              <input
                className="inputofsymtum"
                style={{ float: "left" }}
                type="text"
                name="bloodSugar"
                placeholder="(mg/dL)"
                onChange={changeHandler}
                defaultValue={state.allValues && state.allValues.bloodSugar}
              />
            </div>
          </div>
          <div style={styles.flex}>
            <div
              className="marign-5"
              style={{ fontSize: "4rem", padding: "15px" }}
            >
              {/* <img src={img3} /> */}
              {/* <i className="fa fa-area-chart"></i> */}
            </div>
            <div className="marign-5" style={{ padding: "10px" }}>
              <strong>Enter your blood pressure level</strong>
              <br />
              <br />
              <input
                className="inputofsymtum"
                style={{ float: "left" }}
                type="text"
                placeholder="(mmHg)"
                name="bloodPressure"
                onChange={changeHandler}
                defaultValue={state.allValues && state.allValues.bloodPressure}
                // onChange={changeHandler}
                // value={state.allValues.bloodPressure}
              />
            </div>
          </div>
          <div style={styles.flex}>
            <div
              className="marign-5"
              style={{
                transform: "rotate(90deg)",
                fontSize: "4rem",
                padding: "15px"
              }}
            >
              {/* <img src={img4} /> */}
              {/* <i className="fa fa-pie-chart"></i> */}
            </div>
            <div className="marign-5" style={{ padding: "10px" }}>
              <strong>Last week report</strong>
              <br />
              <br />
              <p className="fontin12">
                Last week you have experienced &nbsp;
                {state.report.map((personData, key) => {
                  return (
                    <span key={key}>
                      {personData.count}&nbsp;times&nbsp;
                      {personData.symptom}&nbsp;,&nbsp;
                    </span>
                  );
                })}
              </p>
            </div>
          </div>
          <div>
            <button type="submit" className="pinkbutton">
              Submit
            </button>
          </div>
          <br />
          {/* {state.symptomReady ? <AddSymptom /> : null} */}
          <span
            onClick={addSymptom}
            // style={styles.subbtn}
            className="pinkbutton"
            style={{ cursor: "pointer", fontSize: "16px" }}
          >
            Add User Defined Symptom
          </span>
          <hr />
        </form>
      </div>
    </div>
  ) : null;
};

export default SymptomTracker;

const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('change', e => {
    let targets = e.target.dataset.controls.split(' ')
    items.forEach(item => {
      let index = targets.indexOf(item.id)
      if (-1 === index) item.dataset.state = 'inactive'
      else if (0 === index) item.dataset.state = 'selected'
      else item.dataset.state = 'highlighted'
    })
  })
})

body {
  display: grid;
  grid-template: auto auto / auto auto;
  grid-auto-flow: column;
}
form,
figure {
  display: grid;
  grid-template: auto/auto auto 1fr;
  gap: 1ch;
}
fieldset {
  display: grid;
  grid-template: auto/auto auto;
}
input,
label {
  cursor: pointer;
}
figure,
ul {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
li {
  margin: 1ch 0 0 1ch;
  padding: 1ch;
}
li[data-state="inactive"] {
  background: #ddd;
}
li[data-state="selected"] {
  background: #aaffaa;
}
li[data-state="highlighted"] {
  background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
  display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
  display: inline;
}

<h2>Controls</h2>
<form>
  <fieldset>
    <legend>List A</legend>
    <input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3" />
    <label for="input-A1">A1</label>
    <input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1" />
    <label for="input-A2">A2</label>
    <input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4" />
    <label for="input-A3">A3</label>
    <input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2" />
    <label for="input-A4">A4</label>
  </fieldset>
  <fieldset>
    <legend>List B</legend>
    <input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4" />
    <label for="input-B1">B1</label>
    <input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3" />
    <label for="input-B2">B2</label>
    <input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4" />
    <label for="input-B3">B3</label>
    <input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2" />
    <label for="input-B4">B4</label>
  </fieldset>
</form>
<h2>Visualization</h2>
<figure id="graphic" aria-live="polite">
  <ul aria-label="List A">
    <li class="item" id="item-A1" data-state="inactive">A1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A2" data-state="inactive">A2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A3" data-state="inactive">A3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A4" data-state="inactive">A4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
  </ul>
  <ul aria-label="List B">
    <li class="item" id="item-B1" data-state="inactive">B1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B2" data-state="inactive">B2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B3" data-state="inactive">B3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B4" data-state="inactive">B4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
  </ul>
</figure>

const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('change', e => {
    let targets = e.target.dataset.controls.split(' ')
    items.forEach(item => {
      let index = targets.indexOf(item.id)
      if (-1 === index) item.dataset.state = 'inactive'
      else if (0 === index) item.dataset.state = 'selected'
      else item.dataset.state = 'highlighted'
    })
  })
})
items.forEach(item => {
  item.addEventListener('click', e => {
    let inputId = 'input-' + e.target.id.split('-')[1]
    document.getElementById(inputId).click()
  })
})

.sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
figure {
  display: grid;
  grid-template: auto/auto auto 1fr;
  gap: 1ch;
}
figure,
ul {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
li {
  margin: 1ch 0 0 1ch;
  padding: 1ch;
  cursor: pointer;
}
li:hover {
  opacity: 0.6;
}
li[data-state="inactive"] {
  background: #ddd;
}
li[data-state="selected"] {
  background: #aaffaa;
}
li[data-state="highlighted"] {
  background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
  display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
  display: inline;
}

<div class="sr-only">
  <h2>Controls</h2>
  <form>
    <fieldset>
      <legend>List A</legend>
      <input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3"/>
      <label for="input-A1">A1</label>
      <input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1"/>
      <label for="input-A2">A2</label>
      <input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4"/>
      <label for="input-A3">A3</label>
      <input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2"/>
      <label for="input-A4">A4</label>
    </fieldset>
    <fieldset>
      <legend>List B</legend>
      <input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4"/>
      <label for="input-B1">B1</label>
      <input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3"/>
      <label for="input-B2">B2</label>
      <input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4"/>
      <label for="input-B3">B3</label>
      <input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2"/>
      <label for="input-B4">B4</label>
    </fieldset>
  </form>
</div>
<h2 class="sr-only">Visualization</h2>
<figure id="graphic" aria-live="polite">
  <ul aria-label="List A">
    <li class="item" id="item-A1" data-state="inactive">A1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A2" data-state="inactive">A2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A3" data-state="inactive">A3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A4" data-state="inactive">A4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
  </ul>
  <ul aria-label="List B">
    <li class="item" id="item-B1" data-state="inactive">B1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B2" data-state="inactive">B2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B3" data-state="inactive">B3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B4" data-state="inactive">B4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
  </ul>
</figure>

const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('change', e => {
    let targets = e.target.dataset.controls.split(' ')
    items.forEach(item => {
      let index = targets.indexOf(item.id)
      if (-1 === index) item.dataset.state = 'inactive'
      else if (0 === index) item.dataset.state = 'selected'
      else item.dataset.state = 'highlighted'
    })
  })
})

body {
  display: grid;
  grid-template: auto auto / auto auto;
  grid-auto-flow: column;
}
form,
figure {
  display: grid;
  grid-template: auto/auto auto 1fr;
  gap: 1ch;
}
fieldset {
  display: grid;
  grid-template: auto/auto auto;
}
input,
label {
  cursor: pointer;
}
figure,
ul {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
li {
  margin: 1ch 0 0 1ch;
  padding: 1ch;
}
li[data-state="inactive"] {
  background: #ddd;
}
li[data-state="selected"] {
  background: #aaffaa;
}
li[data-state="highlighted"] {
  background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
  display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
  display: inline;
}

<h2>Controls</h2>
<form>
  <fieldset>
    <legend>List A</legend>
    <input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3" />
    <label for="input-A1">A1</label>
    <input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1" />
    <label for="input-A2">A2</label>
    <input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4" />
    <label for="input-A3">A3</label>
    <input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2" />
    <label for="input-A4">A4</label>
  </fieldset>
  <fieldset>
    <legend>List B</legend>
    <input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4" />
    <label for="input-B1">B1</label>
    <input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3" />
    <label for="input-B2">B2</label>
    <input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4" />
    <label for="input-B3">B3</label>
    <input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2" />
    <label for="input-B4">B4</label>
  </fieldset>
</form>
<h2>Visualization</h2>
<figure id="graphic" aria-live="polite">
  <ul aria-label="List A">
    <li class="item" id="item-A1" data-state="inactive">A1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A2" data-state="inactive">A2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A3" data-state="inactive">A3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A4" data-state="inactive">A4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
  </ul>
  <ul aria-label="List B">
    <li class="item" id="item-B1" data-state="inactive">B1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B2" data-state="inactive">B2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B3" data-state="inactive">B3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B4" data-state="inactive">B4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
  </ul>
</figure>

const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('change', e => {
    let targets = e.target.dataset.controls.split(' ')
    items.forEach(item => {
      let index = targets.indexOf(item.id)
      if (-1 === index) item.dataset.state = 'inactive'
      else if (0 === index) item.dataset.state = 'selected'
      else item.dataset.state = 'highlighted'
    })
  })
})
items.forEach(item => {
  item.addEventListener('click', e => {
    let inputId = 'input-' + e.target.id.split('-')[1]
    document.getElementById(inputId).click()
  })
})

.sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
figure {
  display: grid;
  grid-template: auto/auto auto 1fr;
  gap: 1ch;
}
figure,
ul {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
li {
  margin: 1ch 0 0 1ch;
  padding: 1ch;
  cursor: pointer;
}
li:hover {
  opacity: 0.6;
}
li[data-state="inactive"] {
  background: #ddd;
}
li[data-state="selected"] {
  background: #aaffaa;
}
li[data-state="highlighted"] {
  background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
  display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
  display: inline;
}

<div class="sr-only">
  <h2>Controls</h2>
  <form>
    <fieldset>
      <legend>List A</legend>
      <input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3"/>
      <label for="input-A1">A1</label>
      <input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1"/>
      <label for="input-A2">A2</label>
      <input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4"/>
      <label for="input-A3">A3</label>
      <input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2"/>
      <label for="input-A4">A4</label>
    </fieldset>
    <fieldset>
      <legend>List B</legend>
      <input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4"/>
      <label for="input-B1">B1</label>
      <input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3"/>
      <label for="input-B2">B2</label>
      <input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4"/>
      <label for="input-B3">B3</label>
      <input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2"/>
      <label for="input-B4">B4</label>
    </fieldset>
  </form>
</div>
<h2 class="sr-only">Visualization</h2>
<figure id="graphic" aria-live="polite">
  <ul aria-label="List A">
    <li class="item" id="item-A1" data-state="inactive">A1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A2" data-state="inactive">A2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A3" data-state="inactive">A3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A4" data-state="inactive">A4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
  </ul>
  <ul aria-label="List B">
    <li class="item" id="item-B1" data-state="inactive">B1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B2" data-state="inactive">B2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B3" data-state="inactive">B3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B4" data-state="inactive">B4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
  </ul>
</figure>

const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('change', e => {
    let targets = e.target.dataset.controls.split(' ')
    items.forEach(item => {
      let index = targets.indexOf(item.id)
      if (-1 === index) item.dataset.state = 'inactive'
      else if (0 === index) item.dataset.state = 'selected'
      else item.dataset.state = 'highlighted'
    })
  })
})

body {
  display: grid;
  grid-template: auto auto / auto auto;
  grid-auto-flow: column;
}
form,
figure {
  display: grid;
  grid-template: auto/auto auto 1fr;
  gap: 1ch;
}
fieldset {
  display: grid;
  grid-template: auto/auto auto;
}
input,
label {
  cursor: pointer;
}
figure,
ul {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
li {
  margin: 1ch 0 0 1ch;
  padding: 1ch;
}
li[data-state="inactive"] {
  background: #ddd;
}
li[data-state="selected"] {
  background: #aaffaa;
}
li[data-state="highlighted"] {
  background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
  display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
  display: inline;
}

<h2>Controls</h2>
<form>
  <fieldset>
    <legend>List A</legend>
    <input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3" />
    <label for="input-A1">A1</label>
    <input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1" />
    <label for="input-A2">A2</label>
    <input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4" />
    <label for="input-A3">A3</label>
    <input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2" />
    <label for="input-A4">A4</label>
  </fieldset>
  <fieldset>
    <legend>List B</legend>
    <input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4" />
    <label for="input-B1">B1</label>
    <input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3" />
    <label for="input-B2">B2</label>
    <input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4" />
    <label for="input-B3">B3</label>
    <input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2" />
    <label for="input-B4">B4</label>
  </fieldset>
</form>
<h2>Visualization</h2>
<figure id="graphic" aria-live="polite">
  <ul aria-label="List A">
    <li class="item" id="item-A1" data-state="inactive">A1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A2" data-state="inactive">A2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A3" data-state="inactive">A3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A4" data-state="inactive">A4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
  </ul>
  <ul aria-label="List B">
    <li class="item" id="item-B1" data-state="inactive">B1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B2" data-state="inactive">B2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B3" data-state="inactive">B3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B4" data-state="inactive">B4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
  </ul>
</figure>

const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('change', e => {
    let targets = e.target.dataset.controls.split(' ')
    items.forEach(item => {
      let index = targets.indexOf(item.id)
      if (-1 === index) item.dataset.state = 'inactive'
      else if (0 === index) item.dataset.state = 'selected'
      else item.dataset.state = 'highlighted'
    })
  })
})
items.forEach(item => {
  item.addEventListener('click', e => {
    let inputId = 'input-' + e.target.id.split('-')[1]
    document.getElementById(inputId).click()
  })
})

.sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
figure {
  display: grid;
  grid-template: auto/auto auto 1fr;
  gap: 1ch;
}
figure,
ul {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
li {
  margin: 1ch 0 0 1ch;
  padding: 1ch;
  cursor: pointer;
}
li:hover {
  opacity: 0.6;
}
li[data-state="inactive"] {
  background: #ddd;
}
li[data-state="selected"] {
  background: #aaffaa;
}
li[data-state="highlighted"] {
  background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
  display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
  display: inline;
}

<div class="sr-only">
  <h2>Controls</h2>
  <form>
    <fieldset>
      <legend>List A</legend>
      <input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3"/>
      <label for="input-A1">A1</label>
      <input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1"/>
      <label for="input-A2">A2</label>
      <input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4"/>
      <label for="input-A3">A3</label>
      <input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2"/>
      <label for="input-A4">A4</label>
    </fieldset>
    <fieldset>
      <legend>List B</legend>
      <input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4"/>
      <label for="input-B1">B1</label>
      <input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3"/>
      <label for="input-B2">B2</label>
      <input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4"/>
      <label for="input-B3">B3</label>
      <input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2"/>
      <label for="input-B4">B4</label>
    </fieldset>
  </form>
</div>
<h2 class="sr-only">Visualization</h2>
<figure id="graphic" aria-live="polite">
  <ul aria-label="List A">
    <li class="item" id="item-A1" data-state="inactive">A1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A2" data-state="inactive">A2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A3" data-state="inactive">A3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A4" data-state="inactive">A4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
  </ul>
  <ul aria-label="List B">
    <li class="item" id="item-B1" data-state="inactive">B1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B2" data-state="inactive">B2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B3" data-state="inactive">B3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B4" data-state="inactive">B4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
  </ul>
</figure>

const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('change', e => {
    let targets = e.target.dataset.controls.split(' ')
    items.forEach(item => {
      let index = targets.indexOf(item.id)
      if (-1 === index) item.dataset.state = 'inactive'
      else if (0 === index) item.dataset.state = 'selected'
      else item.dataset.state = 'highlighted'
    })
  })
})

body {
  display: grid;
  grid-template: auto auto / auto auto;
  grid-auto-flow: column;
}
form,
figure {
  display: grid;
  grid-template: auto/auto auto 1fr;
  gap: 1ch;
}
fieldset {
  display: grid;
  grid-template: auto/auto auto;
}
input,
label {
  cursor: pointer;
}
figure,
ul {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
li {
  margin: 1ch 0 0 1ch;
  padding: 1ch;
}
li[data-state="inactive"] {
  background: #ddd;
}
li[data-state="selected"] {
  background: #aaffaa;
}
li[data-state="highlighted"] {
  background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
  display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
  display: inline;
}

<h2>Controls</h2>
<form>
  <fieldset>
    <legend>List A</legend>
    <input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3" />
    <label for="input-A1">A1</label>
    <input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1" />
    <label for="input-A2">A2</label>
    <input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4" />
    <label for="input-A3">A3</label>
    <input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2" />
    <label for="input-A4">A4</label>
  </fieldset>
  <fieldset>
    <legend>List B</legend>
    <input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4" />
    <label for="input-B1">B1</label>
    <input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3" />
    <label for="input-B2">B2</label>
    <input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4" />
    <label for="input-B3">B3</label>
    <input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2" />
    <label for="input-B4">B4</label>
  </fieldset>
</form>
<h2>Visualization</h2>
<figure id="graphic" aria-live="polite">
  <ul aria-label="List A">
    <li class="item" id="item-A1" data-state="inactive">A1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A2" data-state="inactive">A2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A3" data-state="inactive">A3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A4" data-state="inactive">A4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
  </ul>
  <ul aria-label="List B">
    <li class="item" id="item-B1" data-state="inactive">B1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B2" data-state="inactive">B2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B3" data-state="inactive">B3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B4" data-state="inactive">B4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
  </ul>
</figure>

const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('change', e => {
    let targets = e.target.dataset.controls.split(' ')
    items.forEach(item => {
      let index = targets.indexOf(item.id)
      if (-1 === index) item.dataset.state = 'inactive'
      else if (0 === index) item.dataset.state = 'selected'
      else item.dataset.state = 'highlighted'
    })
  })
})
items.forEach(item => {
  item.addEventListener('click', e => {
    let inputId = 'input-' + e.target.id.split('-')[1]
    document.getElementById(inputId).click()
  })
})

.sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
figure {
  display: grid;
  grid-template: auto/auto auto 1fr;
  gap: 1ch;
}
figure,
ul {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
li {
  margin: 1ch 0 0 1ch;
  padding: 1ch;
  cursor: pointer;
}
li:hover {
  opacity: 0.6;
}
li[data-state="inactive"] {
  background: #ddd;
}
li[data-state="selected"] {
  background: #aaffaa;
}
li[data-state="highlighted"] {
  background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
  display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
  display: inline;
}

<div class="sr-only">
  <h2>Controls</h2>
  <form>
    <fieldset>
      <legend>List A</legend>
      <input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3"/>
      <label for="input-A1">A1</label>
      <input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1"/>
      <label for="input-A2">A2</label>
      <input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4"/>
      <label for="input-A3">A3</label>
      <input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2"/>
      <label for="input-A4">A4</label>
    </fieldset>
    <fieldset>
      <legend>List B</legend>
      <input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4"/>
      <label for="input-B1">B1</label>
      <input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3"/>
      <label for="input-B2">B2</label>
      <input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4"/>
      <label for="input-B3">B3</label>
      <input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2"/>
      <label for="input-B4">B4</label>
    </fieldset>
  </form>
</div>
<h2 class="sr-only">Visualization</h2>
<figure id="graphic" aria-live="polite">
  <ul aria-label="List A">
    <li class="item" id="item-A1" data-state="inactive">A1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A2" data-state="inactive">A2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A3" data-state="inactive">A3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A4" data-state="inactive">A4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
  </ul>
  <ul aria-label="List B">
    <li class="item" id="item-B1" data-state="inactive">B1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B2" data-state="inactive">B2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B3" data-state="inactive">B3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B4" data-state="inactive">B4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
  </ul>
</figure>

const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('change', e => {
    let targets = e.target.dataset.controls.split(' ')
    items.forEach(item => {
      let index = targets.indexOf(item.id)
      if (-1 === index) item.dataset.state = 'inactive'
      else if (0 === index) item.dataset.state = 'selected'
      else item.dataset.state = 'highlighted'
    })
  })
})

body {
  display: grid;
  grid-template: auto auto / auto auto;
  grid-auto-flow: column;
}
form,
figure {
  display: grid;
  grid-template: auto/auto auto 1fr;
  gap: 1ch;
}
fieldset {
  display: grid;
  grid-template: auto/auto auto;
}
input,
label {
  cursor: pointer;
}
figure,
ul {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
li {
  margin: 1ch 0 0 1ch;
  padding: 1ch;
}
li[data-state="inactive"] {
  background: #ddd;
}
li[data-state="selected"] {
  background: #aaffaa;
}
li[data-state="highlighted"] {
  background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
  display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
  display: inline;
}

<h2>Controls</h2>
<form>
  <fieldset>
    <legend>List A</legend>
    <input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3" />
    <label for="input-A1">A1</label>
    <input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1" />
    <label for="input-A2">A2</label>
    <input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4" />
    <label for="input-A3">A3</label>
    <input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2" />
    <label for="input-A4">A4</label>
  </fieldset>
  <fieldset>
    <legend>List B</legend>
    <input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4" />
    <label for="input-B1">B1</label>
    <input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3" />
    <label for="input-B2">B2</label>
    <input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4" />
    <label for="input-B3">B3</label>
    <input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2" />
    <label for="input-B4">B4</label>
  </fieldset>
</form>
<h2>Visualization</h2>
<figure id="graphic" aria-live="polite">
  <ul aria-label="List A">
    <li class="item" id="item-A1" data-state="inactive">A1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A2" data-state="inactive">A2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A3" data-state="inactive">A3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A4" data-state="inactive">A4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
  </ul>
  <ul aria-label="List B">
    <li class="item" id="item-B1" data-state="inactive">B1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B2" data-state="inactive">B2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B3" data-state="inactive">B3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B4" data-state="inactive">B4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
  </ul>
</figure>

const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('change', e => {
    let targets = e.target.dataset.controls.split(' ')
    items.forEach(item => {
      let index = targets.indexOf(item.id)
      if (-1 === index) item.dataset.state = 'inactive'
      else if (0 === index) item.dataset.state = 'selected'
      else item.dataset.state = 'highlighted'
    })
  })
})
items.forEach(item => {
  item.addEventListener('click', e => {
    let inputId = 'input-' + e.target.id.split('-')[1]
    document.getElementById(inputId).click()
  })
})

.sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
figure {
  display: grid;
  grid-template: auto/auto auto 1fr;
  gap: 1ch;
}
figure,
ul {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
li {
  margin: 1ch 0 0 1ch;
  padding: 1ch;
  cursor: pointer;
}
li:hover {
  opacity: 0.6;
}
li[data-state="inactive"] {
  background: #ddd;
}
li[data-state="selected"] {
  background: #aaffaa;
}
li[data-state="highlighted"] {
  background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
  display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
  display: inline;
}

<div class="sr-only">
  <h2>Controls</h2>
  <form>
    <fieldset>
      <legend>List A</legend>
      <input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3"/>
      <label for="input-A1">A1</label>
      <input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1"/>
      <label for="input-A2">A2</label>
      <input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4"/>
      <label for="input-A3">A3</label>
      <input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2"/>
      <label for="input-A4">A4</label>
    </fieldset>
    <fieldset>
      <legend>List B</legend>
      <input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4"/>
      <label for="input-B1">B1</label>
      <input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3"/>
      <label for="input-B2">B2</label>
      <input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4"/>
      <label for="input-B3">B3</label>
      <input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2"/>
      <label for="input-B4">B4</label>
    </fieldset>
  </form>
</div>
<h2 class="sr-only">Visualization</h2>
<figure id="graphic" aria-live="polite">
  <ul aria-label="List A">
    <li class="item" id="item-A1" data-state="inactive">A1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A2" data-state="inactive">A2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A3" data-state="inactive">A3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A4" data-state="inactive">A4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
  </ul>
  <ul aria-label="List B">
    <li class="item" id="item-B1" data-state="inactive">B1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B2" data-state="inactive">B2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B3" data-state="inactive">B3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B4" data-state="inactive">B4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
  </ul>
</figure>

const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('change', e => {
    let targets = e.target.dataset.controls.split(' ')
    items.forEach(item => {
      let index = targets.indexOf(item.id)
      if (-1 === index) item.dataset.state = 'inactive'
      else if (0 === index) item.dataset.state = 'selected'
      else item.dataset.state = 'highlighted'
    })
  })
})

body {
  display: grid;
  grid-template: auto auto / auto auto;
  grid-auto-flow: column;
}
form,
figure {
  display: grid;
  grid-template: auto/auto auto 1fr;
  gap: 1ch;
}
fieldset {
  display: grid;
  grid-template: auto/auto auto;
}
input,
label {
  cursor: pointer;
}
figure,
ul {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
li {
  margin: 1ch 0 0 1ch;
  padding: 1ch;
}
li[data-state="inactive"] {
  background: #ddd;
}
li[data-state="selected"] {
  background: #aaffaa;
}
li[data-state="highlighted"] {
  background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
  display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
  display: inline;
}

<h2>Controls</h2>
<form>
  <fieldset>
    <legend>List A</legend>
    <input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3" />
    <label for="input-A1">A1</label>
    <input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1" />
    <label for="input-A2">A2</label>
    <input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4" />
    <label for="input-A3">A3</label>
    <input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2" />
    <label for="input-A4">A4</label>
  </fieldset>
  <fieldset>
    <legend>List B</legend>
    <input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4" />
    <label for="input-B1">B1</label>
    <input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3" />
    <label for="input-B2">B2</label>
    <input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4" />
    <label for="input-B3">B3</label>
    <input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2" />
    <label for="input-B4">B4</label>
  </fieldset>
</form>
<h2>Visualization</h2>
<figure id="graphic" aria-live="polite">
  <ul aria-label="List A">
    <li class="item" id="item-A1" data-state="inactive">A1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A2" data-state="inactive">A2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A3" data-state="inactive">A3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-A4" data-state="inactive">A4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
  </ul>
  <ul aria-label="List B">
    <li class="item" id="item-B1" data-state="inactive">B1<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B2" data-state="inactive">B2<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B3" data-state="inactive">B3<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
    <li class="item" id="item-B4" data-state="inactive">B4<span class="selected">, selected</span><span class="highlighted">, highlighted</span></li>
  </ul>
</figure>

const items = document.querySelectorAll('.item')
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('change', e => {
    let targets = e.target.dataset.controls.split(' ')
    items.forEach(item => {
      let index = targets.indexOf(item.id)
      if (-1 === index) item.dataset.state = 'inactive'
      else if (0 === index) item.dataset.state = 'selected'
      else item.dataset.state = 'highlighted'
    })
  })
})
items.forEach(item => {
  item.addEventListener('click', e => {
    let inputId = 'input-' + e.target.id.split('-')[1]
    document.getElementById(inputId).click()
  })
})

.sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
figure {
  display: grid;
  grid-template: auto/auto auto 1fr;
  gap: 1ch;
}
figure,
ul {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
li {
  margin: 1ch 0 0 1ch;
  padding: 1ch;
  cursor: pointer;
}
li:hover {
  opacity: 0.6;
}
li[data-state="inactive"] {
  background: #ddd;
}
li[data-state="selected"] {
  background: #aaffaa;
}
li[data-state="highlighted"] {
  background: #aaaaff;
}
li[data-state="inactive"] span,
li[data-state="highlighted"] span.selected {
  display: none;
}
li[data-state="selected"] span,
li[data-state="highlighted"] span.highlighted {
  display: inline;
}

<div class="sr-only">
  <h2>Controls</h2>
  <form>
    <fieldset>
      <legend>List A</legend>
      <input id="input-A1" type="radio" name="input" aria-controls="graphic" data-controls="item-A1 item-B2 item-B3"/>
      <label for="input-A1">A1</label>
      <input id="input-A2" type="radio" name="input" aria-controls="graphic" data-controls="item-A2 item-B1"/>
      <label for="input-A2">A2</label>
      <input id="input-A3" type="radio" name="input" aria-controls="graphic" data-controls="item-A3 item-B2 item-B3 item-B4"/>
      <label for="input-A3">A3</label>
      <input id="input-A4" type="radio" name="input" aria-controls="graphic" data-controls="item-A4 item-B2"/>
      <label for="input-A4">A4</label>
    </fieldset>
    <fieldset>
      <legend>List B</legend>
      <input id="input-B1" type="radio" name="input" aria-controls="graphic" data-controls="item-B1 item-A2 item-A3 item-A4"/>
      <label for="input-B1">B1</label>
      <input id="input-B2" type="radio" name="input" aria-controls="graphic" data-controls="item-B2 item-A2 item-B3"/>
      <label for="input-B2">B2</label>
      <input id="input-B3" type="radio" name="input" aria-controls="graphic" data-controls="item-B3 item-A1 item-A4"/>
      <label for="input-B3">B3</label>
      <input id="input-B4" type="radio" name="input" aria-controls="graphic" data-controls="item-B4 item-A2"/>
      <label for="input-B4">B4</label>
    </fieldset>
  </form>
</div>
<h2 class="sr-only">Visualization</h2>
<figure id="graphic" aria-live="polite">
  <ul aria-label="List A">
    <li class="item" id="item-A1" data-state="inactive">A1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A2" data-state="inactive">A2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A3" data-state="inactive">A3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-A4" data-state="inactive">A4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
  </ul>
  <ul aria-label="List B">
    <li class="item" id="item-B1" data-state="inactive">B1<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B2" data-state="inactive">B2<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B3" data-state="inactive">B3<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
    <li class="item" id="item-B4" data-state="inactive">B4<span class="sr-only selected">, selected</span><span class="sr-only highlighted">, highlighted</span></li>
  </ul>
</figure>

@font-face {
  font-family: "bootstrap-icons";
  src: font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff2") format("woff2"), font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff") format("woff");
}

npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore

@import "bootstrap-icons/font/bootstrap-icons";

"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"

npm i bootstrap-icons

@import "bootstrap-icons/font/bootstrap-icons";

Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")

npm install --save @fortawesome/fontawesome-free

import "@fortawesome/fontawesome-free/js/all"

<i class="fas fa-arrow-right"></i>

npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore

@import "bootstrap-icons/font/bootstrap-icons";

"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"

npm i bootstrap-icons

@import "bootstrap-icons/font/bootstrap-icons";

Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")

npm install --save @fortawesome/fontawesome-free

import "@fortawesome/fontawesome-free/js/all"

<i class="fas fa-arrow-right"></i>

npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore

@import "bootstrap-icons/font/bootstrap-icons";

"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"

npm i bootstrap-icons

@import "bootstrap-icons/font/bootstrap-icons";

Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")

npm install --save @fortawesome/fontawesome-free

import "@fortawesome/fontawesome-free/js/all"

<i class="fas fa-arrow-right"></i>

npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore

@import "bootstrap-icons/font/bootstrap-icons";

"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"

npm i bootstrap-icons

@import "bootstrap-icons/font/bootstrap-icons";

Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")

npm install --save @fortawesome/fontawesome-free

import "@fortawesome/fontawesome-free/js/all"

<i class="fas fa-arrow-right"></i>

npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore

@import "bootstrap-icons/font/bootstrap-icons";

"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"

npm i bootstrap-icons

@import "bootstrap-icons/font/bootstrap-icons";

Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")

npm install --save @fortawesome/fontawesome-free

import "@fortawesome/fontawesome-free/js/all"

<i class="fas fa-arrow-right"></i>

npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore

@import "bootstrap-icons/font/bootstrap-icons";

"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"

npm i bootstrap-icons

@import "bootstrap-icons/font/bootstrap-icons";

Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")

npm install --save @fortawesome/fontawesome-free

import "@fortawesome/fontawesome-free/js/all"

<i class="fas fa-arrow-right"></i>

npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore

@import "bootstrap-icons/font/bootstrap-icons";

"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"

npm i bootstrap-icons

@import "bootstrap-icons/font/bootstrap-icons";

Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")

npm install --save @fortawesome/fontawesome-free

import "@fortawesome/fontawesome-free/js/all"

<i class="fas fa-arrow-right"></i>

npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore

@import "bootstrap-icons/font/bootstrap-icons";

"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"

npm i bootstrap-icons

@import "bootstrap-icons/font/bootstrap-icons";

Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")

npm install --save @fortawesome/fontawesome-free

import "@fortawesome/fontawesome-free/js/all"

<i class="fas fa-arrow-right"></i>

npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore

@import "bootstrap-icons/font/bootstrap-icons";

"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"

npm i bootstrap-icons

@import "bootstrap-icons/font/bootstrap-icons";

Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")

npm install --save @fortawesome/fontawesome-free

import "@fortawesome/fontawesome-free/js/all"

<i class="fas fa-arrow-right"></i>

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-7 mx-auto">
      <form>
        <fieldset class="scheduler-border">
          <legend class="scheduler-legend">my legend</legend>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
          </div>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
          </div>
          <div class="form-group text-center mb-0">
            <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
              register
            </button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

.page-wrapper {
  min-height: 100vh;
}

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<div class="container page-wrapper d-flex flex-column">
  <div class="row my-auto">
    <div class="col-md-7 mx-auto">
      <form>
        <fieldset class="scheduler-border">
          <legend class="scheduler-legend">my legend</legend>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
          </div>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
          </div>
          <div class="form-group text-center mb-0">
            <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
              register
            </button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-7 mx-auto">
      <form>
        <fieldset class="scheduler-border">
          <legend class="scheduler-legend">my legend</legend>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
          </div>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
          </div>
          <div class="form-group text-center mb-0">
            <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
              register
            </button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

.page-wrapper {
  min-height: 100vh;
}

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<div class="container page-wrapper d-flex flex-column">
  <div class="row my-auto">
    <div class="col-md-7 mx-auto">
      <form>
        <fieldset class="scheduler-border">
          <legend class="scheduler-legend">my legend</legend>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
          </div>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
          </div>
          <div class="form-group text-center mb-0">
            <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
              register
            </button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-7 mx-auto">
      <form>
        <fieldset class="scheduler-border">
          <legend class="scheduler-legend">my legend</legend>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
          </div>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
          </div>
          <div class="form-group text-center mb-0">
            <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
              register
            </button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

.page-wrapper {
  min-height: 100vh;
}

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<div class="container page-wrapper d-flex flex-column">
  <div class="row my-auto">
    <div class="col-md-7 mx-auto">
      <form>
        <fieldset class="scheduler-border">
          <legend class="scheduler-legend">my legend</legend>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
          </div>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
          </div>
          <div class="form-group text-center mb-0">
            <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
              register
            </button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-7 mx-auto">
      <form>
        <fieldset class="scheduler-border">
          <legend class="scheduler-legend">my legend</legend>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
          </div>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
          </div>
          <div class="form-group text-center mb-0">
            <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
              register
            </button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

.page-wrapper {
  min-height: 100vh;
}

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<div class="container page-wrapper d-flex flex-column">
  <div class="row my-auto">
    <div class="col-md-7 mx-auto">
      <form>
        <fieldset class="scheduler-border">
          <legend class="scheduler-legend">my legend</legend>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
          </div>
          <div class="form-group">
            <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
          </div>
          <div class="form-group text-center mb-0">
            <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
              register
            </button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

html, body {
  height: 100%;
}

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex h-100">
  <div class="m-auto">
    <form>
      <fieldset class="scheduler-border">
        <legend class="scheduler-legend">my legend</legend>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
        </div>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
        </div>
        <div class="form-group text-center">
          <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
            register
          </button>
        </div>
      </fieldset>
    </form>
  </div>
</div>

html, body {
  height: 100%;
}

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}

fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}

.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}

.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex h-100">
  <div class="m-auto">
    <form>
      <fieldset class="scheduler-border">
        <legend class="scheduler-legend">my legend</legend>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
        </div>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
        </div>
        <div class="form-group text-center">
          <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
            register
          </button>
        </div>
      </fieldset>
    </form>
  </div>
</div>

html, body {
  height: 100%;
}

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}



.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}
 fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}
.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex h-100">
  <div class="m-auto">
    <form>
      <fieldset class="scheduler-border">
        <legend class="scheduler-legend">My legend</legend>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
        </div>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
        </div>
        <div class="form-group text-center">
          <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
            Register
          </button>
        </div>
      </fieldset>
    </form>
  </div>
</div>

html, body {
  height: 100%;
}

.txtbox::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}



.scheduler-legend {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
  margin: -20px 0 0 0;
  background-color: white;
  color: black;
}

.txtbox {
  border: none;
  outline: 0px;
  height: 27px;
  margin-top: 33px;
  border: solid 2px black !important;
  border-radius: 0 !important;
}
 fieldset.scheduler-border {
  border: 2px groove #000 !important;
  padding: 0px 2rem 1.4rem 2rem !important;
  margin: 0 0 1.5em 0 !important;
  box-shadow: 0px 0px 0px 0px #000;
  margin-top: 30px !important;
}
.bt {
  line-height: 30px;
  background: white;
  border: none;
  color: #fff;
  font-size: 14px;
  color: black;
  border: 2px solid black !important;
  border-radius: 0 !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex h-100">
  <div class="m-auto">
    <form>
      <fieldset class="scheduler-border">
        <legend class="scheduler-legend">My legend</legend>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="element" v-model="Username" />
        </div>
        <div class="form-group">
          <input name="" type="text" class="txtbox form-control" placeholder="element2" v-model="password" />
        </div>
        <div class="form-group text-center">
          <button name="" type="button" value="LOGIN" class="bt btn" v-on:click="login()">
            Register
          </button>
        </div>
      </fieldset>
    </form>
  </div>
</div>

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
})


document.getElementsByClassName("adcart")[0].addEventListener('click', addcart);

document.getElementsByClassName("btnminus")[0].addEventListener('click', decrement);

document.getElementsByClassName("btnplus")[0].addEventListener('click', increment);


/*** These two functions (increment ,decrement) are for working of plus and minus buttons***/

function decrement() {
    var x = parseInt(document.getElementsByClassName("form-control")[0].value);
    if (x != 0) {
        document.getElementsByClassName("form-control")[0].value = parseInt(document.getElementsByClassName("form-control")[0].value) - 1;
    }
}

function increment() {
    document.getElementsByClassName("form-control")[0].value = parseInt(document.getElementsByClassName("form-control")[0].value) + 1;
}


/** This is the function I have written to update the content of popover**/


function addcart() {
    document.getElementsByClassName("poper")[0].dataset.bsContent = "YOUR total bill is " + parseInt(document.getElementsByClassName("form-control")[0].value) * 125;

    popoverTriggerList.map(function(popoverTriggerEl) {
        popover = bootstrap.Popover.getOrCreateInstance(popoverTriggerEl);
        popover.hide();// hide, in case that it is opening.
        popover.disable();
        new bootstrap.Popover(popoverTriggerEl);
    })
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<button type="button" class="btn btn-lg poper" data-bs-toggle="popover" title="CART" data-html="true" data-bs-Content="Your cart is empty"> popover</button>



<div class="quantity d-inline-block">
    <input class="btn btnminus d-inline" type="button" value="-">
    <input class="form-control d-inline itemnumber" value='0' aria-label="Username" aria-describedby="addon-wrapping">
    <input class="btn btnplus d-inline" type="button" value="+">
</div>

<button type="button" class="btn btn-lg adcart">Add to cart</button>

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
})


document.getElementsByClassName("adcart")[0].addEventListener('click', addcart);

document.getElementsByClassName("btnminus")[0].addEventListener('click', decrement);

document.getElementsByClassName("btnplus")[0].addEventListener('click', increment);


/*** These two functions (increment ,decrement) are for working of plus and minus buttons***/

function decrement() {
    var x = parseInt(document.getElementsByClassName("form-control")[0].value);
    if (x != 0) {
        document.getElementsByClassName("form-control")[0].value = parseInt(document.getElementsByClassName("form-control")[0].value) - 1;
    }
}

function increment() {
    document.getElementsByClassName("form-control")[0].value = parseInt(document.getElementsByClassName("form-control")[0].value) + 1;
}


/** This is the function I have written to update the content of popover**/


function addcart() {
    document.getElementsByClassName("poper")[0].dataset.bsContent = "YOUR total bill is " + parseInt(document.getElementsByClassName("form-control")[0].value) * 125;

    popoverTriggerList.map(function(popoverTriggerEl) {
        popover = bootstrap.Popover.getOrCreateInstance(popoverTriggerEl);
        popover.hide();// hide, in case that it is opening.
        popover.disable();
        new bootstrap.Popover(popoverTriggerEl);
    })
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<button type="button" class="btn btn-lg poper" data-bs-toggle="popover" title="CART" data-html="true" data-bs-Content="Your cart is empty"> popover</button>



<div class="quantity d-inline-block">
    <input class="btn btnminus d-inline" type="button" value="-">
    <input class="form-control d-inline itemnumber" value='0' aria-label="Username" aria-describedby="addon-wrapping">
    <input class="btn btnplus d-inline" type="button" value="+">
</div>

<button type="button" class="btn btn-lg adcart">Add to cart</button>

methods: {
    setCurrency(newcurrency, reload) {
        this.$cookies.set(`usercurrency`, newcurrency, {
            path: '/',
            maxAge: 60 * 60 * 24 * 7
        })
        if (reload) window.location.href = '/'
    }
}

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text">Add</button>

                    <button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button>

if ($('#modal_button_text').html().includes("Add")) {
    $('#modal_button_text').html("Update");
}

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text">Add</button>

                    <button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button>

if ($('#modal_button_text').html().includes("Add")) {
    $('#modal_button_text').html("Update");
}

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text">Add</button>

                    <button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button>

if ($('#modal_button_text').html().includes("Add")) {
    $('#modal_button_text').html("Update");
}

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i><span id="modal_button_span">Add</span></button>

if(document.getElementById("modal_button_span").innerHTML === "Add")  document.getElementById("modal_button_span").innerHTML = "Update";

document.getElementById("modal_button_span").innerHTML = document.getElementById("modal_button_span").innerHTML === "Add" ? "Update" : "Add";

if($("#modal_button_span").html() === "Add") $("#modal_button_span").html("Update");

$("#modal_button_span").html($("#modal_button_span").html() === "Add" ? "Update" : "Add");

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i><span id="modal_button_span">Add</span></button>

if(document.getElementById("modal_button_span").innerHTML === "Add")  document.getElementById("modal_button_span").innerHTML = "Update";

document.getElementById("modal_button_span").innerHTML = document.getElementById("modal_button_span").innerHTML === "Add" ? "Update" : "Add";

if($("#modal_button_span").html() === "Add") $("#modal_button_span").html("Update");

$("#modal_button_span").html($("#modal_button_span").html() === "Add" ? "Update" : "Add");

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i><span id="modal_button_span">Add</span></button>

if(document.getElementById("modal_button_span").innerHTML === "Add")  document.getElementById("modal_button_span").innerHTML = "Update";

document.getElementById("modal_button_span").innerHTML = document.getElementById("modal_button_span").innerHTML === "Add" ? "Update" : "Add";

if($("#modal_button_span").html() === "Add") $("#modal_button_span").html("Update");

$("#modal_button_span").html($("#modal_button_span").html() === "Add" ? "Update" : "Add");

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i><span id="modal_button_span">Add</span></button>

if(document.getElementById("modal_button_span").innerHTML === "Add")  document.getElementById("modal_button_span").innerHTML = "Update";

document.getElementById("modal_button_span").innerHTML = document.getElementById("modal_button_span").innerHTML === "Add" ? "Update" : "Add";

if($("#modal_button_span").html() === "Add") $("#modal_button_span").html("Update");

$("#modal_button_span").html($("#modal_button_span").html() === "Add" ? "Update" : "Add");

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i><span id="modal_button_span">Add</span></button>

if(document.getElementById("modal_button_span").innerHTML === "Add")  document.getElementById("modal_button_span").innerHTML = "Update";

document.getElementById("modal_button_span").innerHTML = document.getElementById("modal_button_span").innerHTML === "Add" ? "Update" : "Add";

if($("#modal_button_span").html() === "Add") $("#modal_button_span").html("Update");

$("#modal_button_span").html($("#modal_button_span").html() === "Add" ? "Update" : "Add");

import { ThemeProvider } from "@mui/styles";

import { ThemeProvider } from "@mui/material/styles";

const theme = useTheme();

return <Box sx={{ width: 10, height: 10, bgcolor: theme.palette.primary.main }} />

return <Box sx={{ width: 10, height: 10, bgcolor: 'primary.main' }} />

import { ThemeProvider } from "@mui/styles";

import { ThemeProvider } from "@mui/material/styles";

const theme = useTheme();

return <Box sx={{ width: 10, height: 10, bgcolor: theme.palette.primary.main }} />

return <Box sx={{ width: 10, height: 10, bgcolor: 'primary.main' }} />

import { ThemeProvider } from "@mui/styles";

import { ThemeProvider } from "@mui/material/styles";

const theme = useTheme();

return <Box sx={{ width: 10, height: 10, bgcolor: theme.palette.primary.main }} />

return <Box sx={{ width: 10, height: 10, bgcolor: 'primary.main' }} />

import { ThemeProvider } from "@mui/styles";

import { ThemeProvider } from "@mui/material/styles";

const theme = useTheme();

return <Box sx={{ width: 10, height: 10, bgcolor: theme.palette.primary.main }} />

return <Box sx={{ width: 10, height: 10, bgcolor: 'primary.main' }} />