Skip to content
OverviewSolutions
9
Comments
6

Juan122113

@Juan122113140 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Opeoluwa•290
    @opeoluwa7
    What are you most proud of, and what would you do differently next time?

    I learnt how to design a responsive website without depending too much on media queries, that’s dope haha

    Tips calculator app with html css and js

    1
    Juan122113•140
    @Juan122113

    Hi! Good job! It looks nice and it works fine too.

    Some details that I can suggest:

    • The logo, in some screen sizes, it don't look good, it looks off-center. Maybe is better to put the SVG logo instead.
    • The JS code it repeats in some parts, maybe you can do a refactoring to arrange that.

    I think that's it. Keep it going, and happy coding.

  • moses ayodele•150
    @mowzayo
    What are you most proud of, and what would you do differently next time?

    using flex box

    What challenges did you encounter, and how did you overcome them?

    how to use json was troublesome

    What specific areas of your project would you like help with?

    the json part

    css grid mainly

    1
    Juan122113•140
    @Juan122113

    Hi! Respect to the JSON part that you ask for help, here's the JSON part of my code:

    fetch('./data.json')
    .then(response => response.json())
    .then(data => {
        times = data;
        updateButtonStates(dayBtn);
        updateContent("daily");
    })
    .catch(error => console.error('Error:', error));

    This JavaScript code uses the Fetch API to fetch data from a local JSON file and then update the content of a web page. Here's a detailed explanation:

    1. fetch('./data.json'): Uses the fetch function to make an HTTP GET request to the data.json file located in the same folder as the current JavaScript file (indicated by ./).

    2. .then(response => response.json()): This then method is executed when the fetch request is successfully resolved. The function response => response.json() takes the response and converts it into a JSON object.

    3. .then(data => {...}): This second then method is executed when the JSON object is ready for use. Within the {...} block, three main tasks are performed:

      • times = data;: Assigns the retrieved data stored in the data object to a variable named times.
      • updateButtonStates(dayBtn);: A call to a custom function that updates the states of buttons on the web page, taking dayBtn as a parameter.
      • updateContent("daily");: A call to another custom function that updates the content of the web page with daily data, passing the value "daily" as a parameter.

    4. .catch(error => console.error('Error:', error)): This catch method is executed when an error occurs in the fetch request or in any of the then operations. In case of an error, the function error => console.error('Error:', error) prints an error message in the browser console.

    In summary, the code fetches data from a JSON file, processes it as a JSON object, and then updates the content and button states on the web page. If any errors occur, an error message is printed in the console.

  • Juan122113•140
    @Juan122113

    Hi! Very interesting work! Especially the JS. I was having the same problems with the font, I fix it in this way:

    @font-face {
    font-family: "Roboto regular";
    src: url('../fonts/Roboto-Regular.ttf');
}

@font-face {
    font-family: "Roboto Bold";
    src: url('../fonts/Roboto-Bold.ttf');
}

    These are relative routes. The ../ it means "go one level up of the directory". If you put one dot only ./ that means that it stay in the same folder. I hope this is helpful for you.

  • cassiopeia•410
    @cassiopeia001
    What challenges did you encounter, and how did you overcome them?

    i had issues with positioning the share bubble on mobile screens.

    Article Preview Component

    1
    Juan122113•140
    @Juan122113

    Well done! If you take off the margin bottom of the card, the design and your work will match perfectly. And if I'm not wrong, if you add an if else in the js script, you can show and unshown the "share bubble".

  • Juan122113•140
    @Juan122113

    It look good! I liked because you stick to the design. But i found that in the mobile view, the feedback containers has a different margin top, that its not like in the design, maybe you do it for a purpose?

  • Isabela Fernanda•190
    @Isabela-Fernanda
    What are you most proud of, and what would you do differently next time?

    PT

    Eu acho que a parte do mobile ficou boa

    EN

    I think the mobile part was good

    What challenges did you encounter, and how did you overcome them?

    PT

    Demorou muito para fazer a parte do CSS

    EN

    It took a long time to do the CSS part

    What specific areas of your project would you like help with?

    PT

    Eu gostaria de feedbacks de como melhorar o css deste projeto, mais expecificamente na parte de @media(min-width: 1024px), que eu acho que não ficou tão boa. Também aceito feedbacks sobre qualquer outro ponto que possa ser melhorado.

    EN

    I would like feedback on how to improve the css of this project, more specifically in the @media(min-width: 1024px) part, which I think is not so good. I also accept feedback on any other points that can be improved.

    Huddle landing page responsiva com grid e flex

    1
    Juan122113•140
    @Juan122113

    Hi Isabela. I found that, for the design and the solution be the same, the background-size must be changed to contain, and the background-position to left.