Skip to content

Commit

Permalink
feat: add company and social links properties to usersInfo object
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wiazeph
Wiazeph committed Feb 10, 2023
1 parent d820c5e commit e424fda
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 24 deletions.
16 changes: 12 additions & 4 deletions src/assets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

@layer base {
body {
@apply font-poppins bg-[#111827] text-gray-50;
@apply font-poppins bg-gray-50 text-black;
}
}

Expand Down Expand Up @@ -54,19 +54,27 @@
}

.user-card {
@apply relative flex flex-col-reverse sm:flex-row items-center justify-between gap-7 sm:gap-0 px-6 py-8 text-gray-900 bg-[#b2e5e6] min-w-[350px] w-full max-w-[415px] sm:max-w-[660px] sm:h-[350px] border-[24px] border-[#a0cdcf] rounded-3xl shadow;
@apply relative flex flex-col-reverse sm:flex-row items-center justify-between gap-7 sm:gap-0 px-6 py-8 text-gray-900 bg-[#b2e5e6] min-w-[350px] w-full max-w-[415px] sm:max-w-[660px] sm:h-[350px] border-[24px] border-[#a0cdcf] rounded-3xl shadow-[0_0_10px_rgba(0,0,0,0.3)];
}

.card-number {
@apply absolute top-3 left-4 sm:top-auto sm:left-auto sm:bottom-3 sm:right-4 font-medium select-none;
}

.user-card-delete {
@apply absolute top-3 right-4 text-xl transition-all duration-300 ease-in-out hover:scale-125 text-red-900;
@apply absolute top-3 right-4 text-xl transition-all duration-300 ease-in-out hover:scale-125 text-red-700;
}

.user-card-info {
@apply w-full sm:w-fit sm:h-full flex flex-col text-center sm:text-left justify-between gap-7 sm:gap-0;
@apply w-full sm:w-fit flex flex-col text-center sm:text-left gap-5;
}

.user-title {
@apply flex items-center gap-1;
}

.user-company {
@apply flex items-center gap-1 select-none text-gray-600;
}

.user-socials-links {
Expand Down
93 changes: 83 additions & 10 deletions src/components/FormSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,29 @@ let usersInfo = reactive({
surname: "",
age: "",
title: "",
company: "",
email: "",
linkedin: "",
twitter: "",
instagram: "",
github: "",
thumbnail: "",
});
async function onSubmit() {
const { name, surname, age, title, email, thumbnail } = usersInfo;
const {
name,
surname,
age,
title,
company,
email,
linkedin,
twitter,
instagram,
github,
thumbnail,
} = usersInfo;
if (
name !== "" &&
Expand All @@ -32,7 +49,12 @@ async function onSubmit() {
surname,
age,
title,
company,
email,
linkedin,
twitter,
instagram,
github,
thumbnail,
date: new Date(),
});
Expand All @@ -43,7 +65,12 @@ async function onSubmit() {
usersInfo.surname = "";
usersInfo.age = "";
usersInfo.title = "";
usersInfo.company = "";
usersInfo.email = "";
usersInfo.linkedin = "";
usersInfo.twitter = "";
usersInfo.instagram = "";
usersInfo.github = "";
usersInfo.thumbnail = "";
console.log("Data has been added successfully...");
Expand All @@ -60,9 +87,9 @@ async function onSubmit() {
<h3 class="text-3xl font-semibold">Vue JS User Profile Cards</h3>

<div class="form-container">
<form @submit.prevent="onSubmit" class="flex flex-col gap-5 p-4">
<form @submit.prevent="onSubmit" class="flex flex-col gap-3 p-4">
<div class="form-section-row">
<label>Name:</label>
<label>Name:<span class="text-red-600">*</span></label>
<input
type="text"
v-model="usersInfo.name"
Expand All @@ -71,7 +98,7 @@ async function onSubmit() {
/>
</div>
<div class="form-section-row">
<label>Surname:</label>
<label>Surname:<span class="text-red-600">*</span></label>
<input
type="text"
v-model="usersInfo.surname"
Expand All @@ -80,7 +107,7 @@ async function onSubmit() {
/>
</div>
<div class="form-section-row">
<label>Age:</label>
<label>Age:<span class="text-red-600">*</span></label>
<input
type="number"
v-model="usersInfo.age"
Expand All @@ -89,7 +116,7 @@ async function onSubmit() {
/>
</div>
<div class="form-section-row">
<label>Title/Job</label>
<label>Title/Job:<span class="text-red-600">*</span></label>
<input
type="text"
v-model="usersInfo.title"
Expand All @@ -98,23 +125,69 @@ async function onSubmit() {
/>
</div>
<div class="form-section-row">
<label>Thumbnail Link:</label>
<label>Company Name:</label>
<input
type="text"
v-model="usersInfo.thumbnail"
placeholder="Thumbnail Link"
v-model="usersInfo.company"
placeholder="Company Name"
class="form-input"
/>
</div>
<div class="form-section-row">
<label>E-Mail</label>
<label>E-Mail<span class="text-red-600">*</span></label>
<input
type="email"
v-model="usersInfo.email"
placeholder="E-Mail"
class="form-input"
/>
</div>
<div class="form-section-row">
<label>Linkedin Account:</label>
<input
type="text"
v-model="usersInfo.linkedin"
placeholder="Linkedin Account"
class="form-input"
/>
</div>
<div class="form-section-row">
<label>Twitter Account:</label>
<input
type="text"
v-model="usersInfo.twitter"
placeholder="Twitter Account"
class="form-input"
/>
</div>
<div class="form-section-row">
<label>Instagram Account:</label>
<input
type="text"
v-model="usersInfo.instagram"
placeholder="Instagram Account"
class="form-input"
/>
</div>
<div class="form-section-row">
<label>GitHub Account:</label>
<input
type="text"
v-model="usersInfo.github"
placeholder="GitHub Account"
class="form-input"
/>
</div>
<div class="form-section-row">
<label>Thumbnail Link:<span class="text-red-600">*</span></label>
<input
type="text"
v-model="usersInfo.thumbnail"
placeholder="Thumbnail Link"
class="form-input"
/>
</div>

<button class="submit-btn">Submit</button>
</form>
</div>
Expand Down
39 changes: 29 additions & 10 deletions src/components/ItemList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,37 +58,56 @@ async function copyCB(email) {
<div class="user-age select-none">- {{ lt.age }}</div>
</div>

<div class="user-title text-lg">
<div class="user-title">
{{ lt.title }}
<div class="user-company" v-if="lt.company">
- at
<div class="text-gray-900 select-text">@{{ lt.company }}</div>
</div>
</div>

<div class="user-email cursor-pointer" @click="copyCB(lt.email)">
{{ lt.email }}
</div>
</div>

<div class="user-socials">
<div
class="user-socials"
v-if="lt.linkedin || lt.twitter || lt.instagram || lt.github"
>
<div class="mb-4 text-gray-600 text-sm sm:text-base select-none">
Follow!
</div>
<ul class="user-socials-links">
<li>
<a href="" class="social-link hover:bg-[#0a66c2]"
<li v-if="lt.linkedin">
<a
:href="`https://www.linkedin.com/in/${lt.linkedin}`"
target="_blank"
class="social-link hover:bg-[#0a66c2]"
><i class="card-icons fa-brands fa-linkedin"></i
></a>
</li>
<li>
<a href="" class="social-link hover:bg-[#1da1f2]"
<li v-if="lt.twitter">
<a
:href="`https://www.twitter.com/${lt.twitter}`"
target="_blank"
class="social-link hover:bg-[#1da1f2]"
><i class="card-icons fa-brands fa-twitter"></i
></a>
</li>
<li>
<a href="" class="social-link hover:bg-[#3f729b]"
<li v-if="lt.instagram">
<a
:href="`https://www.instagram.com/${lt.instagram}`"
target="_blank"
class="social-link hover:bg-[#3f729b]"
><i class="card-icons fa-brands fa-instagram"></i
></a>
</li>
<li>
<a href="" class="social-link hover:bg-[#00405d]"
<li v-if="lt.github">
<a
:href="`https://www.github.com/${lt.github}`"
target="_blank"
class="social-link hover:bg-[#00405d]"
><i class="card-icons fa-brands fa-github"></i
></a>
</li>
Expand Down

1 comment on commit e424fda

@vercel
Copy link

@vercel vercel bot commented on e424fda Feb 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

vue-js-user-profile-cards – ./

vue-js-user-profile-cards-git-main-emr3rden.vercel.app
vue-js-user-profile-cards.vercel.app
vue-js-user-profile-cards-emr3rden.vercel.app

Please sign in to comment.