Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

issue #3 & #4 : error message & confirmation screen ok ! #2

Merged
merged 1 commit into from
Apr 17, 2024
Merged

issue #3 & #4 : error message & confirmation screen ok ! #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,14 +218,13 @@ <h1 class="hero-headline">
value="C'est parti"
/>
</form>
<div class="successModal" >
<h2>Merci pour votre inscription !</h2>
<button class="btn-successModal" aria-label="close modal">Fermer</button>
</div>
</div>
</div>
</div>
<div class="successModal">
<span class="close"></span>
<span class="successMessage">Merci pour votre inscription</span>
<button class="button close">Fermer</button>
</div>
</main>
<footer>
<p class="copyrights">
Expand Down
5 changes: 2 additions & 3 deletions scripts/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { checkInputValue, checkIfLocationSelected, checkIfTermsAccepted, checkIfUserIsOver18, errorMessage, regexName, regexEmail, regexQuantity} from './function.js';
import { closeModal } from './modal.js';
import { closeModal, showSuccessModal } from './modal.js';

// Get the form
const form = document.getElementById('form');
Expand Down Expand Up @@ -49,9 +49,8 @@ function validate(e){

// Validate form
if(isFirstNameValid && isLastNameValid && isEmailValid && isQuantityValid && isBirthdateValid && isLocationValid && isTermsValid){
successModal.style.display = "block";
form.reset();
closeModal();
showSuccessModal();
}

}
Expand Down
2 changes: 0 additions & 2 deletions scripts/function.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,6 @@ export function checkIfUserIsOver18(element, message){
diff = new Date(diff);

const userAge = Math.abs(diff.getUTCFullYear() - 1970);
console.log(userAge);
console.log(birthdate);
// Check if birthYear is realistic...
const currentYear = new Date().getFullYear();
const birthYear = birthdate.getFullYear();
Expand Down
12 changes: 11 additions & 1 deletion scripts/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,17 @@ function editNav() {
const modalbg = document.querySelector(".bground");
const modalBtn = document.querySelectorAll(".modal-btn");
const closeBtn = document.querySelector(".close");
const closeBtnSuccessModal = document.querySelector(".btn-successModal");
const content = document.querySelector(".content");
const successModal = document.querySelector('.successModal');
const form = document.getElementById('form');


// launch modal event
modalBtn.forEach((btn) => btn.addEventListener("click", launchModal));
// close modal event
closeBtn.addEventListener("click", closeModal);
closeBtnSuccessModal.addEventListener('click', closeModal);

// Launch modal form
export function launchModal() {
Expand All @@ -25,9 +30,14 @@ export function launchModal() {
// Close modal form
export function closeModal() {
content.classList.toggle("--hidden");
successModal.classList.toggle("--hidden");
setTimeout(function() {
modalbg.style.display = "none";
}, 500);
}

// On validation success, display success modal
export function showSuccessModal() {
form.style.display = "none";
successModal.style.display = "flex";
}

38 changes: 19 additions & 19 deletions styles/modal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ main {

/* Modal form */

.button {
.button, .btn-successModal {
background: #fe142f;
margin-top: 0.5em;
padding: 1em;
Expand All @@ -149,29 +149,14 @@ main {
font-size: 16px;
}

.button:hover {
.button:hover, .btn-successModal:hover {
background: #3876ac;
}

.smFont {
font-size: 16px;
}
// Modal Success
.successModal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(26, 39, 156, 0.4);
}
.successMessage{
font-size: 1.5rem;
color: white;
}

.bground {
display: none;
position: fixed;
Expand All @@ -184,7 +169,7 @@ main {
background-color: rgba(26, 39, 156, 0.4);
}

.content {
.content, .successModal {
margin: 5% auto;
width: 100%;
max-width: 500px;
Expand All @@ -197,6 +182,20 @@ main {
color: #fff;
padding-top: 10px;
}
.successModal {
display: none;
color: #000;
min-height: 600px ;
text-wrap: pretty;
text-spacing: 1em;
padding: 1em;
color: white;
flex-direction: column;
justify-content: space-evenly;
align-items: center;

gap: 2em;
}
/* Custom style for modal closed */
.--hidden{
animation-name: modalclose;
Expand Down Expand Up @@ -341,6 +340,7 @@ input[data-error]::after {
.close:after {
transform: rotate(-45deg);
}
.btn-successModal,
.btn-submit,
.btn-signup {
background: #fe142f;
Expand Down