From 88919753e9ea564bd3fbdb787d2645c0b83d89c5 Mon Sep 17 00:00:00 2001 From: Premprakash singh Date: Mon, 27 Nov 2017 18:58:48 +0530 Subject: [PATCH] initial commit - completed project --- css/screen.css | 28 +++++++++++++++++++++++++++ index.html | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++ js/main.js | 29 ++++++++++++++++++++++++++++ 3 files changed, 108 insertions(+) create mode 100644 css/screen.css create mode 100644 index.html create mode 100644 js/main.js diff --git a/css/screen.css b/css/screen.css new file mode 100644 index 0000000..098e427 --- /dev/null +++ b/css/screen.css @@ -0,0 +1,28 @@ +.col { + background-color: rgba(246, 36, 89, 0.8); +} +.color { + color: rgba(246, 36, 89, 0.8); +} + +.name { + margin-top: 50px; + font-family: 'Lobster', cursive; + color: white; +} + +.quote { + background-color: #ECF0F1; + margin: 0 auto; + margin-top: 12%; + padding: 40px; + border-radius: 4px; +} + +.socialmedia a { + background-color: rgba(246, 36, 89, 0.8); +} + +a { + color: white; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..e70c3ec --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ + + + + + Random Quote Machine + + + + + + + + + + + + +
+

The Random Quote Machine

+
+
+
+

+ + Click New Quote button to get a quote. +

+
+

-author

+
+ +
+
+ +
+ New Quote +
+
+
+
+
+
+
+

by premsingh

+
+ + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..338704e --- /dev/null +++ b/js/main.js @@ -0,0 +1,29 @@ +$(document).ready(function(){ + $('#newquote').click(function(){ + getRandomQuote(); + }); + function getRandomQuote(){ + var color=['#F64747','#663399','#4183D7','#22313F','#9A12B3','#03A678']; /* array of hex color */ + var index=color[Math.floor(Math.random()*color.length)]; /* random color from color array */ + $.ajax({ + url: 'https://talaikis.com/api/quotes/random/', + type: 'GET', + dataType: 'json', + success: function(data) { + var quote=data.quote; + var author=data.author; + $('.quote #data').html(quote); + $('.quote h4').html("-"+author); + $('body').css('background-color', index); + $('.col').css('background-color', index); + $('.socialmedia a').css('background-color', index); + $('#newquote').css('color','white'); + $('.color').css('color', index); + $('#twitter').attr('href',"https://twitter.com/intent/tweet?text="+quote+" "+author); + }, + error: function(err) { + $('.quote #data').html("Oops something went wrong!, Please try again."); + } + }); + } +});