WOW brand loyihasi 📽

Yaqinda yana bir loyiha topshirgan edim Portfolioga qo'shishga ruhsat berishdi , shu saytni sizlar bilanham ulashmoqchiman balki foydalik bo'lar 🙂

Link: https://wowbrand.netlify.app/
GitHub: Mumkin emas 🔐

@abs_javascript

Bg change

1. BG ni o'zgartira olasiz
2. Colorni saqlab olishingiz mumkin
3. Yaratilgan colorni localStorage ga saqlab qoladi.

Link: https://abdulvahob-bg-range.netlify.app/
GitHub: https://github.com/Abdulvahobjon/js-project-30/tree/main

@abs_javascript

localStorage

Brauzerda malumotlarni saqlash uchun ishlatiladi.

Agar brauzer o'zgaruvchilarni tozalab bo'lgan yoki Inkognito rejimida ishlaydigan bo'lsa localStorage malumotlarni saqlamaydi

Inkognito nima ?
Brauzerda malumotlarni saqlashni cheklash uchun ishlatiladigan maxsus rejim.

@abs_javascript

LocalStorage

Kecha localStorage haqida qisqacha post qo'ygandim , bugun shuni to'liq qilib qoyay dedim.
Menimcha LocalStorage bilish kerak bo'lgan shu 4 ta narsa bor halos.

@abs_javascript

Komentaryada qoshimcha malumot yozishga ekan LocalStorage ga.✍️

Shu malumotni toldirib qoymoqchiman.👀

Locolstorege kompyuter xotirasidan 5- 10mg gacha joy egallaydi. Agar siz LocalStorege ga ko'proq malumot yozmoqchi bo'lsangiz IndexedDB dan foydalansangiz bo'ladi.

IndexedDB nima ?
Bilmiman , hali ishim tushmadi , lekin shunday narsa bor 🥷🏿

@abs_javascript

Bugun ishdan keyin chiqib 6:00 dan beri ovora bo'layotgan bir loyixamni yaqin daqiqalarda taqdim etaman 😁

Va nihoyat tugadi 🌟

Website larda ovozlar bilan ishlab ko'rmagan edim oldin bugun ancha narsa o'qib chiqdim va bir kichik loyiha qildim

1. So'zlarni o'qib beradi
2. Ovozni to'xtatish mumkin
3. Tezligini belgilay olasiz
4. Ovozni baland yoki pasaytirish mumkin

Link: https://abdulvahob-speak-english-word.netlify.app/
GitHub: https://github.com/Abdulvahobjon/js-project-30

@abs_javascript

Bu yerda ishlatilgan codlar haqida ertaga alohida post qilaman.

Bugun 3 soat vaqt sariflabman , menimcha bugunga yetadi.

Agar loyiha yoqsa like 👍 bosib qo'yinglar 😁

@abs_javascript

Kecha qilishim kerak bo'lgan maketlar borligi uchun qoshimcha loyiha qila olmadim , kechagi kun hisobiga bugun ertalab yangi loyiha qildim. Menimcha ko'p chilikga qiziq bolsa kerak bu loyiha.

Rasmlardan nusxa olish

Oldin textlardan nusha olish bo'yicha amalyot qilgan edim. Rasmlardan nusha olish textlardan nusxa olishga o'xshab ketadi lekin rasmlarda bazi qoshimchalar qoshiladi.

Link: https://timely-klepon-55492b.netlify.app/
GitHub:https://github.com/Abdulvahobjon/js-project-30

@abs_javascript

width vs naturalWidth
height vs naturalHeight

 let uzunlik =  img.width 

JavaScriptda rasmni uzunligi va balandligini olmoqchi bo'lganizda sizga html va css dan bergan o'lchamlarizni qaytaradi.

 let uzunlik =  img.naturalWidth

naturalWidth esa rasmni o'zini default holatidagi olchamni qaytaradi ( rasmni o'lchamini o'zgartirilmagan holatdagi holati)

@abs_javascript

Responsive qilmagan ekanman 🤦🏻‍♂️ , hozir to'g'rilab qoydim.

Endi telefon danham kirib ishlatib ko'rsaiz bo'ladi.😀

Webpack

Webpack - bu JavaScript , CSS va boshqa asosiy fayillarni o'z ichiga oladi. Ularni Web(www) uchun optimallashtirilgan tarzda birlashtiradi.

@abs_javascript

+ Webpack

Shuningdek Webpace - SASS yoki TypeScript kompilyatsiyalarini npn orqali o'zi amalga oshiradi. Yani codlarimizni Web brauzer tushunadigan tilga o'girib beradi.

@abs_javascript

NPM nima ?

NPM - Node Package Managerning (Node paket boshqaruvchisi) qisqartmasidir. Bu, Node.js platformasi uchun dasturlarni boshqarish va ulardan foydalanish uchun yaratilgan paket boshqaruvchisi (package manager)dir.

@abs_javascript

1. ReferenceError

let  myFunction= function() {
  console.log('ABS JavaScript');
}

console.log(myArray[2]);
let myArray = [1, 2, 3];

Agar o'zgaruvchi yoki function nomiga , undan oldin murojat qilinsa ReferenceError paydo bo'ladi.

@abs_javascript

package.js

dependencies vs devDependencies farqi nima ?

dependencies - bu loyiha ishga tushirilganda kerak bo'ladigan modullarni(paketlarni) o'z ichiga oladi.
npm install orqalio'rnatiladi.

 "dependencies": {
  "react": "^17.0.2",
  "express": "^4.17.1"
}

devDependencies - qismi esa faqatgina loyiha tayyor bo'lguniga qadar kerak boladi. misol uchun.

"devDependencies": {
  "babel": "^7.15.4",
  "webpack": "^4.29.5"
}

@abs_javascript

Counter

Bugun oddiyroq loyiha qildim , boshqa ishlarga vaqt ko'p ketib qoldi.

2 ta button va 2 ta select dan iborat ozgina noodatiyroq counter yasadim.

1. Son qo'shish
2. Son ayirish
3. Qo'shish va Ayirish darajasini belgilash
4. localStorage ga o'zgarishlarni saqlab qoladi.

Link: https://abdulvahob-count.netlify.app/
GitHub: https://github.com/Abdulvahobjon/js-project-30

@abs_javascript

remove() nima ?

HTML dan elementni tag tugi bilan olib tashlash uchun ishlatiladi.

SEVGI.remove()

@abs_javascript