Web saytning frontend qism tahlili

Download 6,97 Mb.
bet	11/13
Sana	13.01.2024
Hajmi	6,97 Mb.
	#136377

1 ... 5 6 7 8 9 10 11 12 13

Bog'liq
Shodiyorbek

III.XULOSA

2.3. Web saytning frontend qism tahlili

Ushbu kodlar ba’zi o‘zgaruvchilar hisoblanib ular o‘zlarida ma’lumot saqlash uchun xizmat qiladi.
// page language
const chevronDown = document.querySelector('.chevron-down');
const dropdown = document.querySelector('.dropdown');
const borderStyle = document.getElementById('border-style');
// filter
const ommabopEl = document.getElementById('ommabop');
const reytingEl = document.getElementById('reyting');

Ushbu kodlar ba’zi bir sahifalarda mavjud bo‘lgan sliderning kodlaridan hisoblanadi.

var swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: ".swiper-pagination",
},
});
Ushbu kodlar button bosilganda modal qismi ochilishini va qayta yo‘qolishini ta’minlash uchun xizmat qiladi. Modalda esa foydalanuvchi o‘zining ma’lumotlarini yuborishi mumkin.

// modal
const buy = document.getElementById('buy');

const overlay = document.querySelector('.overlay');
const modal = document.getElementById('modal');

// modal
window.onclick = function(event) {

if (event.target == modal) {
modal.style.display = "none";
}
}

buy.addEventListener('click', () => {

overlay.classList.add('active');
modal.style.position = 'fixed'
modal.style.top = '-300px';
})

document.addEventListener('keydown', (e) => {

if (e.key === 'Escape') {
overlay.classList.remove('active');
modal.style.position = 'absolute';
modal.style.top = '-1500px';
}
})

overlay.addEventListener('click', () => {

overlay.classList.remove('active');
modal.style.position = 'absolute';
modal.style.top = '-1500px';
});

Ushbu kod sahifada mavjud bo‘lgan formning Regular Expression kodlari, qisqa qilib aytganda bu kodlar bilan formani boshqarish mumkin ya’ni foydalanuvchi ma’lumotlari xatolarini ko‘rsatib berishi mumkin.

function validate (data) {
let testArr = Object.keys(data);
errorMessages.forEach((elem, i) => {
const regex = `/.+?(?=${elem.value})/i`;
const a = testArr[i].replace(regex, '');
})
}

Ushbu kodlar esa HTML da forma yasalishi. Ushbu forma form tagi va har xil inputlardan foydalanilgan.

Dropdown menu kodlari, ya’ni bu biror bit button bosilganda undan biror bir divda yasalgan box chiqichi mumkin.

// page language
chevronDown.addEventListener('click', () => {
dropdown.classList.toggle('active')
chevronDown.classList.toggle('active')
chevronDown.style.display = 'block';
})

// filter

reytingEl.addEventListener('click', () => {
borderStyle.classList.add('new-style')
borderStyle.classList.remove('border-style')
})

ommabopEl.addEventListener('click', () => {

borderStyle.classList.add('border-style')
borderStyle.classList.remove('new-style')
})

Sahifaga stil berish uchun doim foydalanib turiladigan ya’ni normal CSS kodlari va sahifada hech qachon o‘zgarmaydigan stillar hisoblanadi.

button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}

Ushbu websaytga stil berish uchun men SCSS ya’ni bu CSS (Cascading Style Sheets) generatsiyalash uchun ishlatiladigan bir preprocessor skriptlash tilididan foydalanilgan va kodlar o‘zgaruvchilar hisoblanadi

// color
$primary-peach-color: #F2CE9A;

$primary-background-color: #002940;
$primary-black-color: #000;
$secondary-light-balck-color: rgba(0, 0, 0, 0.45);

// fontsize

$primary-size: 14px;
$secondary-size: 16px;

Web saytning CSS qismlariga olib boruvchi yo‘llar ya’ni ushbu kodlar scss kutubxonasida yozilgan.

// footer

@import './layout/footer';

// aboutUs-main__section

@import './pages/aboutUs';

// products

@import './pages/products';

// news
@import './pages/news';

// blog
@import './pages/blog';

// karyera

@import './pages/karyera';

Ushbu kodlar index.htmlda qismida yozilgan web sayt yaratish uchun ba’zi kutubxonalar hisoblanadi

III.XULOSA

Men bu loyiha davomida web dashlash tilingn asoslaridan bo’lgan “JavaScript” dasturlash tilining ko’pgina imkoniyatlaridan xabardor bo’ldim va uni amalda qo’lay oldim.
Javascriptning Kerakli qismlaridan bo’lgan “Canva” bo’limini yanada chuqur o’rgndim. “Canva” yani chizmalar chish imkoniyatini beruvchi funksiya hisoblanadi. Bu funksiyadan foydalanib turli shakllar chizish uni o’chirish tahrir qilish va saqlash kabi ko’pgina imkoniyatlarni berdi. Bu loyihani bajarish davomida men o’zim uchun web dastur tuzib , Javascript tili qanday imkoniyatlarni bizga taqdim etishini bilib oldim. Eng muhimi bilimimni oshirib yangi manbalar resurslar qidirishga yordam berdi.
Htmldagi input-range kodini yanaham tushinishga uni valuaelari bilan ishlashni o’rgandim. Bu loyihada htmlning ko’plab input elementlari qo’llanilgan. Ulardan

Download 6,97 Mb.

1 ... 5 6 7 8 9 10 11 12 13

Download 6,97 Mb.