diff --git a/index.css b/index.css index 90e59a6..b566ce0 100644 --- a/index.css +++ b/index.css @@ -1,16 +1,16 @@ :root[data-theme="light"] { - --text: #233736; - --background: #f1f2ec; - --primary: #4fc986; - --secondary: #78938a; - --accent: #7e6c53; + --text: #333; + --background: #fdfdfd; + --primary: #2ecc71; + --secondary: #e9e9e9; + --accent: #9b59b6; } :root[data-theme="dark"] { - --text: #f5faf7; - --background: #030805; - --primary: #36b06d; - --secondary: #1a6b3d; - --accent: #1c9c55; + --text: #dfddc1; + --background: #233736; + --primary: #226f54; + --secondary: #87c38f; + --accent: #da2c38; } * { @@ -57,12 +57,14 @@ nav { } button { background-color: var(--accent); + color: var(--text); border: none; padding: 0.5rem 1rem; } input { background-color: var(--background); + color: var(--text); border: none; padding: 0.5rem 1rem; } diff --git a/index.html b/index.html index 6164d6d..3209451 100644 --- a/index.html +++ b/index.html @@ -1,194 +1,327 @@ - - - - - LookBook - - - - - - - - - - - - - - - - - - - - - - - - + + + + LookBook + + + + + + + + + + + + + + + + + + + + + + - - -
- - -
-
- -
-
- - - - - - -
-
-

LookBook

- - - + +
+
+ +
+
- - - - -
- ISBN check -
- want to learn how to check ISBN? -

-

- Do you know?
- ISBN stands for International Standard Book Number -

-

- ISBN Formula: -
- 10: 1x + 2x + 3x + 4x + 5x + 6x + 7x + 8x + 9x + 10x = 0 (mod - 11) -
- 13: x + 3x + x + 3x + x + 3x + x + 3x + x + 3x + x + 3x + x = - 0 (mod 10) -

+ + + + + +
+
+

LookBook

+ + + + + + + + + +
+ ISBN check +
+ Want to learn how to check ISBN? +

+

+ Do you know?
+ ISBN stands for International Standard Book Number +

+

+ ISBN Formula: +
+ 10: 1x + 2x + 3x + 4x + 5x + 6x + 7x + 8x + 9x + 10x = 0 (mod + 11) +
+ 13: x + 3x + x + 3x + x + 3x + x + 3x + x + 3x + x + 3x + x = + 0 (mod 10) +

+
+
+
+
+ +
+ + + + + -
-
-
- -
- - - - - - -
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - \ No newline at end of file + diff --git a/index.js b/index.js index 4299f42..d807ab7 100644 --- a/index.js +++ b/index.js @@ -57,3 +57,5 @@ stopScannerButton.addEventListener(('click'), ()=>{ showScanner(false) }) + + diff --git a/scripts/setting/changeTheme.js b/scripts/setting/changeTheme.js new file mode 100644 index 0000000..886fccc --- /dev/null +++ b/scripts/setting/changeTheme.js @@ -0,0 +1,21 @@ +// Theme Switcher + +const themeSwitch = document.getElementById("theme-switch") + +themeSwitch.addEventListener("click", () => { + if (themeSwitch.checked) { + localStorage.setItem("theme", "dark"); + document.documentElement.setAttribute("data-theme", "dark"); + } else { + localStorage.setItem("theme", "light"); + document.documentElement.setAttribute("data-theme", "light"); + } +}); + +window.addEventListener("DOMContentLoaded", () => { + const storedTheme = localStorage.getItem("theme"); + if (storedTheme) { + document.documentElement.setAttribute("data-theme", storedTheme); + themeSwitch.checked = storedTheme === "dark"; + } +}); diff --git a/scripts/setting/searchHistory.js b/scripts/setting/searchHistory.js new file mode 100644 index 0000000..579dbc0 --- /dev/null +++ b/scripts/setting/searchHistory.js @@ -0,0 +1,56 @@ +// SAERCH HISTORY + +window.onload = () => { + const searchHistoryList = document.getElementById("search-history"); + const historyArr = JSON.parse(localStorage.getItem("history")) || []; + + historyArr.forEach((isbn) => { + const li = document.createElement("li"); + li.textContent = isbn; + + searchHistoryList.appendChild(li); + }); +}; + +const clearHistoryButton = document.getElementById("clear-history") + +clearHistoryButton.addEventListener('click', ()=>{ + localStorage.removeItem("history"); + const searchHistoryList = document.getElementById("search-history"); + searchHistoryList.innerHTML = ""; +}) + +export default function searchHistory(isbn) { + + + // Add the ISBN to the history array + let historyArr = JSON.parse(localStorage.getItem("history")) || []; + + + + + if (!historyArr.includes(isbn)) { + historyArr.push(isbn); + localStorage.setItem("history", JSON.stringify(historyArr)); + + // Append the new ISBN to the search history container + const searchHistoryContainer = document.getElementById("search-history"); + const li = document.createElement('li'); + li.textContent = isbn; + searchHistoryContainer.appendChild(li); + }else{ + // Remove the existing ISBN from the search history container + + historyArr.forEach((item) => { + if (item.textContent === isbn) { + searchHistoryContainer.removeChild(item); + } + }); + + // Reenter the ISBN at the end of the search history container + const newLi = document.createElement('li'); + newLi.textContent = isbn; + searchHistoryContainer.appendChild(newLi); + + } +} \ No newline at end of file diff --git a/scripts/switch-content/ToSetting.js b/scripts/switch-content/ToSetting.js new file mode 100644 index 0000000..2270fdf --- /dev/null +++ b/scripts/switch-content/ToSetting.js @@ -0,0 +1,19 @@ +// SETTINGS + +const settingContainer = document.getElementById("setting-container"); +const settingButton = document.getElementById("setting") +const closeSettingButton = document.getElementById("close-setting") + +// close +closeSettingButton.addEventListener('click', ()=>{ + // settingContainer.style.display = "none" + settingContainer.classList.remove("setting-open") + console.log('Settings close') +}) +// open +settingButton.addEventListener('click', ()=>{ + // settingContainer.style.display = "block" + console.log('Settings') + settingContainer.classList.add("setting-open") + +}) \ No newline at end of file diff --git a/scripts/validate-isbn.js b/scripts/validate-isbn.js index 0c220a0..05b58de 100644 --- a/scripts/validate-isbn.js +++ b/scripts/validate-isbn.js @@ -3,6 +3,7 @@ import displayBook from "./display-book.js"; import showSearch from "./showSearch.js"; import Loading from "./component/Loading.js"; import Announce from "./component/Announce.js"; +import searchHistory from "./setting/searchHistory.js"; //variables const input = document.querySelector("#input"); @@ -45,8 +46,13 @@ button.addEventListener("click", () => { ? (url = `https://www.googleapis.com/books/v1/volumes?q=isbn:${inputISBN}`) : openDetailEl(); - //fetching if theres this isbn in databse - checkISBN(inputISBN) ? fetchBook(url) : ""; + //fetching if theres this isbn in databse and add to history + if (checkISBN(inputISBN)) { + fetchBook(url) + searchHistory(dashedISBN) + } + + }); // source ko https://www.instructables.com/How-to-verify-a-ISBN/ diff --git a/styles/announcer.css b/styles/announcer.css index 8d1b853..1435c44 100644 --- a/styles/announcer.css +++ b/styles/announcer.css @@ -11,7 +11,8 @@ } .announcer p{ - background-color: aliceblue; + background-color: var(--text); + color: var(--background); padding: .5rem; animation: fadeInUp 5s cubic-bezier(0, 1, 0.58, 1) forwards; } diff --git a/styles/card.css b/styles/card.css index 1e7db89..c4e6a9e 100644 --- a/styles/card.css +++ b/styles/card.css @@ -76,6 +76,7 @@ justify-content: space-between; gap: 0.5rem; margin: 1rem 0; + } button span { font-size: 0.8rem; @@ -91,13 +92,17 @@ button span { } .more-info { background-color: var(--background); + color: var(--text); } .add-favorite { background-color: var(--primary); - color: white; + color: var(--text); +} +.add-favorite svg { + fill: var(--secondary); } .remove-favorite { - background-color: rgba(255, 0, 0, 0.534); + background-color: var(--accent); color: var(--secondary); } .remove-favorite svg { diff --git a/styles/header.css b/styles/header.css index be459d4..3c3c0b4 100644 --- a/styles/header.css +++ b/styles/header.css @@ -4,26 +4,31 @@ header{ justify-content: space-around; min-height: 20vh; position: relative; - /* animation: up 2s ease-in-out infinite; */ - } + .search-header{ display: flex; flex-direction: column; justify-content: space-around; align-items: center; + text-align: center; gap: 1rem; margin: 1rem; - background-color: var(--text); + background-color: var(--primary); padding: 2rem; border-radius: 1rem; - color: var(--background); + color: var(--text); } .search-header h1{ - color: var(--background); + color: var(--text); +} +.search-header a{ + color: var(--text); + font-weight: bold; } .isbn-formula { + display: flex; flex-direction: column; justify-content: space-around; @@ -31,7 +36,7 @@ header{ gap: 1rem; } summary::marker{ - color: var(--background); + color: rgb(206, 255, 109); } mark{ @@ -39,7 +44,7 @@ mark{ } details[open]{ - background-color: rgba(255, 255, 255, 0.301); + background-color: var(--background); padding: 1rem; border-radius: .5rem; } @@ -64,6 +69,10 @@ details[open]{ #google-sign-in-button button{ border-radius: 1rem; } +.google-btn{ + background-color: var(--background); + color: var(--text); +} @media (min-width: 1024px) { diff --git a/styles/main.css b/styles/main.css index aae4f6d..25b6e12 100644 --- a/styles/main.css +++ b/styles/main.css @@ -44,7 +44,7 @@ main { margin-top: 5rem; } #matched-book { - background-color: var(--text); + background-color: var(--primary); border-radius: 1rem; } #matched-book h2 { @@ -82,7 +82,7 @@ main { min-height: 2rem; } .info-container h3 { - color: var(--background); + color: var(--primary); font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 2; @@ -95,6 +95,7 @@ main { } /* author */ .info-container i { + color: var(--text); margin: 0.5rem 0; font-size: 0.8rem; display: -webkit-box; diff --git a/styles/scanner.css b/styles/scanner.css index 80b5cd4..69349e5 100644 --- a/styles/scanner.css +++ b/styles/scanner.css @@ -19,7 +19,7 @@ top: 50%; transform: translateY(-50%); left: 0; - background-color: rgb(255, 138, 138); + background-color: var(--accent); border: none; padding: 1rem 2rem; color: wheat; diff --git a/styles/setting.css b/styles/setting.css new file mode 100644 index 0000000..0807bb4 --- /dev/null +++ b/styles/setting.css @@ -0,0 +1,93 @@ +.setting { + color: var(--text); + display: none; + position: fixed; + width: 100vw; + height: 100vh; + backdrop-filter: blur(300px); + z-index: 0; + + transform: translateX(50px); + opacity: 0; + display: block; + transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; +} + +.setting button{ + border-radius: 1rem; + background-color: var(--background); + color: var(--text); +} + +.setting-open { + z-index: 999; + transform: translateX(0); + opacity: 1; + transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; +} + +#close-setting { + position: relative; + padding: 1rem; + top: 1rem; + left: 1rem; + background-color: var(--background); + border: none; + color: var(--text); +} + +.setting-content { + width: 100vw; + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +.setting-content > div { + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; +} + +.search-history { + max-height: 50vh; + padding: 1rem; + overflow: auto; +} + +input[type="checkbox"] { + caret-color: transparent; + position: relative; + width: 2rem; + height: 1rem; + -webkit-appearance: none; + appearance: none; + background: red; + outline: none; + border-radius: 2rem; + cursor: pointer; + box-shadow: inset 0 0 5px rgb(0 0 0 / 50%); +} + +input[type="checkbox"]::before { + content: ""; + width: 1rem; + height: 1rem; + border-radius: 50%; + background: #fff; + position: absolute; + top: 0; + left: 0; + transition: 0.5s; +} + +input[type="checkbox"]:checked::before { + transform: translateX(100%); + background: #fff; +} + +input[type="checkbox"]:checked { + background: #00ed64; +} diff --git a/svg/settings.svg b/svg/settings.svg new file mode 100644 index 0000000..19c2726 --- /dev/null +++ b/svg/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/svg.css b/svg/svg.css index f45f497..b244656 100644 --- a/svg/svg.css +++ b/svg/svg.css @@ -3,6 +3,7 @@ button { } .svg-button { position: relative; + display: block; padding: 1rem; } .feather { diff --git a/tut2.html b/tut2.html new file mode 100644 index 0000000..b8dd41a --- /dev/null +++ b/tut2.html @@ -0,0 +1,184 @@ + + + + + + ISBN Calculation Tutorial + + + +
+

How to Calculate ISBN-10 and ISBN-13

+
+
+
+ + +
+ +
+

Step-by-Step: ISBN-10

+ +
+

Step 1: Understand the Format

+

An ISBN-10 consists of 9 digits followed by a check digit. The check digit ensures the integrity of the ISBN.

+
+ +
+

Step 2: Calculate the Weighted Sum

+

Multiply each digit by its position (1 to 9) and sum the products.

+
+ Example:
+ ISBN: 0-306-40615-?
+ Weighted Sum = (0×1) + (3×2) + (0×3) + (6×4) + (4×5) + (0×6) + (6×7) + (1×8) + (5×9)
+ = 0 + 6 + 0 + 24 + 20 + 0 + 42 + 8 + 45 = 145 +
+
+ +
+

Step 3: Find the Check Digit

+

Divide the weighted sum by 11. The remainder is the check digit. If the remainder is 10, use 'X'.

+
+ Example:
+ Check Digit = 145 mod 11 = 2
+ Final ISBN: 0-306-40615-2 +
+
+
+ + + +
+ Watch Tutorial on YouTube +
+
+ + + + \ No newline at end of file