Looking to hire developers?
@justEfere
@Saad-Hisham
Submitted
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.
@justEfere
Posted
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.
Marked as helpful
@CesjhoanFeliu
Submitted
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!
@justEfere
Posted
In the boton.addEventListener("click", (e) => { e.preventDefault(); }
add this to the beginning the form from automatically submiting data
Marked as helpful
@MatiasVignola
Submitted
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
@justEfere
Posted
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.
Marked as helpful
@fernandolapaz
Submitted
@justEfere
Posted
I'll really love to know how you got the size so precise.
@Anthvirus
Submitted
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
@justEfere
Posted
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);
@SOU-code
Submitted
Can any fix my mobile view problem?
@justEfere
Posted
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.
@Ralphdany
Submitted
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.
@justEfere
Posted
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
Marked as helpful
@sorin7345
Submitted
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 :)
@justEfere
Posted
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/
@douglas-yokomizo
Submitted
I don't know how to make the blue hover effect on the image
@justEfere
Posted
This link should help you achieve the overlay hover effect https://www.w3schools.com/howto/howto_css_image_overlay.asp
@YannickMukeng
Submitted
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 :)
@justEfere
Posted
if you are using google font icon for the cart.. use font-size to increase the size of the icon.
@justEfere
Submitted
I do have to practice more on CSS media queries. Please, I'm open to suggestions. Thank you.
@justEfere
Posted
I appreciate your suggestions, most especially on using a grid in place of flex. Thank you very much.
