Share tugmasi qanday yasaladi ? 🫠

Javoblarni kutib qolaman 😀
( men biladigan yo'ldan boshqacharoq yo'l bo'lsa hursad bo'laman)

Bugun kechga share tugmasi bo'yicha kichik mini loyiha qilib ko'raman.

@abs_javascript

Hindlar dars o'tishni yorvoradida😅

Nima bo'lganini tushunganing yo'g'u , lekin ko'ding ishlayabdi 😂

@abs_javascript

window.location.href 🔗

Agar sizga brauzer oynasining hozirgi linki kerak bo'lsa window.location.href ko'didan foydalansangiz bo'ladi.

@abs_javascript

encodeURI()

URL manzildagi belgilarni UTF-8 (ko'dlash standarti) bilan almashtiradi. URL dagi nuqsonlarni tog'rilaydi ( qisqacha aytganda)

@abs_javascript

Agar window.location.href dan foydalanmoqchi bo'sangiz encodeURI() bilan qoshib ishlatishingiz maqsadga muvofiq bo'ladi.

@abs_javascript

Share link

Share link yasashning ikki usulini bilaman , birinchisi HTMLda a tegi orqali yasash.
Shu usulda kichik amalyot qilib ko'rdim.

Link: https://abdulvahob-share-btn.vercel.app/
GitHub: https://github.com/Abdulvahobjon/js-project-30

@abs_javascript

Share Link

<a href="<N1>?<N2>&text=<N3>">Telegram</a> 

N1 - Share qilmoqchi bolgan sayt linki ( telegram , instagram , X(twitter) ...)
N2 - Qaysi linkni jonatmoqchiligizgiz.
N3 - Link oldiga qanday text qoshmoqchiligingiz.

Misol uchun: Telegram

 <a href="https://t.iss.one/share/url?url=https://www.youtube.com/@sevzor/videos&text=Kanalga%20obuna%20bo'ling" target="_blank">Telegram</a> 

@abs_javascript

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