From: tenkyuu <hello@tenkyuu.dev>
Date: Mon, 18 Nov 2024 02:40:55 +0000 (+0800)
Subject: fixed file strucutring again
X-Git-Url: https://git.bochard.net/?a=commitdiff_plain;h=18dce735991bed32694a787aacbd7ab1140df9ca;p=mysite.git

fixed file strucutring again
---

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 = `<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
new file mode 100644
index 0000000..131828e
--- /dev/null
+++ b/projects/palindrome-checker.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<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="A simple and efficient palindrome checker.">
+  <meta name="robots" content="index, follow">
+  <title>Palindrome Checker by Bocharudo</title>
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/ico" href="assets/icons/favicon.ico">
+
+  <!-- Stylesheet -->
+  <link rel="stylesheet" href="css/palindrome-checker.css">
+
+  <!-- Open Graph Metadata -->
+  <meta property="og:type" content="website">
+  <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/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=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
diff --git a/projects/palindrome-checker/palindrome-checker.css b/projects/palindrome-checker/palindrome-checker.css
deleted file mode 100644
index b06648d..0000000
--- a/projects/palindrome-checker/palindrome-checker.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
diff --git a/projects/palindrome-checker/palindrome-checker.html b/projects/palindrome-checker/palindrome-checker.html
deleted file mode 100644
index cbf0d99..0000000
--- a/projects/palindrome-checker/palindrome-checker.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<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="A simple and efficient palindrome checker.">
-  <meta name="robots" content="index, follow">
-  <title>Palindrome Checker by Bocharudo</title>
-
-  <!-- Favicon -->
-  <link rel="icon" type="image/ico" href="assets/icons/favicon.ico">
-
-  <!-- Stylesheet -->
-  <link rel="stylesheet" href="palindrome-checker.css">
-
-  <!-- Open Graph Metadata -->
-  <meta property="og:type" content="website">
-  <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/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=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="palindrome-checker.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/projects/palindrome-checker/palindrome-checker.js b/projects/palindrome-checker/palindrome-checker.js
deleted file mode 100644
index a3b8d7c..0000000
--- a/projects/palindrome-checker/palindrome-checker.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 = `<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