Web Komponente: Blog Grid in Mini Urejevalnik Besedila

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="komponenta-vsebina">
        <h3>1. Seznam objav (Grid 5 v vrsti)</h3>
        <div class="blog-mreza">
            <div class="blog-kartica">
                <img src="/img/demo.png" alt="Demo">
                <div class="blog-info"><h4>Naslov 1</h4><p>Opis...</p></div>
            </div>
            <div class="blog-kartica">
                <img src="/img/demo.png" alt="Demo">
                <div class="blog-info"><h4>Naslov 2</h4><p>Opis...</p></div>
            </div>
            </div>
    
        <hr>
    
        <h3>2. Mini Pisarna (Urejevalnik besedila)</h3>
        <div class="urejevalnik-kontrole">
            <button class="btn-tool" onclick="Urejevalnik.oblikuj('bold')"><b>B</b></button>
            <button class="btn-tool" onclick="Urejevalnik.oblikuj('italic')"><i>I</i></button>
            <button class="btn-tool" onclick="Urejevalnik.oblikuj('underline')"><u>U</u></button>
            <button class="btn-tool" onclick="Urejevalnik.dodajPovezavo()">Link</button>
            <button class="btn-tool" onclick="Urejevalnik.pobrišiSlog()">Pobriši</button>
        </div>
        <div class="urejevalnik-polje" contenteditable="true">
            Tukaj lahko pišeš in oblikuješ besedilo...
        </div>
    </div>
</body>
</html>

h3 {
    font-family: "Arial Black", Gadget, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    padding-left: 15px;
    border-left: 8px solid #ff9800; /* Oranžna linija ob strani */
    margin: 25px 0 15px 0;
    line-height: 1.2;
}

.blog-mreza {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    padding: 10px;
}

.blog-kartica {
    background-color: var(--card);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    transition: transform 0.2s;
}

.blog-kartica:hover { 
    transform: translateY(-5px); 
}

.blog-kartica img { 
    width: 100%; 
    height: auto; 
    display: block; 
}

.blog-info { 
    padding: 10px; 
}

.urejevalnik-kontrole { 
    margin-bottom: 10px; 
    padding: 10px; 
    border-radius: 5px; 
}

.urejevalnik-polje { 
    border: 1px solid var(--border); 
    background: var(--bg);
    color: var(--fg);
    min-height: 150px; 
    padding: 10px; 
}

.btn-tool { 
    display: inline-block;
    width: auto;
    padding: 5px 10px; 
    cursor: pointer; 
    border: 1px solid var(--border); 
    background: var(--card);
    color: var(--fg);
    margin-right: 2px; 
}

@media (max-width: 1024px) { 
    .blog-mreza { 
        grid-template-columns: repeat(3, 1fr); 
    } 
}
@media (max-width: 600px) { 
    .blog-mreza { 
        grid-template-columns: 1fr; 
    } 
}

const Urejevalnik = {
    oblikuj: function(ukaz) {
        document.execCommand(ukaz, false, null);
    },
    dodajPovezavo: function() {
        const url = prompt("Vnesi URL naslov:");
        if (url) document.execCommand("createLink", false, url);
    },
    pobrišiSlog: function() {
        document.execCommand("removeFormat", false, null);
    }
};

document.addEventListener('DOMContentLoaded', () => {
    console.log("Mini urejevalnik pripravljen!");
});

Interaktivne Web Komponente: Blog & Urejevalnik

Vadnica.org

Povezave

Podpora