Web Components: Blog Grid and Mini Text Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog and Text Editor Component</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="component-content">
        <h3>1. Post List (5-column Grid)</h3>
        <div class="blog-grid">
            <div class="blog-card">
                <img src="/img/demo.png" alt="Demo">
                <div class="blog-info"><h4>Title 1</h4><p>Description...</p></div>
            </div>
            <div class="blog-card">
                <img src="/img/demo.png" alt="Demo">
                <div class="blog-info"><h4>Title 2</h4><p>Description...</p></div>
            </div>
        </div>
    
        <hr>
    
        <h3>2. Mini Office (Text Editor)</h3>
        <div class="editor-controls">
            <button class="btn-tool" onclick="Editor.format('bold')"><b>B</b></button>
            <button class="btn-tool" onclick="Editor.format('italic')"><i>I</i></button>
            <button class="btn-tool" onclick="Editor.format('underline')"><u>U</u></button>
            <button class="btn-tool" onclick="Editor.addLink()">Link</button>
            <button class="btn-tool" onclick="Editor.clearStyle()">Clear</button>
        </div>
        <div class="editor-field" contenteditable="true">
            Type and style your text here...
        </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; /* Orange side border */
    margin: 25px 0 15px 0;
    line-height: 1.2;
}

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

.blog-card {
    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-card:hover { 
    transform: translateY(-5px); 
}

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

.blog-info { 
    padding: 10px; 
}

.editor-controls { 
    margin-bottom: 10px; 
    padding: 10px; 
    border-radius: 5px; 
}

.editor-field { 
    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-grid { 
        grid-template-columns: repeat(3, 1fr); 
    } 
}
@media (max-width: 600px) { 
    .blog-grid { 
        grid-template-columns: 1fr; 
    } 
}

const Editor = {
    format: function(command) {
        document.execCommand(command, false, null);
    },
    addLink: function() {
        const url = prompt("Enter URL address:");
        if (url) document.execCommand("createLink", false, url);
    },
    clearStyle: function() {
        document.execCommand("removeFormat", false, null);
    }
};

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

Interactive Web Components: Blog & Editor

Vadnica.org

Links

Support