Get Programming with JavaScript

Get Programming with JavaScript - Listing 19.01

Listing 19.01 - Fitness app news

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fitness App News</title>
</head>
<body>

<h1>Fitness App News</h1>

<div id="news"></news>


    <script type="text/template" id="newsItemTemplate">
        <div class="newsItem">
            <h3>{{title}}<span> - by {{author}}</span></h3>
            <p>{{body}}</p>
            <p class="posted"><em>Posted: {{posted}}</em></p>
            <p class="follow">Follow {{author}} {{social}}</p>
        </div>
    </script>

</body>
</html>

Further Adventures

Listing 19.01 - Fitness app news - Task 2

Move the first {{author}} placeholder into its own paragraph and run the program again.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fitness App News</title>
</head>
<body>

<h1>Fitness App News</h1>

<div id="news"></news>


    <script type="text/template" id="newsItemTemplate">
        <div class="newsItem">
            <h3>{{title}}</h3>
            <p>By {{author}}</p>
            <p>{{body}}</p>
            <p class="posted"><em>Posted: {{posted}}</em></p>
            <p class="follow">Follow {{author}} {{social}}</p>
        </div>
    </script>

</body>
</html>