Skip to content

Improved layout, removed jquery #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Helias wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Improved layout, removed jquery #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
857973d
Updated bootstrap version
Helias Dec 9, 2016
e9ab8a9
Removed style.css
Helias Dec 9, 2016
012101e
Removed JQuery, updated layout, used bootstrap
Helias Dec 10, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 5 additions & 8 deletions css/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

48 changes: 0 additions & 48 deletions css/style.css
View file
Open in desktop

This file was deleted.

71 changes: 51 additions & 20 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,65 @@
<html ng-app="Meme">
<head>
<title>Meme Generator</title>

<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/jquery-1.9.1.min.js"></script>

<!-- Javascript -->
<script src="js/console-image.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/script.js"></script>

</head>
<body>
<div class="container">

<br>
<h2 class="text-center">Meme Generator</h2>
<br>

<div ng-controller="MainController">
<header class="offset5"><h1>Meme Generator</h1></header>
<div class="container-fluid">
<div class="preview-wrap span8">
<legend> Preview </legend>
<div class="canvas"></div>

<div class="row">

<div class="col-xs-12 col-md-6">

<div class="panel panel-default">
<div class="panel-heading">
<h2>Preview</h2>
</div>
<div class="panel-body">
<div class="canvas"></div>
</div>
</div>

</div>


<div class="col-xs-12 col-md-6">

<div class="panel panel-default">
<div class="panel-heading">
<h2>Meme Settings</h2>
</div>
<div class="panel-body text-center">
<input type="text" class="form-control" ng-model='toptext' ng-change="alterMeme()" placeholder="top text"/>
<br>
<input type="text" class="form-control" ng-model='bottomtext' ng-change="alterMeme()" placeholder="bottom text"/>
<br>
<select class="form-control" ng-model="selectedMeme" ng-init="selectedMeme = memes[0]" ng-change="alterMeme()" ng-options="m.name for m in memes"></select>
<br>
<button class="btn btn-large btn-primary" ng-click="create()">Save Image</button>
</div>
</div>

</div>

</div>

<div class="info span4">
<fieldset>
<legend>Meme Settings</legend>
<input width="75px" type="text" ng-model='toptext' ng-change="alterMeme()" placeholder="top text"/>
<input type="text" ng-model='bottomtext' ng-change="alterMeme()" placeholder="bottom text"/>
<select ng-model="selectedMeme" ng-init="selectedMeme = memes[0]" ng-change="alterMeme()" ng-options="m.name for m in memes">
</select>
<button class="btn btn-large btn-primary" ng-click="create()">Save Image</button>
</fieldset>
</div>
<footer> by <a href="http://twitter.com/dmamills">@dmamills</a> </footer>

<footer> by <a href="http://twitter.com/dmamills">@dmamills</a> && <a href="http://github.com/Helias">Helias</a></footer>

</div>
</div>
</div> <!-- end container -->
</body>
</html>
130 changes: 120 additions & 10 deletions js/console-image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,116 @@
"use strict";

//Bootlegged of imgur.com/memegen
var memes = {"10 Guy":"http://i.imgur.com/LaENqOV.jpg","3rd World Success Kid":"http://i.imgur.com/WA5duA1.jpg","90's Problems":"http://i.imgur.com/tL47qtp.jpg","Aaand It's Gone":"http://i.imgur.com/yf12saq.jpg","Actual Advice Mallard":"http://i.imgur.com/WymFmVy.jpg","Advice Dog":"http://i.imgur.com/Qk0VO6D.jpg","Advice God":"http://i.imgur.com/xH2fSFg.jpg","Almost Politically Correct Redneck":"http://i.imgur.com/YqLgINf.jpg","Am I The Only One":"http://i.imgur.com/gS9YL5U.jpg","Ancient Aliens":"http://i.imgur.com/NfCknz0.jpg","Annoyed Picard":"http://i.imgur.com/s9GmfSS.jpg","Annoying Childhood Friend":"http://i.imgur.com/27VCyQw.jpg","Annoying Facebook Girl":"http://i.imgur.com/ccczyGt.jpg","Anti-Joke Chicken (Rooster)":"http://i.imgur.com/KOsW0jh.jpg","Awkward Penguin":"http://i.imgur.com/ez1tQrq.jpg","Back In My Day Grandpa":"http://i.imgur.com/zuJSZp8.jpg","Bad Advice Mallard":"http://i.imgur.com/QEPvL2B.jpg","Bad Luck Brian":"http://i.imgur.com/sRW8BiO.jpg","Bear Grylls":"http://i.imgur.com/6Spqy1D.jpg","Brace Yourself":"http://i.imgur.com/NhIq0LY.jpg","Captain Obvious":"http://i.imgur.com/DmUcxBu.jpg","Chemistry Cat":"http://i.imgur.com/8agP4Xe.jpg","College Freshman":"http://i.imgur.com/2Ynyv9t.jpg","College Liberal":"http://i.imgur.com/OWfvSFE.jpg","Condescending Wonka":"http://i.imgur.com/D0e5fgL.jpg","Confession Bear":"http://i.imgur.com/kH1SKhp.jpg","Confession Kid":"http://i.imgur.com/jhOxR12.jpg","Confused Gandalf":"http://i.imgur.com/iIb5SEo.jpg","Conspiracy Keanu":"http://i.imgur.com/pFyk3J7.jpg","Courage Wolf":"http://i.imgur.com/H5qoXFb.jpg","Dating Site Murderer":"http://i.imgur.com/jffNNql.jpg","Depression Dog":"http://i.imgur.com/wgad6P8.jpg","Drunk Baby":"http://i.imgur.com/QvZdbRE.jpg","English Motherfucker":"http://i.imgur.com/sJThEC0.jpg","Evil Plotting Raccoon":"http://i.imgur.com/xMslWFf.jpg","First Day On The Internet Kid":"http://i.imgur.com/TWfdmVu.jpg","First World Cat Problems":"http://i.imgur.com/0vR5Slq.jpg","First World Problem":"http://i.imgur.com/ATcIl08.jpg","Forever Alone":"http://i.imgur.com/pcfXSUU.jpg","Forever Resentful Mother":"http://i.imgur.com/pIrdwo2.jpg","Foul Bachelor Frog":"http://i.imgur.com/JUFmusm.jpg","Foul Bachelorette Frog":"http://i.imgur.com/dYf971U.jpg","Friendzone Fiona":"http://i.imgur.com/Qu1eedL.jpg","Frustrated Farnsworth":"http://i.imgur.com/U3SElKP.jpg","Fuck Me, Right?":"http://i.imgur.com/J9gfxsx.jpg","Gangster Baby":"http://i.imgur.com/C3XhI56.jpg","Good Girl Gina":"http://i.imgur.com/qK6lYr2.jpg","Good Guy Greg":"http://i.imgur.com/UXMPoKN.jpg","Grandma Finds The Internet":"http://i.imgur.com/xPfGYqu.jpg","Grinds My Gears":"http://i.imgur.com/t4JqU1j.jpg","Grumpy Cat (Tard)":"http://i.imgur.com/dU5CDxN.jpg","High Expectations Asian Father":"http://i.imgur.com/7QeB9LI.jpg","Hipster Barista":"http://i.imgur.com/AbWxdy2.jpg","Horrifying House Guest":"http://i.imgur.com/DxmoFp1.jpg","I Dare You Samuel Jackson":"http://i.imgur.com/UQtpdqj.jpg","I Should Buy A Boat":"http://i.imgur.com/XqlqPxn.jpg","I Too Like To Live Dangerously":"http://i.imgur.com/qF70EL9.jpg","Idiot Nerd Girl":"http://i.imgur.com/8hYPYwd.jpg","Insanity Wolf":"http://i.imgur.com/GOOdg3k.jpg","Joker Mind Loss":"http://i.imgur.com/qQIRaOD.jpg","Joseph Ducreux":"http://i.imgur.com/QL7TyR9.jpg","Lame Joke Eel":"http://i.imgur.com/oQXw3jF.jpg","Lame Pun Raccoon":"http://i.imgur.com/nvALRK3.jpg","Lazy College Senior":"http://i.imgur.com/PpkVfzz.jpg","Mad Karma":"http://i.imgur.com/G0QMPum.jpg","Masturbating Spidey":"http://i.imgur.com/dZ7AB4c.jpg","Matrix Morpheus":"http://i.imgur.com/8Yrw6cZ.jpg","Mayonnaise Patrick":"http://i.imgur.com/5jE0Y7f.jpg","Musically Oblivious 8th Grader":"http://i.imgur.com/l5YHN5D.jpg","Not Sure Fry":"http://i.imgur.com/7rFgBB1.jpg","Oblivious Suburban Mom":"http://i.imgur.com/Y7o7UJs.jpg","One Does Not Simply":"http://i.imgur.com/7LrwR1Y.jpg","Overly Attached Girlfriend":"http://i.imgur.com/5blLJLR.jpg","Overly Manly Man":"http://i.imgur.com/dOSn9Na.jpg","Paranoid Parrot":"http://i.imgur.com/KooYHdg.jpg","Pedobear":"http://i.imgur.com/c6JZKRW.jpg","Pepperidge Farm Remembers":"http://i.imgur.com/uFde4v5.jpg","Philosoraptor":"http://i.imgur.com/eERhI5h.jpg","Priority Peter":"http://i.imgur.com/BBEFk0e.jpg","Rasta Science Teacher":"http://i.imgur.com/Js6Ai5T.jpg","Redditor's Wife":"http://i.imgur.com/d1XfJeD.jpg","Revenge Band Kid":"http://i.imgur.com/dlvmaRI.jpg","Schrute Facts":"http://i.imgur.com/UxcvPwT.jpg","Scumbag Brain":"http://i.imgur.com/OZhhZdS.jpg","Scumbag Stacy":"http://i.imgur.com/Qqz1axp.jpg","Scumbag Steve":"http://i.imgur.com/Rfvoc0Y.jpg","Sexually Oblivious Rhino":"http://i.imgur.com/RoaNuEC.jpg","Sheltering Suburban Mom":"http://i.imgur.com/vMkSofv.jpg","Shut Up And Take My Money":"http://i.imgur.com/uWe0rtQ.jpg","Skeptical Third World Kid":"http://i.imgur.com/uwAusxV.jpg","Smug Spongebob":"http://i.imgur.com/OTTRjrv.jpg","Socially Awesome Penguin":"http://i.imgur.com/S6WgQW7.jpg","Success Kid":"http://i.imgur.com/ZibijBz.jpg","Successful Black Man":"http://i.imgur.com/ogIm0cy.jpg","Sudden Clarity Clarence":"http://i.imgur.com/N3Xmfbe.jpg","Tech Impaired Duck":"http://i.imgur.com/riz28ci.jpg","The Most Interesting Man In The World":"http://i.imgur.com/MGv15MH.jpg","The Rent Is Too High":"http://i.imgur.com/r5WLktQ.jpg","Tough Spongebob":"http://i.imgur.com/2w0F1HX.jpg","Unhelpful Highschool Teacher":"http://i.imgur.com/ohbGhuD.jpg","Vengeance Dad":"http://i.imgur.com/0nUStsa.jpg","What Year Is It?":"http://i.imgur.com/fj79hQS.jpg","X, X Everywhere":"http://i.imgur.com/GGy94Gt.jpg","Yeah That'd Be Great":"http://i.imgur.com/nz9M2pl.jpg","Yo Dawg Xzibit":"http://i.imgur.com/XOyGqF2.jpg","You're Bad And You Should Feel Bad":"http://i.imgur.com/YsabGnQ.jpg","You're Gonna Have A Bad Time":"http://i.imgur.com/2tNR7P7.jpg"};
var memes = {
"10 Guy": "http://i.imgur.com/LaENqOV.jpg",
"3rd World Success Kid": "http://i.imgur.com/WA5duA1.jpg",
"90's Problems": "http://i.imgur.com/tL47qtp.jpg",
"Aaand It's Gone": "http://i.imgur.com/yf12saq.jpg",
"Actual Advice Mallard": "http://i.imgur.com/WymFmVy.jpg",
"Advice Dog": "http://i.imgur.com/Qk0VO6D.jpg",
"Advice God": "http://i.imgur.com/xH2fSFg.jpg",
"Almost Politically Correct Redneck": "http://i.imgur.com/YqLgINf.jpg",
"Am I The Only One": "http://i.imgur.com/gS9YL5U.jpg",
"Ancient Aliens": "http://i.imgur.com/NfCknz0.jpg",
"Annoyed Picard": "http://i.imgur.com/s9GmfSS.jpg",
"Annoying Childhood Friend": "http://i.imgur.com/27VCyQw.jpg",
"Annoying Facebook Girl": "http://i.imgur.com/ccczyGt.jpg",
"Anti-Joke Chicken (Rooster)": "http://i.imgur.com/KOsW0jh.jpg",
"Awkward Penguin": "http://i.imgur.com/ez1tQrq.jpg",
"Back In My Day Grandpa": "http://i.imgur.com/zuJSZp8.jpg",
"Bad Advice Mallard": "http://i.imgur.com/QEPvL2B.jpg",
"Bad Luck Brian": "http://i.imgur.com/sRW8BiO.jpg",
"Bear Grylls": "http://i.imgur.com/6Spqy1D.jpg",
"Brace Yourself": "http://i.imgur.com/NhIq0LY.jpg",
"Captain Obvious": "http://i.imgur.com/DmUcxBu.jpg",
"Chemistry Cat": "http://i.imgur.com/8agP4Xe.jpg",
"College Freshman": "http://i.imgur.com/2Ynyv9t.jpg",
"College Liberal": "http://i.imgur.com/OWfvSFE.jpg",
"Condescending Wonka": "http://i.imgur.com/D0e5fgL.jpg",
"Confession Bear": "http://i.imgur.com/kH1SKhp.jpg",
"Confession Kid": "http://i.imgur.com/jhOxR12.jpg",
"Confused Gandalf": "http://i.imgur.com/iIb5SEo.jpg",
"Conspiracy Keanu": "http://i.imgur.com/pFyk3J7.jpg",
"Courage Wolf": "http://i.imgur.com/H5qoXFb.jpg",
"Dating Site Murderer": "http://i.imgur.com/jffNNql.jpg",
"Depression Dog": "http://i.imgur.com/wgad6P8.jpg",
"Drunk Baby": "http://i.imgur.com/QvZdbRE.jpg",
"English Motherfucker": "http://i.imgur.com/sJThEC0.jpg",
"Evil Plotting Raccoon": "http://i.imgur.com/xMslWFf.jpg",
"First Day On The Internet Kid": "http://i.imgur.com/TWfdmVu.jpg",
"First World Cat Problems": "http://i.imgur.com/0vR5Slq.jpg",
"First World Problem": "http://i.imgur.com/ATcIl08.jpg",
"Forever Alone": "http://i.imgur.com/pcfXSUU.jpg",
"Forever Resentful Mother": "http://i.imgur.com/pIrdwo2.jpg",
"Foul Bachelor Frog": "http://i.imgur.com/JUFmusm.jpg",
"Foul Bachelorette Frog": "http://i.imgur.com/dYf971U.jpg",
"Friendzone Fiona": "http://i.imgur.com/Qu1eedL.jpg",
"Frustrated Farnsworth": "http://i.imgur.com/U3SElKP.jpg",
"Fuck Me, Right?": "http://i.imgur.com/J9gfxsx.jpg",
"Gangster Baby": "http://i.imgur.com/C3XhI56.jpg",
"Good Girl Gina": "http://i.imgur.com/qK6lYr2.jpg",
"Good Guy Greg": "http://i.imgur.com/UXMPoKN.jpg",
"Grandma Finds The Internet": "http://i.imgur.com/xPfGYqu.jpg",
"Grinds My Gears": "http://i.imgur.com/t4JqU1j.jpg",
"Grumpy Cat (Tard)": "http://i.imgur.com/dU5CDxN.jpg",
"High Expectations Asian Father": "http://i.imgur.com/7QeB9LI.jpg",
"Hipster Barista": "http://i.imgur.com/AbWxdy2.jpg",
"Horrifying House Guest": "http://i.imgur.com/DxmoFp1.jpg",
"I Dare You Samuel Jackson": "http://i.imgur.com/UQtpdqj.jpg",
"I Should Buy A Boat": "http://i.imgur.com/XqlqPxn.jpg",
"I Too Like To Live Dangerously": "http://i.imgur.com/qF70EL9.jpg",
"Idiot Nerd Girl": "http://i.imgur.com/8hYPYwd.jpg",
"Insanity Wolf": "http://i.imgur.com/GOOdg3k.jpg",
"Joker Mind Loss": "http://i.imgur.com/qQIRaOD.jpg",
"Joseph Ducreux": "http://i.imgur.com/QL7TyR9.jpg",
"Lame Joke Eel": "http://i.imgur.com/oQXw3jF.jpg",
"Lame Pun Raccoon": "http://i.imgur.com/nvALRK3.jpg",
"Lazy College Senior": "http://i.imgur.com/PpkVfzz.jpg",
"Mad Karma": "http://i.imgur.com/G0QMPum.jpg",
"Masturbating Spidey": "http://i.imgur.com/dZ7AB4c.jpg",
"Matrix Morpheus": "http://i.imgur.com/8Yrw6cZ.jpg",
"Mayonnaise Patrick": "http://i.imgur.com/5jE0Y7f.jpg",
"Musically Oblivious 8th Grader": "http://i.imgur.com/l5YHN5D.jpg",
"Not Sure Fry": "http://i.imgur.com/7rFgBB1.jpg",
"Oblivious Suburban Mom": "http://i.imgur.com/Y7o7UJs.jpg",
"One Does Not Simply": "http://i.imgur.com/7LrwR1Y.jpg",
"Overly Attached Girlfriend": "http://i.imgur.com/5blLJLR.jpg",
"Overly Manly Man": "http://i.imgur.com/dOSn9Na.jpg",
"Paranoid Parrot": "http://i.imgur.com/KooYHdg.jpg",
"Pedobear": "http://i.imgur.com/c6JZKRW.jpg",
"Pepperidge Farm Remembers": "http://i.imgur.com/uFde4v5.jpg",
"Philosoraptor": "http://i.imgur.com/eERhI5h.jpg",
"Priority Peter": "http://i.imgur.com/BBEFk0e.jpg",
"Rasta Science Teacher": "http://i.imgur.com/Js6Ai5T.jpg",
"Redditor's Wife": "http://i.imgur.com/d1XfJeD.jpg",
"Revenge Band Kid": "http://i.imgur.com/dlvmaRI.jpg",
"Schrute Facts": "http://i.imgur.com/UxcvPwT.jpg",
"Scumbag Brain": "http://i.imgur.com/OZhhZdS.jpg",
"Scumbag Stacy": "http://i.imgur.com/Qqz1axp.jpg",
"Scumbag Steve": "http://i.imgur.com/Rfvoc0Y.jpg",
"Sexually Oblivious Rhino": "http://i.imgur.com/RoaNuEC.jpg",
"Sheltering Suburban Mom": "http://i.imgur.com/vMkSofv.jpg",
"Shut Up And Take My Money": "http://i.imgur.com/uWe0rtQ.jpg",
"Skeptical Third World Kid": "http://i.imgur.com/uwAusxV.jpg",
"Smug Spongebob": "http://i.imgur.com/OTTRjrv.jpg",
"Socially Awesome Penguin": "http://i.imgur.com/S6WgQW7.jpg",
"Success Kid": "http://i.imgur.com/ZibijBz.jpg",
"Successful Black Man": "http://i.imgur.com/ogIm0cy.jpg",
"Sudden Clarity Clarence": "http://i.imgur.com/N3Xmfbe.jpg",
"Tech Impaired Duck": "http://i.imgur.com/riz28ci.jpg",
"The Most Interesting Man In The World": "http://i.imgur.com/MGv15MH.jpg",
"The Rent Is Too High": "http://i.imgur.com/r5WLktQ.jpg",
"Tough Spongebob": "http://i.imgur.com/2w0F1HX.jpg",
"Unhelpful Highschool Teacher": "http://i.imgur.com/ohbGhuD.jpg",
"Vengeance Dad": "http://i.imgur.com/0nUStsa.jpg",
"What Year Is It?": "http://i.imgur.com/fj79hQS.jpg",
"X, X Everywhere": "http://i.imgur.com/GGy94Gt.jpg",
"Yeah That'd Be Great": "http://i.imgur.com/nz9M2pl.jpg",
"Yo Dawg Xzibit": "http://i.imgur.com/XOyGqF2.jpg",
"You're Bad And You Should Feel Bad": "http://i.imgur.com/YsabGnQ.jpg",
"You're Gonna Have A Bad Time": "http://i.imgur.com/2tNR7P7.jpg"
};

var canvas = document.createElement("canvas");
console.list = memes;

Expand Down Expand Up @@ -61,19 +170,19 @@
}
console.meme = function(upper, lower, image, width, height) {
if(!upper && !lower && !image) return console.log("> " + Object.keys(memes).join("\n> "));

var ctx = canvas.getContext("2d"),
width = width || 500,
height = width || 500,
//I tweaked it at these dimensions,
//So everything scales from here
_w = 500, _h = 500;
_w = 500, _h = 500;

ctx.clearRect(0,0,width,height);

var img = new Image();
img.setAttribute('crossOrigin','anonymous');
img.onload = function() {
var img = new Image();
img.setAttribute('crossOrigin','anonymous');
img.onload = function() {
canvas.width = width;
canvas.height = height;

Expand All @@ -89,13 +198,14 @@

//my lil' hack
canvas.id = 'myCanvas';
$('.canvas').html(canvas);

// $('.canvas').html(canvas);
document.getElementsByClassName("canvas")[0].appendChild(canvas);

};

if(memes[image]) var url = memes[image];
else var url = image;

img.src = url; //"http://www.corsproxy.com/" + url.replace(/https?:\/\//, "");
};
})(console);
})(console);
Loading