7. پروژه اول : ساخت تایمر (اپیزود سه)

خب توی روز قبلی ، ما برنامه رو نوشتیم و تمام اما ظاهر خوبی برای ارائه نداشت. امروز با اضافه کردن کمی کد CSS صفحه کاربری رو یکم خوشکل تر و قابل استفاده تر میکنیم.

اول از همه توضیح بدم چطوری یک فایل CSS رو به پروژمون وصل کنیم. فرض کنید یک فایل به نام app.css ساختید.شما کافیه توی فایل جاواتون این css رو import کنید. مثل کاری که قبلا برای هوک ها میکردیم.

import './App.css';

داخل فایل css برای سه بخش مختلف که شامل body ، شمارنده و کلیدها بود استایل دهی رو به طریق زیر انجام دادیم:

body {
background-color: #011A27; }

.text {
background-color: #063852;
color: white;
text-align: center;
width:70%;
position: absolute;
top: 30%;
left: 15%;
font-size: 40px;
border-radius: 30px;
outline-width:5px;
outline-color: #F0810F;}

.bg {
background-color:#F0810F ;
width: 100px;
height: 100px;
margin: 5px;
margin-bottom: 20px;
border-color: white;
font-weight: bold;
font-size: 20px;
border-radius: 20px; }

که خروجی برنامه با این استایل دهی به صورت زیر میشه:

درباره css دیگه من زیاد توضیح نمیدم که هر کدام از این گزاره ها چه کاری انجام میدن ، که با یکم جستجو به مطالب فراوان و کاملی دسترسی خواهید داشت خودتون.

الان برنامه به چیزی تبدیل شد که میتونیم ادعا کنیم قابل استفاده توسط کاربر نهایی می باشد.