<header>
    <h2 class="title">Location: pathname property</h2>
    <p class="description">Ця властивість містить шлях частини URL (без домену та параметрів запиту).</p>
</header>
<main>
    <div class="result">
        <p>Поточний шлях URL: <span id="currentPath"></span></p>
    </div>
</main>
body {
    font-size: 16px;
    line-height: 1.5;
    font-family: monospace;
}

header {
    background-color: #f1f1f1;
    margin-bottom: 25px;
    padding: 15px;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
    -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
    box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
    padding-bottom: 15px;
    border-bottom: 1px solid #999;
}

header p.description {
    font-style: italic;
    color: #222;
}

.result {
    background-color: #f8f8f8;
    padding: 15px;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
    -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
    box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
// Функція для відображення поточного шляху URL
function displayCurrentPath() {
    let currentPath = window.location.pathname;
    document.getElementById('currentPath').textContent = currentPath;
}

// Виклик функції при завантаженні сторінки
displayCurrentPath();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.