2. Blog Form and List
Membuat blog form kita bisa memanfaatkan code html dan css yang ada pada pertemuan sebelumnya terkait form contact me. Sehingga kita bisa berfokus pada penggunaan javascript untuk mengolah data inputan pada formulir dan ditampilkan kedalam list blog.
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 id="paragraph"></div>
</div>
</div>
</div>
</div>
<script src="blog.js"></script>
</body>
</html>
