1. Sissejuhatus

Minu ülesanne oli luua mobiilisõbralik veebileht teemal anekdoodid. Leht pidi sisaldama ühes failis päist, sisu ja jalust, ning kuvama andmeid eraldi tekstifailidest (teade.txt ja tegija.txt). Samuti pidin looma eraldi sisulehed mitme anekdoodi jaoks ja ühendama need terviklikuks lahenduseks.

Kasutasin järgmisi tehnoloogiaid:

2. Koodilõigud ja selgitused

a) Päise lisamine ja sisu dünaamiline laadimine JavaScriptiga

function postForm(e, url) {
    e.preventDefault();
    fetch(url)
        .then(r => r.text())
        .then(html => {
            document.getElementById("content-area").innerHTML = html;
        })
        .catch(err => console.error("Viga sisu laadimisel: ", err));
}
    

See võimaldab navigeerida anekdootide vahel sujuvalt, ka mobiilivaates.

b) Faili sisu kuvamine PHP abil

<?php echo file_get_contents('teade.txt'); ?>
    

Selle abil saab sisu muuta faili kaudu, ilma lehe koodi redigeerimata.

c) Grid-kujundus mitme anekdoodi jaoks

.anekdoodid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  justify-items: center;
}

.anekdoot {
  background: #ffffff;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}
    

Väiksematel ekraanidel kohandub iga anekdoot automaatselt ühe veeru paigutusse.

d) Mobiilivaate reeglid

@media (max-width: 600px) {
  .anekdoodid-grid { grid-template-columns: 1fr; }
  h1 { font-size: 1.8em; }
}
    

e) Anekdootide lehe põhiosa (anekdoot_nadal1.php)

<?php include("pais.php"); ?>

<section>
  <h2>Anekdoodid – Nädal 1</h2>
  <p>Siin on valik selle nädala parimaid anekdoote!</p>
</section>

<div class="anekdoodid-grid">
  <section class="anekdoot">
    <h3>Anekdoot 1</h3>
    <p>Õpetaja küsib: "Juku, miks sa hilinesid?"<br>
       Juku vastab: "Kell oli liiga kiire!"</p>
  </section>
</div>

<?php include("jalus.php"); ?>
    

f) CSS grid ja mobiilivaade

.anekdoodid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  justify-items: center;
}

@media (max-width: 600px) {
  .anekdoodid-grid { grid-template-columns: 1fr; }
}
    

3. Mobiilivaade

Telefonis on lehe sisu paigutatud üks veerg korraga: