@Juan122113
@mowzayo
Submitted
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
@Juan122113
Posted
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:
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 ./).
.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.
.then(data => {...}): This second then method is executed when the JSON object is ready for use. Within the {...} block, three main tasks are performed:
.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.
@Manuelcoder02
Submitted
The CSS gave me some hard time. I'm unsure of the fonts displayed
@Juan122113
Posted
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.
@cassiopeia001
Submitted
What challenges did you encounter, and how did you overcome them?
i had issues with positioning the share bubble on mobile screens.
@Juan122113
Posted
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".
@xStephx
Submitted
@Juan122113
Posted
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
Submitted
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.
@Juan122113
Posted
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.
