آموزش تغییر رنگ سایت با یک دکمه بصورت لایو

113

0

آموزش تغییر رنگ سایت بصورت live

این پست بخشی از مسیر متخصص HTML و CSS است. اگر به این مسیر علاقه مندید اینجا کلیک کنید.

امروز می خواهیم به شما نحوه تغییر رنگ سایت با یک دکمه بصورت live را آموزش بدهیم شاید به خودی خود این آموزش خیلی کاربردی نباشد ، اما ایده ای که به شما می دهد می تواند منتهی به ساخت چیز های جالبی شود ، این آموزش به درخواست یکی از کاربران تاتژن ساخته شده است ، با ما همراه باشید.

اگر تماشای این ویدئو از حوصله ی شما خارج است ، در ادامه این پست با ما همراه باشید.

آموزش ایجاد تغییر رنگ سایت با یک دکمه بصورت لایو

کلیت کار به این صورت است که میخواهیم یک فیلد و یک دکمه ایجاد کنیم که با تایپ در این فیلد تغییر رنگ مورد نظر با فشردن دکمه ما به صفحه اعممال شود !

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

مرحله 1 – کد های html

ابتدا میبایست با کد های HTML فیلد های مورد نظر را می سازیم ، توجه فرمایید که در این آموزش میخواهیم به کمک جی کوئری این تغییر رنگ را اعمال کنیم لذا در ابتدای پروژه این کتابخانه را به پروژه خود اضافه کنید.

در قطعه کد زیر ما این کار را به کمک CDN انجام داده ایم ، شما نیز می توانید به کمک CDN و یا دانلود و سپس قرار دادن فایل در کنار پروژه خود این کتابخانه را به پروژه خود اضافه کنید.

ضمنا به زودی ، توسط آکادمی تاتژن CDN تمام کتابخانه ها و فریم ورک های معروف برایتان در صفحه CDN تاتژن قرار خواهد گرفت و شما می توانید از طریق این صفحه به سادگی کتابخانه های مختلف را به پروژه های خود اضافه کنید.

<body>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <h1>Change background Color</h1>
    <p>
      Enter Hex Color
    </p>
  <div>
        <input id="colorinput" type="text" name="color">
        <button id="btn">changer</button>	
    </div>
  <p>
    <a class="copyright" href="https://tutsxen.net">
    Tutsxen academy
    </a>
  </p>
  
</body>

مرحله 2 – کد های CSS ( استایل دهی )

این مرحله به استایل دهی می پردازیم خیلی نمیخوایم شلوغش کنیم ولی بهتره که هر طرحی که میزنید تا حد استانداردی از نظر بصری رضایت بخش باشد. اما اگر حوصله این کار را ندارید از این مرحله گذر کنید!

body{
  background: #e1e1e1;  
}
button , input{
  padding:5px 10px;
}
.copyright{
  margin-top:60px;
  text-decoration : none;
}

مرحله 3 – کد های جی کوئری

بدون هیچ بحثی اول کد هارو ببینید بعد تفسیرشو بخونید!

$(document).ready(function(){
    $("#btn").click(function(){
      var color = $('#colorinput').val();
      $("body").css("background-color", color);
    });
});
تفسیر :

فانکشن داکیومنت ردی ((document).ready) رو که بخاطر دارید ! همون تابعی که به صفحه میگه که وقتی لود شدی و آماده شدی این کد رو بخون!

یکم بیشتر بریم داخل کد هامون … کدی نوشتیم که در صورت کلیک بر روی عنصری که آیدی btn دارد ( یعنی همان دکمه مون ) تابعی اجرا شود. خب این تابع باید چیکار کنه ؟ بهش میگیم که ابتدا محتویات درون فیلد ورودی رو بگیر بریز تو متغیری به اسم color ، سپس در مرحله ی بعد بدنه سایت (یعنی body) بک گراندشو بکن همون متغیری که گرفتی! به همین سادگی!

به پایان آموزش “آموزش تغییر رنگ سایت با یک دکمه بصورت live” رسیدیم امیدوارم مورد توجه‌تان قرار گرفته باشد؛ شما می توانید از طریق بخش نظرات، سوالات و ابهامات خود را مطرح کنید.

مهندس محسن حسن پور

برنامه نویس | طراح سایت | متخصص سئو

1سال در کنار تاتژن

اشتراک
اطلاع از
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x