Skip to content

Instantly share code, notes, and snippets.

@Omrika

Omrika/index.html

Created January 6, 2015 17:50
Show Gist options
  • Save Omrika/695151fb52f1c0d5c0c0 to your computer and use it in GitHub Desktop.
Save Omrika/695151fb52f1c0d5c0c0 to your computer and use it in GitHub Desktop.
Download ZIP
Reverse // source http://jsbin.com/niparu
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reverse</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style id="jsbin-css">
* {
margin: 0;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
background-color: #c0392b;
}
.title {
text-align: center;
font-size: 50px;
font-family: verdana;
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -137px; /* margin is -0.5 * dimension */
margin-top: -130px;
letter-spacing: 5px;
text-transform: uppercase;
}
#container {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
text-align: center;
}
#input {
width: 200px;
float: right;
position: relative;
right:-150%;
text-align:left
}
#reverse {
width: 75Spx;
color: #2c3e50;
text-transform: uppercase;
}
</style>
</head>
<body>
<header>
<h1 class="title">
Reverse
</h1>
</header>
<form id="container" name="f">
<input id="input" type="text" name="reverse_text" placeholder="Enter something cool">
<button id="reverse">Revert</button>
</form>
<footer class="footer">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</footer>
<script id="jsbin-javascript">
$(document).ready(function() {
$('#reverse').click(function() {
var comment = $('#input').val();
var rev_str = comment.split('').reverse().join('');
alert(rev_str);
});
});
</script>
<script id="jsbin-source-css" type="text/css">* {
margin: 0;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
background-color: #c0392b;
}
.title {
text-align: center;
font-size: 50px;
font-family: verdana;
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -137px; /* margin is -0.5 * dimension */
margin-top: -130px;
letter-spacing: 5px;
text-transform: uppercase;
}
#container {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
text-align: center;
}
#input {
width: 200px;
float: right;
position: relative;
right:-150%;
text-align:left
}
#reverse {
width: 75Spx;
color: #2c3e50;
text-transform: uppercase;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function() {
$('#reverse').click(function() {
var comment = $('#input').val();
var rev_str = comment.split('').reverse().join('');
alert(rev_str);
});
});
</script></body>
</html>
Raw
jsbin.niparu.css
* {
margin: 0;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
background-color: #c0392b;
}
.title {
text-align: center;
font-size: 50px;
font-family: verdana;
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -137px; /* margin is -0.5 * dimension */
margin-top: -130px;
letter-spacing: 5px;
text-transform: uppercase;
}
#container {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
text-align: center;
}
#input {
width: 200px;
float: right;
position: relative;
right:-150%;
text-align:left
}
#reverse {
width: 75Spx;
color: #2c3e50;
text-transform: uppercase;
}
Raw
jsbin.niparu.js
$(document).ready(function() {
$('#reverse').click(function() {
var comment = $('#input').val();
var rev_str = comment.split('').reverse().join('');
alert(rev_str);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment