Skip to content
OverviewSolutions
33
Comments
5
Rom
@RomWeb3

All comments

  • Rom•780
    @RomWeb3Posted almost 2 years ago

    Hey,

    Nice work mate,

    I see that i can upVote and downVote as many times as i want.

    You should probably set a limit to one upVote & one downVote. Also user shouldn't be able to vote below 0.

    I've added 3 conditions in my handleScoreChange function to make this work.

    Hope it helps. Happy coding :)

    0
  • Ronald Sayre•260
    @RJ3605Submitted almost 2 years ago

    This one took me a while because I stepped away from the project due to an issue with my browser guard and the API website. I eventually used a different browser to sidestep the issue. I also found that Visual Studio Code has an issue where it loads your live site zoomed in to 150%, which caused me to build the page with too small of font. I'm fixing it over time, but I wanted to upload my solution since it is functional now.

    The fetchWrapper.js is a overkill for this project, but I like using it because I am familiar with it.

    Any feedback is always welcome. I had an issue with reassigning the text for the "Copy" buttons. It changes to "Copied" when clicked, but for some reason I was having trouble changing the text back. Eventually I just ended up using a .forEach() to change all of them back to "Copy" before changing the text of the selected one to "Copied". Another issue I ran into was not realizing I did not have to Post, only Get, but that was due to me not understanding how the API actually worked.

    URL Shortening API Project Using Basic HTML, CSS, and JS

    1
    Rom•780
    @RomWeb3Posted almost 2 years ago

    Hey, For the Copy button, you can use a setTimeout to automatically go back to the original copy button with the delay you want. On my code below i switch back to original button after 2s.

    Example :

     copyBtn.addEventListener("click", () => {
  clipboard(shortenUrl.innerHTML);
  copyBtn.classList.add("active");
  copyBtn.textContent = "Copied!";
  setTimeout(() => {
    copyBtn.classList.remove("active");
    copyBtn.textContent = "Copy";
 }, 2000);

    });

    For the social icons on footer, it's not loading, you can use https://fontawesome.com/icons it's really nice and easy to use

    Marked as helpful
    1
  • Rom•780
    @RomWeb3Posted almost 2 years ago

    Hey, You can use Flex-wrap to do the responsive on this one. Check this site to fully learn Flexbox : https://flexboxfroggy.com/

    BTW, you should add some padding left & right.

    0
  • Rom•780
    @RomWeb3Posted over 2 years ago

    Hey Great work mate ! There is a problem between 720px & 600px You could start you Media Query Breakpoint at 720 px instead of 600px and it will fix the issue :)

    Marked as helpful
    0
  • ThaBeanBoy•230
    @ThaBeanBoySubmitted over 2 years ago

    I am unsure about the mobile breakpoint, is it strictly supposed to be 375px? because I adjusted it to 550px. I did this because The card would overlap the window screen between 375 and 550px. I hope this isn't bad practice

    Mainly used Flexbox

    1
    Rom•780
    @RomWeb3Posted over 2 years ago

    "I am unsure about the mobile breakpoint, is it strictly supposed to be 375px? " Not strictly, use breakpoints where needed. In your case you could change it to 700px BTW Feel free to check my Solution, it's far from perfect but it's not bad i think.

    Marked as helpful
    0