free Code Camp - quote generator project.
A Pen by Kevin Smith on CodePen.
Created
April 29, 2017 06:50
-
-
Save kevinsmithwebdev-zz/54ebfdb638b0a515707f9ed849b9bd95 to your computer and use it in GitHub Desktop.
fCC Intermediate Build - Quote Generator
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Composer Quote Generator</title> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> | |
| </head> | |
| <body> | |
| <div id = "titleBox" class = "myBox">Composer Quote Genearator</div> | |
| <div id = quoteBox class = "myBox"> | |
| <div id="quoteDisplay"> | |
| <!-- Quotes will display here --> | |
| </div> | |
| <div id="authorDisplay"> | |
| <!-- Author will display here --> | |
| </div> | |
| </div> <!-- /quoteBox --> | |
| <div id = btnBox class = "myBox"> | |
| <button id = "quoteBTN">New Quote</button> | |
| <button id = "tweetBTN"><i class="fa fa-twitter" aria-hidden="true"></i> Tweet!</button> | |
| </div> <!-- /btnBox --> | |
| </body> | |
| </html> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Quotes in array of 2 cell arrays of strings. First string is quote, second is author. | |
| var quotes = [ | |
| ["Works of art make rules; rules do not make works of art." , "Claude Debussy"], | |
| ["To achieve great things, two things are needed; a plan, and not quite enough time." , "Leonard Bernstein"], | |
| ["Competitions are for horses, not artists." , "Bela Bartok"], | |
| ["Mournful and yet grand is the destiny of the artist." , "Franz Liszt"], | |
| ["I am hitting my head against the walls, but the walls are giving way." , "Gustav Mahler"], | |
| ["Lesser artists borrow, great artists steal." , "Igor Stravinsky"], | |
| ["I always said God was against art and I still believe it." , "Edward Elgar"], | |
| ["Without craftsmanship, inspiration is a mere reed shaken in the wind." , "Johannes Brahms"], | |
| ["There was no one near to confuse me, so I was forced to become original." , "Joseph Haydn"], | |
| ["As a musician I tell you that if you were to suppress adultery, fanaticism, crime, evil, the supernatural, there would no longer be the means for writing one note." , "Georges Bizet"], | |
| ["I was obliged to be industrious. Whoever is equally industrious will succeed equally well." , "Johann Sebastian Bach"], | |
| ["The musician is perhaps the most modest of animals, but he is also the proudest." , "Erik Satie"], | |
| ["To send light into the darkness of men's hearts - such is the duty of the artist." , "Robert Schumann"], | |
| ["A creative artist works on his next composition because he was not satisfied with his previous one." , "Dmitri Shostakovich"], | |
| ["I may not be a first-rate composer, but I am a first-class second-rate composer." , "Richard Strauss"], | |
| ["I can't understand why people are frightened of new ideas. I'm frightened of the old ones." , "John Cage"], | |
| ["I'm an adventurer. I like invention, I like discovery." , "Karlheinz Stockhausen"], | |
| ["The old idea of a composer suddenly having a terrific idea and sitting up all night to write it is nonsense. Nighttime is for sleeping." , "Benjamin Britten"], | |
| ["Inspiration is an awakening, a quickening of all man's faculties, and it is manifested in all high artistic achievements." , "Giacomo Puccini"], | |
| ["Music is the social act of communication among people, a gesture of friendship, the strongest there is." , "Malcolm Arnold"], | |
| ["The only love affair I have ever had was with music." , "Maurice Ravel"], | |
| ["Imagination creates reality." , "Richard Wagner"] | |
| ] | |
| function newQuote() { | |
| var randomNumber = Math.floor(Math.random() * quotes.length); | |
| document.getElementById("quoteDisplay").innerHTML = quotes[randomNumber][0]; | |
| document.getElementById("authorDisplay").innerHTML = "- " + quotes[randomNumber][1]; | |
| } | |
| // Send quote on page load | |
| window.onload = function() { | |
| newQuote(); | |
| }; | |
| function tweetQuote() { | |
| var url = "https://twitter.com/intent/tweet"; | |
| var text= "\"" + document.getElementById("quoteDisplay").textContent + "\" " + document.getElementById("authorDisplay").textContent; | |
| var hashtags = "fCC,quote"; | |
| window.open(url + "?text=" + text + ";hashtags=" + hashtags, "width=500,heigth=300"); | |
| } | |
| document.getElementById("quoteBTN").onclick = newQuote; | |
| document.getElementById("tweetBTN").onclick = tweetQuote; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: lightgreen; | |
| padding: 25px; | |
| } | |
| #titleBox { | |
| background-color: #34000D; | |
| color: white; | |
| font-size: 250%; | |
| text-align: center; | |
| } | |
| #quoteBox { | |
| background-color: #CD5C78; | |
| color: black; | |
| } | |
| #quoteDisplay { | |
| font-size: 200%; | |
| } | |
| #authorDisplay { | |
| font-size: 200%; | |
| font-style: italic; | |
| text-indent: 2em; | |
| } | |
| #btnBox { | |
| background-color: #80132E; | |
| color: white; | |
| } | |
| .myBox { | |
| padding: 30px; | |
| border-radius: 5px; | |
| } | |
| button { | |
| background-color: lightblue; | |
| color: black; | |
| padding: 15px; | |
| text-align: center; | |
| font-size: 16px; | |
| margin-left: 50px; | |
| margin-rigth: 50px; | |
| border-radius: 10px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment