Skip to content

Instantly share code, notes, and snippets.

@rheajt

rheajt/FlashCards.markdown

Last active November 6, 2015 14:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rheajt/f68f68d14dd34297563d to your computer and use it in GitHub Desktop.
Save rheajt/f68f68d14dd34297563d to your computer and use it in GitHub Desktop.
Download ZIP
FlashCards
Raw
FlashCards.markdown
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FlashCards!</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 col-sm-offset-3">
<div class="form-group"><label for="frontData">Front</label><textarea name="" id="frontData" cols="30" rows="4" class="form-control"></textarea></div>
</div>
<div class="col-sm-3">
<div class="form-group"><label for="backData">Back</label><textarea name="" id="backData" cols="30" rows="4" class="form-control"></textarea></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<button class="btn btn-success btn-lg btn-block" id="addCard">Add Card</button>
</div>
</div>
<hr/>
<div class="row">
<div class="col-xs-12 text-center" id="cardField"></div>
</div>
</div>
<script src="//code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Raw
script.js
$(document).ready(function() {
$('#addCard').click(function() {
var front = $('#frontData').val();
var back = $('#backData').val();
console.log(front + ' ' + back);
var html = '';
html += '<div class="pull-left" id="f1_container">';
html += '<div id="f1_card" class="shadow">';
html += '<div class="front face"><h1>' + front + '</h1></div>';
html += '<div class="back face center"><h1>' + back + '</h1></div>';
html += '</div>';
html += '</div>';
$('#cardField').append(html);
$('textarea').val('');
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Gloria+Hallelujah);
#f1_container {
position: relative;
margin: 10px auto;
width: 300px;
height: 200px;
z-index: 1;
font-family: 'Gloria Hallelujah', cursive;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
box-shadow: 5px 5px 5px #aaa;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.front{
background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/2e/Notecard.jpg');
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: black;
background-color: white;
border: 1px solid lightgray;
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment