Initial commit

alpe12 · Oct 9, 2023 · 35ede33 · 35ede33
commit 35ede33
Show file tree

Hide file tree

Showing 11 changed files with 353 additions and 0 deletions.
diff --git a/advice-generator-app/README.md 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');
+```
diff --git a/advice-generator-app/index.html b/advice-generator-app/index.html
@@ -0,0 +1,37 @@
+<!-- https://veiled-package-bfe.notion.site/1-Exerc-cio-HTML-CSS-Avan-ado-5a2ab6bc2dba4dd488bc369235d749b2 -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Advice generator app</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@800&display=swap" rel="stylesheet"> 
+    <link rel="stylesheet" href="./src/css/style.css">
+    <link rel="shortcut icon" href="./src/images/favicon-32x32.png" type="image/x-icon">
+    <script src="./src/js/script.js" defer></script>
+</head>
+<body>
+    <main>
+        <div class="card">
+            <h2 class="advicenumber">Advice #<span class="number">134</span></h2>
+            <blockquote class="advicetext" cite="https://api.adviceslip.com/"><span>The person who never made a mistake never made anything.</span></blockquote>
+            <div class="divider">
+                <picture>
+                    <source srcset="./src/images/pattern-divider-mobile.svg" media="(max-width: 380px)">
+                    <img src="./src/images/pattern-divider-desktop.svg" alt="">
+                </picture>
+            </div>
+            <button class="button">
+                <img class="dice" src="./src/images/icon-dice.svg" alt="">
+            </button>
+        </div>
+    </main>
+    <footer class="attribution">
+        Challenge by <a href="https://www.frontendmentor.io/challenges/advice-generator-app-QdUG-13db" target="_blank">Frontend Mentor</a>.
+        Coded by <a href="https://github.com/alpe12">Douglas Pessoa</a>.
+    </footer>
+</body>
+</html>
diff --git a/advice-generator-app/src/css/style.css 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;
+    }
+}
diff --git a/advice-generator-app/src/images/favicon-32x32.png b/advice-generator-app/src/images/favicon-32x32.png
diff --git a/advice-generator-app/src/images/icon-dice.svg b/advice-generator-app/src/images/icon-dice.svg
diff --git a/advice-generator-app/src/images/pattern-divider-desktop.svg b/advice-generator-app/src/images/pattern-divider-desktop.svg
diff --git a/advice-generator-app/src/images/pattern-divider-mobile.svg b/advice-generator-app/src/images/pattern-divider-mobile.svg
diff --git a/advice-generator-app/src/images/screenshot.png b/advice-generator-app/src/images/screenshot.png
diff --git a/advice-generator-app/src/js/script.js b/advice-generator-app/src/js/script.js
@@ -0,0 +1,22 @@
+async function newAdvice (){
+    const dice = document.querySelector('.card .button .dice');
+
+    //Não fazer um novo request, caso já tenha um sendo feito.
+    if (dice.classList.contains('animate')) return;
+
+    dice.classList.add('animate');
+    try {
+        const response = await fetch("https://api.adviceslip.com/advice", { cache: "no-store" });
+        const data = await response.json(),
+              adviceNumber = document.querySelector('.card .advicenumber .number'),
+              adviceText = document.querySelector('.card .advicetext span');
+        adviceNumber.innerText = data.slip.id;
+        adviceText.innerText = data.slip.advice;
+    } catch (error) {
+        console.error(error);
+    } finally {
+        dice.classList.remove('animate');
+    }
+}
+
+document.querySelector('.card .button').addEventListener('click', newAdvice);
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Solved FrontendMentor Challenges</title>
+    <link rel="stylesheet" href="./src/css/style.css">
+</head>
+<body>
+    <main class="cards">
+        <div class="card">
+            <a class="imagelink" href="./advice-generator-app/index.html">
+                <img src="./advice-generator-app/src/images/screenshot.png" alt="">
+            </a>
+            <div class="content">
+                <a class="title" href="./advice-generator-app/index.html">
+                    <h2>Advice generator app</h2>
+                </a>
+                <ul class="tags">
+                    <li>HTML</li>
+                    <li>CSS</li>
+                    <li>JS</li>
+                    <li>API</li>
+                </ul>
+                <a href="./advice-generator-app/README.md" class="readme">Details</a>
+            </div>
+        </div>
+    </main>
+</body>
+</html>
diff --git a/src/css/style.css 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;
+}