آموزش ساخت to do list
سلام خدمت همه دوستان عزیز و همراهان نت کپی، با یک پست آموزشی از سری پست های آموزش رایگان برنامه نویسی در خدمت شما هستیم با آموزش ساخت to do list
پس در ادامه این آموزش همراه باشید
با آموزش ساخت to do list در خدمت شما هستیم
ابتدا یک فایل با نام index.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>نت کپی - مرجع قالب و اسکریپت فارسی </title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> </head> <body> <div class="container"> <input type="text" id="input" placeholder="لطفا متن خود را وارد کنید"> <ul></ul> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="script.js"></script> </body> </html>
سپس یک فایل با نام style.css میسازیم و کد هایی Css زیر را داخلش قرار میدیم
@font-face { font-family: "Vazir"; src: url(Vazir-Regular.ttf); } * { margin: 0; padding: 0; box-sizing: border-box; letter-spacing: capitalize; direction: rtl; font-family: "Vazir"; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #185adb 50%, #cd113b 50%); } .container { height: 450px; width: 330px; background: #fff; border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); padding: 10px; overflow-y: auto; } #input { height: 50px; width: 100%; outline: none; border: none; border-radius: 5px; background: #666; color: #fff; padding: 0 10px; margin: 15px 0; } #input::placeholder { color: #bbb; } ul li { background: #eee; color: #333; height: 40px; border-radius: 50px; margin: 10px 0; padding: 10px; position: relative; list-style-type: none; } ul .fa-check, .fa-trash { position: absolute; cursor: pointer; } ul .fa-check { left: 40px; color: green; } ul .fa-trash { left: 15px; color: #ff0033; } ul .checked { background: lightgreen; text-decoration: line-through; transition: .2s; }
و در مرحله آخر یک فایل با نام script.js میسازیم و کد های جاوا اسکریپت زیر را داخلش قرار میدیم
$(document).ready(function(){ $('#input').change(function(){ var input = $(this).val(); $('ul').append('<li>' + input + ' <i class="fas fa-check"></i> <i class="fas fa-trash"</i> </li>'); $(this).val(''); }); $('ul').on('click','.fa-trash',function(){ $(this).parent('li').fadeOut(200); }); $('ul').on('click','.fa-check',function(){ $(this).parent('li').toggleClass('checked'); }); });
ما در این آموزش از دو کتابخانه Fontawesome و Jquery استفاده کردیم که آدرسشون رو قرار میدم.
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css
https://code.jquery.com/jquery-3.5.1.min.js
ما در این آموزش از فونت زیبای وزیر یک فونت رایگان هستش استفاده کردیم شما میتونید از هر فونتی
که مد نظرتون هست استفاده کنید برای تغییر فونت کافیست کد های مربوط به فونت را عوض کنید
و فونت دلخواه خودتون رو قرار بدید.
به همین سادگی ما تونستیم یک to do list زیبا طراحی کنیم امید وارم خوشتون اومده باشه 🙂
نظرات و پیشنهادات خود را از انتهای همین پست از قسمت نظرات با ما در میان بگذارید.
با تشکر:)
نت کپی- مرجع دانلود قالب و اسکریپت فارسی
شما میتونید سورس این پروژه رو به صورت رایگان دانلود کنید
آموزش ویدئویی ساخت TO Do List