/frontend-mentor-base-apparel

Primary LanguageJavaScript

Frontend Mentor - Base Apparel coming soon page solution

This is my solution to the Base Apparel coming soon page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Receive an error message when the form is submitted if:
    • The input field is empty
    • The email address is not formatted correctly

Screenshot

Mobile

Desktop

Links

My process

Built with

  • HTML5, CSS
  • Mobile-first workflow
  • React
  • Tailwind

What I learned

The first thing I learned was how to control the deg of a linear gradient with TailwindCSS. In the tailwind.config.js file I define what I want the gradient to look like. Then call that gradient where needed.

theme: {
    extend: {
      backgroundImage: {
        'gradient-150': 'linear-gradient(150deg, #FFF 0%, #FFF4F4 100%);'
      }}}
<div id='contentWrapper' className='pt-8 pb-[92px] bg-gradient-150 h-full'>

Using the rgba color model you are able to change the opacity with the last value. This project called for the opacity of the border color to be 50%. I was able to set it to that value on initial load with Tailwind using this code:

<div id="formContainer" className='flex items-center justify-between border border-solid border-darkPink/[.50] rounded-[28px] bg-transparent'>

If the data as incorrectly entered then a new border color is shown. From here if a vaild email is then submitted I needed to revert all changes back to the original state. I used this code to get the opacity back to 50%:

        const formContainer = document.getElementById('formContainer');
        const clearText = document.getElementById('email');
        const warningContainer = document.getElementById('warningContainer');

        errorDiv.innerHTML = '';
        setNewError(errorDiv.innerHTML);
        clearText.value = ''
        warningContainer.style.display = 'none'
        formContainer.style.borderWidth = '1px'
        formContainer.style.borderColor = 'rgba(206, 152, 152, 0.5)'

Author