Issue
I try to create project on frontendMentor and have an issue. When i complete the form and click button element form doesnt hide. There are many new lines and this element is on the bottom. What is the problem? Code:
const cardName = document.querySelector('.name');
const cardNumber = document.querySelector('.number');
const cardMonth = document.querySelector('.month');
const cardYear = document.querySelector('.year');
const cardCode = document.querySelector('.code');
const btn = document.querySelector('.button');
const resultName = document.querySelector('.card__name');
const resultNumber = document.querySelector('.header__cards-number');
const resultExpiry = document.querySelector('.card__expiry');
const resultCvv = document.querySelector('.header__cvv');
const summary = document.querySelector('.summary');
const form = document.querySelector('.form');
// const resultDate = document.querySelector();
btn.addEventListener('click', function () {
resultName.innerHTML = cardName.value;
resultNumber.innerHTML = cardNumber.value;
resultExpiry.innerHTML = `${cardMonth.value}/${cardYear.value}`;
resultCvv.innerHTML = cardCode.value;
summary.classList.remove('hidden');
form.classList.add('hidden');
});
$white: hsl(0, 0%, 100%);
$lightGrayishViolet: hsl(270, 3%, 87%);
$darkGrayishViolet: hsl(279, 6%, 55%);
$veryDarkViolet: hsl(278, 68%, 11%);
$red: hsl(0, 100%, 66%);
$linearGradient: hsl(249, 99%, 64%) to hsl(278, 94%, 30%);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 18px;
font-family: 'Space Grotesk', sans-serif;
height: 100vh;
width: 100%;
max-width: 375px;
display: flex;
flex-direction: column;
font-weight: 500;
}
.header {
flex-basis: 35%;
background-image: url('../images/bg-main-mobile.png');
&__card {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 150px;
border-radius: 0.5em;
}
&__cards {
&-back {
position: relative;
margin-top: 1.5em;
margin-left: 3em;
background-color: $white;
}
&-front {
display: flex;
flex-direction: column;
position: absolute;
background-image: url('../images/bg-card-front.png');
color: $white;
top: 117px;
left: 15px;
z-index: 10;
overflow: hidden;
padding: 1em 1em;
}
&-logo {
flex-basis: 50%;
width: 100%;
svg {
text-align-last: left;
margin-left: -1em;
transform: scale(0.5);
}
}
&-number {
flex-basis: 20%;
width: 100%;
text-align: center;
letter-spacing: 2px;
}
&-details {
width: 100%;
flex-basis: 30%;
display: flex;
justify-content: space-between;
align-items: flex-end;
text-align: center;
font-size: 0.7em;
letter-spacing: 2px;
text-transform: uppercase;
}
}
&__magneticbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
margin-top: 1em;
background-color: #333;
}
&__cvv {
width: 80%;
height: 30px;
text-align: right;
padding-right: 1em;
background-color: $lightGrayishViolet;
line-height: 30px;
border-radius: 0.2em;
color: $white;
font-size: 0.7em;
color: $white;
letter-spacing: 2px;
}
.content {
flex-basis: 65%;
}
}
.content {
flex-basis: 65%;
padding: 1em;
.description {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.7em;
text-align: left;
color: $veryDarkViolet;
margin-bottom: 0.3em;
}
.form {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
text-align: center;
&__item {
width: 100%;
margin-bottom: 0.5em;
input {
width: 100%;
height: 3em;
border-radius: 0.3em;
border: 1px solid $lightGrayishViolet;
}
input::placeholder {
font-size: 1.3em;
color: $lightGrayishViolet;
}
}
&__row {
display: flex;
.form__item {
input {
width: 23%;
text-align: center;
}
.code {
width: 50%;
}
span {
margin-left: 2em;
}
}
}
&__button {
width: 100%;
height: 3em;
margin-top: 1em;
margin-bottom: 2em;
line-height: 3em;
background-color: $veryDarkViolet;
color: $white;
border-radius: 0.5em;
}
}
}
.summary {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
&__icon {
margin: 2em 0;
}
&__text {
h1 {
text-transform: uppercase;
letter-spacing: 3px;
}
p {
color: $darkGrayishViolet;
margin: 1em 0;
}
}
&__button {
margin-top: 2em;
background-color: lime;
}
}
.hidden {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<title>Frontend Mentor | Interactive card details form</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div class="header">
<div class="header__cards">
<div class="header__card header__cards-back">
<div class="header__magneticbar"></div>
<div class="header__cvv">000</div>
</div>
<div class="header__card header__cards-front">
<div class="header__cards-logo">
<svg
width="84"
height="47"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<ellipse
cx="23.478"
cy="23.5"
rx="23.478"
ry="23.5"
fill="#fff"
/>
<path
d="M83.5 23.5c0 5.565-4.507 10.075-10.065 10.075-5.559 0-10.065-4.51-10.065-10.075 0-5.565 4.506-10.075 10.065-10.075 5.558 0 10.065 4.51 10.065 10.075Z"
stroke="#fff"
/>
</svg>
</div>
<div class="header__cards-number">0000 0000 0000 0000</div>
<div class="header__cards-details">
<div class="card__name">Jane Appleseed</div>
<div class="card__expiry">00/00</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="summary hidden">
<div class="summary__icon">
<svg
width="80"
height="80"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="40" cy="40" r="40" fill="url(#a)" />
<path
d="M28 39.92 36.08 48l16-16"
stroke="#fff"
stroke-width="3"
/>
<defs>
<linearGradient
id="a"
x1="-23.014"
y1="11.507"
x2="0"
y2="91.507"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#6348FE" />
<stop offset="1" stop-color="#610595" />
</linearGradient>
</defs>
</svg>
</div>
<div class="summary__text">
<h1>Thank you!</h1>
<p>We've added your card details</p>
</div>
<div class="form__button summary__button">Continue</div>
</div>
<div class="form">
<div class="form__item">
<div class="description">Cardholder Name</div>
<input
type="text"
name="name"
id="name"
class="name"
placeholder=" e.g. Jane Appleseed"
/>
</div>
<div class="form__item">
<div class="description">Card Number</div>
<input
type="text"
name="number"
id="number"
class="number"
placeholder="e.g. 1234 5678 9123 0000"
maxlength="19"
/>
</div>
<div class="form__row">
<div class="form__item">
<div class="description">
Exp. Date (MM/YY)<span>CVC</span>
</div>
<input
type="text"
name="month"
id="month"
class="month"
placeholder="MM"
maxlength="2"
minlength="2"
/>
<input
type="text"
name="year"
id="year"
class="year"
placeholder="YY"
maxlength="2"
minlength="2"
/>
<input
type="text"
name="code"
id="code"
class="code"
placeholder="e.g. 123"
minlength="3"
maxlength="3"
/>
</div>
</div>
<div class="form__button button">Confirm</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
I know that my code is bad but i dont use any tutorials and hints.
Solution
Because of specificity.
In your SASS(?) your .form
is nested inside .content
which when compiled looks something like this .content .form { ...
and this has higher specificity than .hidden
, so make it more specific to override or use !important
:
.content .form {
display: flex;
height: 80px;
background-color: lightblue;
}
.hidden {
display: none;
}
/* More specific */
.content .form.super-hidden {
display: none;
}
/* Using !important */
.important-hidden {
display: none !important;
}
<div class="content">
<div class="form">I am visible to the world</div>
</div>
<br /><br />
<div class="content">
<div class="form hidden">Why am i not hidden?</div>
</div>
<br /><br />
<div class="content">
<div class="form super-hidden">I am definitely hidden</div>
</div>
<br /><br />
<div class="content">
<div class="form important-hidden">I am definitely hidden</div>
</div>
Answered By - Bqardi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.