├── README.md ├── script.js ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Advice-Generator 2 | This Is A Random Advice Generator Web Application... 3 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const adviceNoEl = document.querySelector(".advice-no"); 2 | const adviceEl = document.getElementById("advice"); 3 | const generateBtn = document.getElementById("advice-btn"); 4 | 5 | generateBtn.addEventListener("click", generateQuote) 6 | generateQuote() 7 | async function generateQuote() { 8 | const response = await fetch('https://api.adviceslip.com/advice'); 9 | const data = await response.json(); 10 | adviceEl.innerHTML = `"${data.slip.advice}"` 11 | adviceNoEl.innerHTML = `Advice #${data.slip.id}` 12 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Advice Generator App 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

17 |
18 | line 20 | 24 |
25 |
26 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Google Font */ 2 | @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;800&display=swap"); 3 | 4 | /* Root */ 5 | :root { 6 | /* Color Palette */ 7 | --light-cyan: hsl(193, 38%, 86%); 8 | --neon-green: hsl(150, 100%, 66%); 9 | --grayish-blue: hsl(217, 19%, 38%); 10 | --dark-grayish-blue: hsl(217, 19%, 24%); 11 | --dark-blue: hsl(218, 23%, 16%); 12 | } 13 | 14 | /* Base */ 15 | *, 16 | *::after, 17 | *::before { 18 | margin: 0; 19 | padding: 0; 20 | box-sizing: border-box; 21 | } 22 | 23 | body { 24 | font-family: "Manrope", sans-serif; 25 | min-height: 100vh; 26 | background-color: var(--dark-blue); 27 | font-weight: 800; 28 | } 29 | 30 | .quote-container { 31 | background-color: var(--dark-grayish-blue); 32 | max-width: 450px; 33 | padding: 2rem; 34 | margin: 2rem; 35 | text-align: center; 36 | display: flex; 37 | justify-content: center; 38 | flex-direction: column; 39 | align-items: center; 40 | border-radius: 10px; 41 | position: relative; 42 | } 43 | 44 | .advice-no { 45 | font-size: 10px; 46 | color: #ec3e09; 47 | text-transform: uppercase; 48 | letter-spacing: 2px; 49 | margin-bottom: 20px; 50 | } 51 | 52 | #advice { 53 | font-size: 18px; 54 | color: var(--light-cyan); 55 | letter-spacing: 1px; 56 | line-height: 1.5; 57 | margin-bottom: 20px; 58 | } 59 | 60 | .separator { 61 | width: 100%; 62 | margin-bottom: 20px; 63 | } 64 | 65 | #advice-btn { 66 | background-color: var(--neon-green); 67 | border: none; 68 | outline: line; 69 | width: 50px; 70 | height: 50px; 71 | display: grid; 72 | place-items: center; 73 | border-radius: 50%; 74 | position: absolute; 75 | bottom: -25px; 76 | cursor: pointer; 77 | transition: all 0.2s ease; 78 | user-select: none; 79 | } 80 | 81 | #advice-btn:hover { 82 | box-shadow: 0 0 8px 1px var(--neon-green); 83 | } 84 | 85 | #advice-btn:active { 86 | animation: roll 0.2s; 87 | } 88 | 89 | @keyframes roll { 90 | 0% { 91 | transform: rotate(-30deg); 92 | } 93 | 94 | 100% { 95 | transform: rotate(0); 96 | } 97 | } 98 | 99 | .attribution { 100 | color: var(--light-cyan); 101 | position: fixed; 102 | bottom: 2%; 103 | margin: 0 2rem; 104 | text-align: center; 105 | } 106 | 107 | .attribution a { 108 | color: var(--light-cyan); 109 | } 110 | 111 | .attribution a:hover { 112 | color: var(--neon-green); 113 | text-decoration: none; 114 | } 115 | 116 | .cent { 117 | display: flex; 118 | flex-direction: column; 119 | justify-content: center; 120 | align-items: center; 121 | } 122 | 123 | .static_page .item-post h1.post-title { 124 | display: none; 125 | } --------------------------------------------------------------------------------