Create a search bar spotlight modal with JS

buildSearchSpotlight() { this.spotlightModal = document.createElement('DIV'); this.spotlightModal.setAttribute('id', 'spotlightModal') this.spotlightModal.classList.add('hidden'); this.searchBar = document.createElement('INPUT'); this.searchBar.setAttribute('id', 'search-box') this.searchbarWrapper = document.createElement('DIV'); this.searchbarWrapper.appendChild(this.searchBar) this.spotlightModal.appendChild(this.searchbarWrapper); // Add styling this.spotlightModal.style.position = 'absolute' this.spotlightModal.style.width = '100vw' this.spotlightModal.style.height = '100vh' this.spotlightModal.style.left = '0' this.spotlightModal.style.top = '0' this.spotlightModal.style.backgroundColor = 'rgba(0, 0, 0, 0.2)' this.spotlightModal.style.display = 'flex' this.spotlightModal.style.justifyContent = 'center' this.spotlightModal.style.padding = '40px' this.searchBar.style.height = '50px' this.searchBar.style.width = '600px' this.searchBar.style.borderRadius = '10px' document.body.appendChild(this.spotlightModal); // Add event listeners this.spotlightInitiator.addEventListener('click', e => { this.toggleSpotlight() }) this.spotlightModal.addEventListener('click', e => { this.toggleSpotlight() }) // Stop the clicking of the search bar closing the modal this.searchBar.addEventListener('click', e => { e.stopPropagation() }) }