diff --git a/home.html b/home.html index 53489c9..69eeda1 100644 --- a/home.html +++ b/home.html @@ -10,20 +10,20 @@ <body> <div id="background-popup-addcard"> <section id="popup-addcard"> - <button id="close-popup-addcard" aria-label="close popup"> + <button id="closer-popup-addcard" aria-label="close popup"> <img src="./assets/close.svg" alt="close popup" aria-hidden="true"> </button> <h2>New Card</h2> - <form id="popup-addcard-form"> + <form id="form-popup-addcard"> <label for="title">Title</label> - <input type="text" id="title" placeholder="Title" name="title"> + <input type="text" id="title-input-addcard" placeholder="Enter an title" name="title"> <label for="username">Username</label> - <input type="text" id="username" placeholder="Username" name="username"> + <input type="text" id="username-input-addcard" placeholder="Enter an username" name="username"> <label for="email">Email</label> - <input type="email" id="email" placeholder="Email" name="email"> + <input type="email" id="email-input-addcard" placeholder="Enter an email" name="email"> <label for="password">Password</label> - <input type="password" id="password" placeholder="Password" name="password"> - <button id="popup-addcard-submit">Add Card</button> + <input type="password" id="password-input-addcard" placeholder="Enter an password" name="password"> + <button id="submit-popup-addcard">Add Card</button> </form> </section> </div> diff --git a/script.js b/script.js index 16807c6..5c6533a 100644 --- a/script.js +++ b/script.js @@ -1,42 +1,48 @@ -const items = document.getElementById('items') -const addItem = document.getElementById('add-item') -const closePopup = document.getElementById('close-popup') -const backgroundPopup = document.getElementById('background-popup') -const popup = document.getElementById('popup') -const addCard = document.getElementById('popup-button') -const title = document.getElementById('title') -const username = document.getElementById('username') -const email = document.getElementById('email') -const password = document.getElementById('password') +// Main elements +const cards = document.getElementById('cards') +const buttonAddCard = document.getElementById('button-addcard') + +// Popup elements +const backgroundPopupAddCard = document.getElementById('background-popup-addcard') +const popupAddCard = document.getElementById('popup-addcard') +const closerPopupAddCard = document.getElementById('closer-popup-addcard') +const formPopupAddCard = document.getElementById('form-popup-addcard') +const submitPopupAddCard = document.getElementById('submit-popup-addcard') + +const titleInputPopupAddCard = document.getElementById('title-input-addcard') +const usernameInputPopupAddCard = document.getElementById('username-input-addcard') +const emailInputPopupAddCard = document.getElementById('email-input-addcard') +const passwordInputPopupAddCard = document.getElementById('password-input-addcard') // Cancel submit -const addCardForm = document.getElementById('popup-addcard-form') - -addCardForm.addEventListener('submit', event => { +formPopupAddCard.addEventListener('submit', event => { event.preventDefault() }) -backgroundPopup.style.display = 'none' -popup.style.display = 'none' +// Popup visibility +backgroundPopupAddCard.classList.add("hiden"); + +function showPopup() { + backgroundPopupAddCard.classList.remove("hiden"); +} -function addAnItem() { - showPopup() +function hidePopup() { + console.log('coucou') + backgroundPopupAddCard.classList.add("hiden"); } -function addACard() { +// Add card fonctionality +function addCard() { hidePopup() const cardTitle = document.createElement('h2') - cardTitle.textContent = title.value - title.value = '' + cardTitle.textContent = titleInputPopupAddCard.value const cardUsername = document.createElement('p') - cardUsername.textContent = `Username : ${username.value}` - username.value = '' + cardUsername.textContent = `Username : ${usernameInputPopupAddCard.value}` const cardEmail = document.createElement('p') - cardEmail.textContent = `Email : ${email.value}` - email.value = '' + cardEmail.textContent = `Email : ${emailInputPopupAddCard.value}` const cardPassword = document.createElement('p') - cardPassword.textContent = `Password : ${password.value}` - password.value = '' + cardPassword.textContent = `Password : ${passwordInputPopupAddCard.value}` + formPopupAddCard.reset() const cardLi = document.createElement('li') cardLi.appendChild(cardTitle) cardLi.appendChild(cardUsername) @@ -45,24 +51,9 @@ function addACard() { items.appendChild(cardLi) } -function showPopup() { - backgroundPopup.style.display = 'flex' - popup.style.display = 'flex' -} - -function hidePopup() { - backgroundPopup.style.display = 'none' - popup.style.display = 'none' -} - -addItem.addEventListener('click', event => { - addAnItem() -}) - -closePopup.addEventListener('click', event => { - hidePopup() -}) +// Main events +buttonAddCard.addEventListener('click', showPopup) -addCard.addEventListener('click', event => { - addACard() -}) \ No newline at end of file +// Popup events +closerPopupAddCard.addEventListener('click', hidePopup) +submitPopupAddCard.addEventListener('click', addCard) \ No newline at end of file diff --git a/style.css b/style.css index b11dfa9..1910ac1 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,15 @@ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); +:root { + --color-blue: #083553; + --color-green: #019F55; + --color-green-hover: #007e43; + --color-beige: #F5F5DC; + --color-transparent: #ffffff2a; + --color-transparent-hover: #ffffff3f; + --color-blur: #0000005e; +} + html, body { box-sizing: border-box; width: 100%; @@ -7,77 +17,114 @@ html, body { overflow-x: hidden; margin: 0; padding: 0; - background-color: #083553; + background-color: var(--color-blue); font-family: 'Poppins', sans-serif; } -#background-popup { +.hidden { + display: none; +} + +/*-------------------- popup addcard --------------------*/ + +#background-popup-addcard { z-index: 2; position: absolute; width: 100vw; height: 100vh; - background-color: #0000005e; + background-color: var(--color-blur); display: flex; justify-content: center; align-items: center; } -#popup { +#popup-addcard { z-index: 3; width: 450px; height: 550px; - background-color: beige; + background-color: var(--color-beige); display: flex; flex-direction: column; + border-radius: 10px; } -#popup img { +#closer-popup-addcard { width: 40px; height: 40px; position: relative; top: 5px; left: 405px; cursor: pointer; + background-color: transparent; + border: none; + padding: 0; +} + +#closer-popup-addcard img { + width: 40px; + height: 40px; + transition: 0.3s; } -#popup form { +#closer-popup-addcard img:hover { + scale: 1.1; +} + +#popup-addcard h2 { + margin: 0; + padding: 0; + text-align: center; + font-weight: 600; +} + +#form-popup-addcard { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; + padding: 15px 30px; } -#popup h2 { - margin: 0; - padding: 0; - margin-bottom: 20px; +#form-popup-addcard label { + font-size: 18px; + width: 88%; } -#popup form input { - margin-bottom: 30px; +#form-popup-addcard input { + margin-bottom: 15px; border: none; width: 80%; - font-size: 20px; + font-size: 18px; outline: none; - padding: 5px 7px; + padding: 10px 15px; + border-radius: 5px; + border: 2px solid #ccc; + border-bottom-width: 3px; + transition: 0.2s; } -#popup-button { - margin-bottom: 30px; +#form-popup-addcard input:focus { + border-color: var(--color-green); +} + +#submit-popup-addcard { + margin-top: 15px; border: none; height: 50px; width: 50%; - background-color: #019f55; + background-color: var(--color-green); font-size: 25px; font-family: 'Poppins', sans-serif; - color: #ffffff; + color: white; transition: 0.3s; cursor: pointer; + border-radius: 5px; } -#popup-button:hover { - background-color: #00cf6f; +#submit-popup-addcard:hover { + background-color: var(--color-green-hover); + font-size: 24px; } header { @@ -99,13 +146,13 @@ header { .logo-password { height: 50px; font-size: 50px; - color: #019f55; + color: var(--color-green); } .logo-manager { height: 35px; font-size: 35px; - color: #ffffff; + color: var(--color-beige); } main { @@ -126,7 +173,7 @@ main { margin: auto; width: 400px; height: 220px; - background-color: beige; + background-color: var(--color-beige); border-radius: 10px; animation: append-animate .4s ease-out; } @@ -138,7 +185,7 @@ main { text-align: center; margin-top: 25px; margin-bottom: 30px; - color: #019f55; + color: var(--color-green); } #items li p { @@ -165,7 +212,7 @@ main { height: 220px; border-radius: 10px; border: none; - background-color: rgba(255, 255, 255, 0.164); + background-color: var(--color-transparent); display: flex; align-items: center; justify-content: center; @@ -175,7 +222,7 @@ main { #add-item span{ font-size: 60px; - color: #019f55; + color: var(--color-green); transition: 0.5s; } @@ -256,10 +303,10 @@ main { } #add-item:hover { - background-color: rgba(255, 255, 255, 0.247); + background-color: var(--color-transparent-hover); } #add-item:hover span{ - color: #00bd65; + color: var(--color-green-hover); scale: 1.3; -} \ No newline at end of file +}