1.Sissejuhatus

Minu ülesanne oli luua mobiilisõbralik veebileht teemal anekdoodid. Leht pidi kuvama päise, sisu ja jaluse ning lugema andmeid eraldi tekstifailidest (teade.txt ja tegija.txt). Samuti pidin looma kahele nädalale eraldi anekdoodilehed ning ühendama need ühiseks lahenduseks.

Kasutasin järgmiseid tehnoloogiaid:

• HTML – põhistruktuuri loomiseks
• CSS – kujunduseks ja responsive disaini saavutamiseks
• PHP – serveripoolseks failisisuga töötamiseks ja komponentide ühendamiseks

2.Koodilõigud ja selgitused

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

See lõik asub failis jalus.php. Navigatsioonimenüü lingid kutsuvad välja funktsiooni postForm() – see laeb uue sisu fetch() abil samasse leheossa ilma uut vahelehte avamata.

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 kood võimaldab navigeerida anekdootide vahel ilma uut lehte avamata – see muudab kasutuskogemuse sujuvaks ka mobiilivaates.

b)Faili sisu kuvamine PHP abil

Failis index.php kasutasin järgmist koodilõiku teate lugemiseks teade.txt failist. Jaluses loetakse samamoodi lehe tegija nimi tegija.txt failist.

<section class="welcome">
    <h2>Tere tulemast!</h2>
    <p><?php require("teade.txt"); ?></p>
</section>
        

Selle abil kuvatakse teade otse failist, nii et sisu saab muuta faili kaudu ilma lehe koodi redigeerimata.

c)Päise ja jaluse ühendamine PHP require abil

Failis index.php loen sisse päise ja jaluse eraldi failidest. Nii on kujundus kõigil lehtedel ühesugune ning muutus ühes kohas mõjutab kogu lehestikku.

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

<section class="welcome">
    <h2>Tere tulemast!</h2>
    <p><?php require("teade.txt"); ?></p>
</section>

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

d)Grid-kujundus mitme anekdoodi jaoks

Anekdootide näitamiseks kasutasin CSS grid süsteemi, mis võimaldab neid kuvada kõrvuti, kui ekraan on lai.

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

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

Selle tulemusel moodustub anekdootidest ilus võrgustik ehk grid layout. Väiksematel ekraanidel kohandub iga anekdoot automaatselt ühe veeru paigutusse.

e)Mobiilivaate reeglid

Allolev media query tagab, et ekraani alla 600 px muutub kujundus automaatselt üheveeruliseks ja menüü lingid asuvad üksteise all.

@media (max-width: 600px) {
    header {
        flex-direction: column;
    }
    nav ul {
        flex-direction: column;
        width: 100%;
    }
    nav ul li a {
        display: block;
        text-align: center;
        padding: 10px;
    }
    .anekdoodid-grid {
        grid-template-columns: 1fr;
    }
    main {
        padding: 16px 12px;
    }
}
        

See on üks olulisemaid osi mobiilisõbralikkuse loomiseks. Media query võimaldab muuta elementide paigutust ja suurust vastavalt seadme ekraanilaiusele.

f)Anekdootide lehe põhiosa (anekdoot1.php)

Anekdoodilehed sisaldavad ainult sisu – ilma päise ja jaluseta. Päis ja jalus on juba lehel olemas, fetch() lisab ainult uue sisu <main id="content-area"> sisse.

<section class="nadal-pealkiri">
    <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>
        

Iga <section class="anekdoot"> plokk kujutab ühte anekdooti. Grid tagab, et need on kõrvuti, kuni ekraani laius muutub väiksemaks.

3.Mobiilivaade

Telefonis on sisu paigutatud ühes veerus, menüü lingid asuvad üksteise all ning iga anekdoot kuvatakse eraldi kaardina, mis võtab kogu ekraani laiuse.

Pildil on näha:

• Päis on endiselt üleval ja nähtav.
• Menüü lingid on üksteise all.
• Anekdootide kaardid laienevad täislaiusesse ilma tühikuta servades.
• Tekst kohandub väiksemale ekraanile, font on endiselt loetav.