Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
4

Revin

@revin212Indonesia280 points

Front End Web Development Enthusiast

I’m currently learning...

HTML, CSS (SASS, Tailwind), JavaScript (React JS, Express JS, Gatsby, Next JS )

Latest solutions

  • IP Address Tracker with Vanilla JS and Tailwind

    #tailwind-css

    Revin•280
    Submitted over 2 years ago

    0 comments
  • REST Countries API with Color Theme Switcher, React JS and Tailwind

    #react#tailwind-css#react-router

    Revin•280
    Submitted over 2 years ago

    1 comment
  • URL Shortening API Landing Page with React JS and Tailwind CSS

    #react#tailwind-css#fetch

    Revin•280
    Submitted over 2 years ago

    1 comment
  • Calculator App with Tailwind, Vanilla JS

    #tailwind-css#theme-ui

    Revin•280
    Submitted over 2 years ago

    0 comments
  • Advice Generator App with Tailwind and Vanilla JS

    #tailwind-css

    Revin•280
    Submitted over 2 years ago

    1 comment
  • NFT Preview Card with Tailwind

    #tailwind-css

    Revin•280
    Submitted over 2 years ago

    1 comment
View more solutions

Latest comments

  • JAILBREAK•60
    @JAILBREAK-101
    Submitted over 2 years ago

    MY OWN ADVICE GENERATOR WITH JS AND API.

    #accessibility#fetch
    1
    Revin•280
    @revin212
    Posted over 2 years ago

    Hello, congrats on completing the project!

    I noticed on the 'preview site', I can only click the dice button once to load the advice content. After that, when I click the button again, the content doesn't change at all.

    I found this problem too before, and I solved it with:

    fetch(url, {cache: "no-store"})
    

    After I assign the second parameter on the fetch function, the problem is solved for me. I found that solution from here.

    I hope it can help you

    Marked as helpful
  • Alexander M•60
    @DunderAlexander
    Submitted over 2 years ago

    Advice App made with React

    #react#vite
    2
    Revin•280
    @revin212
    Posted over 2 years ago

    Hello there, congrats for completing the challange!

    I noticed that you can't click the dice button quickly to change the advice text, it have some delay. To reduce the delay, use :

    {cache: "no-store"}
    

    as the fetch function second argument :

    fetch('https://api.adviceslip.com/advice', {cache: "no-store"})
    

    It will make the fetched data not stored to the browser's cache

    I hope that helps you!

    Marked as helpful
  • Nsimba Domingos•400
    @nsimba15
    Submitted over 2 years ago

    flexbox

    2
    Revin•280
    @revin212
    Posted over 2 years ago

    Hello there, congrats for completing the challange!

    I noticed that you make the advice quotes manually by yourself, not fetching the data from the API. So I'll give you the script for fetching the data, and sowing it on the webpage :

    const adviceId = document.getElementById('advice-id');
    const adviceText = document.getElementById('advice');
    const diceBtn = document.getElementById('dice-btn');
    
    let id = 0;
    let advice = "";
    
    function displayAdvice(){
        let dataFetch = fetch('https://api.adviceslip.com/advice', {cache: "no-store"})
            .then((response) => response.json())
            .then((data) => {
                id = data.slip.id;
                advice = data.slip.advice;
                adviceId.innerText = `Advice #${id}`;
                adviceText.innerText = `"${advice}"`;
            });
    }
    displayAdvice();
    
    diceBtn.addEventListener('click', ()=> {
        displayAdvice();
    })
    

    You can set the id of each element that used here :

    id='advice-id' for the title (in your case, the p tag)

    id='advice' for the content (in your case, the div tag with 'content' class)

    id='diceBtn' for the dice button (in your case, the div tag with 'dice' class)

  • Endo_hr•60
    @EndoHr
    Submitted over 2 years ago

    Product-preview-card-component

    4
    Revin•280
    @revin212
    Posted over 2 years ago

    Hello, nice job for finishing the project!

    You can center the card using "display: flex" on your body tag, "justify-content: center", and "align-items: center".

    use width:50% for the image and the description, and then, set the card max-width to 500px. Your problem is, the image and description didnt fill all the space (100%) of the div "cart" class.

    for the border-radius problem, this might help you:

    use "overflow: hidden;" on the card element (in your case, the div "cart" class).

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub