This is my sixth challenge in the newbie category.
As for positioning and lay-out i think I understand it clearly than before. But this are still some part that I find confusing. That is when to use em, rem and px. I always set the margin and padding to be in px but as for the font-size, i set it to be em. provided that the body element is set by 1rem. It will be much appreciated if someone can guide me on when to use this units of measurement.
Choosing the appropriate unit of measurement can have a significant impact on the responsiveness and accessibility of your website.
Here's a quick rundown of when to use each unit:
px (pixels): This unit of measurement is fixed and doesn't scale with the user's browser settings. It's best used for elements with fixed dimensions, such as borders, images, or icons.
em : This unit of measurement is relative to the font-size of the parent element. It's commonly used for font-size and line-height because it allows for responsive scaling. When using em, keep in mind that it's relative to the parent element's font-size, so nesting multiple elements can lead to unpredictable font sizes.
rem : This unit of measurement is similar to em, but it's relative to the font-size of the root element, which is typically the html element. This means that rem is not affected by the font-size of parent elements, making it more predictable and easier to use for layout and sizing.
In general, it's best to use relative units like em and rem for font-size, line-height, and other layout properties, as they allow for more responsive and accessible designs. For fixed dimensions like borders or images, use px.
It's also worth noting that using relative units for layout can make it easier to implement accessibility features like zooming and increasing text size, as the layout will adapt to the user's preferences.
Hello,
It was my first project using udeEffect hook. Its fetching two times the advise object and I don't figure out why. Someone can help me?
Hey Leandro! 👋
Amazing job completing the challenge! Your solution looks amazing!
Now to answer your query , The reason why your code is fetching the advice object twice is because of the initial value of the get state variable which is set to 1.
When the component mounts, the useEffect hook is triggered, sending a GET request to the specified URL and updating the data state variable with the response data. This also triggers a re-render of the component.
When the component re-renders, the get state variable is incremented by 1 with setGet(c => c + 1). This causes the useEffect hook to run again, triggering another GET request to the API and another update to the data state variable, followed by another re-render.
To fix this, you can set the initial value of the get state variable to 0. This will cause the useEffect hook to only run once on the initial mount of the component, and not on subsequent re-renders. Here's the updated code snippet
const [get, setGet] = React.useState(0); // set initial value to 0
This project does not present too many difficulties, but it is helpful to practice requests. One of the things that I would have liked to be able to do is that every time the button is clicked, new advice is generated instead of always showing the same one. If anyone knows how to do that I would love to learn how to do it. Greetings
Hey Galache👋!
Congratulations on successfully completing this challenge. Your solution looks amazing!
Now to answer you query , To generate new advice every time the button is clicked, you can modify the JavaScript code as follows:
const id = document.querySelector('h1');
const advice = document.querySelector('p');
const dice = document.querySelector('.dice');
function generateAdvice() {
fetch(`https://api.adviceslip.com/advice`)
.then(response => response.json())
.then(data => {
console.log(data.slip.id);
console.log(data.slip.advice);
id.textContent = `Advice #${data.slip.id}`;
advice.textContent = `"${data.slip.advice}"`;
})
.catch(error => console.error(error));
}
dice.addEventListener('click', generateAdvice);
// generate advice on page load (optional)
generateAdvice();
Here, we define a new function generateAdvice() that fetches advice from the API and updates the HTML with the new advice. We then attach this function to the button's click event listener.
Finally, we call generateAdvice() once when the page loads to generate the initial advice. This step is optional
With this modification, every time the button is clicked, a new advice will be fetched and displayed on the page.
Hope this helps. Do let me know if it works!
Hello there!
I managed to do the challenge pretty fine I think, however I do have some questions!
1- When I was trying to copy the design and was watching the images that come on the folder to guide you, I couldn't quite get the exact size that I should go for. For example, on the image of the folder, the 375px layout looked way smaller than on my browser's dev tools, so it was harder to actually match the sizes of the boxes. Besides, I didn't know what height to use on the dev tools to guide me.
2- I had some trouble trying to resize the img of the users (the circle ones, that are on the bottom squares). I used the "vw" measurement to let it be flexible, but it doesn't seem the appropriate way to do it, since when I make the screen smaller on the dev tools, it just looks really weird, even though than on the 1400px and 375px are just fine, but I would like the design to look ok on all the screen sizes.
3- Another responsive design question that I have is that the letters on the square containers of the bottom, when resizing the screen to a less px-width one, the letters just don't fit the box and get out of it from the bottom (that's why I made the query on 1200px, because at that point it started to look kind of bad). Seems like the solution is to give the letters or all the content inside the box a way to automatically fit on the box and resize accordingly, how could I do that?
4- Did I do the background ok?
That's all, thanks!
It sounds like you may be encountering some difficulty in accurately determining the size of elements on your webpage. One possible solution is to use a tool like a browser extension that allows you to measure elements on your page more precisely. Some popular options include Perfect Pixel, and MeasureIt. Additionally, it may be helpful to consult the design specifications or style guide for the project to ensure that you are using the correct dimensions and measurements.
Using viewport units (vw) can be a helpful way to make elements on your page more flexible and responsive to different screen sizes. However, it is important to ensure that your design still looks good at smaller sizes, as you mentioned. One possible solution is to use media queries to adjust the size of the images and other elements at different screen sizes. For example, you might use a media query to reduce the size of the images and adjust their placement on smaller screens.
To ensure that the content within your square containers remains visible and readable at all screen sizes, you may want to consider using responsive typography techniques. This could include using relative units like em or rem instead of fixed pixel sizes for text, as well as using CSS properties like text-overflow and overflow-wrap to ensure that text within containers behaves in a consistent and predictable way. Additionally, you could consider using responsive design frameworks like Bootstrap that include pre-built components and styles for responsive typography.
I used the below code within my function to apply the scores to the HTML elements. It works but i wanted to see if there another method I should have used?
Thank you and I appreciate any feedback!
//Apply the scores to the HTML elements:
if(scoreArray !== null){
reactionNum.innerText = scoreArray[0];
memoryNum.innerText = scoreArray[1];
verbalNum.innerText = scoreArray[2];
visualNum.innerText = scoreArray[3];
totalScore.innerText = Math.floor((
scoreArray[0] +
scoreArray[1] +
scoreArray[2] +
scoreArray[3]) / 4);
}
Hey Stacy!
The method you have used to apply the scores to the HTML elements looks perfectly fine. There are a few alternative methods you could use, but they may not necessarily be better than what you already have.
One alternative method is to use the textContent property instead of innerText. This is because textContent is faster and safer to use, especially when dealing with user-generated content or special characters.
Another alternative is to use a loop to iterate over the scoreArray and update the corresponding HTML elements. This may be useful if you have a large number of elements to update, but for the four elements you have in your code, the current method is perfectly fine.
Here is an example of how you could use a loop:
const scoreElements = [reactionNum, memoryNum, verbalNum, visualNum];
scoreArray.forEach((score, index) => {
scoreElements[index].innerText = score;
});
totalScore.innerText = Math.floor(scoreArray.reduce((total, score) => total + score) / scoreArray.length);
In this example, we first create an array of the score elements to update. We then use forEach to loop over the scoreArray and update the corresponding element. Finally, we calculate the total score using reduce and update the totalScore element.
Hope this feedback helps!!
This was a pain in a half to complete but I did it either way the most annoying part was some countries weren't made equal some have no neighbors countries some no capital etc. so on some countries the styling is bit off. If you have any way to improve my JS or CSS or how to some good practices for coding or structure my app pls tell me
Hello, Tien! You did an amazing job finishing the assignment!
Here are some ideas I believe you may use to enhance the user interface. . Add some space between your material to give the contents a chance to breathe xD. . It would be a nice idea to include buttons that navigate to that specific country's border. country . Check out my solution if you need inspiration. . Overall, an excellent effort! Bravo for all your effort!
