⚡

Kodlar — Memorize Mode

Highest yield

The instructor's Basic Photo DB code. Q17 of the fill-in-blank section comes straight from here. Drill it until automatic.

Full HTML (for context — no blanks)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BASIC PHOTO DB</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <input type="text" id="isim"    class="form-control m-2" placeholder="Adını gir">
    <input type="text" id="fotourl" class="form-control m-2" placeholder="Foto url gir">
    <button id="btn1" class="btn btn-primary w-100" onclick="yukle()">YÜKLE</button>
  </div>

  <div class="row" id="icerik"></div>

  <script src="code.js"></script>
</body>
</html>

JS — fill in the blanks

Hit Enter to jump · Shift+Enter to check

Full reference — copy any of these

The complete code

const BASE_URL = "https://my102testapp-default-rtdb.europe-west1.firebasedatabase.app/foto2.json";

function yukle() {
  let isim = document.getElementById("isim").value;
  let foto = document.getElementById("fotourl").value;
  const newfoto = { isim, foto };

  fetch(BASE_URL, {
    method: "POST",
    body: JSON.stringify(newfoto)
  })
  .then(res => res.json())
  .then(() => {
    alert("yükleme tamamlandı!");
  });
}

fetch(BASE_URL)
  .then(res => res.json())
  .then(data => doldur(data));

function doldur(data) {
  let icerik = document.getElementById("icerik");
  icerik.innerHTML = "";
  Object.values(data).forEach(item => {
    icerik.innerHTML += `
      <div class="col-3 p-5">
        <img class="img-thumbnail" src="${item.foto}">
        <p>Gonderen: ${item.isim}</p>
      </div>
    `;
  });
}