مدرس دوره

نبی عبدی

زمان ویدیو

31:45 دقیقه

برو به دیگر جلسات

آموزش HTML و CSS

برای دانلود ویدیو

وارد شوید

پروفایل کارت با تغییر رنگ تم در جاوا اسکریپت

منتشر شده در تاریخ : 27, مرداد, 1401

در این آموزش ویدیویی از سری آموزش‌های مینی پروژه جاوا اسکریپت و مینی پروژه های HTML و CSS ساخت پروفایل کارت با قابلیت تغییر رنگ تم را توسط زبان برنامه نویسی جاوا اسکریپت و البته HTML و CSS طراحی کنیم که از این طرح می‌توانید در پروژه های خود به سادگی استفاده کنید، پس با این آموزش جذاب همراه آکادمی وبکیما باشید.

طراحی پروفایل کارت

در این آموزش می‌خواهیم یک پروفایل کارت را توسط زبان های HTML و ‌CSS و البته زبان جاوا اسکریپت طراحی کنیم که البته از جاوا اسکریپت برای تغییر رنگ تم استفاده خواهیم کرد. بنابراین دقت داشته باشید که اگر می‌خواهید سایتی داشته باشید که از سمت دیداری یا همان فرانت اند سایت کاربران قادر باشند رنگ تم را تغییر دهند، می‌توانید از همین تکنیک ساده که در این ویدیو آموزش داده می‌شود استفاده کنید.

کدهای HTML پروژه

در زیر می‌توانید کدهای html مربوط به مینی پروژه پروفایل کارت با قابلیت تغییر رنگ تم در جاوا اسکریپت را مشاهده کنید.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navid Dev - Card With Dynamic Themes</title>
    <!--Google Font-->
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:[email protected];600&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="card">
        <img src="./naviddev.jpg" alt="profile img" />
        <h2>Navid Dev</h2>
        <h3>Senior Web Developer</h3>
        <div class="details">
          <div class="col">
            <h4>1.5K</h4>
            <span>Followers</span>
          </div>
          <div class="col">
            <h4>369</h4>
            <span>Following</span>
          </div>
        </div>
        <div class="buttons">
          <button>Follow</button>
          <button>Message</button>
        </div>
      </div>
      <div class="themes">
        <button class="btn btn1"></button>
        <button class="btn btn2"></button>
        <button class="btn btn3"></button>
        <button class="btn btn4"></button>
        <button class="btn btn5"></button>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

کدهای CSS پروژه

در زیر می‌توانید کدهای CSS مربوط به مینی پروژه پروفایل کارت با قابلیت تغییر رنگ تم در جاوا اسکریپت را مشاهده کنید.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
img {
  max-width: 100%;
}
:root {
  --theme-color: #ff1756;
}
body {
  background-color: #c1e0ff;
  font-family: "Poppins", sans-serif;
}
.container {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.card {
  height: 420px;
  width: 350px;
  background: linear-gradient(to bottom, var(--theme-color) 110px, #fff 110px);
  border-radius: 28px;
  padding: 50px 25px;
}
img {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 0 0 8px #fff;
}
.card h2 {
  color: var(--theme-color);
  font-size: 20px;
  margin: 15px 0 5px 0;
}
.card h3 {
  color: #454545;
  font-weight: 400;
  font-size: 16px;
}
.card * {
  text-align: center;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.details,
.buttons {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
}
.details h4 {
  font-weight: 400;
}
.details span {
  color: var(--theme-color);
}
.buttons button {
  width: 130px;
  padding: 12px 0;
  border-radius: 25px;
  border: 3px solid var(--theme-color);
  cursor: pointer;
  background-color: var(--theme-color);
  color: #fff;
}
.buttons button:last-child {
  background-color: transparent;
  color: var(--theme-color);
}
.themes {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 50px;
  padding: 20px;
  display: flex;
  justify-content: space-around;
}
.themes button {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 3px solid #d1f0ff;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease-in;
}
.themes button:hover {
  border: 3px solid #6dceff;
}
.btn1 {
  background-color: #3498db;
}
.btn2 {
  background-color: #ff1756;
}
.btn3 {
  background-color: #1cb65d;
}
.btn4 {
  background-color: #8e44ad;
}
.btn5 {
  background-color: #f4b932;
}

کدهای جاوا اسکریپت پروژه

در زیر می‌توانید کدهای جاوا اسکریپت مربوط به مینی پروژه پروفایل کارت با قابلیت تغییر رنگ تم در جاوا اسکریپت را مشاهده کنید.

const theme = document.querySelector(":root");
const btns = document.querySelectorAll(".btn");

btns.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    const color = e.currentTarget.classList;
    if (color.contains("btn1")) {
      theme.style.setProperty("--theme-color", "#3498db");
    } else if (color.contains("btn2")) {
      theme.style.setProperty("--theme-color", "#ff1756");
    } else if (color.contains("btn3")) {
      theme.style.setProperty("--theme-color", "#1cb65d");
    } else if (color.contains("btn4")) {
      theme.style.setProperty("--theme-color", "#8e44ad");
    } else if (color.contains("btn5")) {
      theme.style.setProperty("--theme-color", "#f4b932");
    }
  });
});

جمع بندی

در انتها امیدواریم که آموزش ساخت مینی پروژه پروفایل کارت با قابلیت تغییر رنگ تم در HTML CSS و جاوا اسکریپت را یاد گرفته باشید، اگر سوالی در رابطه با این آموزش دارید در انتهای همین جلسه و در بخش کامنت ها با ما در ارتباط باشید.

5/5 - (1 امتیاز)
نبی عبدی

نبی عبدی هستم مدیر آکادمی وبکیما، مدرس و محقق در حوزه راه‌اندازی انواع کسب‌وکارهای اینترنتی، میخوام بدونید که کار در حوزه اینترنت بسیار دوست داشتنیه! و دلم می‌خواد این احساس رو با شما عزیزان شریک باشم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جشنواره بزرگ فروش ... تا 67 درصد تخفیف روی تمامی دوره‌ها ...تخفیف‌تو بگیر!
+
آموزش‌های ویدیویی جدید در یوتیوب