Rhinogradentia · March 29, 2018 15:41 · Mar 29, 2018 · Mar 29, 2018 · Mar 29, 2018 · Mar 29, 2018
diff --git a/freecodecamp-assignment-randomquotemachine.markdown b/freecodecamp-assignment-randomquotemachine.markdown
@@ -1,7 +0,0 @@
-freeCodeCamp-Assignment:RandomQuoteMachine
-------------------------------------------
-
-
-A [Pen](https://codepen.io/GilEstel/pen/VXQQMQ) by [Nadine Tatto](https://codepen.io/GilEstel) on [CodePen](https://codepen.io).
-
-[License](https://codepen.io/GilEstel/pen/VXQQMQ/license).

diff --git a/build-a-random-quote-machine.markdown b/build-a-random-quote-machine.markdown
@@ -0,0 +1,11 @@
+Build a Random Quote Machine
+----------------------------
+An Assignment for the free Code Camp Certification.
+
+Tasks:
+- click button - show random quotes
+- press button to tweet quote
+
+A [Pen](https://codepen.io/GilEstel/pen/VXQQMQ) by [Nadine Tatto](https://codepen.io/GilEstel) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/GilEstel/pen/VXQQMQ/license).
diff --git a/freecodecamp-assignment-randomquotemachine.markdown b/freecodecamp-assignment-randomquotemachine.markdown
@@ -0,0 +1,7 @@
+freeCodeCamp-Assignment:RandomQuoteMachine
+------------------------------------------
+
+
+A [Pen](https://codepen.io/GilEstel/pen/VXQQMQ) by [Nadine Tatto](https://codepen.io/GilEstel) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/GilEstel/pen/VXQQMQ/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+
+<header>
+  <div class="container-fluid">
+      <div class = "row text-center">
+      <h1 style="padding: 20px 10px 10px 1opx;">Random Quotes:</h1>
+      <!-- idea - let the user choose quote api -->
+      <!-- idea - let the user preselect a category -->
+    </div>
+  </div>
+</header>
+
+<body>
+<div class="container-fluid">
+  <div class="row"><div class="col-xs-12" style="height:75px;"></div></div>
+  <div class = "row text-center">
+    <div class="col-xs-3"></div>
+    <div id='citation-block' class="col-xs-6  quote">
+      The quote will go here
+    </div>
+    <div class="col-xs-3"></div>
+  </div>
+  <div class="row">
+    <div class="col-xs-3"></div>
+    <div class = "col-xs-6">
+      <!--<div class="text-left">-->
+        <button id="goTweet" class="btn btn-light pull-left"><i class="fab fa-twitter" style="font-size:1.5em;"></i></button>
+      <!--</div>
+      <div class="text-right">-->
+        <button id="getQuote" class="btn btn-light pull-right">Get next quote!</button>
+      <!--</div>-->
+    </div>
+    <div class="col-xs-3"></div>
+  </div>
+</div>
+</body>
+
+<footer>
+  <div class="container-fluid">
+    <div id="quotesSource" class="row text-center footer">
+      <div class="col-xs-4">by Nadine</div>
+      <div class="col-xs-4"><p>&copy; Copyright 2018. All Rights Reserved</p></div>
+      <div class="col-xs-4">
+        <p>The source of the quotes is: <a href="https://talaikis.com/random_quotes_api/">here</a></p>
+      </div>
+    </div>
+  </div>
+</footer>
diff --git a/script.js b/script.js
@@ -0,0 +1,25 @@
+function fetchQuote() {
+  var html = ""; 
+
+      $.getJSON("https://talaikis.com/api/quotes/random/", function(json) {
+          html += "<blockquote id='quoteText' class='blockquote' style='font-size:1.5em;'><strong>&quot;</strong>" + json.quote + "<strong>&quot;</strong><footer class='blockquote-footer text-right'>" + json.author + " (<cite title='Category'>"+json.cat+"</cite>)</footer></blockquote>";
+
+          $(".quote").html(html);
+          //$(".quote").html(JSON.stringify(json));
+      });
+}
+
+$(document).ready(function() {
+  fetchQuote();   // initially display already a quote
+
+  $("#getQuote").on("click", function(){
+      fetchQuote();
+  });
+
+  $("#goTweet").on("click", function(){
+    var tweetText = document.getElementById("quoteText").textContent;
+    var url = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=" + tweetText;
+
+    window.open(url, "_blank");
+  });
+});
diff --git a/scripts b/scripts
@@ -0,0 +1,3 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
diff --git a/style.css b/style.css
@@ -0,0 +1,34 @@
+header {
+  height:70px;
+  background-color: #66CDAA;
+}
+body {
+  font-family: 'Montserrat', sans-serif;
+  background-color: #ecf9f4;
+  height: 500px;
+}
+#citation-block {
+  font-family: 'Caveat', cursive;
+  font-size: 1.5em;
+  margin: 0 auto;
+  background-color: white;
+  padding: 20px 40px 20px 40px;
+}
+
+#goTweet {
+  margin-top:  20px;
+}
+#getQuote {
+  margin-top: 20px; 
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
+  height: 60px;
+  padding: 20px 10px 10px 10px;
+  background-color: #66CDAA;
+  color: white;
+}
diff --git a/styles b/styles
@@ -0,0 +1,2 @@
+<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
		<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
No results found