Hello. I’d like an assessment for my work on Advanced Form Styling 1. I have yet to tackle tasks 2 and 3 at the time of posting.
Here’s a link to my code: https://codepen.io/wruther/pen/KKJvMXP
And here’s a link to the assessment page: https://developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Advanced_styling
Notes:
-
I’m new to CodePen and GitHub. I assume that since you make the .png file freely available for download on your GitHub repository, it’s not copyrighted. Therefore, I can either somehow access the file from your repository in my CodePen, or probably better, upload a copy into my own and access it from there. But I want to make certain of that before doing anything with it. In the meantime, I’ll just go with the alt text.
-
I tested the code in Firefox, Opera, and Edge. I don’t have macOS, so I can’t test it with Safari.
-
For #3, the only feature the native styling was providing, as far as I could tell, is a subtle change in border color when hovering over the box. Is there something else I missed?
-
I felt free to change the HTML to accomplish the assessment’s goals. For #6, the easiest and most sensible way I could think of to attach the .png file was to code it directly into the HTML div.
-
I went further and made a stab at making the cancel functionality and button styling consistent across browsers. Admittedly, there are several flaws in what I did:
-
The button doesn’t appear or disappear until a key is released. I wanted the key to do its thing first, then be processed in the event handler. I figured it would work better with keyup than with keydown.
-
When the search box is full, the text extends beneath the button. That could be fixed by keeping the button outside of the box, but I was going for much the same look and feel as the native styling.
-
Hitting Enter to submit the search term doesn’t work at all when there’s another input in the form.
-
Hitting Enter submits everything when there are multiple forms on the page, not just the search term.
-
I started this course a few months ago, and it’s been an interesting journey so far. I should have done this years ago.