All solutions

How to add border-radius property to a Chart.js chart? The plot area is fussy when the view as resized. How to fix that?

I tried different ways to stylish this chart, but I couldn't figure out how.. Can someone please give me a direction?

I've never used TailwindCSS before. In my opinion, this is a great opportunity to try this out. At first, I found it very confusing. I had the help of the youtuber Thomas Sankara, who is great, by the way. He did the challenge and I followed his code with slightly alterations. At the end, I could see the benefits of this approach and I will try doing another challenge with it in the future.

Oh my god, what a challenge this was! This one was, by some margin, the hardest one I did so far. To figure out the design and the Javascript logic in it was very hard for me. I know this was is not perfect, but I had to post it in order to ask for opinions. Here are some of the main problems/concerns I had:

• How to accept only one space in cardholder name field

• How to show the correct card number format (with spaces in the card number field)

• I am not sure if I am using the right patterns for letters and numbers. I noticed that, in the number’s fields, its accepting "-1" or "-", for instance. I tried correcting it with Math.abs(), but it’s not working well..

• There is an inconvenient error in the function verifyInput (id ‘month’ and id ‘year’), where the error message is not being displayed correctly to the user. It is probably because they are in the same div. Is there a way to fix it without changing the HTML?

• I tried restricting the input length for the numbers type input, but I couldn't with input type "number" (with min and max attributes), so I used input type "text" instead. I added maxlength to it and it worked. Is there another or a better way of doing it?

I think I am getting the hang of it =)

I just couldn't figure out how to adjust the last 3 notifications as the rest of the layout. Its a little bit funky. Can someone please help me see what is wrong?

I had some problems with this challenge. Can someone please help me with it?

I couldn't figure out how to change the inside color of the svg icon. Can someone please tell me how to do it? I created a triangle to conect the share button to the tooltip. Is there another way to do it?

How do I correct the submit button of the form to be better adjusted to the mobile view perspective?

I would like to know how to replicate one particular image several times inside a single div.

I know that there is a better solution for placing the images in the card container. It will be very helpful if someone could point out where I did wrong or share your code with me.

I don't know why I couldn't use the width as 100% of the button in the card-2. The button just overflew it, so I had to use a 92%, wich I know its not recommended.

I had another issue regarding the h4 tag of the card-1. I separated the two tags, according to the given layout, but when I went to the mobile view perspective, both were not as the refered layout. So, I switched the display of the h4 to inline, so it could be placed in the same line. However, I don't know how to give a line high for an inline element. So, I left it as was.

I would like to know if there is a way to inherit the background-color of a parent element in other attribute of another child class. Is there a way that this can be done only with CSS?

I am feeling way more confortable in replicating the desktop version of the challange, but the responsivness is not that good..I would like to know where I can find a good material about media queries and responsive layout.

This one was the easiest one so far. I think I am getting better in this =) The hardest part was, again, centering and positioning the images and elements. The image overlay in the hovering effect was also tricky.

I would like to know how to place the selected rating number in a variable in order to use it in another part of the application. I tried using a function and a "for" command, but I couldn't extract and store the choosen rating number.

I know it's not perfect and that I did a lot of mistakes, but I hope this is ok. Maybe a grid approach would be better for this type of project.

• Where can I find a good material about displays?

• I would really like to receive feedbacks on it. I am still learning how to better use Bootsrap and all its features. In this project, I had a huge amount of trouble in figuring out how what was the best display parameter to use for centering the card. If someone could explain or inform me where I can learn more about it, I will be very thankfull.

• I know I made several mistakes in this project. Feedbacks would be much appreciated and it will help me keeping improving myself.

The most dificult part for me was to place the container in the middle of the viewport. I did it using "display:flex" with "align-items:center" in the body section along with "margin: 0 auto" in the container. The rest of the CSS code was simply designed parameters to match the requested result.