Merge branch 'master' of https://fyrfli.dev/fyrfli/jsquotes

.gitignore

@@ -1 +1,5 @@
+<<<<<<< HEAD
 .DS_Store
+=======
+.DS_Store
+>>>>>>> 7f4013d (Initial)

FavouriteQuotes.json

@@ -0,0 +1,62 @@
+[
+  {
+    "quote": "Everything has its wonders, even darkness and silence, and I learn, whatever state I may be in , therein to be content.",
+    "author": "Helen Keller"
+  },
+  {
+    "quote": "Tomorrow, and tomorrow, and tomorrow, Creeps in this petty pace from day to day, To the last syllable of recorded time; And all our yesterdays have lighted fools The way to dusty death. Out, out, brief candle! Life's but a walking shadow, a poor player That struts and frets his hour upon the stage And then is heard no more. It is a tale Told by an idiot, full of sound and fury Signifying nothing.",
+    "author": "Macbeth \n (Act 5, Scene 5, lines 19-28)"
+  },
+  {
+    "quote": "He who has health has hope. And he who has hope, has everything.",
+    "author": "Arabian Proverb"
+  },
+  {
+    "quote": "In the midst of movement and chaos, keep stillness inside of you.",
+    "author": "Deepak Chopra"
+  },
+  {
+    "quote": "The worst sin toward our fellow creatures is not to hate them, but to be indifferent to them: that's the essence of inhumanity.",
+    "author": "George Bernard Shaw; \n Irish dramatist & socialist (1856 - 1950)"
+  },
+  {
+    "quote": "We come to love not by finding a perfect person, but by learning to see an imperfect person perfectly.",
+    "author": "Sam Keen"
+  },
+  {
+    "quote": "A friend is someone who understands your past, believes in your future, and accepts you just the way you are",
+    "author": "Paul Holdorsen"
+  },
+  {
+    "quote": "Ambition is the last refuge of failure",
+    "author": "Oscar Wilde"
+  },
+  {
+    "quote": "Love never dies a natural death. It dies because we don't know how to replenish its source. It dies of blindness and errors and betrayals. It dies of illness and wounds; it dies of weariness, of withering, of tarnishing.",
+    "author": "Anais Nin"
+  },
+  {
+    "quote": "Few people think more than two or three times a year; I have made an international reputation for myself by thinking once or twice a week.",
+    "author": "George Bernard Shaw; \n Irish dramatist & socialist (1856 - 1950)"
+  },
+  {
+    "quote": "It doesn't interest me where or what or with whom you have studied. I want to know what sustains you from the inside when all else falls away. I want to know if you can be alone with yourself and if you truly like the company you keep in the empty moments.",
+    "author": "from ... The Invitation, \n Oriah Mountain Dreamer"
+  },
+  {
+    "quote": "You never really understand a person until you consider things from his point of view... until you climb into his skin and walk around in it.",
+    "author": "Harper Lee, \n To Kill a Mockingbird"
+  },
+  {
+    "quote": "I think there's just one kind of folks. Folks.",
+    "author": "Harper Lee, \n To Kill a Mockingbird"
+  },
+  {
+    "quote": "The Best Things In Life... \n Hot showers on a cold night \n Snow flurries and moonlight \n The smell of freshly washed towels \n Fog over fields and fireflies \n Country storms \n Being home",
+    "author": "Camille Frantz"
+  },
+  {
+    "quote": "Nothing is original. Steal from anywhere that resonates with inspiration or fuels your imagination. Devour old films, new films, books, paintings, photographs, poems, dreams, random conversations, architecture, bridges, street signs, trees..., clouds, bodies of water, light and shadows. Select only things to steal from that speak directly to your soul. If you do this, your work (and theft) will be authentic. Authenticity is invaluable; originality is non-existent. And don't bother concealing your thievery - celebrate it if you feel like it. In any case, always remember what Jean-Luc Godard said: 'it's not where you take things from - its where you take them to.'",
+    "author": "Jim Jarmusch"
+  }
+]

README.md

@@ -2,6 +2,8 @@
 
 I wanted to create an "app" that would read in JSON and print out the results randomly based on a randomly generated number. It took me a while to get right, mostly because of the JSON file format. I have it down now. This is my result.
 
+<<<<<<< HEAD
+<<<<<<< HEAD
 ## Next steps ...
 
 I want to add more quotes and a button to run the code instead of having the user reload the page. 
@@ -14,4 +16,11 @@ Or at least create a timer loop to do the refreshing of the quotes automatically
 
 I managed to get the looping done with a iteration count of 25 and an interval of 8seconds. So now, when you go to the live page, it should iterate 25 times through a random selection of my favourite quotes.
 
--- 28 May, 2022 - 09:28:53
+-- 28 May, 2022 - 09:28:53
+
+## Changed the entire format of the page
+
+I didn't like that the looping would repeat the same quote several times so I decided on a column format instead. This way **all** the quotes show up at once. No looping, no excessive animations ... just a simple page.
+=======
+--  18 May, 2022; 00:13:59
+>>>>>>> 49a8d5d (Update README)

app.js

@@ -0,0 +1,11 @@
+const disp = document.querySelector(".display");
+
+fetch("FavouriteQuotes.json")
+  .then((response) => {
+    return response.json();
+  })
+  .then((data) => {
+    numQuotes = Object.entries(data).length;
+    num = Math.floor(Math.random() * numQuotes);
+    disp.innerText = data[num].quote + "\n\n" + data[num].author.replace(/"/g, '');
+  })

index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+    <title>read quote</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+
+  <body>
+    <div class="display"></div>
+    <script src="app.js"></script>
+  </body>
+
+</html>

style.css

@@ -0,0 +1,16 @@
+  body {
+    width: 80vw;
+    max-width: 500px;
+    margin: auto;
+    padding-top: 4rem;
+    background-color: beige;
+  }
+
+  .display {
+    background: linear-gradient(to bottom right, #0c024d, #0dbcc5);
+    background-attachment: fixed;
+    color: white;
+    font-size: 1.2rem;
+    padding: 2rem;
+    border-radius: 12px;
+  }