#63 Notify user when trying to create a lesson with no notes

[edXmO]

Hi ! It's been a while, I'm sorry for not working on this before. I've been quite busy but found some time today and got something done.

• Created a new style for the input title element to handle the invalid use case on form submit.
• The addLesson function, now also checks for the content of input title element and replaceschanges the styling if content is invalid.
• Took some time with the tooltip thingy, I was just fiddling around a bit with a span tag element and ::after pseudo-element to create a custom tooltip. Let me know if it needs a different styling, I'm not sure about the overall size and font-size so I'd appreciate feedback.
• Another important question about the tooltip is the positioning. I realized that in lower screen sizes (and in the 900px media query) the positioning of the tooltip along with the clear button is a little off. I guess the answer is moving the tooltip somewhere else, but I'm not sure where to. I'd appreciate feedback on that too.

I think that's all for now, I'll be around to fix the changes on the positioning if needed. Thanks!

[jrobind]

Thanks for this, hope you're well! Glad to have you back contributing 😄

It's looking good! I've left some comments mainly regarding whether we should just stick with the native HTML tooltip validation? Either way, we want to keep your tooltip CSS code because we will need this going forward.

Ideally, once the CSS has been refactored into SCSS we would have a tooltip component so we could reuse this code there.

Let me know your thoughts!

[jrobind]

I wonder if maybe we're better off sticking with the native HTML form validation? i.e. by using the required attribute. I think this code is still useful though and we shouldn't remove it. We will need tooltips at some point (we probably need them for the lesson tags).

Because we have some positioning issues on smaller screen sizes I wonder if we just leave the native HTML validation tooltip to do its job. What do you think?

[edXmO]

Sure I think that's the best option. I'll remove everything but the CSS code in regards to the custom tooltip and fix the issue with the required attribute instead.

[jrobind]

If we decided to remove the tooltip for the form validation we can keep the CSS but just remove the logic and markup for it.

[jrobind]

This check could also be !lessonTitle

[edXmO]

Got it!

[jrobind]

This is fine, but when setting borders it can cause some layout shifting. box-sizing: border-box; means that padding and border are included in the width and height of an element. We could try using outline instead and see how that looks? I haven't tested it so it might look terrible.

[edXmO]

I'll test it out maybe it does look better.

[jrobind]

Also, I forgot to mention, in future can you please create a new branch before raising a pull request.

If you need some guidance, please follow the process outlined in this article: https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github

Thanks 😃

[edXmO]

Also, I forgot to mention, in future can you please create a new branch before raising a pull request.

If you need some guidance, please follow the process outlined in this article: https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github

Thanks 😃

Sure, I'll create a new branch when addressing issues. Sorry for the inconvenience.

[jrobind]

Also, I forgot to mention, in future can you please create a new branch before raising a pull request.
If you need some guidance, please follow the process outlined in this article: https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github
Thanks 😃

Sure, I'll create a new branch when addressing issues. Sorry for the inconvenience.

Thanks! No need to set up a new branch for these changes, just remember for future PR's 😄