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

منتشر شده در تاریخ : 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:wght@400;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 و جاوا اسکریپت را یاد گرفته باشید، اگر سوالی در رابطه با این آموزش دارید در انتهای همین جلسه و در بخش کامنت ها با ما در ارتباط باشید.

3/5 - (2 امتیاز)

آموزش طراحی فرم لاگین با HTML و CSS

اسلایدر کارت وبلاگ متحرک با HTML و CSS

آموزش ساخت ساعت دیجیتال در جاوا اسکریپت

نمایش و پنهان کردن رمز عبور در جاوا اسکریپت

ساخت منوی بازشو در HTML CSS و جاوا اسکریپت

مینی وب اپلیکیشن پسورد ساز با جاوا اسکریپت

ساخت دکمه سوئیچ یا Toggle Button در جاوا اسکریپت

ساخت باکس جستجو یا سرچ بار در جاوا اسکریپت

ساخت انیمیشن کلیک روی دکمه در جاوا اسکریپت