Palindrome Checker

In this example below you will see how to do a Palindrome Checker with some HTML / CSS and Javascript

Check to see if a word is a palindrome of itself, or the same word spelled backwards.

Thumbnail
This awesome code was written by Dave Judd, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Dave Judd ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Palindrome Checker</title>
  <meta name="viewport" content="minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no"/>
<link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="interface">
	<h1>Palindrome Checker</h1>
	<p>Enter a word to see if it is a palindrome, the same word spelled backwards.</p>
	<p>
		<input type="text" id="word" value="racecar" />
		<button id="click">Check</button>
	</p>
	<p>Result: <span id="result"></span></p>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/SirDaev/palindrome-checker-NAoZvG */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  width: 100%;
  height: 100%;
  background: #4E5068; 
  font-family: 'Droid Sans', sans-serif;
  font-size: 16px;
	padding: 20px;
}

.interface {
  margin: 0 auto;
  overflow: auto;
  width: 900px;
  max-width: 100%;
  padding: 15px;
  background: #F5F5F5;
  color: #333;
  border: 1px solid #ccc;
	border-radius: 10px;
  box-shadow: 0 5px 20px -8px rgba(0,0,0,0.7);
}

h1, h2 {
	margin-bottom: 0.5em;
}

p {
	margin-bottom: 0.8em;
}

input {
	width: 100px;
}

.half {
	float: left;
	overflow: auto;
	width: 100%;
}

@media (min-width: 500px) {
	.half {
		width: 50%;
	}
	.half:first-of-type {
		padding-right: 20px;
	}
	.half:last-of-type {
		padding-left: 20px;
		border-left: 1px solid #333;
	}
}

/*Downloaded from https://www.codeseek.co/SirDaev/palindrome-checker-NAoZvG */
var click = document.getElementById('click');
var result = document.getElementById('result');
var resultText = "";

//Reverse the word and compare it
var checkWord = function(a) {
	var reversedWord = a.split("").reverse().join("");
	if(a.toLowerCase() == reversedWord.toLowerCase()) {
		return true;
	} else {
		return false;
	}
}

//When the button is clicked...
click.addEventListener('click', function() {
	//Do the checking
	var word = document.getElementById('word').value;
	if(checkWord(word)) {
		resultText = "Your word '" + word + "' is a palindrome!";
	} else {
		resultText = "Your word '" + word + "' is not a palindrome!";
	}
	result.innerText = resultText;
});

Comments