@dasturlash_hayoti · Post #4116 · 2025/12/27 07:38
#JavaScript#API#RealProject#webdev#dasturlash_hayoti 👨💻 JavaScript + API: Real loyiha Xabarlarni ro‘yxat qilib chiqarish + avtomatik yangilanish Bu bosqichda: - har bir xabar alohida chiqadi - sahifa refreshsiz yangilanadi - real chatlarga yana yaqinlashamiz 1️⃣HTML — xabar yozish va chat oynasi <!-- Xabar yozish --> <input type="text" id="message" placeholder="Xabar yozing"> <button onclick="sendMessage()">Yuborish</button> <!-- Chat ro'yxati --> <ul id="chat"></ul> ul — xabarlar ro‘yxat bo‘lib chiqishi uchun 2️⃣ JavaScript — xabar yuborish va ro‘yxatga qo‘shish <script> function sendMessage() { // Inputni chaqiramiz let input = document.getElementById("message"); // Inputdagi qiymat let msg = input.value; // Bo‘sh xabar yuborilmasligi uchun if (msg === "") return; // Serverga xabar yuborish fetch("https://jsonplaceholder.typicode.com/posts", { method: "POST", body: JSON.stringify({ text: msg }), headers: { "Content-type": "application/json" } }) .then(res => res.json()) .then(data => { // Xabarni chat ro‘yxatiga qo‘shamiz addMessage(data.text); // Inputni tozalaymiz input.value = ""; }); } </script> 3️⃣JavaScript — xabarni ro‘yxatga qo‘shish <script> function addMessage(text) { // Chat ro‘yxatini chaqiramiz let chat = document.getElementById("chat"); // Yangi xabar uchun <li> yaratamiz let li = document.createElement("li"); // Xabar matnini joylaymiz li.innerText = text; // Xabarni chatga qo‘shamiz chat.appendChild(li); } </script> Endi: - har bir xabar pastga qo‘shilib boradi - eski xabarlar yo‘qolmaydi Telegram, kommentlar, chatlar — barchasi shu mantiqda ishlaydi. ☑️Natija ⏺️JavaScript → foydalanuvchi bilan ishlaydi ⏺️API → server bilan gaplashadi ⏺️Sayt → jonli bo‘ladi ➡️Keyingi post: Enter bosilganda yuborish + real-time’ga yana yaqinlashtiramiz 🔥 💻@dasturlash_hayoti— dasturchilar hayoti va IT memlari aralash kanal😉