Good overview, but sad that the markup is total junk and you've got the scripting blocking in the HEAD instead of attaching itself before </body> like a good little doobie. Much like the lack of a proper media target on the stylesheet LINK.
The endless pointless classes for nothing certainly aren't helping either.
But seriously... where's your FIELDSET to tell non-visual UA's which input are of import? Where's your LABEL to tell non-visual UA's what the fields actually mean....
For the love of Christmas, PLACEHOLDER is NOT a flipping LABEL... and the artsy fartsy know-nothings who try to use it as such need a quadruple helping of sierra tango foxtrot uniform.
The CSS isn't exactly a winner either, particularly the use of 'grid for nothing" inside a flex layout.
And of course the lack of scripting off graceful degradation is kind of shoddy too. That the scripting only tags are static in the markup isn't doing it any favors either for non-screen users.
I mean, it would be ok for a full stack application in something like Electron, but if you made this web facing as part of a normal site, say hello to accessibility violations galore. Between the broken/incomplete markup and scripting methodology, it's got problems. Not insurmountable ones, but still...
Also kind of a wonk you have the heading and paragraph describing the form outside the form, and "main for nothing" since there's nothing for it to distinguish the content from.
You've missing a good deal of the important details AND the big picture.