JSFiddle - React, Tailwind, and code Playground

by deathstalkersid

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>

  <body class="d-flex align-items-center justify-content-start">
    <div class="dropdown mr-4">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#" data-id="search-input-1">Find on search bar 1</a>
        <a class="dropdown-item" href="#" data-id="search-input-2">Find on search bar 2</a>
        <a class="dropdown-item" href="#" data-id="search-input-3">Find on search bar 3</a>
      </div>
    </div>
    <div class="form-inline mr-4">
      <input class="form-control mr-sm-2 search-input" id="search-input-1" style="width: 18rem" placeholder="Search bar 1">
      <input class="form-control mr-sm-2 search-input" id="search-input-2" style="width: 18rem; display: none;" placeholder="Search bar 2">
      <input class="form-control mr-sm-2 search-input" id="search-input-3" style="width: 18rem; display: none;" placeholder="Search bar 3">
    </div>
    <button class="btn btn-outline-success" id="search-button">
      <i class="fa fa-search"></i>
    </button>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"...

JavaScript

const dropdownItems = Array.from(document.querySelectorAll('.dropdown-item')),
	searchInputs = Array.from(document.querySelectorAll('.search-input')),
   searchBtn = document.getElementById('search-button'),
   site = '...';
    
    let currentSearchInput = 'search-input-1';

dropdownItems.forEach((dropdownItem) => {
    dropdownItem.addEventListener('click', (event) => {
        const { id } = event.currentTarget.dataset;
        
        currentSearchInput = id;

        searchInputs.forEach((searchInput) => searchInput.style.display = 'none');
        
        document.getElementById(id).style.display = 'block';
    });
});

searchBtn.addEventListener('click', () => {
    const url = site + document.getElementById(currentSearchInput).value;
    const win = window.open(url, '_blank');
    win.focus();
});