diff --git a/quote generator/README.txt b/quote generator/README.txt new file mode 100644 index 0000000..8fceb1c --- /dev/null +++ b/quote generator/README.txt @@ -0,0 +1 @@ +Made by Yohannes Sida \ No newline at end of file diff --git a/quote generator/dist/index.html b/quote generator/dist/index.html new file mode 100644 index 0000000..2f74c31 --- /dev/null +++ b/quote generator/dist/index.html @@ -0,0 +1,44 @@ + + + + + CodePen - A Pen by Yohannes Sida + + + + + + + + + + + Random Quote Machine + + +
+
+
+ +
+
-
+
+ + +
+
+
edited by joe
+
+ + + + + + + + + + diff --git a/quote generator/dist/script.js b/quote generator/dist/script.js new file mode 100644 index 0000000..22131b4 --- /dev/null +++ b/quote generator/dist/script.js @@ -0,0 +1,119 @@ +var colors = [ + '#16a085', + '#27ae60', + '#2c3e50', + '#f39c12', + '#e74c3c', + '#9b59b6', + '#FB6964', + '#342224', + '#472E32', + '#BDBB99', + '#77B1A9', + '#73A857', + '#C6AEC7', +'#D2B9D3', +'#D8BFD8', +'#DFD3E3', +'#E9CFEC', +'#FCDFFF', +'#EBDDE2', +'#E1D9D1', +'#E9E4D4', +'#EDE6D6', +'#FAF0DD', +'#F8F0E3', +'#F8F6F0', +'#F3E8EA', +'#FFF0F5', +'#FDEEF4', +'#FFF9E3', +'#FDF5E6', +'#FAF0E6', +'#FFF5EE', +'#F9F6EE', +'#FAF5EF', + '#FFFFF0', +'#FFFFF4', +'#FFFFF7', +'#F5F5F5' +]; +var currentQuote = '', + currentAuthor = ''; + +function getQuotes() { + return $.ajax({ + headers: { + Accept: 'application/json' + }, + url:'https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json', + success: function (jsonQuotes) { + if (typeof jsonQuotes === 'string') { + quotesData = JSON.parse(jsonQuotes); + console.log('quotesData'); + console.log(quotesData); + } + } + }); +} + +function getRandomQuote() { + return quotesData.quotes[ + Math.floor(Math.random() * quotesData.quotes.length) + ]; +} + +function getQuote() { + let randomQuote = getRandomQuote(); + + currentQuote = randomQuote.quote; + currentAuthor = randomQuote.author; + + $('#tweet-quote').attr( + 'href', + 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor) + ); + + $('#tumblr-quote').attr( + 'href', + 'https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=' + + encodeURIComponent(currentAuthor) + + '&content=' + + encodeURIComponent(currentQuote) + + '&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button' + ); + + $('.quote-text').animate({ opacity: 0 }, 500, function () { + $(this).animate({ opacity: 1 }, 500); + $('#text').text(randomQuote.quote); + }); + + $('.quote-author').animate({ opacity: 0 }, 500, function () { + $(this).animate({ opacity: 1 }, 500); + $('#author').html(randomQuote.author); + }); + + var color = Math.floor(Math.random() * colors.length); + $('html body').animate( + { + backgroundColor: colors[color], + color: colors[color] + }, + 1000 + ); + $('.button-17').animate( + { + backgroundColor: colors[color] + }, + 1000 + ); +} + +$(document).ready(function () { + getQuotes().then(() => { + getQuote(); + }); + + $('#new-quote').on('click', getQuote); +}); \ No newline at end of file diff --git a/quote generator/dist/styles.css b/quote generator/dist/styles.css new file mode 100644 index 0000000..72f065a --- /dev/null +++ b/quote generator/dist/styles.css @@ -0,0 +1,181 @@ +@import url('https://fonts.googleapis.com/css?family=Raleway:400,500'); +* { + margin: 0; + padding: 0; + list-style: none; + vertical-align: baseline; +} + +div { + position: relative; + z-index: 2; +} + +body { + background-color: #333; + color: #333; + font-family: 'Raleway', sans-serif; + font-weight: 400; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.footer { + width: 450px; + text-align: center; + display: block; + margin: 15px auto 30px auto; + font-size: 0.8em; + color: #fff; +} +.footer a { + font-weight: 500; + text-decoration: none; + color: #fff; +} + +#quote-box { + border-radius: 3px; + position: relative; + width: 450px; + padding: 40px 50px; + display: table; + background-color: #fff; + box-shadow: 60px -17px 37px 6px rgba(150, 150, 150, 0.24), 0px 15px 25px -4px rgba(150, 150, 150, 0.24) + +} +#quote-box .quote-text { + text-align: center; + width: 450px; + height: auto; + clear: both; + font-weight: 500; + font-size: 1.75em; +} +#quote-box .quote-text i { + font-size: 1em; + margin-right: 0.4em; +} +#quote-box .quote-author { + width: 450px; + height: auto; + clear: both; + padding-top: 20px; + font-size: 1em; + text-align: right; +} +#quote-box .buttons { + width: 450px; + margin: auto; + display: flex; + aligh-item: center; + justify-content: center; +} +#quote-box .buttons .button { + height: 38px; + border: none; + border-radius: 3px; + color: #fff; + background-color: #333; + outline: none; + font-size: 0.85em; + padding: 8px 18px 6px 18px; + margin-top: 30px; + opacity: 1; + cursor: pointer; +} +#quote-box .buttons .button:hover { + opacity: 0.9; +} +#quote-box .buttons .button#tweet-quote, +#quote-box .buttons .button#tumblr-quote { + float: left; + padding: 0px; + padding-top: 8px; + text-align: center; + font-size: 1.2em; + margin-right: 5px; + height: 30px; + width: 40px; +} + + + + + + + + +/* CSS */ +.button-17 { + + margin:25px 2px; + align-items: center; + appearance: none; + background-color: #fff; + border-radius: 24px; + border-style: none; + box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0; + box-sizing: border-box; + color: #3c4043; + cursor: pointer; + display: inline-flex; + fill: currentcolor; + font-family: "Google Sans",Roboto,Arial,sans-serif; + font-size: 14px; + font-weight: 500; + height: 48px; + justify-content: center; + letter-spacing: .25px; + line-height: normal; + max-width: 100%; + overflow: visible; + padding: 2px 24px; + position: relative; + text-align: center; + text-transform: none; + transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + width: auto; + will-change: transform,opacity; + z-index: 0; +} + +.button-17:hover { + background: #F6F9FE; + color: #174ea6; +} + +.button-17:active { + box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%); + outline: none; +} + +.button-17:focus { + outline: none; + border: 2px solid ; +} + +.button-17:not(:disabled) { + box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; +} + +.button-17:not(:disabled):hover { + box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px; +} + +.button-17:not(:disabled):focus { + box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; +} + +.button-17:not(:disabled):active { + box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px; +} + +.button-17:disabled { + box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; +} \ No newline at end of file diff --git a/quote generator/src/index.html b/quote generator/src/index.html new file mode 100644 index 0000000..35249ba --- /dev/null +++ b/quote generator/src/index.html @@ -0,0 +1,30 @@ + + + + + + + FCC : Random Quote Machine + + +
+
+
+ +
+
-
+
+ + +
+
+
edited by joe
+
+ + + + +