initial commit - completed project

HowToCoder · Nov 27, 2017 · 8891975 · 8891975
1 parent 7f3d1a8
commit 8891975
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 0 deletions.
diff --git a/css/screen.css 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
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Random Quote Machine</title>
+  <!-- font-awesome stylesheet for icons -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+  <!-- bootstrap css stylesheet -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+  <!-- custom css stylesheet -->
+  <link rel="stylesheet" href="./css/screen.css">
+  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+  <!-- jquery and bootstrap cdn js file -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
+</head>
+<body class="col">
+  <div class="container">
+    <h1 class="text-center name"><b>The Random Quote Machine</b></h1>
+    <div class="row">
+      <div class="col-md-6 col-md-push-3">
+        <div class="quote text-center">
+          <h2>
+            <i class="fa fa-quote-left"></i>
+            <span id="data">Click New Quote button to get a quote.</span>
+          </h2>
+          <div class="pull-right">
+            <h4>-author</h4>
+          </div>
+          <!-- Adding twitter button and get new quote button -->
+          <br>
+          <br>
+          <div class="socialmedia pull-left">
+            <a href="#" id="twitter" class="btn btn-lg col" target=_blank>
+              <i class="fa fa-twitter"></i>
+            </a>
+          </div>
+          <div class="col">
+            <a href="javascript:;" id="newquote" class="btn btn-lg pull-right col">New Quote</a>
+          </div>
+          <br>
+        </div>
+      </div>
+    </div>
+    <br>
+    <br>
+    <p class="text-center"><a href="//github.com/PREMPRAKASHSINGH" target="_blank">by premsingh</a></p>
+  </div>
+  <script src="./js/main.js"></script>
+</body>
+</html>
diff --git a/js/main.js 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.");
+      }
+    });
+  }
+});