This is a solution to the Newsletter sign-up form with success message challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Add their email and submit the form
- See a success message with their email after successfully submitting the form
- See form validation messages if:
- The field is left empty
- The email address is not formatted correctly
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Solution URL: frontendmentor.io/solutions/newsletter-signup-form-with-success-message-solution-scss-E8avuEpASC
- Live Site URL: frontendmentor-signup-newsletter.netlify.app
- Semantic HTML5 markup
- CSS custom properties
- SCSS
- Flexbox
- CSS Grid
- I learned that I can't use scss variables directly to the :root selector in css but there is a way which I discovered.
- I learned that I can hide a whole section by using window.addEventListener targeting the
load
event - To see how you can add code snippets, see below:
@use "../utils" as util;
:root {
--primary-color: #{util.$primaryColor};
--secondary-color: #{util.$secondaryColor};
--tertiary-color: #{util.$tertiaryColor};
--grey-color: #{util.$greyColor};
--another-color: #{util.$anotherColor};
}
window.addEventListener("load", (event) => {
successContainer.style.display = "none";
});
If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.
I also watched the full tutorial of Coder Coder, for me to familiarize the basic and fundamentals of SCSS.
I will definitely should focus learning vanilla javascript and SCSS since I'm new to SCSS in order for me to be proficient of it and for future technical interviews.
- Imagecolorpicker - This helped me for getting the exact color to be used in the project. I really liked how convenient it is to grab the colors of an image.
- MDN Web Docs - Helped me a lot finding the right terms and usage of events in javascript and also css properties to declare.
- ChatGPT - Helped me with some vanilla javascripting since I forgot already what I learned back when I was studying javascript.
- Website - Junaire Edris Buico
- Frontend Mentor - @jun-edris
- LinkedIn - Junaire Edris Buico