diff --git a/images/icon-dice.svg b/images/icon-dice.svg new file mode 100644 index 0000000..c43bdd9 --- /dev/null +++ b/images/icon-dice.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/pattern-divider-desktop.svg b/images/pattern-divider-desktop.svg new file mode 100644 index 0000000..1442839 --- /dev/null +++ b/images/pattern-divider-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/pattern-divider-mobile.svg b/images/pattern-divider-mobile.svg new file mode 100644 index 0000000..5827785 --- /dev/null +++ b/images/pattern-divider-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..9bfe900 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + AO Advice Generator Frontend Mentor + + + + + +
+
+

+ +
+ + + card separator + +
+ +
+
+ + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..25604ed --- /dev/null +++ b/index.js @@ -0,0 +1,20 @@ +const cardQuoteNumber = document.querySelector(".card-quote-number"); +const cardQuote = document.querySelector(".card-quote"); +const cardButton = document.querySelector(".card-button"); + +const RandomAdvice = async () => { + const response = await fetch(" https://api.adviceslip.com/advice"); + const data = await response.json(); + renderQuote(data.slip); +}; + +const renderQuote = (quote) => { + cardQuoteNumber.innerHTML = `ADVICE #${quote.id}`; + cardQuote.innerHTML = quote.advice; +}; + +cardButton.addEventListener("click", () => { + RandomAdvice(); +}); + +RandomAdvice(); diff --git a/math.js b/math.js deleted file mode 100644 index c623afe..0000000 --- a/math.js +++ /dev/null @@ -1,9 +0,0 @@ -// sum is intentionally broken so you can see errors in the tests -const sum = (a, b) => a - b -const subtract = (a, b) => a - b - -// these are kinda pointless I know, but it's just to simulate an async function -const sumAsync = (...args) => Promise.resolve(sum(...args)) -const subtractAsync = (...args) => Promise.resolve(subtract(...args)) - -module.exports = {sum, subtract, sumAsync, subtractAsync} diff --git a/package.json b/package.json index 8a49d6d..ec2a715 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,21 @@ { - "name": "js-testing-fundamentals", + "name": "ao-advice-generator-frontendmentor", "version": "1.0.0", - "description": "A repo for my JavaScript Testing Fundamentals course", + "description": "", + "main": "index.html", "scripts": { - "test": "jest" + "start": "parcel index.html --open", + "build": "parcel build index.html" + }, + "dependencies": { + "scss": "0.2.4" }, - "keywords": [], - "author": "Kent C. Dodds (http://kentcdodds.com/)", - "license": "MIT", "devDependencies": { - "jest": "^23.1.0" - } + "parcel-bundler": "^1.6.1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/arnaudouttier/advice-generator-frontendmentor.git" + }, + "keywords": [] } diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..ea8f77d --- /dev/null +++ b/style.scss @@ -0,0 +1,110 @@ +// Colors +$light_cyan: hsl(193, 38%, 86%); +$neo_green: hsl(150, 100%, 66%); +$grayish_blue: hsl(217, 19%, 38%); +$dark_grayish_blue: hsl(217, 19%, 24%); +$dark_blue: hsl(218, 23%, 16%); + +// Fonts +@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&display=swap'); +$primary_font: 'Manrope', sans-serif; + +// Sizes + +$size_1 : 0.25rem; // 4px +$size_2 : 0.5rem; // 8px +$size_3 : 0.75rem; // 12px +$size_4 : 1rem; // 16px +$size_5 : 1.25rem; // 20px +$size_6 : 1.5rem; // 24px +$size_7 : 2rem; // 32px +$size_8 : 2.5rem; // 40px +$size_9 : 3rem; // 48px +$size_10 : 4rem; // 64px + +$card_padding : clamp(40px, calc(2.5rem + ((1vw - 3.75px) * 3.1515)), 45px) clamp(24px, calc(1.5rem + ((1vw - 3.75px) * 3.1515)), 50px); +$card_button_padding : $size_5; + +// Global + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.btn{ + border: 0; + background: transparent; + cursor: pointer; +} + +img{ + width: 100%; + height: auto; +} + +body{ + width: 100%; + height: 100vh; + font-family: $primary_font; + background-color: $dark_blue; + color: $light_cyan; +} + +#app{ + width: inherit; + height: inherit; + display: grid; + place-items: center; +} + +.card{ + width: min(95vw, 536px); + background-color: $dark_grayish_blue ; + border-radius: $size_3; + text-align: center; + padding: $card_padding; + position: relative; + + -webkit-box-shadow: 13px 14px 35px -7px rgba(0,0,0,0.56); + -moz-box-shadow: 13px 14px 35px -7px rgba(0,0,0,0.56); + box-shadow: 13px 14px 35px -7px rgba(0,0,0,0.56); +} + + +.card-quote-number{ + font-size : $size_3; + letter-spacing: $size_1 ; + font-style: italic; + color: $neo_green; + margin-bottom: $size_6; +} + +.card-quote{ + font-size: 28px; + font-weight: 700; +} + +.card-separator{ + margin: $size_6 0; + +} + +.card-button{ + position: absolute; + bottom: 0; + transform: translate(-50%, 50%); + left: 50%; + border-radius: 50%; + padding: $card_button_padding; + background-color: $neo_green; + transition: box-shadow .3s ease; + + &:hover{ + -webkit-box-shadow: 0px 0px 31px 1px $light_cyan ; + -moz-box-shadow: 0px 0px 31px 1px $light_cyan ; + box-shadow: 0px 0px 31px 1px $light_cyan ; + } +} +