My second challenge incompletely completed
For my second challenge with Frontend Mentor, I decided to build a page called Base Apparel coming soon. At my first quick look, it seemed to be easy.
However, I found out soon that there are a lot of small details, which needed to be solved with CSS. And besides it, there was an email input for which I needed to write an email validation using JS. I had no idea how to do it.
Recently, I started to study Sass and I intended to use it at my first opportunity. And the opportunity came just now.
So for this challenge, my main targets were to use Sass and learn how to implement email validation.
For installation of Sass, I used Node.js and npm (Node Package Manager) on the command line. I followed the instructions on how to create package.json and set up my environment for using Sass. I started writing my code and was a little bit confused that my final main.css file is in a different folder than my working main.scss file. It didn’t seem to be practical for me.
In the meantime, I watched youtube videos with some coding tips, and I came across the fact that an extension in VS Code Editor exists called Live Sass Compiler. I installed it and set up my repo again from the beginning. I realized that it’s a better option than my first attempt using Node.js.
When I was writing my page with Sass, I implemented only variables and nesting. I didn’t use mixins, partials or any other features. I will keep this in mind to practice it next time.
My second target was to figure out how the email validation works using JS and it was a tricky one as I have very little experience with JS. After a lot of googling and searching for the solution that will match my needs, I wrote something which partly works, however not 100%. When the input is empty it also submits the form and it’s not correct. I’m not satisfied with it and no one could be.
Finally, when writing this article I found a free course on Udacity which may help me with it. It’s called JavaScript and the DOM. I plan to watch the course and revise my JS code after that.
So, for now, I would call my second Frontend Mentor challenge incompletely completed and waiting for an improvement 🙂