CODEWITHSUNDEEP
javascriptjquerycss
shmootidy
shmootidy

Reputation: 13

How do I change the size and/or weight of emitted text in javascript?

I'm building a simple chat app for practice and want to style what is emitted. Specifically, I'd like the timestamp to be a smaller size (or maybe a different shade) and the user name to be bold.

I've tried user.bold(), but that emits <b>user</b>.

I've tried CSS in-line styling, $("user").css({"font-style": "bold"}) and $("#initials").css({"font-style": "bold"}), but neither does anything.

And I've tried getElementByID('user'). Nada. (Don't ask what I wrote around that because I've been plugging away at this for hours and can't remember...)

When I adjust my CSS file, it only affects the input field and not the text that is emitted.

Here's my code (EDIT/NOTE: I've included a little more of my client-side .js file):

   

$('form').submit(function () {
    var user = $('#initials').val();
    var text = $('#message').val();
    var dt = new Date();
    var ampm = (Date <12 || Date === 24) ? "AM" : "PM";
    var time = "(" + (dt.getHours() % 12 || 12) + ":" + ("0" + dt.getMinutes()).slice(-2) + ":" + ("0" + dt.getSeconds()).slice(-2) + ampm + ") ";
    socket.emit('message', time + user + ': ' + text);
    $('#message').val('');
    return false;
});

socket.on('message', function (msg) {
  $('<li>').text(msg).appendTo('#history');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="initials" maxlength="2">
  <input id="message">
  <button>Send</button>
</form>

EDIT – Here's the relevant part of my CSS file:

body {
    background-color:white;
    color: #303030;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 20px;
    font-size: 15px;
}
input {
    border-radius: 2px;
    border: none;
    padding: 5px;
    font-size: 15px;
}

#initials {
    width: 40px;
    text-transform: uppercase;
}

Here's my HTML:

<main>
    <ol id="history">
    </ol>

    <form>
        <input id="initials" maxlength="2">
        <input id="message">
        <button>Send</button>
    </form>
</main>

Here's what I see:

enter image description here

Looking forward to seeing what solutions you might have! 90% of what I've built so far has come from this forum and community. XO

Upvotes: 1

Views: 241

Answers (1)

fubar
fubar

Reputation: 17388

If you change this line from using the text method, which escapes HTML entities, to html, it'll fix your issue.

$('<li>').html(msg).appendTo('#history');

You will then be able to include HTML in your messages:

$('form').submit(function () {
    var user = $('#initials').val();
    var text = $('#message').val();
    var dt = new Date();
    var ampm = (Date <12 || Date === 24) ? "AM" : "PM";
    var time = "(" + (dt.getHours() % 12 || 12) + ":" + ("0" + dt.getMinutes()).slice(-2) + ":" + ("0" + dt.getSeconds()).slice(-2) + ampm + ") ";
    socket.emit('message', '<span class="timestamp">' + time + '</span> <span class="user">' + user + '</span>: <span class="message">' + text + '</span>');
    $('#message').val('');
    return false;
});

socket.on('message', function (msg) {
    $('<li>').html(msg).appendTo('#history');
});

And you can then write CSS to target these classes:

.timestamp {
    font-size: 10px;
}
.user {
    font-weight: bold;
}
.message {
    /* ... */
}

Upvotes: 1

Related Questions