Текст снизу вверх на HTML

Question

Мой код для на HTML:

<div class="info"> 
  <font face="monospace" size="5">Information</font> 
  <textarea class="infoArea" name="forInfo" cols="92" rows="11" readonly> </textarea> 
</div>

И на CSS:.

infoArea { 
font-size: 20px; 
resize: none; 
font-family: monospace; 
position: relative; 
}

Мне нужно сделать так, чтобы текст печатался не сверху вниз, а наоборот, снизу вверх. То есть старые уведомления будут выше новых. Помогите, пожалуйста.

Answer 1

Лучше решать эту задачу следующим образом:

генерируем отдельные сообщения;
упаковываем их в контейнер (для каждого сообщения свой контейнер);
вставляем контейнеры сообщений в родительский контейнер с помощью prepend, чтобы они занимали место в начале родительского контейнера

let counter = 0;

const notesContainerElement = document.querySelector('.notes-container');
const textTemplate = document.querySelector('#text-template').content.textContent;
const noteTemplate = document.querySelector('#note-template').content.querySelector('.note');

function generateRandomMessage () {
    return textTemplate.slice(0, Math.floor(Math.random() * (textTemplate.length - 10) + 10));
}

function getTime() {
    return new Date().toISOString().slice(0, -5).replace('T', ' ');
}

function generateNoteElem () {
    const noteElem = noteTemplate.cloneNode(true);
    const noteDataElem = noteElem.querySelector('.note-data');
    const noteMessageElem = noteElem.querySelector('.note-message');

    const message = generateRandomMessage();
    noteDataElem.textContent = `msg #${++counter}: ${getTime()}`
    noteMessageElem.textContent = message;
    return noteElem;
}

function postNote (note) {
    notesContainerElement.prepend(note);
}

for (let i = 0; i < 20; i++) {
    setTimeout(() => {
        const note = generateNoteElem();
        postNote(note);
    }, i * 500 + 1000);
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
}

h1 {
    font-family: monospace;
    letter-spacing: 15px;
    color: #fff;
    text-align: center;
}

.page {
    height: 100vh;
    width: 100vw;
    background-color: #222;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.notes-container {
    width: 80%;
    height: 80%;
    padding: 20px;

    background-color: #333;
    border-radius: 20px;

    display: flex;
    flex-direction: column;
    gap: 20px;

    overflow-y: auto;
}

.notes-container::-webkit-scrollbar {
    display: none;
}

.note {
    padding: 10px;
    border-radius: 10px;
    background-color: #555;

    animation-name: newNote;
    animation-duration: .2s;
    animation-timing-function: ease;
}

.note-message {
    margin-top: 10px;

    font-family: monospace;
    color: #fff;
    letter-spacing: 3px;
}

.note-data {
    font-family: monospace;
    color: #222;
}

@keyframes newNote {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notes</title>

    <link rel="stylesheet" href="index.css">
</head>

<body class="page">
    <h1>notes</h1>
    <section class="notes-container"></section>

    <template id="text-template">Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio expedita ipsam fugiat illum delectus corporis, veritatis cupiditate. Repellat fuga blanditiis maiores exercitationem. Delectus nulla quae harum, laboriosam est, quasi eaque placeat neque facilis officia sunt hic doloremque aspernatur recusandae animi veniam culpa quo magnam? Pariatur saepe doloribus error expedita? Provident?</template>
    <template id="note-template">
        <div class="note">
            <p class="note-data"></p>
            <p class="note-message"></p>
        </div>
        
    </template>
    <script src="main.js"></script>
</body>

</html>

БЛОГ НА HUSL

Текст снизу вверх на HTML

Ответы (1 шт):