├── .gitignore ├── Procfile ├── views ├── layout │ ├── footer.ejs │ └── header.ejs ├── contact.ejs └── index.ejs ├── README.md ├── package.json ├── index.js └── public └── css └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: node index.js -------------------------------------------------------------------------------- /views/layout/footer.ejs: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /views/contact.ejs: -------------------------------------------------------------------------------- 1 | <%- include("layout/header") %> 2 |
3 |

Anisul Islam

4 |

Tampere, Finland

5 |
6 | <%- include("layout/footer") %> 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ejs-youtube-project 2 | Here, I am sharing the project that I created during the youtube lecture. 3 | ## demo of the project - https://ejs-programming-app.herokuapp.com/ 4 | ## To run this project, download/clone the project then move to root directory. then 5 | ```js 6 | npm install 7 | npm start 8 | ``` 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ejs-tutorial", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "nodemon index.js" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "ejs": "^3.1.6", 15 | "express": "^4.17.1" 16 | }, 17 | "devDependencies": { 18 | "nodemon": "^2.0.15" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /views/layout/header.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Home 8 | 9 | 10 | 11 |
12 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /views/index.ejs: -------------------------------------------------------------------------------- 1 | <%- include("layout/header") %> 2 |
3 |
4 | 9 | 10 |
11 | 12 | 21 |
22 | <%- include("layout/footer") %> -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | 3 | const app = express(); 4 | const port = process.env.PORT; 5 | 6 | app.use(express.urlencoded({ extended: true })); 7 | app.use(express.static("public")); 8 | 9 | app.set("view engine", "ejs"); 10 | 11 | let pLanguages = []; 12 | 13 | app.get("/", (req, res) => { 14 | res.render("index", { plNames: pLanguages }); 15 | }); 16 | 17 | app.get("/contact", (req, res) => { 18 | res.render("contact", {}); 19 | }); 20 | 21 | app.post("/", (req, res) => { 22 | const pLangauge = req.body.pLangauge; 23 | pLanguages.push(pLangauge); 24 | res.redirect("/"); 25 | }); 26 | 27 | app.listen(port, () => { 28 | console.log(`Example app listening at http://localhost:${port}`); 29 | }); 30 | -------------------------------------------------------------------------------- /public/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | text-decoration: none; 6 | list-style: none; 7 | } 8 | 9 | .center { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | header { 16 | min-height: 5vh; 17 | background-color: #22577e; 18 | } 19 | nav ul { 20 | display: flex; 21 | } 22 | nav ul li { 23 | margin: 0 1rem; 24 | padding: 1rem; 25 | transition: all 0.3s; 26 | } 27 | nav ul li a { 28 | color: white; 29 | font-size: 1.2rem; 30 | cursor: pointer; 31 | } 32 | nav ul li:hover { 33 | background-color: #0a89e4; 34 | } 35 | 36 | main { 37 | min-height: 90vh; 38 | background-color: #5584ac; 39 | display: flex; 40 | padding-top: 1rem; 41 | align-items: center; 42 | flex-direction: column; 43 | } 44 | 45 | input { 46 | border: none; 47 | padding: 0.5rem; 48 | border-radius: 0.5rem; 49 | font-size: 1.2rem; 50 | } 51 | 52 | button { 53 | border: none; 54 | padding: 0.5rem; 55 | border-radius: 0.5rem; 56 | font-size: 1.2rem; 57 | cursor: pointer; 58 | background-color: #22577e; 59 | color: white; 60 | transition: all 0.3s; 61 | } 62 | button:hover { 63 | background-color: rgb(3, 232, 156); 64 | } 65 | 66 | main ul li { 67 | background-color: white; 68 | margin: 0.5rem 0; 69 | width: 20rem; 70 | padding: 0.5rem; 71 | transition: all 0.3s; 72 | } 73 | main ul li:hover { 74 | background-color: black; 75 | color: white; 76 | } 77 | 78 | footer { 79 | min-height: 5vh; 80 | background-color: #95d1cc; 81 | } 82 | --------------------------------------------------------------------------------