style and search exact

khaitruong922 · Sep 20, 2024 · 164ce70 · 164ce70
1 parent bff9a4e
commit 164ce70
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 33 deletions.
diff --git a/index.css b/index.css
@@ -3,6 +3,23 @@
 }
 html {
   overflow-y: scroll;
+  --pink: #f278d9;
+  --blue: #454682;
+  color: var(--blue);
+}
+
+input {
+  color: var(--blue);
+  font-weight: 600;
+}
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 40px white inset !important;
+}
+input:-webkit-autofill {
+  -webkit-text-fill-color: var(--blue) !important;
 }
 
 .term,
@@ -13,7 +30,7 @@ html {
 #kanji-list-input,
 #kanji-list-input:focus {
   padding: 0.5rem;
-  border: 2px solid blueviolet;
+  border: 2px solid var(--pink);
   outline: none;
 }
 
@@ -26,8 +43,8 @@ html {
 #kanji-list-input {
   margin-top: 0.5rem;
   margin-bottom: 1rem;
-  min-width: 80vw;
-  font-size: 1.25rem;
+  min-width: 60vw;
+  font-size: 1.5rem;
 }
 .freq {
   font-size: 0.75rem;
@@ -37,18 +54,20 @@ html {
   text-align: right;
 }
 .term {
-  font-size: 1.25rem;
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: var(--blue);
 }
 .reading {
-  font-size: 0.75rem;
-  color: #6b6b6b;
+  font-size: 1rem;
+  color: var(--blue);
 }
 .known {
-  color: blueviolet;
+  color: var(--pink);
   font-weight: 600;
 }
 .reading-highlight {
-  color: blueviolet;
+  color: var(--pink);
   font-weight: 600;
 }
 #header {
@@ -60,7 +79,7 @@ html {
   margin-top: 1rem;
 }
 #search {
-  background-color: blueviolet;
+  background-color: var(--pink);
   color: white;
   border-radius: 0.5rem;
   font-weight: 600;
@@ -71,8 +90,9 @@ html {
 }
 #stats {
   margin-top: 1rem;
-  font-size: 1.25rem;
-  font-weight: 500;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--blue);
   text-align: center;
 }
 #stats-note {
@@ -84,7 +104,8 @@ html {
 #export-txt {
   margin-top: 0.5rem;
   font-size: 0.75rem;
-  color: blueviolet;
+  color: var(--blue);
+  font-weight: 600;
   cursor: pointer;
 }
 #kanji-list-label {
@@ -101,7 +122,17 @@ html {
 }
 .filter-item label {
   flex: 1;
+  font-size: 0.875rem;
   padding-right: 1rem;
+  font-weight: 600;
+}
+.flex-default {
+  flex: 0 1 auto;
+}
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 #other-kanji-count-input {
   text-align: right;
@@ -114,16 +145,16 @@ input::-webkit-inner-spin-button {
 input[type='number'] {
   -moz-appearance: textfield;
   appearance: none;
-  border: 2px solid blueviolet;
+  border: 2px solid var(--pink);
   outline: none;
 }
 
 input[type='checkbox'] {
-  accent-color: blueviolet;
+  accent-color: var(--blue);
 }
 #progress {
   margin-top: 0.75rem;
-  accent-color: blueviolet;
+  accent-color: var(--blue);
   width: 200px;
 }
 
@@ -132,9 +163,10 @@ input[type='checkbox'] {
   width: 6rem;
   text-align: right;
   padding-right: 0.25rem;
+  margin-right: 1rem;
 }
 #contains-reading-input,
 #contains-reading-input:focus {
-  border: 2px solid blueviolet;
+  border: 2px solid var(--pink);
   outline: none;
 }
diff --git a/index.html b/index.html
@@ -24,8 +24,12 @@ <h1 id="header">Kanji Search (based on JPDBv2 frequency list)</h1>
         <input type="number" id="other-kanji-count-input" value="0">
       </div>
       <div class="filter-item">
-        <label for="contains-reading-checkbox">Contains reading</label>
-        <input type="text" id="contains-reading-input">
+        <label for="contains-reading-input">Contains reading</label>
+        <div class="row">
+          <input type="text" id="contains-reading-input">
+          <label class="flex-default" for="exact-reading-checkbox">Exact</label>
+          <input type="checkbox" id="exact-reading-checkbox">
+        </div>
       </div>
       <div class="filter-item">
         <label for="kanji-only-checkbox">Kanji only</label>

diff --git a/index.js b/index.js
@@ -1,42 +1,51 @@
 const searchBtn = document.getElementById('search');
+
 const kanjiListInput = document.getElementById('kanji-list-input');
-kanjiListInput.addEventListener('input', () => {
-  localStorage.setItem('kanjiList', kanjiListInput.value);
+kanjiListInput.addEventListener('input', (e) => {
+  localStorage.setItem('kanjiList', e.target.value);
   searchBtn.disabled = false;
 });
 kanjiListInput.value = localStorage.getItem('kanjiList') ?? '色';
 
 const otherKanjiCountInput = document.getElementById('other-kanji-count-input');
-otherKanjiCountInput.addEventListener('input', () => {
-  localStorage.setItem('otherKanjiCount', otherKanjiCountInput.value);
+otherKanjiCountInput.addEventListener('input', (e) => {
+  localStorage.setItem('otherKanjiCount', e.target.value);
   searchBtn.disabled = false;
 });
 otherKanjiCountInput.value = localStorage.getItem('otherKanjiCount') ?? '0';
 
 const containsReadingInput = document.getElementById('contains-reading-input');
-containsReadingInput.addEventListener('input', () => {
-  localStorage.setItem('containsReading', containsReadingInput.value);
+containsReadingInput.addEventListener('input', (e) => {
+  localStorage.setItem('containsReading', e.target.value);
   searchBtn.disabled = false;
 });
 containsReadingInput.value = localStorage.getItem('containsReading') ?? '';
 
+const exactReadingCheckbox = document.getElementById('exact-reading-checkbox');
+exactReadingCheckbox.addEventListener('change', (e) => {
+  localStorage.setItem('exactReading', e.target.checked);
+  searchBtn.disabled = false;
+});
+exactReadingCheckbox.checked = localStorage.getItem('exactReading') === 'true' ?? false;
+
 const kanjiOnlyCheckbox = document.getElementById('kanji-only-checkbox');
-kanjiOnlyCheckbox.addEventListener('change', () => {
-  localStorage.setItem('kanjiOnly', kanjiOnlyCheckbox.checked);
+kanjiOnlyCheckbox.addEventListener('change', (e) => {
+  localStorage.setItem('kanjiOnly', e.target.checked);
   searchBtn.disabled = false;
 });
 kanjiOnlyCheckbox.checked = localStorage.getItem('kanjiOnly') === 'true' ?? false;
 
 const containsAllCheckbox = document.getElementById('contains-all-checkbox');
-containsAllCheckbox.addEventListener('change', () => {
-  localStorage.setItem('containsAll', containsAllCheckbox.checked);
+containsAllCheckbox.addEventListener('change', (e) => {
+  localStorage.setItem('containsAll', e.target.checked);
   searchBtn.disabled = false;
 });
 containsAllCheckbox.checked = localStorage.getItem('containsAll') === 'true' ?? false;
 
 const inverseResultCheckbox = document.getElementById('inverse-result-checkbox');
-inverseResultCheckbox.addEventListener('change', () => {
-  localStorage.setItem('inverseResult', inverseResultCheckbox.checked);
+inverseResultCheckbox.addEventListener('change', (e) => {
+  console.log(e.target.value);
+  localStorage.setItem('inverseResult', e.target.checked);
   searchBtn.disabled = false;
 });
 inverseResultCheckbox.checked = localStorage.getItem('inverseResult') === 'true' ?? false;
@@ -123,6 +132,7 @@ const insertResultInBatch = async () => {
 };
 
 const search = async () => {
+  if (searchBtn.disabled) return;
   searchBtn.disabled = true;
   if (inserting) {
     interrupted = true;
@@ -141,6 +151,7 @@ const search = async () => {
   const otherKanjiCountAny = otherKanjiCountInput.value === '-1';
   const otherKanjiCount = Number(otherKanjiCountInput.value);
   const containsReadingSubstr = containsReadingInput.value.trim();
+  const exactReading = exactReadingCheckbox.checked;
   const containsAll = containsAllCheckbox.checked;
   const kanjiOnly = kanjiOnlyCheckbox.checked;
   const inverseResult = inverseResultCheckbox.checked;
@@ -185,7 +196,9 @@ const search = async () => {
     if (computeConditionWithInverse(conditionMatch, inverseResult)) {
       if (containsReadingSubstr) {
         // optimize .includes() calls
-        const containsReading = reading.includes(containsReadingSubstr);
+        const containsReading = exactReading
+          ? reading === containsReadingSubstr
+          : reading.includes(containsReadingSubstr);
         if (computeConditionWithInverse(containsReading, inverseResult)) {
           items.push([term, kanjiList, reading, freq]);
         }
@@ -217,7 +230,7 @@ const exportTxt = () => {
   a.click();
 };
 
-kanjiListInput.addEventListener('keydown', (e) => {
+const searchOnEnter = (e) => {
   if (e.isComposing) {
     return;
   }
@@ -226,6 +239,10 @@ kanjiListInput.addEventListener('keydown', (e) => {
     return;
   }
   search();
-});
+};
+
+kanjiListInput.addEventListener('keydown', searchOnEnter);
+otherKanjiCountInput.addEventListener('keydown', searchOnEnter);
+containsReadingInput.addEventListener('keydown', searchOnEnter);
 searchBtn.addEventListener('click', search);
 exportTxtBtn.addEventListener('click', exportTxt);