Quote Like an Artist

Developer
ThatGuySam
Size
7,173 Kb
Views
44,528
  1. Quote Like an Artist Previews
  2. Quote Like an Artist HTML Codes
  3. Quote Like an Artist CSS Codes
  4. Quote Like an Artist JS Codes

How do I make an quote like an artist?

A random quote generator based on the quotes found in Austin Kleon's book Show Your Work. What is a quote like an artist? How do you make a quote like an artist? This script and codes were developed by ThatGuySam on 06 August 2022, Saturday.

Quote Like an Artist Previews
IQ Test

Quote Like an Artist - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Quote Like an Artist</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,600&subset=latin,latin-ext'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container-fluid'> <div class='row'> <div class='quote-container'> <div class='quote-box'> <textarea class='quote-text'>"We don't make movies to make money, we make money to make more movies."</textarea> <input class='quote-author' value='- Walt Disney'> <div class='bg-container'> <svg id='bg' preserveAspectRatio='none' version='1.1' viewBox='0 0 400 400' x='0px' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' y='0px'></svg> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Quote Like an Artist - Script Codes CSS Codes

body { background: #ddd; font-family: "Open Sans", Helvetica, sans-serif; text-align: center;
}
.quote-container { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: 2em; width: 100%; max-width: 800px; color: #ddd; letter-spacing: 0.05em; font-size: 1.2em;
}
@media only screen and (max-width: 480px), screen and (max-height: 480px) { .quote-container { font-size: 0.8em; }
}
@media only screen and (max-width: 320px) { .quote-container { font-size: 0.7em; }
}
.quote-container .quote-box { position: relative; top: 0; left: 0; padding: 3em 10%; width: 100%; max-width: 600px; margin: 0 auto;
}
.quote-container .quote-box textarea,
.quote-container .quote-box input { text-align: center; background: transparent; overflow-y: hidden; border: none; resize: none;
}
.quote-container .quote-box textarea:hover,
.quote-container .quote-box input:hover { outline: #ddd dashed 4px;
}
.quote-container .quote-box textarea:focus,
.quote-container .quote-box input:focus { outline: none;
}
.quote-container .quote-box .quote-text { width: 100%; font-weight: 700; padding: 0 1em; padding-top: 0.8em;
}
.quote-container .quote-box .quote-author { font-size: 1.4em; font-weight: 300; font-style: italic; padding: 0.5em;
}
.quote-container .bg-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1;
}
.quote-container .bg-container svg,
.quote-container .bg-container path { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

Quote Like an Artist - Script Codes JS Codes

'use strict';//Ain't no amatuer hour here
jQuery(function ($) { var cdn = "//s3-us-west-2.amazonaws.com/s.cdpn.io/39376/"; var bgUrl; var quote; var s = Snap("#bg"); var $quote = $(".quote-text"); var $numWords; var quoteText; var authorText; //Get Random thing from array function getRandom( items ){ return items[Math.floor(Math.random()*items.length)]; } if (typeof String.prototype.startsWith != 'function') { // see below for better implementation! String.prototype.startsWith = function (str){ return this.indexOf(str) == 0; }; } if (typeof String.prototype.endsWith !== 'function') { String.prototype.endsWith = function(suffix) { return this.indexOf(suffix, this.length - suffix.length) !== -1; }; } //Pick random quote quote = getRandom( quoteData.quotes ); //Pick a random background bgUrl = cdn+getRandom( quoteData.bgs ); //Tell what quote should be showing console.log( quote ); //Load picked background Snap.load(bgUrl, function (f) { s.append(f); }); //Add quote $('.quote-text').val( '"'+quote.text+'"' ); //Add author $('.quote-author').val( '- '+quote.author ); //Simulate keyup event on resize $( window ).resize(function() { $('.quote-text').trigger('keyup'); }); //Resize Textarea when key is pressed $('.quote-text').on( 'keyup', function (){ quoteText = $(this).val(); //Auto Text Size $numWords = $(this).val().split(" ").length; console.log( $numWords ); if (($numWords >= 1) && ($numWords < 10)) { $(this).css("font-size", "2.2em"); } else if (($numWords >= 10) && ($numWords < 20)) { $(this).css("font-size", "2em"); } else if (($numWords >= 20) && ($numWords < 30)) { $(this).css("font-size", "1.8em"); } else if (($numWords >= 30) && ($numWords < 40)) { $(this).css("font-size", "1.6em"); } else { $(this).css("font-size", "1.4em"); } //Auto Field Height $(this).height( 0 ); $(this).height( this.scrollHeight ); }).trigger('keyup'); $('.quote-author').on( 'keyup', function (){ authorText = $(this).val(); //Add dash before author name if( !authorText.startsWith('- ') ) $(this).val( '- '+authorText ); });
});//jQuery
//Data N' Stuff
var quoteData = { bgs:[ 'Shape_A_00.svg', 'Shape_A_01.svg', 'Shape_A_02.svg', 'Shape_A_03.svg', 'Shape_B_00.svg', 'Shape_B_01.svg', 'Shape_B_02.svg', 'Shape_B_03.svg' ], quotes:[ { text: "Whenever Picasso learned how to do something, he abandoned it.", author: "Milton Glaser" }, { text: "The minute you stop wanting something you get it.", author: "Andy Warhol" }, { text: "We work because it's a chain reaction, each subject leads to the next.", author: "Charles Eames" }, { text: "Work is never finished, Only abandoned.", author: "Paul Valéry" }, { text: "Above all, recognize that if you have had success, you have also had luck- and with luck comes obligation. You owe a debt, and not just to your gods. You owe a debt to the unlucky.", author: "Michael Lewis" }, { text: "There is no misery in art. All art is about saying yes, and all art is about its own making.", author: "John Currin" }, { text: "We don't make movies to make money, we make money to make more movies.", author: "Walt Disney" }, { text: "I'd love to sell out completely. It's just that nobody has been willing to buy.", author: "John Waters" }, { text: "Sellout...I'm not crazy about that word. We're all entrepreneurs. To me, I don't care if you own a furniture store or whatever-the sign you can put up is SOLD OUT.", author: "Bill Withers" }, { text: "The trick is not caring what EVERYBODY thinks of you and just caring about what the RIGHT people think of you.", author: "Brian Michael Bendis" }, { text: "I ain't going to give up. Every time you think I'm one place, I'm going to show up someplace else. I come pre-hated. Take you best shot.", author: "Cyndi Lauper" }, { text: "You and I will be around longer than Twitter, and nothing substitutes face to face.", author: "Rob Delaney" }, { text: "It's all about paying attention. Attention is vitality. It connects you with others.", author: "Susan Sontag" }, { text: "Part of the act of creating is in discovering your own kind. They are everywhere. But don't look for them in the wrong places.", author: "Henry Miller" }, { text: "Whatever excites you, go do it. Whatever drains you, stop doing it.", author: "Derek Sivers" }, { text: "What you want is to follow and be followed by human beings who care about issues you care about. This thing we make together. This thing is about hearts and minds, not eyeballs.", author: "Jeffrey Zeldman" }, { text: "When people realize they're being listened to they tell you things.", author: "Richard Ford" }, { text: "The impulse to keep to yourself what you have learned is not only shameful, it is destructive. Anything you do not give freely and abundantly becomes lost to you. You open your safe and find ashes.", author: "Annie Dillard" }, { text: "Whatever we say, we’re always talking about ourselves.", author: "Alison Bechdel" }, { text: "You got to make your case.", author: "Kanye West" }, { text: "In the first act, you get your hero up a tree. The second act, you throw rocks at him. For the third act, you let him down.", author: "George Abbott" }, { text: "‘The cat sat on a mat’ is not a story. ‘The cat sat on the dog’s mat’ is a story.", author: "John le Carré" }, { text: "To fake a photograph, all you to do is change the caption. To fake a painting, change the attribution.", author: "Errol Morris" }, { text: "Do what you do best and link to the rest.", author: "Jeff Jarvis" }, { text: "I don’t believe in guilty pleasures. If you f—king like something, like it.", author: "Dave Grohl" }, { text: "You’re only as good as your record collection", author: "DJ Spooky" }, { text: "The problem with hoarding is you end up living off your reserves. Eventually, you’ll become stale. If you give away everything you have, you are left with nothing. This forces you to look, to be aware, to replenish… Somehow the more you give away, the more comes back to you.", author: "Paul Arden" }, { text: "Carving out a space for your self online, somewhere where you can express yourself and share your work, is still one of the best possible investments you can make with your time.", author: "Andy Baio" }, { text: "If you work on something a little bit everyday, you end up with something massive.", author: "Kenneth Goldsmith" }, { text: "Make no mistake: This is not your diary. You are not letting it all hang out. You are picking and choosing every single word.", author: "Dani Shapiro" }, { text: "One day at a time. It sounds so simple. It actually is simple but it isn’t easy: It requires incredible support and fastidious structuring.", author: "Russel Brand" }, { text: "Put yourself, and your work, out there every day, and you’ll start meeting some amazing people.", author: "Bobby Solomon" }, { text: "In order for a connection to happen, we have to allow ourselves to be seen- really seen.", author: "Brené Brown" }, { text: "A lot of people are so used to just seeing the outcome of work. They never see the side of the work you go through produce the outcome.", author: "Michael Jackson" }, { text: "Remembering that I'll be dead soon is the most important tool I've ever encountered to help me make the big choices in life. Almost everything-all external expectations, all pride, all fear of embarrassment or failure-these things just fall away in the face of death, leaving only what is truly important. Remembering that you are going to die is the best way I know to avoid the trap of thinking you have something to lose. You are already naked.", author: "Steve Jobs" }, { text: "Find your voice, shout it from the rooftops, and keep doing it until the people that are looking for you find you.", author: "Dan Harmon" }, { text: "That’s all any of us are: amateurs. We don’t live long enough to be anything else.", author: "Charlie Chaplin" }, { text: "Give what you have. To someone, it may be better than you dare to think.", author: "Henry Wadsworth Longfellow" }, { text: "Creativity is not a talent. It is a way of operating.", author: "John Cleese" } ], };
Quote Like an Artist - Script Codes
Quote Like an Artist - Script Codes
Home Page Home
Developer ThatGuySam
Username ThatGuySam
Uploaded August 06, 2022
Rating 3
Size 7,173 Kb
Views 44,528
Do you need developer help for Quote Like an Artist?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

ThatGuySam (ThatGuySam) Script Codes
Name
Youtube Video Blurring
Awesome CSS3 Button
Flat Price Table
Facebook Style Typography
Angry Face
Bad Words
Real Time Twitter Feed
Auto Expiring Content
Pictures of Bill Murray
Guts Less Mixins
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!