Skip to content

Instantly share code, notes, and snippets.

@Enigmatrix

Enigmatrix/index.html

Created May 14, 2015 00:03
Show Gist options
  • Save Enigmatrix/1af2f517a8258ab25fc0 to your computer and use it in GitHub Desktop.
Save Enigmatrix/1af2f517a8258ab25fc0 to your computer and use it in GitHub Desktop.
Download ZIP
MEMEMEMEMEMEMEMEMEM // source http://jsbin.com/yusifo
Raw
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>MEMEMEMEMEMEMEMEMEM</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<link href="main.css" rel="stylesheet">
<style id="jsbin-css">
body {
width: 500px;
margin: 0 auto;
}
.stuff{
display:inline-block;
}
.stuffimg{
width:100px;
height:100px;
vertical-align: middle;
}
.ratestuff{
width:300px;
margin:5px;
}
button{
box-shadow:5px 5px 2px black;
background:radial-gradient(orange, red);
color: white;
}
button:hover{
background:linear-gradient(orange, red);
}
button:active{
background:radial-gradient(aqua, blue);
}
</style>
</head>
<body ng-controller="MemeController as memeCtrl">
<section>
<h1>DANK MEMES</h1>
<ul>
<li ng-repeat="memedat in memes">
<img class="stuffimg" ng-src="{{memedat.imagesrc}}" alt="{{memedat.imagesrc}}">
<h3 class="stuff">{{memedat.text}}</h3>
</li>
</ul>
</section>
<section>
<h2>SUBMIT YOUR OWN DANK MEMES!</h2>
<input class="ratestuff" type="url" placeholder="PUT A DANK IMAGE SRC HERE" ng-model="imagesrc" /><br>
<input class="ratestuff" type="text" placeholder="PUT YOUR DANK TEXT HERE" ng-model="text" /><br>
<button ng-click="addMeme()">SUBMIT YOUR SWAG!</button>
</section>
<script>
var app = angular.module("app", ["firebase"]);
app.controller("MemeController", ["$scope", "$firebaseArray", function ($scope, $firebaseArray) {
var ref = new Firebase("https://radiant-inferno-9173.firebaseio.com/");
$scope.memes = $firebaseArray(ref);
$scope.addMeme = function () {
var meme = {
//name: $scope.name,
text: $scope.text,
imagesrc: $scope.imagesrc,
//currentrating: 0
};
$scope.memes.$add(meme);
}
}]);
</script>
<script id="jsbin-source-css" type="text/css">body {
width: 500px;
margin: 0 auto;
}
.stuff{
display:inline-block;
}
.stuffimg{
width:100px;
height:100px;
vertical-align: middle;
}
.ratestuff{
width:300px;
margin:5px;
}
button{
box-shadow:5px 5px 2px black;
background:radial-gradient(orange, red);
color: white;
}
button:hover{
background:linear-gradient(orange, red);
}
button:active{
background:radial-gradient(aqua, blue);
}</script>
</body>
</html>
Raw
jsbin.yusifo.css
body {
width: 500px;
margin: 0 auto;
}
.stuff{
display:inline-block;
}
.stuffimg{
width:100px;
height:100px;
vertical-align: middle;
}
.ratestuff{
width:300px;
margin:5px;
}
button{
box-shadow:5px 5px 2px black;
background:radial-gradient(orange, red);
color: white;
}
button:hover{
background:linear-gradient(orange, red);
}
button:active{
background:radial-gradient(aqua, blue);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment