2-Amaliy mashg’ulot Masalaning qo`yilishi



Download 151,42 Kb.
bet1/2
Sana05.05.2023
Hajmi151,42 Kb.
#935649
  1   2
Bog'liq
dif-2


2-Amaliy mashg’ulot
Masalaning qo`yilishi. Musiqiy audio player dasturini loyihalash va uning texnik topshirig’i. Mijozlarga ma`qul keladigan, foydalanish qulay va oson bo`lgan musiqiy audio player dasturini ishlab chiqish,

let songs = [


{
name: 'song 1',
path: 'assets/musics/Song 1.mp3',
artist: 'artist 1',
cover: 'assets/images/cover 1.png'
},
{
name: 'song 2',
path: 'assets/musics/Song 2.mp3',
artist: 'artist 2',
cover: 'assets/images/cover 2.png'
},
// +6 more
]
Agar siz bizning JS ma'lumotlarimizni ko'rsangiz. musiqa maʼlumotlarimizga eʼtibor berasiz. biz musiqa bilan bog'liq ma'lumotlarni bu erda saqladik.
Shunday qilib, ko'proq vaqtni behuda sarf qilmasdan, uy bo'limini kodlaylik.
Uy bo'limi
Ochiq index.htmlva ichkarida asosiy HTML tuzilishini yozish bilan boshlanadi. Shuningdek, havola style.cssva ikkala JS fayli. data.jsOldin fayl qo'shishni unutmang app.js. Aks holda biz maʼlumotlarga kira olmaymiz.
Barcha fayllarni bog'lab bo'lgach, birinchi narsani yaratamiz. Rasm karuseli. Bu tana yorlig'i kodini ichkarida.











Eslatma - karuselni home-sectionelementga o'rang.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

*{
margin: 0;


padding: 0;
box-sizing: border-box;
}

:root{
--background: #141414;


--text-color: #fff;
--primary-color: #63ff69;
--secondary-color: #000;
--alpha-color: rgba(0, 0, 0, 0.5);
--shadow: 0 15px 40px var(--alpha-color);
}

html{
background: var(--background);


display: flex;
justify-content: center;
}

body{
width: 100%;


height: 100vh;
max-width: 375px;
position: relative;
background: var(--background);
font-family: 'roboto', sans-serif;
color: var(--text-color);
}

::-webkit-scrollbar{


display: none;
}

/* home section */


.home-section{


width: 100%;
padding: 20px;
height: 100%;
padding-bottom: 100px;
overflow-y: auto;
}

/* carousel */


.carousel{


width: 100%;
height: 200px;
overflow: hidden;
border-radius: 20px;
box-shadow: var(--shadow);
position: relative;
}

.carousel img{


position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: 1s;
}

.carousel img.active{


opacity: 1;
}
Bu erda biz CSS o'zgaruvchisidan foydalanayotganimizni ko'rishingiz mumkin, shuning uchun kelajakda musiqa pleyerining mavzusini o'zgartirish biz uchun oson bo'ladi.
Chiqish

E'tibor bering, bu mobil ko'rinish uchun mo'ljallangan, shuning uchun men buni mobil o'lchamda ko'rish uchun Chrome inspektoridan foydalanmoqdaman.
Endi gorizontal aylantiruvchi pleylistlarni yarating. Ichkaridahome-section

Download 151,42 Kb.

Do'stlaringiz bilan baham:
  1   2




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©hozir.org 2024
ma'muriyatiga murojaat qiling

kiriting | ro'yxatdan o'tish
    Bosh sahifa
юртда тантана
Боғда битган
Бугун юртда
Эшитганлар жилманглар
Эшитмадим деманглар
битган бодомлар
Yangiariq tumani
qitish marakazi
Raqamli texnologiyalar
ilishida muhokamadan
tasdiqqa tavsiya
tavsiya etilgan
iqtisodiyot kafedrasi
steiermarkischen landesregierung
asarlaringizni yuboring
o'zingizning asarlaringizni
Iltimos faqat
faqat o'zingizning
steierm rkischen
landesregierung fachabteilung
rkischen landesregierung
hamshira loyihasi
loyihasi mavsum
faolyatining oqibatlari
asosiy adabiyotlar
fakulteti ahborot
ahborot havfsizligi
havfsizligi kafedrasi
fanidan bo’yicha
fakulteti iqtisodiyot
boshqaruv fakulteti
chiqarishda boshqaruv
ishlab chiqarishda
iqtisodiyot fakultet
multiservis tarmoqlari
fanidan asosiy
Uzbek fanidan
mavzulari potok
asosidagi multiservis
'aliyyil a'ziym
billahil 'aliyyil
illaa billahil
quvvata illaa
falah' deganida
Kompyuter savodxonligi
bo’yicha mustaqil
'alal falah'
Hayya 'alal
'alas soloh
Hayya 'alas
mavsum boyicha


yuklab olish