I've been working on integrating form data from my index.html page into a card component using Bootstrap. I've successfully collected the data in the backend, but now I'm struggling to display it on the frontend as a card component. Any help would be greatly appreciated!
Here's a snippet of my index.html code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fbf6f6edeaedebf8e9d9acb7a9b7a8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0f031e092c5e4255425e">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5a7aaaab1b6b1b7a4b585f0ebf5ebf4">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid ">
<a class="navbar-brand " href="index.html">EBlogs</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</header>
<main>
<div class="card" style="margin-left: 500px; margin-top: 100px; width: 40rem;">
<img src="./images/mountains.jpg" class="card-img-top" alt="mountains">
<div class="card-body">
<h5 class="card-title">Mountains</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<button type="button" class="btn btn-primary" onclick="UpdateImage()">Update Blog</button>
<button type="button" class="btn btn-danger" onclick="addImage()">Delete Blog</button>
</div>
</div>
<form id="addBlog" method="POST">
<div class="container contaier-lg">
<div class="mb-3">
<label for="Title" class="form-label">Title for a Blog :</label>
<input type="text" class="form-control" id="title" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="Content" class="form-label">Content :</label>
<input type="text" class="form-control" id="content">
</div>
<div class="mb-3">
<label for="User" class="form-label">Created By :</label>
<input type="text" class="form-control" id="username">
</div>
<button type="button" class="btn btn-primary" onclick="addImage()">Add Blog</button>
</form>
</div>
</main>
<script src="backend.js"></script>
</body>
</html>
This is part of my backend.js file :
var card = []
function addImage(){
var title = document.getElementById("title").value
var content = document.getElementById("content").value
var user = document.getElementById("username").value
card = {title,content,user}
function adder(card){
for(let i=0;i<card.length;i++){
card.push(card[i])
}
return card
}
console.log(adder(card))
}
I have tried using append method with inner.HTML methods but haven't had any success so far.
When I add the contents, the view should resemble something like this : https://i.stack.imgur.com/aJfmC.png