project finished

codeveloper-ysf · codeveloper-ysf · commit a9c10ffbf32f · 2020-04-12T01:15:41.000+02:00
diff --git a/Week1/project/index.css b/Week1/project/index.css
@@ -0,0 +1,61 @@
+body {
+  background-color: orange;
+}
+.container {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 5% 15%;
+}
+.quote-generator {
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  width: 100%;
+}
+.quote {
+  margin: 10% 10% 5% 10%;
+  line-height: 1.5em;
+  font-size: xx-large;
+  font-weight: bold;
+  color: orange;
+}
+.fa-quote-left{
+    float: left;
+}
+#author {
+  text-align: right;
+  font-size: x-large;
+  font-weight: bold;
+  padding: 0% 10%;
+  color: orange;
+}
+.tools {
+  display: flex;
+  justify-content: space-between;
+  margin: 3% 10% 8% 10%;
+}
+.fa-twitter, .fa-tumblr{
+    background-color: orange;
+    color: #ffffff;
+    padding: 15px;
+}
+ {
+  margin-left: 5px;
+}
+.quote-changer {
+  background-color: orange;
+  outline: none;
+  border: none;
+  color: #ffffff;
+  font-weight: bold;
+  font-size: large;
+  padding: 0% 3%;
+}
+.empty {
+  background-color: #ffffff;
+  width: 40%;
+  height: 75px;
+  margin-top: 0.5%;
+}
diff --git a/Week1/project/index.html b/Week1/project/index.html
@@ -1 +1,33 @@
-<!-- Your code goes in here -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="index.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+  </head>
+  <body>
+    <div class="container">
+      <div class="quote-generator">
+        <p class="quote">
+          <i class="fa fa-quote-left" aria-hidden="true"></i>
+          <span id="sentence"> Don't cry because it's over, smile because it happened.</span>
+        </p>
+        <span id="author">- Dr. Seuss</span>
+        <div class="tools">
+          <div class="icons">
+            <a href="#"><i class="fa fa-twitter"></i></a>
+            <a href="#"><i class="fa fa-tumblr"></i></a>
+          </div>
+          <button class="quote-changer" type="button">New quote</button>
+        </div>
+      </div>
+      <div class="empty"></div>
+    </div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/Week1/project/index.js b/Week1/project/index.js
@@ -1 +1,39 @@
-// your code goes in here
+'use strict';
+
+const quotes = [
+    {
+        quote: "Peace at home, peace on the world.",
+        author: "- M.K. Ataturk"
+    },
+    {
+        quote: "Honesty is an expensive gift, don't expect it from cheap people.",
+        author: "- Warren Buffett"
+    },
+    {
+        quote: "Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma – which is living with the results of other people's thinking.",
+        author: "- Steve Jobs"
+    },
+    {
+        quote: "Look at the world through the eyes of the people you're speaking to.",
+        author: "- Frank Caprio"
+    },
+    {
+        quote: "Whoever has taught me one letter has made me his slave.",
+        author: "- Hz. Ali"
+    },
+    {
+        quote: "Simplicity is the key to brilliance.",
+        author: "- Bruce Lee"
+    }
+];
+
+const quoteChanger = document.querySelector('button');
+quoteChanger.addEventListener('click', function(){
+    let randomQuote = Math.floor(Math.random()*quotes.length);
+
+    const newQuote = document.querySelector('#sentence');
+    newQuote.innerText = quotes[randomQuote].quote;
+
+    const newAuthor = document.querySelector('#author');
+    newAuthor.innerText = quotes[randomQuote].author;
+})
