From d8fa5fffddea3ff98337ca5f92dd83591aa0b26f Mon Sep 17 00:00:00 2001 From: tenkyuu Date: Mon, 18 Nov 2024 10:20:41 +0800 Subject: [PATCH] added palindrome checker project --- projects/css/palindrome-checker.css | 118 ++++++++++++++++++++++++++++ projects/js/palindrome-checker.js | 48 +++++++++++ projects/palindrome-checker.html | 54 ++++++++++--- 3 files changed, 209 insertions(+), 11 deletions(-) create mode 100644 projects/css/palindrome-checker.css create mode 100644 projects/js/palindrome-checker.js diff --git a/projects/css/palindrome-checker.css b/projects/css/palindrome-checker.css new file mode 100644 index 0000000..b06648d --- /dev/null +++ b/projects/css/palindrome-checker.css @@ -0,0 +1,118 @@ +: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 diff --git a/projects/js/palindrome-checker.js b/projects/js/palindrome-checker.js new file mode 100644 index 0000000..a3b8d7c --- /dev/null +++ b/projects/js/palindrome-checker.js @@ -0,0 +1,48 @@ +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.html b/projects/palindrome-checker.html index 0e6c9b7..131828e 100644 --- a/projects/palindrome-checker.html +++ b/projects/palindrome-checker.html @@ -3,24 +3,56 @@ - - - + + - rain - web developer + Palindrome Checker by Bocharudo + + - - - + + + + + - - + + - + + + + - + + + + + +
+

Palindrome Checker

+
+
Enter the text you want to check:
+
+ + +
+
+
+ +
+

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 -- 2.39.5