devvsakib · devvsakib · Oct 19, 2022 · Oct 19, 2022 · Oct 19, 2022
diff --git a/quote generator/README.txt b/quote generator/README.txt
@@ -0,0 +1 @@
+Made by Yohannes Sida
diff --git a/quote generator/dist/index.html b/quote generator/dist/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - A Pen by Yohannes Sida</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="styles.css" />
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
+    />
+    <title>Random Quote Machine</title>
+  </head>
+  <body>
+    <div id="wrapper">
+      <div id="quote-box">
+        <div class="quote-text">
+          <i class="fa fa-quote-left"> </i><span id="text"></span>
+        </div>
+        <div class="quote-author">- <span id="author"></span></div>
+        <div class="buttons">
+
+          <button class="button-17" id="new-quote" role="button">New quote</button>
+        </div>
+      </div>
+      <div class="footer">edited by <a href="https://codepen.io/hezag/">joe</a></div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
+    <script src="script.js"></script>
+  </body>
+</html>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/quote generator/dist/script.js 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);
+});
diff --git a/quote generator/dist/styles.css 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;
+}
diff --git a/quote generator/src/index.html b/quote generator/src/index.html
@@ -0,0 +1,30 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="styles.css" />
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
+    />
+    <title>FCC : Random Quote Machine</title>
+  </head>
+  <body>
+    <div id="wrapper">
+      <div id="quote-box">
+        <div class="quote-text">
+          <i class="fa fa-quote-left"> </i><span id="text"></span>
+        </div>
+        <div class="quote-author">- <span id="author"></span></div>
+        <div class="buttons">
+
+          <button class="button-17" id="new-quote" role="button">New quote</button>
+        </div>
+      </div>
+      <div class="footer">edited by <a href="https://codepen.io/hezag/">joe</a></div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
+    <script src="script.js"></script>
+  </body>
+</html>