tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

near finished state, must redo submit button positioning and add the error icon

This commit is contained in:
Robert McGovern 2022-10-19 23:05:01 +01:00
parent 97711fe4ae
commit aa9a4c5903
4 changed files with 87 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
projects/FrontendMentor/newbie/base-apparel-coming-soon/README.md
View File

@ -86,17 +86,13 @@ Use this section to outline areas that you want to continue focusing on in futur
## Author ## Author
- Website - [Add your name here](https://www.your-site.com) - Website - [Robert McGovern Blog](https://tarasis.net)
- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) - Frontend Mentor - [@tarasis](https://www.frontendmentor.io/profile/tarasis)
- Twitter - [@yourusername](https://www.twitter.com/yourusername) - Twitter - [@tarasis](https://www.twitter.com/tarasis)
**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.**
## Acknowledgments ## Acknowledgments
This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. My thanks to Julio Cinquina on the FEM Slack for correcting my misunderstanding of the `:has` pseudo-class.
**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.**
Initial HTML Initial HTML
```html ```html

84
projects/FrontendMentor/newbie/base-apparel-coming-soon/css/style.css
View File

@ -35,7 +35,7 @@
--gradient-pink-hover: linear-gradient( --gradient-pink-hover: linear-gradient(
135deg, 135deg,
hsl(0, 80%, 86%) 0%, hsl(0, 80%, 86%) 0%,
hsl(0, 76%, 80%) 100% hsl(0, 76%, 90%) 100%
); );
/* Typography */ /* Typography */
@ -63,6 +63,10 @@
--fw-error: var(--fw-400); --fw-error: var(--fw-400);
--col-error: var(--col-primary-soft-red); --col-error: var(--col-primary-soft-red);
/* Sizing */ /* Sizing */
--border-radius: 1.75rem;
--adjustment-left-field-and-error: 1.5rem;
} }
body { body {
@ -79,7 +83,7 @@ main {
} }
.header { .header {
margin: 30px 2rem 2rem 2rem; margin: 1.875rem 2rem 2rem 2rem;
grid-area: "logo"; grid-area: "logo";
} }
@ -108,11 +112,11 @@ main {
font-size: var(--fs-body); font-size: var(--fs-body);
line-height: var(--lh-body); line-height: var(--lh-body);
font-weight: var(--fw-body);
color: var(--col-body); color: var(--col-body);
} }
.hero-picture { .hero-picture {
/* display: block; */
grid-area: "hero-image"; grid-area: "hero-image";
justify-self: end; justify-self: end;
margin: 0 auto; margin: 0 auto;
@ -135,17 +139,19 @@ main {
} }
.email-form__input { .email-form__input {
border: 1px solid var(--col-field); border: 1px solid var(--col-field);
/* border: none; */
width: 40ch; width: 40ch;
font-size: var(--fs-field); font-size: var(--fs-field);
line-height: var(--lh-field); line-height: var(--lh-field);
padding: 10px 0 10px 24px; font-weight: var(--fw-field);
border-radius: 28px; padding: 0.625rem 0 0.625rem var(--adjustment-left-field-and-error);
border-radius: var(--border-radius);
background: inherit; background: inherit;
color: var(--col-neutral-dark-grayish-red); color: var(--col-neutral-dark-grayish-red);
/* background-color: var(--col-primary-desaturated-red); */ }
/* margin-left: 24px; */
.error-border {
border: 1px solid var(--col-error);
} }
::placeholder { ::placeholder {
@ -155,33 +161,38 @@ main {
.email-form__button-submit { .email-form__button-submit {
position: absolute; position: absolute;
padding: 13px 27.1px 13px 28px; padding: 0.8125rem 1.6938rem 0.8125rem 1.75rem;
border-radius: 28px; border-radius: var(--border-radius);
box-shadow: 0px 15px 20px rgba(198, 110, 110, 0.247569); box-shadow: 0px 0.9375rem 1.25rem rgba(198, 110, 110, 0.247569);
background: var(--gradient-pink); background: var(--gradient-pink);
right: 0px; right: 0;
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
.email-form__button-submit:has(:hover, :focus) { .email-form__button-submit:where(:hover, :focus) {
background: red; background: var(--gradient-pink-hover);
} }
.email-form__error-message { .email-form__error-message {
color: var(--col-error); color: var(--col-error);
font-size: var(--fs-error); font-size: var(--fs-error);
font-weight: var(--fw-error);
text-align: left; text-align: left;
margin-left: 24px; margin-left: var(--adjustment-left-field-and-error);
margin-top: 8px; margin-top: 0.5rem;
} }
.error-hidden { .error-hidden {
opacity: 0; opacity: 0;
} }
.error-visible {
opacity: 1;
}
/* Screen Reader only */ /* Screen Reader only */
.visually-hidden { .visually-hidden {
border: 0; border: 0;
@ -196,7 +207,7 @@ main {
white-space: nowrap; white-space: nowrap;
} }
@media screen and (min-width: 1000px) { @media screen and (min-width: 62.5rem) {
:root { :root {
--fs-header: 4rem; --fs-header: 4rem;
--lh-header: 100%; --lh-header: 100%;
@ -209,38 +220,33 @@ main {
--lh-field: 175%; --lh-field: 175%;
--lh-error: 215%; --lh-error: 215%;
--adjustment-left-field-and-error: 2rem;
} }
body { body {
background-color: var(--gradient-white); background: var(--gradient-white);
background-image: url(../images/bg-pattern-desktop.svg);
background-repeat: no-repeat;
background-blend-mode: color;
background-size: auto;
/* background-position: left; */
margin: 0 auto; margin: auto;
} }
main { main {
max-width: 1440px; background-image: url(../images/bg-pattern-desktop.svg);
height: 100%; background-repeat: no-repeat;
max-width: 90rem;
display: grid; display: grid;
/* grid-template-areas: "logo hero-image body"; */
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: 20% 80%; grid-template-rows: 20% 80%;
grid-template-areas: grid-template-areas:
"logo hero-image" "logo hero-image"
"body hero-image"; "body hero-image";
/* grid-auto-rows: auto;
gap: 55px; */
} }
.header { .header {
margin: unset; margin: unset;
align-self: center; align-self: center;
margin-left: 166px; margin-left: 10.375rem;
} }
.logo { .logo {
@ -254,8 +260,8 @@ main {
.body { .body {
margin: unset; margin: unset;
align-items: baseline; align-items: baseline;
margin-top: 72px; margin-top: 4.5rem;
margin-left: 165px; margin-left: 10.3125rem;
text-align: start; text-align: start;
} }
@ -264,7 +270,7 @@ main {
} }
.body__text { .body__text {
margin-top: 18px; margin-top: 1.125rem;
width: 45ch; width: 45ch;
} }
@ -274,11 +280,15 @@ main {
.email-form__input { .email-form__input {
width: 45ch; width: 45ch;
padding: 15px 0 15px 24px; padding: 0.9375rem 0 0.9375rem var(--adjustment-left-field-and-error);
} }
.email-form__button-submit { .email-form__button-submit {
padding: 18px 45.1px 18px 46px; padding: 1.125rem 2.8188rem 1.125rem 2.875rem;
right: 110px; right: 6.875rem;
}
.email-form__error-message {
margin-left: var(--adjustment-left-field-and-error);
} }
} }

8
projects/FrontendMentor/newbie/base-apparel-coming-soon/index.html
View File

@ -51,11 +51,11 @@
Hello fellow shoppers! We're currently building our new fashion store. Hello fellow shoppers! We're currently building our new fashion store.
Add your email below to stay up-to-date with announcements and our launch deals. Add your email below to stay up-to-date with announcements and our launch deals.
</p> </p>
<form class="email-form" action="submit"> <form class="email-form" id="email-form" action="submit" novalidate>
<label class="visually-hidden" for="email">Email</label> <label class="visually-hidden" for="email">Email</label>
<input class="email-form__input" placeholder="Email Address" type="email" name="email" id="email"> <input class="email-form__input" placeholder="Email Address" type="email" name="email" id="email" required>
<button class="email-form__button-submit" type="submit"><img src="images/icon-arrow.svg" <button class="email-form__button-submit" type="submit"><img src="images/icon-arrow.svg" alt="Submit Button">
alt="Submit Button"></button> </button>
<p class="email-form__error-message error-hidden" id="errorMessage">Please provide a valid email</p> <p class="email-form__error-message error-hidden" id="errorMessage">Please provide a valid email</p>
</form> </form>
</section> </section>

32
projects/FrontendMentor/newbie/base-apparel-coming-soon/js/script.js
View File

@ -1,4 +1,36 @@
"uses strict"; "uses strict";
const emailForm = document.getElementById("email-form");
const emailInput = document.getElementById("email"); const emailInput = document.getElementById("email");
const errorMessage = document.getElementById("errorMessage"); const errorMessage = document.getElementById("errorMessage");
emailForm.addEventListener("submit", checkEmailValidity, false);
emailInput.addEventListener("focus", inputFocused, false);
/**
* @param {[Event]} event
*/
function checkEmailValidity(event) {
if (emailForm.checkValidity() === false) {
event.preventDefault();
emailInput.classList.add("error-border");
errorMessage.classList.add("error-visible");
} else {
emailInput.classList.remove("error-border");
errorMessage.classList.remove("error-visible");
}
}
// When an input has focus I remove the error state,
function inputFocused(event) {
/**
* Just for VS Code intellisense
*
* @type {HTMLInputElement}
*/
const input = event.currentTarget;
if (input.classList.contains("error-border")) {
input.classList.remove("error-border");
errorMessage.classList.remove("error-visible");
}
}