From: tenkyuu Date: Mon, 18 Nov 2024 15:35:53 +0000 (+0800) Subject: idk what im doing rn X-Git-Url: https://git.bochard.net/?a=commitdiff_plain;h=698c5e39873355e24a33dbbd51811919f8a397b9;p=mysite.git idk what im doing rn --- diff --git a/.gitmodules b/.gitmodules deleted file mode 100644 index e39558f..0000000 --- a/.gitmodules +++ /dev/null @@ -1,3 +0,0 @@ -[submodule "personal-website/projects/palindrome-checker"] - path = personal-website/projects/palindrome-checker - url = https://github.com/bocharudo/palindrome-checker.git diff --git a/projects/palindrome-checker/index.html b/projects/palindrome-checker/index.html deleted file mode 100644 index b1edfda..0000000 --- a/projects/palindrome-checker/index.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - - Palindrome Checker by Bocharudo - - - - - - - - - - - - - - - - - - - - - - - - - -

Palindrome Checker

Enter the text you want to check here:

- - -

- -

What is a Palindrome?

- A palindrome is a word, phrase, number, or sequence of characters that reads the same backward as it does forward, ignoring spaces, punctuation, and capitalization. -

- - - - \ No newline at end of file diff --git a/projects/palindrome-checker/script.js b/projects/palindrome-checker/script.js deleted file mode 100644 index a3b8d7c..0000000 --- a/projects/palindrome-checker/script.js +++ /dev/null @@ -1,48 +0,0 @@ -const checkButton = document.getElementById('check-btn'); -const textInput = document.getElementById('text-input'); -const resultContainer = document.getElementById('result'); - - -const checkPalindrome = userInput => { - //raw user input - const rawText = userInput; - - //check if input has value - if (rawText == '') { - alert('Please input a value'); - return; - }; - - //remove non-alphanumeric characters - const noSpace = rawText.replace(/[^a-zA-Z0-9]/g, '').toLowerCase(); - - console.log(`original: ${noSpace}`); - - //reverse the text for matching later - const reversedNoSpace = noSpace.split('').reverse().join(''); - - console.log(`reversed: ${reversedNoSpace}`); - - //check if the text is a palindrome - let result = `${rawText.trim()} ${noSpace === reversedNoSpace ? "is" : "is not" } a palindrome`; - - console.log(`result: ${result}`); - - //show message result in HTML - resultContainer.innerHTML = result; - resultContainer.classList.add('visible'); -}; - -//when user toggle the button -checkButton.addEventListener('click', () => { - const output = checkPalindrome(textInput.value); - textInput.value = ''; -}); - -//when enter is toggled -textInput.addEventListener('keydown', btn => { - if (btn.key === 'Enter') { - checkPalindrome(textInput.value); - textInput.value = ''; - } -}); \ No newline at end of file diff --git a/projects/palindrome-checker/styles.css b/projects/palindrome-checker/styles.css deleted file mode 100644 index b06648d..0000000 --- a/projects/palindrome-checker/styles.css +++ /dev/null @@ -1,118 +0,0 @@ -:root { - --border-color: #171717; - --box-shadow: #171717; - --main-font: 'Pangolin', serif; - --bg-color: #f1f1f1; -} -*, -:before, -:after { - box-sizing: border-box; - margin: 0; - padding: 0; -} -html { - font-size: 62.5%; -} -body { - display: flex; - align-items: center; - justify-content: center; - min-height: 100vh; - background-size: 40px 40px; - background-image: linear-gradient(to right, rgb(192, 192, 192) 1px, transparent 1px), linear-gradient(to bottom, rgb(192, 192, 192) 1px, transparent 1px); -} -main { - width: 80vw; - position: relative; - top: -10rem; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; -} -h1 { - font-size: 4rem; - font-family: var(--main-font); - margin: 2rem; - text-align: center; - transition: 0.5s ease-in-out; -} -h1:hover, h1:focus { - transform: translateY(-7px); -} -.palindrome-ctn { - font-family: var(--main-font); - text-align: center; - width: 100%; - max-width: 70rem; - padding: 2rem 4rem; - border: 0.2rem solid var(--border-color); - border-radius: 0.3rem; - transition: 0.5s ease-in-out; - background-color: var(--bg-color); -} -.guide-txt { - font-size: 2rem; - margin-bottom: 2rem; -} -.input-ctn { - display: flex; - gap: 0.5rem; -} -#text-input { - font-family: var(--main-font); - font-size: 2rem; - padding: 0.7rem; - width: 70%; - height: 4rem; - border: 0.2rem solid var(--border-color); - border-radius: 0.3rem; -} -#check-btn { - font-family: var(--main-font); - width: 30%; - height: 4rem; - font-size: 2rem; - padding: 0.7rem; - border: 0.2rem solid var(--border-color); - border-radius: 0.3rem; -} -#result { - background-color: #e7e7e7; - width: 100%; - margin-top: 1rem; - border: 0.2rem solid var(--border-color); - border-radius: 1rem; - visibility: hidden; - font-size: 2rem; -} -#result.visible { - visibility: visible; - height: 3rem; -} -.info { - margin-top: 2rem; - padding: 1.5rem; - width: 100%; - max-width: 70rem; - border: 0.2rem solid var(--border-color); - border-radius: 0.3rem; - transition: 0.5s ease-in-out; - background-color: var(--bg-color); -} -h2 { - font-family: var(--main-font); - font-size: 2.4rem; - margin-bottom: 0.7rem; -} -.description { - font-family: var(--main-font); - font-size: 1.7rem; -} -input:is(:hover, :active, :focus).palindrome-ctn, -.palindrome-ctn:is(:hover, :active, :focus), -.info:is(:hover, :active, :focus) { - box-shadow: 0.7rem 0.7rem 0.3rem 0 var(--box-shadow); - transform: translateY(-7px); -} \ No newline at end of file