+++ /dev/null
-[submodule "personal-website/projects/palindrome-checker"]
- path = personal-website/projects/palindrome-checker
- url = https://github.com/bocharudo/palindrome-checker.git
+++ /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="styles.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="">
- <meta property="og:url" content="https://tenkyuu.dev/projects/palindrome-checker">
-
- <!-- 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 here:</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="script.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
+++ /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
projects / mysite.git / commitdiff