Hi there🙋♂️, I really enjoyed solving this. Here is what I found difficult:
Making the height of every div dynamic: I discovered that it's determined by multiplying the amount in the JSON file by "2.86478227655". This was a bit challenging for me, especially since I'm more familiar with working in React rather than vanilla JavaScript. Nonetheless, it was a good challenge, and any feedback is welcome.
to actually get the exact dynamic height. You need to find what percent is the .json amount value to the total height of the chart div.. for example. if the total height of the div is 200px, and the .json amount is 23.4. you then need to find 23.4% of 200 and use the value as fill value for the div.
${(23.4/100)*200}px will give you the exact height for any div and make it dynamic.
I hope this was helpful.
Hey, I need some advice on how to better understand the function parameters in JavaScript, it's a bit confusing for me, I would still be very grateful, happy coding!
In the boton.addEventListener("click", (e) => { e.preventDefault(); }
add this to the beginning the form from automatically submiting data
Hello....this is my solution to the challenge, but I need help with a part of the script, since it is not working for me and I cannot see the error
hello, you can use this solution:
<div class="form-group"> <input type="text" name="firstname" placeholder="First Name"> <span class="err-icon">!</span> <span class="err-msg">firstname cannot be empty</span> </div>for the css You can use css positioning to position the err-icon and err-message within the form-group div and also set their property to visibility: "hidden".
for the js select err-icon and err-message and when displaying errors, set their visibility to visible.
I'll really love to know how you got the size so precise.
I need help, using two different images over same area for two different devices and adding color to the image. Please help me access the project and tell me your suggestions. Thanks
Check below for the code that can correct that. However, I think you need to work on making it responsive.
.image-card { background: linear-gradient(hsl(277, 64%, 61%, 40%), hsl(277, 64%, 61%, 40%)), url(image-header-desktop.jpg);
Can any fix my mobile view problem?
Hope this will be helpful. before writing your css, ensure to add this code to reset padding, margin, and box-sizing. This will help you to get the width and height size properly without issues.
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
The container has a background color. Remove it
.container { background: hsl(244, 38%, 16%);
Here's a tip. You can use display: flex on the .main-content with flex-direction: column to have a constant spacing between items.
.main-content { display: flex; flex-direction: column;
I'll stop here.
I had some difficulties while adjusting the responsiveness of the webpage. If possible I will like to have some explanations on how to set the responsiveness of a web page.
You did great and it's responsive. My approach is mobile first and then desktop and here's how to make it responsive.
@media screen and (min-width: 425px){ } @media screen and (min-width: 768px){ } @media screen and (min-width: 1024px){ } @media screen and (min-width: 1440px){ } @media screen and (min-width: 2560px){ }
The last one 2560px is optional, but I have to with the type of laptop I use
Hello, World! :)
My main problem solving this challenge was the shade that appears over the picture on the right side, any solution would be much appreciated :D.
Of course, any piece of advice or feedback is welcomed as to how I could improve certain aspects in writing my own code. Thanks to anyone willing to spare a few moments to leave a short recommendation or advice.
As always, big thumbs up for the community :)
Hello, you did really great with the result, and here are a few corrections I'll like to point out. You are using the wrong html semantic element. the whole component can be in the <body></body>, a <main></main> or a container div (<div class="container"></div>) as you did. The use of <footer> for the image is wrong, as it can only be used for the footer aspect of the content which there is none here. With that out of the way, Here is the possible way you can implement the color shade over the image.
the image can be set as background value e.g CSS: footer { background: url(image-link); } if that is used, then you can overlay the color over the image by using two background property. see below
footer { background: color, url(image-link); }
or using
footer { background-image: color, url(image-link); }
You can also set a linear-gradient color property value using this. To read more about this, check the link below.
https://css-tricks.com/tinted-images-multiple-backgrounds/
I don't know how to make the blue hover effect on the image
This link should help you achieve the overlay hover effect https://www.w3schools.com/howto/howto_css_image_overlay.asp
This challenge went more smoothly. I have just one question: How can I make my "icon-cart" an element of my text in the button so that it moves when I adjust the text? I also don't know how to make the icon look smaller? Thanks a lot :)
if you are using google font icon for the cart.. use font-size to increase the size of the icon.
I do have to practice more on CSS media queries. Please, I'm open to suggestions. Thank you.
I appreciate your suggestions, most especially on using a grid in place of flex. Thank you very much.
