INDEX ROUTE (GET /chats)

 INDEX.JS

// INDEX ROUTE
app.get("/chats", async (req, res) => {
  let chats = await Chat.find();
  res.render("index.ejs", { chats });
});

INDEX.EJS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>All chats</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h2>All Chats!</h2>
    <% for(let chat of chats) { %>
    <div class="Chat">
      <p>From:<i> <%= chat.from %></i></p>
      <div class="msg"><p>Message: <%= chat.msg %></p></div>
      <p>Received by: <i> <%= chat.to%></i></p>
    </div>
    <br />
    <% } %>
  </body>
</html>


STYLE.CSS

body{
    margin-left: 20px;
}

.Chat{
    background-color: lightgreen;
    display:inline-block;
    margin: 23px;
    border-radius:16px;
}
.msg{
    background-color: green;
    color: white;
    padding:5px;
    border-radius: 15px;
}

FOR CSS TO BE APPLIED

app.use(express.static(path.join(__dirname, "public")));









Comments

Post a Comment

Popular posts from this blog

DELETE ROUTE

Image
 INDEX.EJS     </ form >       < form method = "post" action = "/chats/ <%= chat . _id %> ?_method=delete" >         < button > Delete </ button >       </ form > INDEX.JS / DELETE ROUTE   app . delete ( "/chats/:id" , async ( req , res ) => {     let { id } = req . params ;     let deletedChat = await Chat . findByIdAndDelete ( id );     console . log ( deletedChat );     res . redirect ( "/chats" );   })
Read more

CREATE ROUTE

Image
INDEX.JS app . use ( express . urlencoded ({ extended : true })); // NEW ROUTE app . get ( "/chats/new" , ( req , res ) => {   res . render ( "new.ejs" ); }); // POST ROUTE app . post ( "/chats" , ( req , res ) => {   let { from , to , msg } = req . body ;   let newchat = new Chat ({     from : from ,     msg : msg ,     to : to ,     created_at : new Date (),   });   newchat     . save ()     . then (( res ) => {       console . log ( "chat was saved" );     })     . catch (( err ) => {       console . log ( err );     });   res . redirect ( "/chats" ); }); INDEX.EJS <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < t...
Read more

Schema type options

Image
let book2 = new Book ({   title : "Marvel Comics" ,   author : "stan lee" ,   price : 499 ,   category : "comics" , })   . save ()   . then (( res ) => {     console . log ( res );   })   . catch (( err ) => {     console . log ( err );   }); NOW THE CONDITIONS:   title : {     type : String ,     required : true ,     maxlength : 5 ,   },   discount : {     type : Number ,     default : 0 ,   }, HERE WE DIDN'T DEFINE DISCOUNT ,BUT IN THE OUTPUT WE CAN SEE IT, AS IT IS DEFAULT category : {     type : String ,     enum : [ "fiction" , "non-fiction" ],   }, THERE ARE MANY MORE SCHEMA TYPES ,REFER:https://mongoosejs.com/docs/schematypes.html  
Read more