added palindrome checker project

diff --git a/projects/css/palindrome-checker.css b/projects/css/palindrome-checker.css
new file mode 100644 (file)
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 (file)
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 = `<strong>${rawText.trim()}</strong> ${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 0e6c9b723f70802d1b900ec7ca2939127d68a96a..131828e97f37a8fa4219d43685c9a172b6eb0db8 100644 (file)
--- a/projects/palindrome-checker.html
+++ b/projects/palindrome-checker.html
@@ -3,24 +3,56 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="author" content="rain/bocharudo">
-  <meta name="description" content="I code on paper and create websites out of it.">
-  <meta name="referrer" content="no-referrer">
+  <meta name="author" content="rain (bocharudo)">
+  <meta name="description" content="A simple and efficient palindrome checker.">
   <meta name="robots" content="index, follow">
-  <title>rain - web developer</title>
+  <title>Palindrome Checker by Bocharudo</title>
+
+  <!-- Favicon -->
   <link rel="icon" type="image/ico" href="assets/icons/favicon.ico">
-  <link rel="preload" href="css/styles.css" as="style">
-  <link rel="stylesheet" href="css/styles.css">
-  <!-- meta stuffs -->
+
+  <!-- Stylesheet -->
+  <link rel="stylesheet" href="css/palindrome-checker.css">
+
+  <!-- Open Graph Metadata -->
   <meta property="og:type" content="website">
-  <meta property="og:title" content="rain - web developer">
-  <meta property="og:description" content="I code on paper and create websites out of it.">
+  <meta property="og:title" content="Palindrome Checker - Efficient & Simple">
+  <meta property="og:description" content="Easily check if your input is a palindrome with this efficient tool.">
   <meta property="og:image" content="assets/pfp/profile.jpg">
-  <meta property="og:url" content="https://tenkyuu.dev">
+  <meta property="og:url" content="https://tenkyuu.dev/projects/palindrome-checker.html">
+
+  <!-- Twitter Card Metadata -->
   <meta name="twitter:card" content="summary_large_image">
+
   <!-- Bunny Fonts -->
   <link rel="preconnect" href="https://fonts.bunny.net">
-  <link href="https://fonts.bunny.net/css2?family=Amatic+SC:wght@400;700&family=Pangolin&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">
+  <link href="https://fonts.bunny.net/css2?family=Pangolin&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">
+
+  <!-- NoScript -->
+  <noscript>
+    <link href="https://fonts.bunny.net/css2?family=Pangolin&display=swap" rel="stylesheet">
+  </noscript>
+</head>
 <body>
+  <main>
+    <h1>Palindrome Checker</h1>
+    <div class="palindrome-ctn">
+      <div class="guide-txt">Enter the text you want to check:</div>
+      <div class="input-ctn">
+        <input type="text" id="text-input">
+        <button type="button" id="check-btn">Check</button>
+      </div>
+      <div id="result"></div>
+    </div>
+
+    <div class="info">
+      <h2>What is a Palindrome?</h2>
+      <p class="description">
+        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.
+      </p>
+    </div>
+  </main>
+
+  <script src="js/palindrome-checker.js"></script>
 </body>
 </html>
\ No newline at end of file