diff --git a/Calculators/Palindrome-Calculator/README.md b/Calculators/Palindrome-Calculator/README.md new file mode 100644 index 000000000..1852e8517 --- /dev/null +++ b/Calculators/Palindrome-Calculator/README.md @@ -0,0 +1,16 @@ +# Palindrome Checker +This is a simple website that checks whether a given word or phrase is a palindrome. + +## Features +>Checks for single words and phrases (including spaces and punctuation). +Displays a clear message indicating if the input is a palindrome or not. +Handles case-insensitivity (e.g., "Racecar" and "RACECAR" are both considered palindromes). + +## Install dependencies: + +The website uses basic HTML, CSS, and JavaScript. No additional dependencies are required. + +Open the index.html file in your web browser to test the application. + +## How it Works +The website utilizes JavaScript to analyze the input text. It iterates through the characters, comparing the first with the last, the second with the second-to-last, and so on. If all characters match in reverse order, the input is considered a palindrome. diff --git a/Calculators/Palindrome-Calculator/index.html b/Calculators/Palindrome-Calculator/index.html new file mode 100644 index 000000000..d708f2db5 --- /dev/null +++ b/Calculators/Palindrome-Calculator/index.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Palindrome Checker</title> + <link rel="stylesheet" href="styles.css"> +</head> +<body> + <div class="container"> + <h1>Palindrome Checker</h1> + <label for="input">Enter a string or number:</label> + <input type="text" id="input"> + <button onclick="checkPalindrome()">Check</button> + <p id="result"></p> + </div> + + <script src="script.js"></script> +</body> +</html> diff --git a/Calculators/Palindrome-Calculator/script.js b/Calculators/Palindrome-Calculator/script.js new file mode 100644 index 000000000..7baecec17 --- /dev/null +++ b/Calculators/Palindrome-Calculator/script.js @@ -0,0 +1,12 @@ +function checkPalindrome() { + var userInput = document.getElementById("input").value; + var reversedInput = userInput.split('').reverse().join(''); + var isPalindrome = (userInput === reversedInput); + + if (isPalindrome) { + document.getElementById("result").innerText = userInput + " is a palindrome."; + } else { + document.getElementById("result").innerText = userInput + " is not a palindrome."; + } + } + \ No newline at end of file diff --git a/Calculators/Palindrome-Calculator/styles.css b/Calculators/Palindrome-Calculator/styles.css new file mode 100644 index 000000000..d58b38084 --- /dev/null +++ b/Calculators/Palindrome-Calculator/styles.css @@ -0,0 +1,58 @@ +body { + background: linear-gradient(to right, #5E1675, #344955); + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; + } + + .container { + max-width: 600px; + margin: 100px auto; + padding: 20px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + } + + h1 { + text-align: center; + } + + label { + display: block; + margin-bottom: 10px; + } + + input[type="text"] { + width: 97%; + padding: 8px; + margin-bottom: 10px; + font-size: 16px; + border-radius: 4px; + border: 1px solid #ccc; + } + + button { + display: block; + width: 100%; + padding: 10px; + margin-top: 10px; + font-size: 16px; + background-color: #337357; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + transition: all 0.5s ease; + } + + button:hover { + background-color: #5E1675; + } + + p#result { + margin-top: 20px; + text-align: center; + } + \ No newline at end of file