Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

✨ Add partial views for blog cards #2 #30

Merged
merged 2 commits into from
Sep 18, 2020
Merged

✨ Add partial views for blog cards #2 #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
22597f7
:sparkles: Add partial views for blog cards #2
sahilambre Sep 18, 2020
778a7de
:bug: Fix route and changed file name #30
sahilambre Sep 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions controllers/blogcrud.controllers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ module.exports = {
createForm: function (req, res) {
res.render("create");
},

myBlog: function (req, res) {
res.render("explore");
},
createData: function (req, res) {
var inputData = req.body;
blogModel.createBlog(inputData, function (data) {
Expand Down
2 changes: 2 additions & 0 deletions routes/blogs/blogRoutes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,6 @@ routes.route("/create").post(blogController.createData);
routes.route("/updateblog").post(blogController.updateData);
routes.route("/deleteblog").post(blogController.deleteData);

routes.route("/explore").get(blogController.myBlog);

module.exports = routes;
102 changes: 102 additions & 0 deletions views/explore.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Editor's Dependecy Style -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css"
/>
<!-- Editor's Style -->
<link
rel="stylesheet"
href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css"
/>
<!-- font awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous"
/>
<!--Import Google Icon Font-->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- Compiled and minified CSS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"
/>
<!-- logo font -->
<link
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap"
rel="stylesheet"
/>
<title>My Blogs</title>
<link rel="icon" href="/img/book.svg" />
<style>
.card {
transition: 0.5s ease;
cursor: pointer;
}

.card:hover {
transform: scale(1.05);
box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.6);
}
</style>
</head>
<body>
<header>
<nav class="nav-wrapper black">
<ul>
<li>
<a
onclick="window.history.back()"
class="btn black text-white waves-effect waves-lights"
><i class="material-icons">arrow_back</i></a
>
</li>
</ul>
<div class="container">
<a
href="#"
class="brand-logo left-align"
style="font-family: 'Dancing Script', cursive"
>Write.it</a
>
<a href="#" class="sidenav-trigger" data-target="mobile-links">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<!-- <li><a href="#" class="">Home</a></li> -->
<!-- <li><a href="#" class="">About</a></li> -->
<!-- <li><a href="#" class="">Contact</a></li> -->
<li>
<a
href="#"
class="btn-floating pulse"
style="background-color: #636cff"
>
<i class="material-icons">add</i>
</a>
</li>
<!-- <li><span class="badge white-text pink">Add Blog</span></li> -->
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-links">
<li><a href="#">Add Blog</a></li>
</ul>
</header>
<div class="container">
<h2 style="font-family: 'Dancing Script', cursive">Explore Blogs</h2>
<div class="row">
<% .forEach(function(){ %> <%- include('partials/cards') %> <% }); %>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sahilambre I think there is typo on this line. It must be forEach rather than .forEach.

</div>
</div>
</body>
</html>
25 changes: 25 additions & 0 deletions views/partials/cards.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<div class="col s12 m6 l4">
<div class="card large">
<div class="card-image">
<img
src="/img/pexels-lukas-1420701.jpg"
width=""
height="200px"
alt="curry-img"
/>
</div>
<div class="card-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
consectetur saepe magnam inventore doloremque facere dolorum, itaque ab
sunt maiores.
</p>
<br />
<span class="card-title">author Name</span>
</div>
<div class="card-action">
<a href="#" style="color: #6c6cff">View Blog</a>
<a href="#" style="color: #000000; cursor: none">Create date</a>
</div>
</div>
</div>