Module 2 team project of the Adalab Digital Frontend Development Bootcamp.
This is a profile cards app developed with
and
Project URL is available on GitHub Pages.
NOTE: original project has been updated to improve development and design features.
This project has been developed by DevilAPPers Team:
- Almudena Blanco: @almudenabr
- Emma Cebada: @Emma-cebada
- Ana Guerra: @anaguerraabaroa
- Celia MartΓn: @Celiamf
- Irene Rueda: @IreneRuedaVega
Instructions to start this project:
- Clone repository:
git clone [repository]
- Install NPM packages and dependencies:
npm install
- Run project on local server:
npm start
- Landing page
- Generator card page
- Collapsable design sections: colour palettes, personal data form and create profile card
- Control patterns on form inputs
- Render data on card while it is being filled
- Keep data on LocalStorage
- Reset button to remove data from design sections, card and LocalStorage
- Send data to APIRest and get a link with filled profile card
- Button to share card on Twitter
function getCollapsable(event) {
event.currentTarget.classList.toggle("rotateArrow");
const arrowId = event.currentTarget.id;
const section = document.querySelector(".section-" + arrowId);
section.classList.toggle("hideCollapsable");
}
- Handle select palette:
function selectPalette() {
if (palette1.checked === true) {
form.palette = 1;
} else if (palette2.checked === true) {
form.palette = 2;
} else if (palette3.checked === true) {
form.palette = 3;
} else if (palette4.checked === true) {
form.palette = 4;
}
renderPalette();
setLocalStorage();
}
- Render selected palette on card:
function renderPalette() {
cardContainer.classList.add("palette1");
cardContainer.classList.remove("palette2");
cardContainer.classList.remove("palette3");
cardContainer.classList.remove("palette4");
if (form.palette === 1) {
cardContainer.classList.add("palette1");
} else if (form.palette === 2) {
cardContainer.classList.add("palette2");
} else if (form.palette === 3) {
cardContainer.classList.add("palette3");
} else if (form.palette === 4) {
cardContainer.classList.add("palette4");
}
}
- Reset palettes:
function resetPalette() {
if (palette1.checked !== true) {
palette1.checked = true;
} else if (palette2.checked === true) {
palette2.checked = false;
} else if (palette3.checked === true) {
palette3.checked = false;
} else if (palette4.checked === true) {
palette4.checked = false;
}
renderPalette();
}
- Handle form fields data:
function saveField(event) {
inputValue = event.currentTarget.value;
inputId = event.currentTarget.id;
form[inputId] = inputValue;
renderCard();
setLocalStorage();
}
- Render form fields data on the profile card:
function renderCard() {
document.querySelector(".js-nameCard").innerHTML =
form.name || "Nombre completo";
document.querySelector(".js-positionCard").innerHTML = form.job || "Puesto";
document.querySelector(".js-tlCard").href = "tel:" + form.phone;
document.querySelector(".js-emailCard").href = "mailto:" + form.email;
document.querySelector(".js-linkedinCard").href = form.linkedin;
document.querySelector(".js-gitHubCard").href =
"https://github.com" + form.github;
profileImage.style.backgroundImage = `url(${form.photo})`;
}
- Handle reset form fields:
const handleReset = function () {
form.palette = 1;
form.name = "";
form.job = "";
form.email = "";
form.phone = "";
form.linkedin = "";
form.github = "";
form.photo =
"url(https://i.picasion.com/pic90/02b56d6431f0a6fe7082958c95d7788d.gif)";
localStorage.removeItem("formData");
for (const input of inputList) {
input.value = "";
}
profileImage.style.backgroundImage =
"url(https://i.picasion.com/pic90/02b56d6431f0a6fe7082958c95d7788d.gif)";
profilePreview.style.backgroundImage =
"url(https://i.picasion.com/pic90/02b56d6431f0a6fe7082958c95d7788d.gif)";
renderCard();
resetPalette();
setLocalStorage();
};
- Handle an automatic click on hidden input when an image is uploaded:
function fakeFileClick() {
fileField.click();
}
- Handle get image from hidden input:
function getImage(e) {
const myFile = e.currentTarget.files[0];
fr.addEventListener("load", writeImage);
fr.readAsDataURL(myFile);
}
- Render image on the profile card:
function writeImage() {
profileImage.style.backgroundImage = `url(${fr.result})`;
profilePreview.style.backgroundImage = `url(${fr.result})`;
form.photo = fr.result;
setLocalStorage();
}
- Handle share collapsable container border:
function hideShareBorder() {
shareCollapsableBorder.classList.toggle("hideLineShare");
}
- Handle collapsable card link and change create card button colour:
function showLink() {
createCardbtn.classList.add("btnClick");
createCardCollapsable.classList.remove("hideCollapsable");
}
- Handle API request:
function sendRequest() {
fetch("https://us-central1-awesome-cards-cf6f0.cloudfunctions.net/card/", {
method: "POST",
body: JSON.stringify(form),
headers: {
"content-type": "application/json",
},
})
.then(function (resp) {
return resp.json();
})
.then(function (result) {
showURL(result);
})
.catch(function (error) {
console.log(error);
cardLink.innerHTML = "Error en el servidor";
});
}
- Render API response:
function showURL(result) {
if (result.success) {
cardLink.href = result.cardURL;
cardLink.innerHTML = cardLink.href;
} else {
cardLink.innerHTML = "ERROR: " + result.error;
}
}
- Share card link on Twitter:
function createTwitterLink(result) {
const twitterText = encodeURIComponent(
"Β‘Ya formo parte del mundo de las sombras gracias a DevilAPPers Profile Cards!:"
);
const twitterURL = cardLink.innerHTML;
twitterButton.href = `https://twitter.com/intent/tweet?text=${twitterText}&url=${twitterURL}`;
}
- Set data in LocalStorage:
function setLocalStorage() {
localStorage.setItem("formData", JSON.stringify(form));
}
- Get data from LocalStorage:
function getLocalStorage() {
const localFormData = JSON.parse(localStorage.getItem("formData"));
if (localFormData !== null) {
form = localFormData;
document.querySelector(".js-nameInput").value = form.name;
document.querySelector(".js-positionInput").value = form.job;
document.querySelector(".js-tlInput").value = form.phone;
document.querySelector(".js-emailInput").value = form.email;
document.querySelector(".js-linkedinInput").value = form.linkedin;
document.querySelector(".js-gitHubInput").value = form.github;
profileImage.style.backgroundImage = `url(${form.photo})`;
profilePreview.style.backgroundImage = `url(${form.photo})`;
const selectedPalette = document.querySelector("#palette" + form.palette);
selectedPalette.click();
}
renderCard();
listenSaveField();
}
Profile Cards
βββ docs
βββ node_modules
βββ src
β βββ html
β β βββ partials
β β β βββ footer.html
β β β βββ header.html
β β β βββ mainCard.html
β β β βββ mainDesign.html
β β β βββ mainForm.html
β β β βββ mainLanding.html
β β β βββ mainOptions.html
β β β βββ mainProfileCards.html
β β β βββ mainShare.html
β β β βββ menu.html
β β βββ index.html
β β βββ profileCards.html
β βββ images
β β βββ card_desktop.png
β β βββ card_mobile.png
β β βββ card_tablet.png
β β βββ default_image.gif
β β βββ landing_desktop.png
β β βββ landing_mobile.png
β β βββ landing_tablet.png
β β βββ logo-adalab.png
β β βββ logo-awesome-profile-cards.svg
β β βββ logo-devilappers.svg
β βββ js
β β βββ 01collapsables.js
β β βββ 02palettes.js
β β βββ 03form.js
β β βββ 04card-image.js
β β βββ 05create-card.js
β β βββ 06fetch.js
β β βββ 07localStorage.js
β βββ scss
β βββ components
β β βββ _colorOptions.scss
β β βββ _mainForm.scss
β β βββ _mainOptionsMenu.scss
β βββ core
β β βββ _reset.scss
β β βββ _variables.scss
β βββ layout
β β βββ _footer.scss
β β βββ _header.scss
β β βββ _mainCard.scss
β β βββ _mainDesign.scss
β β βββ _mainLanding.scss
β β βββ _mainOptions.scss
β β βββ _mainProfileCards.scss
β β βββ _mainShare.scss
β β βββ _page.scss
β βββ main.scss
βββ .browserslistrc
βββ .csscomb.json
βββ .eslintrc.json
βββ .gitignore
βββ config.json
βββ gulp-flow.png
βββ gulpfile.js
βββ LICENSE
βββ package-lock.json
βββ package.json
βββ README.md
βββ robots.txt