How to make a console-based DIV element in html and css

Question

So I am making an Express.js (node) app, which is passing a variable to the templating engine (ejs). Then the variable is loaded as a

element in a div. The problem is, that when the variable expands, I want it to separate the new string into a new line. Also, I want delete old elements, so they don't expand out of the div. It would look like a simple console.

Nodejs

app.get('/console', (req, res) => {
    currentMessage = currentMessage + `Console log`;
    res.render('console.ejs', {currentMessage});
});

.console {
    background-color: black;
    width: 80%;
    margin: auto;
    height: 30%;
    border-radius: 10px;
    padding: 10px;
    text-align: start;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="console">
        <p style="color: white;"><%= currentMessage %></p>
    </div>
</body>
</html>

It currently looks like that:

Thanks for taking your time!

score 0 · Answer 1 · answered Feb 19 '21 at 16:48

I found a solution to my problem: For the first question, I used the EJS syntaxis for rendering HTML: <%- currentMessage %>. You can find more about it here. So in the HTML file we put

    <div class="console">
        <p style="color: white;"><%- currentMessage %></p>
    </div>

And in the server file we just use the <br> element:

currentMessage = currentMessage + 'Console log <br/>';

About my second question, I decided to make it a scrollable div, instead of clearing old elements, so I just passed the property overflow to my CSS file:

overflow: auto;

This way it won't stick out of the element and have a separate scroll wheel.

How to make a console-based DIV element in html and css

1 Answers1