Skip to content

Instantly share code, notes, and snippets.

@mrdarrengriffin

mrdarrengriffin/camel-case.html

Last active April 17, 2019 08:23
Show Gist options
  • Save mrdarrengriffin/0d0d9da76f23baf37252bb13e42ff0c7 to your computer and use it in GitHub Desktop.
Save mrdarrengriffin/0d0d9da76f23baf37252bb13e42ff0c7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
camel-case.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>🐪 Camel Case</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
#camelContainer{
width:100%;
white-space: nowrap;
overflow:hidden;
}
.camel {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAcCAYAAAAEN20fAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHgSURBVEhL7ZW9SgNBFIVv1lJFi6iIIgRSWNj4D1ZaBHwBGwvLPIB2PoCdL5DeykdIoZWg4k8lFoGAKEG0UMROiTmTPct1spnsJoNa+MHNzuzM3j2ZPXcmIym5KOTqYVPmy9XUz3fkdH+x/npUjF4Sx+dTfx1xf1gwV0Q41DMBfiDC9Bq4xFxvjpqw2z4wQsDE1LC8PVfDXisQ+7GeFQTQbR8EejWIvSrwxfTcrCxtn8nyzrm5B+E+yUCInXQwm5PbyyvBy0Flryz53YJp2wytlbwYNkoCQXixTgxT4jq+eiK14xVzj0As8CXEadaHuxcTus1w+akbnGZt+CGDQHWwHQ55J5FZfwKnWbkC2Lj6Rt5NW8/HPBg5bRnHrWwQJwKwYpKAHDrwLCNuLG7FI48AigDaL+120IGZAxkr5sNek3Y5gB5jRZJIiCsBDjd92AFXSQOXCI5pfxohrgQEYnjIPZYqPYsgFBMkEUFg2IWtmxZzditCmzb6NJ1EEFYPNzqNK4dLIAgwIakIYpefK0fcmC0CfKuaNPjeZb0k06WIf4vNEFAsDYk+52IeDkyM4X7XK6KZ3CibFzK5udkGzrXxIqRXsCq/LgSfxdun8cG/EJs/I8QLcD33Ct0GnfpNRL4A2kgj9PT/htIAAAAASUVORK5CYII=') no-repeat;
background-size: 170px 140px;
image-rendering: pixelated;
width: 170px;
height: 140px;
float: left;
}
.head {
width: 50px;
background-position: -35px 0;
}
.front {
width: 35px;
background-position: -85px 0px;
}
.hump {
width: 35px;
background-position: 0px -35px;
margin-top: 35px;
}
.flat {
width: 35px;
background-position: -85px 45px;
margin-top: -45px;
}
.bum {
width: 50px;
height:105px;
background-position: -120px -35px;
margin-top: 35px;
}
</style>
</head>
<body>
<div class="container">
<div class="card mt-4">
<div class="card-body">
<h5 class="card-title">Camel Case Visualizer</h5>
<p class="card-text">Visualize the camel case naming convention with a virtual camel. Capital letters
give the camel a hump</p>
<div class="form-group">
<input type="email" class="form-control" id="className" placeholder="Enter some text">
</div>
<div id="camelContainer">
<div class="camel head"></div>
<div class="camel front"></div>
<div id="camelHumps"></div>
<div class="camel bum"></div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
var casing = []
$("#className").on('keyup', e => {
clearHumps()
casing = []
var elem = $("#className");
var text = elem.val()
var textArr = text.split("")
textArr.forEach(char => {
if (char == char.toUpperCase()) {
casing.push(true)
} else {
casing.push(false)
}
})
renderHumps()
})
function clearHumps() {
$("#camelHumps").html("")
}
function renderHumps() {
casing.forEach(letterCase => {
if (letterCase) {
$("#camelHumps").append('<div class="camel hump"></div>')
} else {
$("#camelHumps").append('<div class="camel flat"></div>')
}
})
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment