Issue
I was trying to figure out how can i add or display form data from this index.html page and as of now i did collect the data in the backend, but finding ways on how to display the data in frontend as a card component which i used from bootstrap , appreciate your efforts if anyone could help me on this !
my index.html :
<!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/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/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>
my backend.js : (as of now ) :
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 was try using append method with inner.HTML methods but not working out..
the view when i add the contents would be something like this :
Solution
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}
var cardTemplate = ' <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">'+ title +'</h5>'+
' <p class="card-text">'+ 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>'
'</div>';
document.getElementById("addBlog").insertAdjacentHTML("beforebegin", cardTemplate);
function adder(card){
for(let i=0;i<card.length;i++){
card.push(card[i])
}
return card
}
console.log(adder(card))
}<!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/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/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>Answered By - Nikhil Parmar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.