From 35ede33f49ce174e2850a9b2cb3781ce372f9431 Mon Sep 17 00:00:00 2001 From: "alpe@pc" Date: Mon, 9 Oct 2023 13:36:38 -0300 Subject: [PATCH] Initial commit --- advice-generator-app/README.md | 54 ++++++++ advice-generator-app/index.html | 37 +++++ advice-generator-app/src/css/style.css | 131 ++++++++++++++++++ .../src/images/favicon-32x32.png | Bin 0 -> 1063 bytes advice-generator-app/src/images/icon-dice.svg | 1 + .../src/images/pattern-divider-desktop.svg | 1 + .../src/images/pattern-divider-mobile.svg | 1 + .../src/images/screenshot.png | Bin 0 -> 21696 bytes advice-generator-app/src/js/script.js | 22 +++ index.html | 30 ++++ src/css/style.css | 76 ++++++++++ 11 files changed, 353 insertions(+) create mode 100644 advice-generator-app/README.md create mode 100644 advice-generator-app/index.html create mode 100644 advice-generator-app/src/css/style.css create mode 100644 advice-generator-app/src/images/favicon-32x32.png create mode 100644 advice-generator-app/src/images/icon-dice.svg create mode 100644 advice-generator-app/src/images/pattern-divider-desktop.svg create mode 100644 advice-generator-app/src/images/pattern-divider-mobile.svg create mode 100644 advice-generator-app/src/images/screenshot.png create mode 100644 advice-generator-app/src/js/script.js create mode 100644 index.html create mode 100644 src/css/style.css diff --git a/advice-generator-app/README.md b/advice-generator-app/README.md new file mode 100644 index 0000000..80b0cb8 --- /dev/null +++ b/advice-generator-app/README.md @@ -0,0 +1,54 @@ +# Frontend Mentor - Advice generator app solution + +This is a solution to the [Advice generator app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/advice-generator-app-QdUG-13db). Frontend Mentor challenges help you improve your coding skills by building realistic projects. + +## Table of contents + +- [Overview](#overview) + - [The challenge](#the-challenge) + - [Screenshot](#screenshot) +- [What I learned](#what-i-learned) + +## Overview + +### The challenge + +Users should be able to: + +- View the optimal layout for the app depending on their device's screen size +- See hover states for all interactive elements on the page +- Generate a new piece of advice by clicking the dice icon + +### Screenshot + +![](./src/images/screenshot.png) + +## What I learned + +Ignore cache on Fetch request: +```js +{ cache: "no-store" } +``` + +Sometimes the advice received from API has words between quotation marks. I made the main quotation marks bigger, colored and centered to differentiate: +```css +.card .advicetext::before, +.card .advicetext::after { + display: inline; + vertical-align: bottom; + color: hsl(150, 100%, 66%);; + font-size: 2em; + top: .2em; + position: relative; + line-height: 38px; +} +``` +Animate the dice when a request is being made: +```css +.card .button .dice.animate { + animation: rotate 800ms linear infinite; +} +``` +```js +dice.classList.add('animate'); +``` \ No newline at end of file diff --git a/advice-generator-app/index.html b/advice-generator-app/index.html new file mode 100644 index 0000000..cb178d7 --- /dev/null +++ b/advice-generator-app/index.html @@ -0,0 +1,37 @@ + + + + + + + + Advice generator app + + + + + + + + +
+
+

Advice #134

+
The person who never made a mistake never made anything.
+
+ + + + +
+ +
+
+ + + \ No newline at end of file diff --git a/advice-generator-app/src/css/style.css b/advice-generator-app/src/css/style.css new file mode 100644 index 0000000..fa660b6 --- /dev/null +++ b/advice-generator-app/src/css/style.css @@ -0,0 +1,131 @@ +* { + margin: 0; + padding: 0; +} + +body { + background-color: hsl(218, 23%, 16%); + font-family: 'Manrope', sans-serif; + font-weight: 800; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +main { + display: flex; + align-items: center; + justify-content: center; + flex-grow: 1; +} + +.card { + background-color: hsl(217, 19%, 24%); + width: 540px; + min-height: 250px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 40px; + position: relative; + border-radius: 15px; +} + +.card .advicenumber { + color: hsl(150, 100%, 66%); + letter-spacing: 4px; + font-size: 14px; + text-transform: uppercase; +} + +.card .advicetext { + color: hsl(193, 38%, 86%); + font-size: 28px; + text-align: center; +} + +.card .advicetext::before, +.card .advicetext::after { + display: inline; + vertical-align: bottom; + color: hsl(150, 100%, 66%);; + font-size: 2em; + top: .2em; + position: relative; + line-height: 38px; +} +.card .advicetext::before { + content: open-quote; + padding-right: 5px; +} +.card .advicetext::after { + content: close-quote; + padding-left: 5px; +} + +.card .divider { + margin-top: 1.5rem; + margin-bottom: 1rem; + width: 100%; +} + +.card .divider img { + width: 100%; +} + +.card .button { + position: absolute; + bottom: 0; + transform: translateY(50%); + background-color: hsl(150, 100%, 66%); + width: 60px; + height: 60px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + cursor: pointer; + border: none; +} + +.card .button:hover, +.card .button:focus-visible { + box-shadow: 0 0 40px hsl(150, 100%, 66%); +} + +.card .button .dice { + vertical-align: center; + width: 25px; + height: 25px; +} + +.card .button .dice.animate { + animation: rotate 800ms linear infinite; +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.attribution { + background-color: hsl(217, 19%, 24%); + color: hsl(193, 38%, 86%); + text-align: center; + margin-top: 40px; + padding: 0.8em 0; +} +.attribution a { + color: hsl(150, 100%, 66%); +} + +@media (max-height: 480px) { + .attribution { + padding: 0.2em 0; + } +} \ No newline at end of file diff --git a/advice-generator-app/src/images/favicon-32x32.png b/advice-generator-app/src/images/favicon-32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..1e2df7f089f46dd930239e418bf13e8e4c1cca0f GIT binary patch literal 1063 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyEa{HEjtmSN`?>!lvVtU&J%W50 z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+081EY0-Plzi}!G9Wnr(eF` z|M+F+!xzhMK3;zF(cgdn_B?v|`rD7+fB)V2@MY=EN9|{BEWPpQ{f}RtfBl|!^+Ea3 z%d2iZe)i@2x9`6{eg66V&!4ULpSPU4KJ)Uu^RM22`~BzO$wz&&PyPA(@7<4I`yRjQ zJAZr1#XB#){D-o5+r^Vjdc3)fsquh@R{^yA;Z|8C!Zw`1zDvzMNK{QUFr z^G~yvU&yK5nOnE3q5ts2d8Z#d`S9=G|MwriU%2{m%ii0owp@Sy>dXGuA$NemCsPvS z7YvLEt(>(tKmBDkpML+hROc(RL;oBPGFiO5x8~1ErS?rgb&N^g?k~Ih+L^ zk;M!Q+`=Ht$S`Y;1W=H@#M9T6{SlWiKeL>x)y)*39#2mf#}JFtt&`J}n+ycniko-@ z3;26vOWyCzeS7I$?C$UX{_kIKV}WAF+24(KRQ;Wbm=(hXgpO=b(eBb|byZ~P5M3dt zyDB-nDx`Zw9LoWN-GrY`kHxRfy}Q3KfBxRdclJCv_%N_mL-x0j+x*I+s%JIY&vgg3Y zTes?8j%DMbh5PocynFBNZJq}$w`Q+tKfe6=^y}tkkv_Zb+uQBmSHB|O-+X(*4%OrO zQF%8%OSj*z`t$7X`oHyz%ReTa40^8r7Z}c}C9V-ADTyViR>?)FK#IZ0z|cb1&_LJF zGQ`l-%D~vl*g)IB$jZQAv*1E06b-rgDVb@NxHTN|kz5AU01WSllAy$Lg@U5|w9K4T zg_6pGRE5lfl4J&kiaC!z@o*G|X=t4CKYhmYX%GXmGPhnbx3IFX_hb=fVFi~4lfx;@ u%9}$JPT#n4;>ejJGDp}?H+U@Y(qnifE?Dx($#g2v3I \ No newline at end of file diff --git a/advice-generator-app/src/images/pattern-divider-desktop.svg b/advice-generator-app/src/images/pattern-divider-desktop.svg new file mode 100644 index 0000000..1442839 --- /dev/null +++ b/advice-generator-app/src/images/pattern-divider-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/advice-generator-app/src/images/pattern-divider-mobile.svg b/advice-generator-app/src/images/pattern-divider-mobile.svg new file mode 100644 index 0000000..5827785 --- /dev/null +++ b/advice-generator-app/src/images/pattern-divider-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/advice-generator-app/src/images/screenshot.png b/advice-generator-app/src/images/screenshot.png new file mode 100644 index 0000000000000000000000000000000000000000..caa5d1987defdc9d7e1107bc4e3fa2aefad050b0 GIT binary patch literal 21696 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 + + + + + Solved FrontendMentor Challenges + + + +
+
+ + + +
+ +

Advice generator app

+ +
    +
  • HTML
    • +
  • CSS
    • +
  • JS
    • +
  • API
    • +
+ Details +
+
+
+ + \ No newline at end of file diff --git a/src/css/style.css b/src/css/style.css new file mode 100644 index 0000000..7b5c945 --- /dev/null +++ b/src/css/style.css @@ -0,0 +1,76 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + min-height: 100vh; + background-color: lightgray; + display: flex; + justify-content: center; + align-items: center; +} + +img { + max-width: 100%; + object-fit: contain; +} + +.cards { + display: grid; + grid-template-columns: repeat(auto-fit, 500px); + justify-content: center; + gap: 2rem; + flex-grow: 1; + padding: 2rem; +} + +.cards .card { + background-color: white; + border-radius: 1rem; + overflow: hidden; + border: 1px solid darkgray; +} + +.cards .card .imagelink img { + min-height: 250px; +} + +.cards .card .content { + margin: 1rem; +} + +.cards .card .content .title { + color: black; + text-decoration: none; +} + +.cards .card .content .title:hover { + text-decoration: underline; +} + +.cards .card .content > .title *, +.cards .card .content > :not(.title) { + margin-bottom: 1rem; +} + +.cards .card .content .tags { + font-weight: bold; + list-style: none; + display: inline-flex; + gap: 1.5ch; + color: darkslategray; +} + +.cards .card .content .readme { + display: block; +} + +.cards .card .content .readme { + text-decoration: none; +} + +.cards .card .content .readme:hover { + text-decoration: underline; +} \ No newline at end of file