Making a quora replica:-
make a file on vscode by name index.html,code:-
const express=require(“express”);
const app=express();
let port=3000;;
const path=require(“path”);
const {v4 : uuidv4}= require(‘uuid’);
const methodOverride=require(“method-override”);
app.set(“view engine”,”ejs”);
app.set(“views”,path.join(__dirname,”/views”));
app.use(express.static(path.join(__dirname,”public”)));
app.use(express.urlencoded ({extended : true }));
app.use(methodOverride(“_method”));
let posts=[{
id:uuidv4() ,
username:”rohit”,
content:”i love coding”
},{id:uuidv4(),
username:”raj”,
content:”i am working hard for getting very good placement”
},
{id:uuidv4(),
username:”anjali”,
content:”i gad got my 1st internship”
}];
app.listen(port,()=>{
console.log(“app is listning your request”);
});
app.get(“/post”,(req,res)=>{
res.render(“index.ejs”,{posts});
})
app.get(“/”,(req,res)=>{
res.send(“server working well!”);
})
app.get(“/post/new”,(req,res)=>{
res.render(“new.ejs”);
});
app.post(“/post2”,(req,res)=>{
let {username , content}=req.body;
let id=uuidv4();
posts.push({id,username,content});
res.redirect(“/post”);
});
app.get(“/post/:id”,(req,res)=>{
let {id}=req.params;
console.log(id);
let post=posts.find((p)=>id===p.id);
res.render(“new2.ejs”,{post});
});
app.patch(“/post/:id”,(req,res)=>{
let {id} = req.params;
let newC=req.body.content;
let post = posts.find((p)=>id===p.id);
post.content=newC;
res.redirect(“/post”);
});
app.get(“/post/:id/edit”,(req,res)=>{
let {id}=req.params;
let post=posts.find((p)=>id===p.id);
res.render(“edit.ejs”,{post});
});
app.delete(“/post/:id”,(req,res)=>{
let {id}=req.params;
posts=posts.filter((p)=>id!=p.id);
res.redirect(“/post”);
})
then a folder names views name make 3 different files:-
edit.ejs:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
</head>
<body>
<h2>Edit the post</h2>
<h4>Id : <%=post.id %></h4>
<h4>Username : <%=post.username %> </h4>
<form method=”post” action=”/post/<%=post.id %>?_method=PATCH”>
<textarea rows=”15″ cols=”30″ name=”content”><%=post.content %></textarea>
<button>submit</button>
</form>
</body>
</html>
new2.ejs:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<link rel=”stylesheet” href=”style.css”/>
</head>
<body>
<h3>HERE IS YOUR POST IN DETAIL</h3><br>
<h4>Post id : <%= post.id %></h4>
<div class=”div”>
<h3 class=”user”>username:<%=post.username %></h3>
<h4 class=”content”>content:<%=post.content %></h4>
</div>
</body>
</html>
new.ejs:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Add new post</title>
</head>
<body>
<form method=”post” action=”http://localhost:3000/post2″>
<input placeholder=”username” name=”username” type=”text”><br> <br>
<input placeholder=”Type your comment” name=”content” type=”text”><br>
<button>submit</button>
</form>
</body>
</html>
Leave a Reply