Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added Palindrome Calculator #615

Merged
merged 3 commits into from
Feb 26, 2024
Merged

Added Palindrome Calculator #615

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ca4e6bc
Project Setup
Yuvraj960 Feb 26, 2024
40a4712
Update README.md
Rakesh9100 Feb 26, 2024
c335675
Update index.html
Rakesh9100 Feb 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions Calculators/Palindrome-Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
20 changes: 20 additions & 0 deletions Calculators/Palindrome-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions Calculators/Palindrome-Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.";
}
}

58 changes: 58 additions & 0 deletions Calculators/Palindrome-Calculator/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}

Loading