If there's anything weird about my solution please let me know :>
Nice work. I liked how you used a background gradient to color the slider. I tried that at first but abandoned it because I couldn't figure out how to resize the thumb without making the track a bigger size. Looks like making it position:relative did the trick for you unless I missed something else?
I think that's a simpler way to solve it than what I did (which was to use a box shadow and clip-path).
Nice work on this. I learned quite a bit by looking at your code. I like how you used restructuring to pull out variables from the API data.
How do you like writing HTML in Javascript files using inner.html. Using querySelector and updating textContent on each node is getting old for me. I'm looking at possibly implementing a lightweight templating language while I keep working with vanilla javascript (and no framework) just to make things a bit quicker and easier updating DOM nodes.
Thoguhts?
Nice work on the app.
My code looks very similar. I had an issue with Firefox where the button (icon) listener doesn't seem to work. Firefox does not generate new data and display it. I didn't have issues with any other browser.
I tried your app in Firefox and you have the same issue. I'm researching it and will let you know if I find out why. Please let me know if you find a solution.
Created this with ChartJS in a few hours. Had to search up alot as I wasn't familiar with this library. Two issues I wasn't able to fix was the location of the tooltip popup location and the centering of the text inside the popup. Hope someone is able to explain to me as to how to fix this. Thanks.
Hi,
Nice job on the project. I'm not sure how the chart library works that you used, but I struggled with centering the tooltip and not having it change the width of the bars. In the example, the tooltip is wider than the individual bars so I didn't want the tooltip to cause the bar to expand
Because of this I positioned the tooltip with position: absolute and use a negative top value to put it above the bar itself.
I hope that helps.
Jackson
I just took a look at your code. Nice job with the validation.
It looks like you used javascript to generate all your error messages and error message classes.
I like to minimize the amount of javascript I have to write and load because it can be expensive to a website.
Did you consider adding the messages in the HTML and then writing a function to hide or display the message based on validation. Same with the CSS classes.
Here's my solution, let me know what you think...
https://jw-credit-card-details-form.netlify.app/
Hello! This is my solution for the bmi calculator challenge! Still working on some parts. It was the first time i've used Tailwind CSS and it is amazing! If You have some suggestion i will really appreciate it!
Have a gooda day!
Nice work with this project. I just finished it as well and used Tailwind CSS. It looks like you're using the CDN to install Tailwind, have you tried using the CLI to build it into your project?
I like how you used body:after for the gradient. I used a grid for the entire hero section and it worked out well, though I had to add "display:contents" for the mobile version in order to get the gradient throughout the hero on mobile and split the gradient and white column on desktop. That was the challenge for me with the layout.
Also - looks like you're still displaying KG in your ideal weight when selecting Imperial so you may want to look at that. Take a look at my code if you'd like.
Nice job on this. I like how you used nested grid to solve the problem. I'll incorporate that in the future.
Check out what I did to make the two-toned logo responsive when you expand and shrink the screen (the black portion always stays in the second (picture) section of the hero). Basically, I took the two logos and put them on top of each other, but the black logo only extends to the end of the first section and it has a higher z-index than the white logo. I used an image mask, but that's not required.
https://jwhiting-art-gallery-home-page.netlify.app/
I positioned the logo and the the text / button absolutely, but in the future, I'll use your technique of a nested grid. I like that much better. Hope it helps!
