2. Adding Time to Blog List
Kita perlu menambahkan satu bagian baru pada bagian list blog yakni bagian waktu postingan. Bagian inilah yang nantinya akan kita lakukan manipulasi menggunaakan DOM agar dinamis.
Contoh code
blog.html
<!DOCTYPE html>
<html>
<head>
<title>Creating Blog Page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- NavBar -->
<nav>
<div class="left-side">
<a href="index.html">
<img src="assets/logo.png" alt="logo" />
</a>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="blog.html" class="list-active">Blog</a>
</li>
</ul>
</div>
<div class="right-side">
<a href="contact.html"> Contact Me </a>
</div>
</nav>
<!-- Blog -->
<!-- Form -->
<div class="blog">
<div class="blog-form">
<div class="form-container">
<form onsubmit="addBlog(event)">
<h1>Create Post Blog</h1>
<div>
<label for="input-blog-title">Title</label>
<input id="input-blog-title" />
</div>
<div>
<label for="input-blog-content">Content</label>
<textarea id="input-blog-content"></textarea>
</div>
<div>
<label>Upload Image</label>
<div class="input-blog-image-group">
<label for="input-blog-image">
<p>Attach File</p>
<img src="assets/file.png" alt="file" />
</label>
<input type="file" id="input-blog-image" hidden />
</div>
</div>
<div class="button-group">
<button>Post Blog</button>
</div>
</form>
</div>
</div>
<hr class="line" />
<div id="contents" class="blog-list">
<!-- dynamic content would be here -->
<div class="blog-list-item">
<div class="blog-image">
<img src="assets/blog-img.png" alt="" />
</div>
<div class="blog-content">
<div class="btn-group">
<button class="btn-edit">Edit Post</button>
<button class="btn-post">Post Blog</button>
</div>
<h1>
<a href="blog-detail.html" target="_blank"
>Pasar Coding di Indonesia Dinilai Masih Menjanjikan</a
>
</h1>
<div class="detail-blog-content">
12 Jul 2021 22:30 WIB | Ichsan Emrald Alamsyah
</div>
<p>
Ketimpangan sumber daya manusia (SDM) di sektor digital masih
menjadi isu yang belum terpecahkan. Berdasarkan penelitian
ManpowerGroup, ketimpangan SDM global, termasuk Indonesia,
meningkat dua kali lipat dalam satu dekade terakhir. Lorem ipsum,
dolor sit amet consectetur adipisicing elit. Quam, molestiae
numquam! Deleniti maiores expedita eaque deserunt quaerat! Dicta,
eligendi debitis?
</p>
<div style="text-align: right">
<span style="font-size: 15px; color: grey">1 hours ago</span>
</div>
</div>
</div>
</div>
</div>
<script src="blog.js"></script>
</body>
</html>
