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

finished back of card for mobile, added blur to javascript to remove the focus effect

This commit is contained in:
Robert McGovern 2022-10-27 22:52:21 +01:00
parent 594cc89fa3
commit eb4b2dbefb
2 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
projects/FrontendMentor/newbie/interactive-rating-component/css/style.css
View File

@ -77,9 +77,9 @@ body {
background: var(--col-background-component); background: var(--col-background-component);
border-radius: var(--border-radius); border-radius: var(--border-radius);
/* margin: 0 1.5rem; */ /* margin: 0 1.5rem; */
padding: 24px 24px 32px 24px;
} }
.rating-component-front { .rating-component-front {
padding: 24px 24px 32px 24px;
} }
.star-icon { .star-icon {
@ -226,21 +226,22 @@ body {
.rating-component-back { .rating-component-back {
/* display: none; */ /* display: none; */
padding: 34px 24px 37px 24px; padding: 24px 24px 37px 24px;
text-align: center; text-align: center;
} }
.thank-you-img { .thank-you-img {
margin-top: 0px; margin-top: 10px;
width: 50%;
} }
.rating-component__rating { .rating-component__rating {
margin-top: 1.5rem; margin-top: 24px;
/* margin-inline: 45px; */ margin-inline: 55px;
font-size: var(--fs-body); font-size: var(--fs-body);
/* line-height: var(--lh-body); */ line-height: var(--lh-body);
color: var(--col-orange); color: var(--col-orange);
border-radius: 22.5px; border-radius: 22.5px;
@ -253,7 +254,7 @@ body {
} }
.rating-component__body-submitted { .rating-component__body-submitted {
margin-top: 10px; margin-top: 14px;
} }
@media screen and (min-width: 62.5rem) { @media screen and (min-width: 62.5rem) {

15
projects/FrontendMentor/newbie/interactive-rating-component/js/script.js
View File

@ -1,5 +1,6 @@
const form = document.getElementById("ratingForm"); const form = document.getElementById("ratingForm");
const ratingSpan = document.getElementById("ratingSpan"); const ratingSpan = document.getElementById("ratingSpan");
const buttonSubmit = document.getElementById("buttonSubmit");
const frontSection = document.getElementById("rating-component-front"); const frontSection = document.getElementById("rating-component-front");
const backSection = document.getElementById("rating-component-back"); const backSection = document.getElementById("rating-component-back");
@ -17,8 +18,18 @@ form.addEventListener(
ratingSpan.innerText = output; ratingSpan.innerText = output;
//hide first section, make second section visible //hide first section, make second section visible
frontSection.classList.add("hidden"); if (output != "") {
backSection.classList.remove("hidden"); frontSection.classList.add("hidden");
backSection.classList.remove("hidden");
} else {
/*
Blur is used to remove the focus from the button that
we prevent from working because the user didn't select
a rating. Should probably add an error message, even
though its not in the design spec.
*/
buttonSubmit.blur();
}
//use a transition effect, plus a reduced motion version //use a transition effect, plus a reduced motion version
event.preventDefault(); event.preventDefault();