All comments

• 

  Peter Bujaky• 110

  @peterbujaky

  Submitted over 1 year ago

  Any suggestions on how to improve my code is welcome. Thanks!

  

  Advice Generator App (SCSS, JS/Fetch API)

  1

  10

  

  cheg• 380

  @chegx

  Posted over 1 year ago

  Hi @peterbujaky! In Firefox browser the button doesn't work. You can add an option {cache: "no-cache"} to make it return a new piece of advice.

  fetch("https://api.adviceslip.com/advice", {cache: "no-cache"})
  .then(res => res.json())
  .then (data => {
      const advice = data.slip.advice;
      const id = data.slip.id;
      document.getElementById("adviceText").innerHTML = `"${advice}"`;
      document.getElementById("adviceID").innerHTML = `ADVICE #${id}`;
  })
  
  document.getElementById("button").addEventListener("click", () => {
      fetch("https://api.adviceslip.com/advice", {cache: "no-cache"})
      .then(res => res.json())
      .then(data => {
          const advice = data.slip.advice;
          const id = data.slip.id;
          document.getElementById("adviceText").innerHTML = `"${advice}"`;
          document.getElementById("adviceID").innerHTML = `ADVICE #${id}`;
      })
  })
  

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Victor Resines• 110

  @VictorResines

  Submitted almost 2 years ago

  What did you find difficult while building the project?

  Part of the layout with CSS grid properties

  Which areas of your code are you unsure of? I couldn't get the mobile navigation links to be closer to the left edge of the background

  Any feedback is appreciated 😉

  

  Home page using CSS grid, flexbox and with mobile navigation

  1

  50

  

  cheg• 380

  @chegx

  Posted almost 2 years ago

  Hi Victor! You could get the navigation links closer to the left if you remove justify-content: center; and add margin-left to navigation links. Also you can get the same shadow-effect if you add box-shadow instead using backdrop-filter.

    .main-nav {
        background-color: rgb(253, 242, 233); /*remove opacity*/
        box-shadow: -10rem 0 rgb(0, 0, 0, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        transform: translateX(100%);
        display: flex;
        align-items: center;   
        transition: all 0.5s ease-in;
        /* 1) Hide it visually */
        opacity: 0;
        /* 2) Make it unaccesible to mouse and keyboard */
        pointer-events: none;
        /* 3) Hide it from screen readers */
        visibility: hidden;
      }
  
     .main-nav-link:link,  
     .main-nav-link:visited {
        font-size: 1.1rem; */smaller size*/
        margin-left: 2rem;
      }
  

  Marked as helpful

  0
• 

  João Oliveira• 370

  @jvmdo

  Submitted almost 2 years ago

  I've applied max-height: 0 and visibility: hidden then max-height: 10rem and visibility: visible. This way the box is displayed from top to bottom on transition.

  How could I make it to display it from bottom to top using this same hidden/visible technique?

  

  Hidden/visible box transition on button click

  1

  60

  

  cheg• 380

  @chegx

  Posted almost 2 years ago

  Hi JOÃO. You can change the top property to bottom:

  .card-share {
    align-items: center;
    background-color: hsl(217, 19%, 35%);
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    display: flex;
    gap: clamp(1rem, -1.737rem + 11.68vw, 2rem);
    height: 4rem;
    max-height: 0;
    /* overflow: hidden; */
    visibility: hidden;
    padding-inline: 2rem;
    position: absolute;
    bottom: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
  }
  

  The same for Desktop Layout. Remove top property and calculate position from the bottom.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  rash• 50

  @R-CODE01

  Submitted about 2 years ago

  

  flex

  1

  20

  

  cheg• 380

  @chegx

  Posted about 2 years ago

  You can center img without positioning. Put the background image into main so it will act like background and won't interact with img. I commented your old code that you should remove.

  main {
      background-image: url(images/bg-pattern-card.svg);
      background-repeat: repeat-x;
  
  }
  
  /* main .header {
      background-image: url(images/bg-pattern-card.svg); 
      width: 100%; 
      height: 157px;  */
  
  
  main .body {
      text-align: center;
      
      /* position: relative; */
  }
  
  main .body img {
      /* position: absolute; */
      
      border-radius: 50%;
      border: 5px solid white;
      
      /* left: 50%;
      top: -51px;
      transform: translate(-50%); */
      
      margin-top: 90px;
  }
  

  0