├── README.md ├── index.html ├── project_images ├── cover1.png ├── image_1.png └── quoteGeneratorGIF.gif ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Random Quote Generator 2 | blog post 3 | ## Prerequisite 4 | - Basic knowledge of HTML 5 | - Basic knowledge of CSS 6 | - Basic knowledge of JavaScript 7 | 8 | ## About the project 9 | This application fetches a new random quote from an API, upon the click of a button, and displays it in the browser. You can find a step by step walkthrough in my Blog. Use the above linked image to navigate to my Blog. 10 | 11 | ## Some Snaps from the app 12 |

13 | 14 | 15 |

16 | I would ❤ to connect with you at Twitter | LinkedIn 17 | 18 | 19 | ### Show some ❤️ by starring some of the repositories! 20 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Random Quote Generator 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |

22 | 23 | 24 | 25 |

26 |

27 | 28 |
29 |
30 | 31 | 32 | 33 | 34 |
35 |
36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /project_images/cover1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nehasoni05/Random_Quote_Generator/6b0b132f1c754ef84dca0663a7629ea81cff1437/project_images/cover1.png -------------------------------------------------------------------------------- /project_images/image_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nehasoni05/Random_Quote_Generator/6b0b132f1c754ef84dca0663a7629ea81cff1437/project_images/image_1.png -------------------------------------------------------------------------------- /project_images/quoteGeneratorGIF.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nehasoni05/Random_Quote_Generator/6b0b132f1c754ef84dca0663a7629ea81cff1437/project_images/quoteGeneratorGIF.gif -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const text=document.getElementById("quote"); 2 | const author=document.getElementById("author"); 3 | const tweetButton=document.getElementById("tweet"); 4 | 5 | const getNewQuote = async () => 6 | { 7 | //api for quotes 8 | var url="https://type.fit/api/quotes"; 9 | 10 | // fetch the data from api 11 | const response=await fetch(url); 12 | console.log(typeof response); 13 | //convert response to json and store it in quotes array 14 | const allQuotes = await response.json(); 15 | 16 | // Generates a random number between 0 and the length of the quotes array 17 | const indx = Math.floor(Math.random()*allQuotes.length); 18 | 19 | //Store the quote present at the randomly generated index 20 | const quote=allQuotes[indx].text; 21 | 22 | //Store the author of the respective quote 23 | const auth=allQuotes[indx].author; 24 | 25 | if(auth==null) 26 | { 27 | author = "Anonymous"; 28 | } 29 | 30 | //function to dynamically display the quote and the author 31 | text.innerHTML=quote; 32 | author.innerHTML="~ "+auth; 33 | 34 | //tweet the quote 35 | tweetButton.href="https://twitter.com/intent/tweet?text="+quote+" ~ "+auth; 36 | 37 | } 38 | 39 | getNewQuote(); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | min-height:100vh; 9 | transition: 0.5s; 10 | transition-timing-function: ease-in; 11 | background-image: linear-gradient(to right bottom, rgb(255, 128, 128), #ffedbca8); 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | 16 | } 17 | 18 | .container 19 | { 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | padding: 30px; 24 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); 25 | border-radius: 15px; 26 | width: 600px; 27 | background-color: rgba(255, 255, 255, 0.3); 28 | margin: 10px; 29 | 30 | } 31 | .fa-quote-left, .fa-quote-right { 32 | font-size: 35px; 33 | color: rgb(179, 0, 0); 34 | } 35 | .quote 36 | { 37 | text-align: center; 38 | font-size: 40px; 39 | font-weight: bold; 40 | } 41 | .author 42 | { 43 | 44 | margin:10px; 45 | text-align: right; 46 | font-size: 25px; 47 | font-style: italic; 48 | font-family: cursive; 49 | } 50 | hr { 51 | margin: 10px 0; 52 | width: 100%; 53 | border: 1px solid black; 54 | background-color: black; 55 | } 56 | .buttons { 57 | width: 100%; 58 | display: flex; 59 | justify-content: space-between; 60 | align-items: center; 61 | margin-top: 9px; 62 | } 63 | .twitter 64 | { 65 | border:1px solid rgb(102, 179, 255); 66 | border-radius: 4px; 67 | background-color: rgb(102, 179, 255); 68 | color: white; 69 | text-align: center; 70 | font-size: 1.8em; 71 | width: 60px; 72 | height: 35px; 73 | line-height: 40px; 74 | } 75 | .next 76 | { 77 | font-size:18px; 78 | border-radius: 5px; 79 | cursor:pointer; 80 | padding: 10px; 81 | margin-top: 5px; 82 | font-weight: bold; 83 | color: white; 84 | background-image: linear-gradient(to right bottom, rgb(230, 0, 0), #ffedbca8); 85 | } 86 | .container:hover 87 | { 88 | box-shadow: 0 10px 10px rgb(230, 0, 0); 89 | } --------------------------------------------------------------------------------