--- /dev/null
+: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
--- /dev/null
+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
--- /dev/null
+<!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
+++ /dev/null
-: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
+++ /dev/null
-<!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
+++ /dev/null
-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
projects / mysite.git / commitdiff