From c0d56c6bd38b056c823b95d42213e4bc1c98ae39 Mon Sep 17 00:00:00 2001 From: Angekarara Date: Tue, 8 Apr 2025 18:08:08 +0200 Subject: [PATCH 1/7] ch: replace dropdown with search bar --- public/js/script.js | 81 +++++++++++++++++++++++++++++++++++++++++-- views/pages/index.pug | 22 ++---------- 2 files changed, 82 insertions(+), 21 deletions(-) diff --git a/public/js/script.js b/public/js/script.js index 984206a..10726b3 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -1,7 +1,33 @@ +const operations = [ + { value: "onlyNumbers", label: "Only Numbers" }, + { value: "onlyLetters", label: "Only Letters" }, + { value: "onlySpecialCharacters", label: "Only Special Characters" }, + { value: "isEmailAddress", label: "Is Email Address" }, + { value: "isPhoneNumber", label: "Is Phone Number" }, + { value: "trim", label: "Trim" }, + { value: "isInteger", label: "Is Integer" }, + { value: "isAlphaNumeric", label: "Is Alpha Numeric" }, + { value: "isHexadecimal", label: "Is Hexadecimal" }, + { value: "isDecimal", label: "Is Decimal" }, + { value: "isLowercase", label: "Is Lowercase" }, + { value: "isDate", label: "Is Date" }, + { value: "isAllCaps", label: "Is AllCaps" }, + { value: "isUrl", label: "Is Url" }, + { value: "isBinaryString", label: "Is Binary String" }, + { value: "isBoolean", label: "Is Boolean" }, + { value: "isCountry", label: "Is Country" }, + { value: "isValidStateCode", label: "Is Valid State Code" }, +]; + async function getResponse() { const inputString = document.querySelector("#inputString").value; const endpoint = document.querySelector('select[name="endpoint"]').value; + if (!endpoint) { + alert("Please select an operation first"); + return; + } + // Use window.location.origin to get the base URL const baseUrl = window.location.origin; @@ -9,8 +35,8 @@ async function getResponse() { const response = await fetch(`${baseUrl}/api/${endpoint}`, { method: "POST", body: JSON.stringify({ - inputString: inputString - }), + inputString: inputString, + }), headers: { "Content-Type": "application/json", }, @@ -31,3 +57,54 @@ function enableButton() { document.querySelector("#getResponseButton").disabled = inputString.length > 0 ? false : true; } + +function searchOperations() { + const searchInput = document.querySelector("#operationSearch"); + const searchResults = document.querySelector("#searchResults"); + const query = searchInput.value.toLowerCase(); + + searchResults.innerHTML = ""; + + if (query.length === 0) { + searchResults.style.display = "none"; + return; + } + + const filteredOperations = operations.filter( + (operation) => + operation.label.toLowerCase().includes(query) || + operation.label.toLowerCase().includes(query) + ); + + if (filteredOperations.length > 0) { + searchResults.style.display = "block"; + filteredOperations.forEach((operation) => { + const div = document.createElement("div"); + div.className = "search-result-item"; + div.textContent = operation.label; + div.onclick = () => selectOperation(operation); + searchResults.appendChild(div); + }); + } else { + searchResults.style.display = "none"; + } +} + +function selectOperation(operation) { + const searchInput = document.querySelector("#operationSearch"); + const searchResults = document.querySelector("#searchResults"); + const selectedOperation = document.querySelector("#selectedOperation"); + + searchInput.value = operation.label; + selectedOperation.value = operation.value; + searchResults.style.display = "none"; +} + +document.addEventListener("click", (e) => { + const searchResults = document.querySelector("#searchResults"); + const operationSearch = document.querySelector("#operationSearch"); + + if (e.target !== operationSearch) { + searchResults.style.display = "none"; + } +}); diff --git a/views/pages/index.pug b/views/pages/index.pug index 2b36629..02b38bc 100644 --- a/views/pages/index.pug +++ b/views/pages/index.pug @@ -11,25 +11,9 @@ block content label Select a simple operation to perform (all operations can be found on our docs page) br br - select(name='endpoint') - option(value='onlyNumbers') Only Numbers - option(value='onlyLetters') Only Letters - option(value='onlySpecialCharacters') Only Special Characters - option(value='isEmailAddress') Is Email Address - option(value='isPhoneNumber') Is Phone Number - option(Value='trim') Trim - option(value='isInteger') Is Integer - option(value='isAlphaNumeric') Is Alpha Numeric - option(value='isHexadecimal') Is Hexadecimal - option(value='isDecimal') Is Decimal - option(value='isLowercase') Is Lowercase - option(value='isDate') Is Date - option(value='isAllCaps') Is AllCaps - option(value='isUrl') Is Url - option(value='isBinaryString') Is Binary String - option(value='isBoolean') Is Boolean - option(value='isCountry') Is Country - + input(type="text" id="operationSearch" placeholder="Search operation..." onkeyup="searchOperations()") + div(id="searchResults" class="search-results") + input(type="hidden" id="selectedOperation") br br button(onclick='getResponse()' id='getResponseButton' disabled='true') Get Response From d5933a4815cee15104dba62dc96821f7b92b142e Mon Sep 17 00:00:00 2001 From: Angekarara Date: Tue, 8 Apr 2025 18:58:17 +0200 Subject: [PATCH 2/7] refactor: change search ui --- public/css/style.css | 331 +++++++++++++++++++++++-------------------- public/js/script.js | 2 +- 2 files changed, 177 insertions(+), 156 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 8ca76ff..24bc39e 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,39 +1,39 @@ /* Import Google Fonts for modern typography */ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } /* Body Styling */ body { - font-family: 'Poppins', sans-serif; - background-color: #f0f2f5; /* Light, soft background for a modern look */ - color: #333; - padding: 0; - display: flex; - flex-direction: column; - justify-content: start; - align-items: center; - min-height: 100vh; - padding-top: 60px; + font-family: "Poppins", sans-serif; + background-color: #f0f2f5; /* Light, soft background for a modern look */ + color: #333; + padding: 0; + display: flex; + flex-direction: column; + justify-content: start; + align-items: center; + min-height: 100vh; + padding-top: 60px; } -#main-header{ - font-size: 64px; - text-align: center; +#main-header { + font-size: 64px; + text-align: center; } /* Container Styling */ .container { - background-color: #fff; - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - padding: 30px; - width: 100%; - max-width: 900px; - margin: 20px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + padding: 30px; + width: 100%; + max-width: 900px; + margin: 20px; } /* Comparison Container Styling */ @@ -72,89 +72,92 @@ body { } /* Headings Styling */ -h1, h4 { - text-align: center; - color: #2C3E50; /* Darker shade for headings */ - font-weight: 600; - margin-bottom: 20px; +h1, +h4 { + text-align: center; + color: #2c3e50; /* Darker shade for headings */ + font-weight: 600; + margin-bottom: 20px; } /* Form Labels */ label { - display: block; - margin-bottom: 10px; - font-weight: 500; - color: #7F8C8D; + display: block; + margin-bottom: 10px; + font-weight: 500; + color: #7f8c8d; } /* Input Fields and Select Elements */ -input[type="text"], select { - width: 50%; - padding: 14px; - margin-bottom: 20px; - border-radius: 8px; - border: 1px solid #BDC3C7; - font-size: 16px; - background-color: #ECF0F1; - transition: all 0.3s ease; +input[type="text"], +select { + width: 50%; + padding: 14px; + margin-bottom: 20px; + border-radius: 8px; + border: 1px solid #bdc3c7; + font-size: 16px; + background-color: #ecf0f1; + transition: all 0.3s ease; } -input[type="text"]:focus, select:focus { - border-color: #4CAF50; - outline: none; - box-shadow: 0 0 8px rgba(76, 175, 80, 0.4); +input[type="text"]:focus, +select:focus { + border-color: #4caf50; + outline: none; + box-shadow: 0 0 8px rgba(76, 175, 80, 0.4); } /* Button Styling */ button { - width: 30%; - padding: 14px; - background-color: #4CAF50; - color: white; - border: none; - border-radius: 8px; - font-size: 16px; - font-weight: 600; - cursor: pointer; - transition: transform 0.3s ease, background-color 0.3s ease; + width: 30%; + padding: 14px; + background-color: #4caf50; + color: white; + border: none; + border-radius: 8px; + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: transform 0.3s ease, background-color 0.3s ease; } button:hover { - background-color: #388E3C; - transform: translateY(-4px); + background-color: #388e3c; + transform: translateY(-4px); } button:disabled { - background-color: #BDC3C7; - cursor: not-allowed; + background-color: #bdc3c7; + cursor: not-allowed; } /* API Response Box */ #responseBox { - background-color: #F9F9F9; - content:"The response .."; - border-radius: 8px; - border: 1px solid #BDC3C7; - padding: 20px; - margin-bottom: 30px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - min-height: 50px; - min-width:300px; - text-align: center; - overflow: auto; + background-color: #f9f9f9; + content: "The response .."; + border-radius: 8px; + border: 1px solid #bdc3c7; + padding: 20px; + margin-bottom: 30px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + min-height: 50px; + min-width: 300px; + text-align: center; + overflow: auto; } /* Code Samples Styling */ pre { - background-color: #2C3E50; - color: #ECF0F1; - padding: 20px; - border-radius: 8px; - font-size: 14px; - line-height: 1.6; - overflow-x: auto; - white-space: pre-wrap; - word-wrap: break-word; + background-color: #2c3e50; + color: #ecf0f1; + padding: 20px; + border-radius: 8px; + font-size: 14px; + line-height: 1.6; + overflow-x: auto; + white-space: pre-wrap; + word-wrap: break-word; } /* Encouragement */ @@ -175,121 +178,139 @@ pre { /* Navbar Styling */ #navbar { - width: 100%; - background-color: #2C3E50; - padding: 15px 0; - position: fixed; - top: 0; - left: 0; - z-index: 1000; - display: flex; - justify-content: center; + width: 100%; + background-color: #2c3e50; + padding: 15px 0; + position: fixed; + top: 0; + left: 0; + z-index: 1000; + display: flex; + justify-content: center; } #navbar ul { - list-style: none; - display: flex; - gap: 20px; - padding: 0; - margin: 0; + list-style: none; + display: flex; + gap: 20px; + padding: 0; + margin: 0; } #navbar ul li { - display: inline; + display: inline; } #navbar ul li a { - text-decoration: none; - color: white; - font-size: 16px; - font-weight: 500; - padding: 10px 15px; - transition: 0.3s; + text-decoration: none; + color: white; + font-size: 16px; + font-weight: 500; + padding: 10px 15px; + transition: 0.3s; } #navbar ul li a:hover { - background-color: #4CAF50; - border-radius: 5px; + background-color: #4caf50; + border-radius: 5px; } /* Adjust body to avoid content being hidden under navbar */ body { - padding-top: 60px; + padding-top: 60px; } /* Footer Styling */ footer a { - color: #fff; - text-decoration: none; - font-weight: 600; + color: #fff; + text-decoration: none; + font-weight: 600; } footer:hover { - transform: translateY(-4px); + transform: translateY(-4px); } /* Contact Box */ .contact-box { - text-align: center; + text-align: center; } .contact-box ul { - list-style-position: inside; - display: inline-block; - text-align: left; - padding: 0; + list-style-position: inside; + display: inline-block; + text-align: left; + padding: 0; } .contact-box h3 { - margin-top: 32px; + margin-top: 32px; } .contact-box p:first-of-type { - font-size: 18px; - font-weight: 600; - margin-bottom: 16px; + font-size: 18px; + font-weight: 600; + margin-bottom: 16px; } /* Responsive Design */ @media (max-width: 768px) { - .container { - padding: 20px; - width: 100%; - } - - .comparison-box-parrent { - flex-direction: column; - align-items: center; - } - .comparison-container { - flex-direction: column; - align-items: center; - } - .comparison-box { - width: 100%; - margin-bottom: 20px; - } - - input[type="text"], select, button { - width: 100%; - } - - footer { - position: relative; - bottom: 0; - right: 0; - padding: 15px; - border-radius: 0; - } + .container { + padding: 20px; + width: 100%; + } + + .comparison-box-parrent { + flex-direction: column; + align-items: center; + } + .comparison-container { + flex-direction: column; + align-items: center; + } + .comparison-box { + width: 100%; + margin-bottom: 20px; + } + + input[type="text"], + select, + button { + width: 100%; + } + + footer { + position: relative; + bottom: 0; + right: 0; + padding: 15px; + border-radius: 0; + } } @media (max-width: 480px) { - h1 { - font-size: 26px; - } + h1 { + font-size: 26px; + } - h4 { - font-size: 18px; - } + h4 { + font-size: 18px; + } + + input[type="text"], + select, + button { + font-size: 14px; + } +} +.search-results { + max-height: 200px; + overflow-y: auto; + border: 1px solid #bdc3c7; + border-radius: 8px; + margin-top: 8px; + padding-left: 8px; + display: none; +} - input[type="text"], select, button { - font-size: 14px; - } +.search-results-item { + margin: 10px; + cursor: pointer; } diff --git a/public/js/script.js b/public/js/script.js index 10726b3..783ba53 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -80,7 +80,7 @@ function searchOperations() { searchResults.style.display = "block"; filteredOperations.forEach((operation) => { const div = document.createElement("div"); - div.className = "search-result-item"; + div.className = "search-results-item"; div.textContent = operation.label; div.onclick = () => selectOperation(operation); searchResults.appendChild(div); From 2a4e87c3e93c850ddf5d2fe75eb319518099e64b Mon Sep 17 00:00:00 2001 From: Angekarara Date: Tue, 8 Apr 2025 19:40:10 +0200 Subject: [PATCH 3/7] fix: remove duplicate --- public/js/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/js/script.js b/public/js/script.js index 783ba53..6b3d3ac 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -73,7 +73,7 @@ function searchOperations() { const filteredOperations = operations.filter( (operation) => operation.label.toLowerCase().includes(query) || - operation.label.toLowerCase().includes(query) + operation.value.toLowerCase().includes(query) ); if (filteredOperations.length > 0) { From 4c9ffd789d054960c34cf79e9295c1a74d4de03d Mon Sep 17 00:00:00 2001 From: Angekarara Date: Sun, 13 Apr 2025 20:44:55 +0200 Subject: [PATCH 4/7] feat: display all the list initially and re-showing the list after selection --- public/js/script.js | 38 +++++++++++++++++++++----------------- 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/public/js/script.js b/public/js/script.js index 6b3d3ac..6272fad 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -58,17 +58,23 @@ function enableButton() { inputString.length > 0 ? false : true; } -function searchOperations() { - const searchInput = document.querySelector("#operationSearch"); +function renderOperations(operations) { const searchResults = document.querySelector("#searchResults"); - const query = searchInput.value.toLowerCase(); - searchResults.innerHTML = ""; + searchResults.style.display = "block"; - if (query.length === 0) { - searchResults.style.display = "none"; - return; - } + operations.forEach((operation) => { + const div = document.createElement("div"); + div.className = "search-results-item"; + div.textContent = operation.label; + div.onclick = () => selectOperation(operation); + searchResults.appendChild(div); + }); +} + +function searchOperations(showAll = false) { + const searchInput = document.querySelector("#operationSearch"); + const query = showAll ? "" : searchInput.value.toLowerCase(); const filteredOperations = operations.filter( (operation) => @@ -77,19 +83,16 @@ function searchOperations() { ); if (filteredOperations.length > 0) { - searchResults.style.display = "block"; - filteredOperations.forEach((operation) => { - const div = document.createElement("div"); - div.className = "search-results-item"; - div.textContent = operation.label; - div.onclick = () => selectOperation(operation); - searchResults.appendChild(div); - }); + renderOperations(query === "" ? operations : filteredOperations); } else { searchResults.style.display = "none"; } } +document.querySelector("#operationSearch").addEventListener("click", () => { + searchOperations(true); +}); + function selectOperation(operation) { const searchInput = document.querySelector("#operationSearch"); const searchResults = document.querySelector("#searchResults"); @@ -104,7 +107,8 @@ document.addEventListener("click", (e) => { const searchResults = document.querySelector("#searchResults"); const operationSearch = document.querySelector("#operationSearch"); - if (e.target !== operationSearch) { + if (e.target !== operationSearch && !searchResults.contains(e.target)) { searchResults.style.display = "none"; } }); + From 4fa63fd8be7acb3e9fdc845ab444fa3affd5c274 Mon Sep 17 00:00:00 2001 From: Angekarara Date: Mon, 14 Apr 2025 16:07:45 +0200 Subject: [PATCH 5/7] feat: add clear and dropdown functionalities --- public/css/style.css | 38 +++++++++++++++++++++++++++ public/js/script.js | 61 ++++++++++++++++++++++++++++++++++++++----- views/pages/index.pug | 3 +++ 3 files changed, 95 insertions(+), 7 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 24bc39e..f572b21 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -314,3 +314,41 @@ footer:hover { margin: 10px; cursor: pointer; } + +.search-input-container { + position: relative; + display: inline-block; + width: 50%; +} +.dropdown-icon { + position: absolute; + right: 26%; + top: 55%; + transform: translateY(-50%); + cursor: pointer; + font-size: 15px; + color: #999; + padding: 0 4px; + border-radius: 100%; +} + +.dropdown-icon:hover { + background-color: #e0e3e5; +} + +.clear-icon { + position: absolute; + right: 28%; + top: 55%; + transform: translateY(-50%); + cursor: pointer; + font-size: 15px; + color: #999; + display: none; + padding: 0 4px; + border-radius: 100%; +} + +.clear-icon:hover { + background-color: #e0e3e5; +} diff --git a/public/js/script.js b/public/js/script.js index 6272fad..dcc9c8c 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -72,8 +72,25 @@ function renderOperations(operations) { }); } +function toggleDropdown() { + const searchResults = document.querySelector("#searchResults"); + const dropdownIcon = document.querySelector("#dropdownToggle"); + const isVisible = searchResults.style.display === "block"; + + if (isVisible) { + searchResults.style.display = "none"; + dropdownIcon.textContent = "▼"; + } else { + renderOperations(operations); + searchResults.style.disabled = "block"; + dropdownIcon.textContent = "▲"; + } +} + function searchOperations(showAll = false) { const searchInput = document.querySelector("#operationSearch"); + const searchResults = document.querySelector("#searchResults"); + const dropdownIcon = document.querySelector("#dropdownToggle"); const query = showAll ? "" : searchInput.value.toLowerCase(); const filteredOperations = operations.filter( @@ -82,10 +99,13 @@ function searchOperations(showAll = false) { operation.value.toLowerCase().includes(query) ); - if (filteredOperations.length > 0) { - renderOperations(query === "" ? operations : filteredOperations); - } else { + renderOperations(filteredOperations); + searchResults.style.display = "block"; + dropdownIcon.textContent = "▲"; + + if (filteredOperations.length === 0) { searchResults.style.display = "none"; + dropdownIcon.textContent = "▼"; } } @@ -93,22 +113,49 @@ document.querySelector("#operationSearch").addEventListener("click", () => { searchOperations(true); }); +function clearSelection() { + const searchInput = document.querySelector("#operationSearch"); + const searchResults = document.querySelector("#searchResults"); + const selectedOperation = document.querySelector("#selectedOperation"); + const clearIcon = document.querySelector("#clearSearch"); + const dropdownIcon = document.querySelector("#dropdownToggle"); + + searchInput.value = ""; + renderOperations(operations); + selectedOperation.value = ""; + searchResults.style.display = "block"; + clearIcon.style.display = "none"; + dropdownIcon.textContent = "▲"; +} + function selectOperation(operation) { const searchInput = document.querySelector("#operationSearch"); const searchResults = document.querySelector("#searchResults"); const selectedOperation = document.querySelector("#selectedOperation"); + const clearIcon = document.querySelector("#clearSearch"); + const dropdownIcon = document.querySelector("#dropdownToggle"); searchInput.value = operation.label; selectedOperation.value = operation.value; searchResults.style.display = "none"; + clearIcon.style.display = "block"; + dropdownIcon.textContent = "▼"; } document.addEventListener("click", (e) => { const searchResults = document.querySelector("#searchResults"); const operationSearch = document.querySelector("#operationSearch"); - - if (e.target !== operationSearch && !searchResults.contains(e.target)) { - searchResults.style.display = "none"; + const clearIcon = document.querySelector("#clearSearch"); + const dropdownIcon = document.querySelector("#dropdownToggle"); + + if ( + e.target !== operationSearch && + e.target !== clearIcon && + e.target !== dropdownIcon && + !searchResults.contains(e.taget) + ) { + searchResults.style; + display = "none"; + dropdownIcon.textContent = "▼"; } }); - diff --git a/views/pages/index.pug b/views/pages/index.pug index 02b38bc..dbd1d5d 100644 --- a/views/pages/index.pug +++ b/views/pages/index.pug @@ -11,7 +11,10 @@ block content label Select a simple operation to perform (all operations can be found on our docs page) br br + .search-input-container input(type="text" id="operationSearch" placeholder="Search operation..." onkeyup="searchOperations()") + span(class="clear-icon" id="clearSearch" onclick="clearSelection()") X + span(class="dropdown-icon" id="dropdownToggle" onclick="toggleDropdown()") ▼ div(id="searchResults" class="search-results") input(type="hidden" id="selectedOperation") br From 9f5aa2e38580a6f94595da6dd1d3690e11c2b6c7 Mon Sep 17 00:00:00 2001 From: Angekarara Date: Mon, 14 Apr 2025 16:21:57 +0200 Subject: [PATCH 6/7] feat: add the functionality of dropdown dissapearance when clicking outside of it --- public/js/script.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/js/script.js b/public/js/script.js index dcc9c8c..7754e2b 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -152,10 +152,10 @@ document.addEventListener("click", (e) => { e.target !== operationSearch && e.target !== clearIcon && e.target !== dropdownIcon && - !searchResults.contains(e.taget) + !searchResults.contains(e.taget) && + searchResults.style.display === "block" ) { - searchResults.style; - display = "none"; + searchResults.style.display = "none"; dropdownIcon.textContent = "▼"; } }); From 4ef842954e6d9ebdad5ada78e95698e369656844 Mon Sep 17 00:00:00 2001 From: Angekarara Date: Tue, 15 Apr 2025 15:49:45 +0200 Subject: [PATCH 7/7] fix: add responsiveness and fix some styles --- public/css/style.css | 41 +++++++++++++++++++++++++++-------------- public/js/script.js | 4 ++-- views/pages/index.pug | 6 +++--- 3 files changed, 32 insertions(+), 19 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index f572b21..cdec535 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -301,6 +301,7 @@ footer:hover { } } .search-results { + width: 50%; max-height: 200px; overflow-y: auto; border: 1px solid #bdc3c7; @@ -310,6 +311,11 @@ footer:hover { display: none; } +@media (max-width: 768px) { + .search-results { + width: 100%; + } +} .search-results-item { margin: 10px; cursor: pointer; @@ -317,38 +323,45 @@ footer:hover { .search-input-container { position: relative; - display: inline-block; width: 50%; + max-width: 100%; } + +.search-input-container input[type="text"] { + width: 100%; + padding-right: 60px; + box-sizing: border-box; +} + +@media (max-width: 768px) { + .search-input-container { + width: 100%; + } +} + +.clear-icon, .dropdown-icon { position: absolute; - right: 26%; - top: 55%; + top: 35%; transform: translateY(-50%); cursor: pointer; font-size: 15px; color: #999; padding: 0 4px; border-radius: 100%; + background-color: transparent; } +.clear-icon:hover, .dropdown-icon:hover { background-color: #e0e3e5; } .clear-icon { - position: absolute; - right: 28%; - top: 55%; - transform: translateY(-50%); - cursor: pointer; - font-size: 15px; - color: #999; + right: 34px; display: none; - padding: 0 4px; - border-radius: 100%; } -.clear-icon:hover { - background-color: #e0e3e5; +.dropdown-icon { + right: 10px; } diff --git a/public/js/script.js b/public/js/script.js index 7754e2b..bd8eded 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -20,8 +20,8 @@ const operations = [ ]; async function getResponse() { - const inputString = document.querySelector("#inputString").value; - const endpoint = document.querySelector('select[name="endpoint"]').value; + const inputString = document.querySelector("#inputString")?.value; + const endpoint = document.querySelector("#selectedOperation")?.value; if (!endpoint) { alert("Please select an operation first"); diff --git a/views/pages/index.pug b/views/pages/index.pug index dbd1d5d..064e9f3 100644 --- a/views/pages/index.pug +++ b/views/pages/index.pug @@ -12,9 +12,9 @@ block content br br .search-input-container - input(type="text" id="operationSearch" placeholder="Search operation..." onkeyup="searchOperations()") - span(class="clear-icon" id="clearSearch" onclick="clearSelection()") X - span(class="dropdown-icon" id="dropdownToggle" onclick="toggleDropdown()") ▼ + input(type="text" id="operationSearch" placeholder="Search operation..." onkeyup="searchOperations()") + span(class="clear-icon" id="clearSearch" onclick="clearSelection()") X + span(class="dropdown-icon" id="dropdownToggle" onclick="toggleDropdown()") ▼ div(id="searchResults" class="search-results") input(type="hidden" id="selectedOperation") br