Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions Abhijith P/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
111 changes: 111 additions & 0 deletions Abhijith P/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
# A Simple Guide to EJS with Express

A beginner-friendly Node.js project that demonstrates how **EJS (Embedded JavaScript)** works with **Express** for dynamic web pages.
It includes practical examples of passing variables, using dynamic routes, and rendering data in templates.

---

## Key Features

* **Home Page:** Basic hub route
* **Dice Roll:** Pass simple variables to EJS
* **Instagram Profile:** Use dynamic routes and render complex objects

---

## Technologies Used

* Node.js
* Express
* EJS (Embedded JavaScript)

---

## How to Run This Project

**1. Install Dependencies**

```bash
npm install
```

**2. Run the Server**

```bash
npm start
```

**3. Open in Browser**
Visit: [http://localhost:8000](http://localhost:8000)

---

## What This Project Demonstrates

### 1. The Core EJS Setup

```js
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "/views"));
```

### 2. Example: Dice Roll

**Server**

```js
app.get("/rolldice", (req, res) => {
let diceVal = Math.floor(Math.random() * 6) + 1;
res.render("dice", { num: diceVal });
});
```

**Template**

```ejs
<h1>The random dice value is <%= num %></h1>

<% if (num == 6) { %>
<h2>Congratulations, you rolled a 6!</h2>
<% } %>
```

### 3. Example: Instagram Profile

**Server**

```js
app.get("/instagram/:username", (req, res) => {
let { username } = req.params;
const userData = data[username];

if (userData) {
res.render("instagram", { userData });
} else {
res.send("Sorry, user not found!");
}
});
```

**Template**

```ejs
<h1><%= userData.name %></h1>
<p>Followers: <%= userData.followers %></p>
<p>Following: <%= userData.following %></p>
<hr />

<% for (let post of userData.posts) { %>
<img src="<%= post.image %>">
<p>Likes: <%= post.likes %></p>
<% } %>
```

---

## Available Routes

* [http://localhost:8000/](http://localhost:8000/) — Home Page
* [http://localhost:8000/rolldice](http://localhost:8000/rolldice) — Roll a random die
* [http://localhost:8000/instagram/cats](http://localhost:8000/instagram/cats) — Cats profile
* [http://localhost:8000/instagram/dogs](http://localhost:8000/instagram/dogs) — Dogs profile
46 changes: 46 additions & 0 deletions Abhijith P/data.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
{
"cats": {
"name": "cats",
"followers": 25000,
"following": 5,
"posts": [
{
"image": "https://plus.unsplash.com/premium_photo-1677545182067-26ac518ef64f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8Y2F0c3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60",
"likes": 200,
"comments": 17
},
{
"image": "https://images.unsplash.com/photo-1592194996308-7b43878e84a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y2F0c3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60",
"likes": 312,
"comments": 19
},
{
"image": "https://images.unsplash.com/photo-1577023311546-cdc07a8454d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Y2F0c3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60",
"likes": 1065,
"comments": 200
}
]
},
"dogs": {
"name": "dogs",
"followers": 75000,
"following": 150,
"posts": [
{
"image": "https://images.unsplash.com/photo-1598133894008-61f7fdb8cc3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8ZG9nc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60",
"likes": 3000,
"comments": 41
},
{
"image": "https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fGRvZ3N8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=800&q=60",
"likes": 2500,
"comments": 32
},
{
"image": "https://images.unsplash.com/photo-1537151608828-ea2b11777ee8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fGRvZ3N8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=800&q=60",
"likes": 500,
"comments": 6
}
]
}
}
36 changes: 36 additions & 0 deletions Abhijith P/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
const express = require("express");
const app = express();
const PORT = 8000;
const path = require("path");

app.set("views", path.join(__dirname, "/views"));
app.set("view engine", "ejs");

app.listen(PORT, () => {
console.log("app is listening on port:", PORT);
});

app.get("/", (req, res) => {
res.render("home");
});

app.get("/home", (req, res) => {
res.send("hi there this is me ")
});

app.get("/rolldice", (req, res) => {
let diceVal = Math.floor(Math.random() * 6) + 1;
res.render("dice", { "num": diceVal });
});

app.get("/instagram/:username", (req, res) => {
const data = require("./data.json");
let { username } = req.params;
const userData = data[username];
if (userData) {
res.render("instagram", { userData: userData });
} else {
res.send("sorry user not found");
};
});

Loading