Skip to content
OverviewSolutions
6
Comments
8
Icekid35
@Icekid35

All comments

  • Icekid35•260
    @Icekid35Posted over 2 years ago

    Hello there Nice work 👏👏

    The reason it keeps reload is because you are calling location.reload() method another way to generate the advice without reloading is to modify your script from •{ fetch("https://api.adviceslip.com/advice").then((response) => { response.json().then((json) => {

            titleAdvice.innerText = `ADVICE #${json.slip.id}`;
        advice.innerText = `" ${json.slip.advice}"`;
    });
    btn.addEventListener('click', function() {
        window.location.reload();

    })
});

    }•••••••• To ••••••••••{ fetch("https://api.adviceslip.com/advice").then((response) => { response.json().then((json) => {

            titleAdvice.innerText = `ADVICE #${json.slip.id}`;
        advice.innerText = `" ${json.slip.advice}"`;
    });
    btn.addEventListener('click', function() {
        fetch("https://api.adviceslip.com/advice").then((response) => {
    response.json().then((json) => {

        titleAdvice.innerText = `ADVICE #${json.slip.id}`;
        advice.innerText = `" ${json.slip.advice}"`;
    });

    })

        })
});

    }•••••• or you can just wrap it in another function like this ••••••••••••{ function Regenerate(){ fetch("https://api.adviceslip.com/advice").then((response) => { response.json().then((json) => {

            titleAdvice.innerText = `ADVICE #${json.slip.id}`;
        advice.innerText = `" ${json.slip.advice}"`;
    });

    } °°°°°°°°°°then call the function like this °°°°°° btn.onclick=Regenerate }••••••••• ALSO TO GET RID OF THE ACCESSIBILITY ISSUES WRAP ALL YOUR ELEMENT IN A MAIN TAG 😉•••••

    0
  • Icekid35•260
    @Icekid35Posted over 2 years ago

    Nice work 👏👏 Especially the loading animation Just a few tips: •increase the margin top to make it look more identical(optional) •increase the padding (top and bottom) for each of your element Aside that bravo👏 good job

    0
  • Icekid35•260
    @Icekid35Posted over 2 years ago

    Bravo👏👏 Nice work To get rid of the html issue - you can replace your 'display__current ' element with an h1 element instead of a div

    Marked as helpful
    1
  • Icekid35•260
    @Icekid35Posted over 2 years ago

    Amazing work 👏 To get rid of some accessibility issues ensure you wrap all the element in your body tag with a<main</main> tag😉

    Marked as helpful
    1
  • Icekid35•260
    @Icekid35Posted over 2 years ago

    Awesome work👏

    To get rid of some of the accessibility issues wrap all the element in your body tag with <main></main>

    0
  • Icekid35•260
    @Icekid35Posted over 2 years ago

    Awesome work💯

    Let me put a little tip in the tip jar🤓

    To clear the accessibility issues :-

    • Wrap your entire component in a <main></main> Tag • wrap your score in an <h1></h1> tag

    And to make your animation cooler

    I think you should show make the 'play again' button (including win lose and tie ) show up after what the house picked has showed up;-)

    Stunning animations by the way ^_^

    0
  • Icekid35•260
    @Icekid35Posted over 2 years ago

    Cool project 👏👏 To make the design look closer • Increase the top margin • increase the width and height of the place where the numbers show up (probably x2) • increase the padding,gap and width of the box where all the buttons are • add effects to all the buttons onhover •remove the outline on all the buttons to make you work more cool •ensure your third theme-setter is working properly

    Aside from those amazing work 👏👏👏

    Marked as helpful
    0
  • Felipe Barroso Abdo•50
    @felipeabdoSubmitted over 2 years ago

    That´s my first attempt to this challenge using what I know to the moment, with this chaotic non-optimized (but commented) code lol!

    If anyone can give me tips on how to improve my code, that would be awesome!

    Things I wanna implement (but I don't know how yet):

    • Speech bubbles caming from the bottom, and keep scrolling up, like in a regular app chat;

    • When I click on the dog photos, they will be shown in fullscreen;

    • When it's the cell phone owner's turn to write, it simulates a text being written in the text-area of ​​the input;

    • When it's the other person's turn to write, let the three dots appear in animation and the phrase ("person" is typing);

    • When Speech bubbles apears, a sound will be played;

    • A button inside the app menu to restart the animation.

    Any help and ideas will be very welcome!

    Animated Chat Mobile App with CSS

    1
    Icekid35•260
    @Icekid35Posted over 2 years ago

    Awesome work👏 I got just a few observations:

    To remove the html error simple replace the div element inside the button to a span element

    And to reduce the accessibility issues Wrap all the element in the body tag with a <main></main> tag

    Hope this was helpful to u

    Marked as helpful
    0