diff options
| -rw-r--r-- | .env.example | 1 | ||||
| -rw-r--r-- | .gitattributes | 2 | ||||
| -rw-r--r-- | .gitignore | 7 | ||||
| -rw-r--r-- | README.md | 43 | ||||
| -rw-r--r-- | models/todoItem.js | 13 | ||||
| -rw-r--r-- | package.json | 36 | ||||
| -rw-r--r-- | server.js | 35 | ||||
| -rw-r--r-- | views/index.ejs | 105 |
8 files changed, 242 insertions, 0 deletions
diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..9abe270 --- /dev/null +++ b/.env.example @@ -0,0 +1 @@ +MONGODB_URI=mongodb://[username:password@]host1[:port1][,...hostN[:portN]][/[defaultauthdb][?options]]
\ No newline at end of file diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..72e30ee --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +node_modules/ +package-lock.json +.vscode +.vs +.idea +.eclipse +.env
\ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..9c56826 --- /dev/null +++ b/README.md @@ -0,0 +1,43 @@ +# express-todo-app +[](https://github.com/8cy/npm-002/blob/master/LICENSEhttps://github.com/8cy/node-002/blob/master/LICENSE) + +During a casual Reddit browsing session, I came across a post (can't remember which sub) that caught my eye. A [site](https://what-to-code.com/) which gives you random project ideas. The first idea I saw which interested me was the todo list project, so here we are. + +Site in reference: "[What to Code?](https://what-to-code.com/)". + +## Features +* Add TODOs to your TODO database. +* Thoroughly commented code. + +*lol* + +## Tech +* [express](https://www.npmjs.com/package/express) for server +* [MongoDB](https://www.npmjs.com/package/mongodb) for database. +* [Embedded JavaScript templates](https://www.npmjs.com/package/ejs) for templating engine. + +# Setup +1. `$ npm install` to install dependencies. +2. Make a `.env` file in the root of the project structure and follow the example bellow. + 1. Copy and paste; `MONGODB_URI=example` into the `.env` file you just created. + 2. Replace `example` with your MongoDB connection string URI. + 3. The final `.env` file should look something like this; + ```sh + MONGODB_URI=mongodb://[username:password@]host1[:port1][,...hostN[:portN]][/[defaultauthdb][?options]] + ``` +3. Finally, do `$ node server.js` to start up the app. The default localhost URL should be `http://localhost:1337`. + +## TODO ~*lol* +Feel free to take these things as inspiration as I will probably not be updating this repository all that much. + +* Implement change and delete feature. +* Make UI cooler +* Add API +* Add user system + +### Links +* [Website](https://kyzer.co/) +* [GitHub](https://github.com/8cy/express-todo-app) + +### License +MIT
\ No newline at end of file diff --git a/models/todoItem.js b/models/todoItem.js new file mode 100644 index 0000000..f46e3f9 --- /dev/null +++ b/models/todoItem.js @@ -0,0 +1,13 @@ +const mongoose = require('mongoose'); + +// mongdb entry schema +const todoItemSchema = new mongoose.Schema({ + _id: mongoose.Schema.Types.ObjectId, + item: { + type: String, + required: true + }, + date: String +}); +// export schema +module.exports = mongoose.model('TodoItem', todoItemSchema);
\ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..d4b846e --- /dev/null +++ b/package.json @@ -0,0 +1,36 @@ +{ + "name": "express-todo-app", + "version": "1.0.0", + "description": "A TODO web app made using Node.js.", + "main": "server.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git://github.com/8cy/express-todo-app" + }, + "keywords": [ + "nodejs", + "express", + "javascript", + "js", + "typescript", + "ts", + "todo", + "npm", + "todo" + ], + "author": "Sin", + "license": "MIT", + "bugs": { + "url": "https://github.com/8cy/express-todo-app/issues" + }, + "homepage": "https://github.com/8cy/express-todo-app#readme", + "dependencies": { + "dotenv": "^8.2.0", + "ejs": "^3.1.2", + "express": "^4.17.1", + "mongoose": "^5.9.12" + } +} diff --git a/server.js b/server.js new file mode 100644 index 0000000..57ee9b7 --- /dev/null +++ b/server.js @@ -0,0 +1,35 @@ +const express = require('express'); +const mongoose = require('mongoose'); +const TodoItem = require('./models/todoItem'); +require('dotenv').config(); // for global var things like mongodb uri +const app = express(); + +// connect to db +mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }) + .then(console.log('Connected to MongoDB database.')) + .catch(err => console.log(err)); + +// set view engine as ejs +app.set('view engine', 'ejs'); +app.use(express.urlencoded({ extended: false })); // only here so it can work + +// index +app.get('/', async (req, res) => { + const todoItems = await TodoItem.find(); + res.render('index', { todoItems: todoItems }); +}); + +// if 404, redir to root +app.get('*', (req, res) => { + res.redirect('/'); +}); + +// create new db entry on post +app.post('/todoItems', async (req, res) => { + await TodoItem.create({ _id: mongoose.Types.ObjectId(), item: req.body.todoItem, date: new Date() }); + + res.redirect('/'); +}); + +app.listen(process.env.PORT || 1337); +console.log(`Listening on port ${process.env.PORT}.`); // honestly have no idea why it says port as undefined fix this when u feel like it )
\ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs new file mode 100644 index 0000000..5a2eea4 --- /dev/null +++ b/views/index.ejs @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <title>TODOy</title> + <link rel="shortcut icon" href="https://i.imgur.com/69mCrs0.jpg" type="image/jpg"> + <!-- CSS --> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" + integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> + + <style> + html { + overflow: hidden; + background-color: black; + user-select: none; + } + body { + background-color: transparent; + } + + .bg-container img { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: auto; + opacity: 0.5; + z-index: -2; + -webkit-user-drag: none; + } + + .container { + z-index: 999; + } + + #white-txt { + color: white !important; + } + + .highlightable { + user-select: text; + } + + footer { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + color: white; + text-align: center; + } + + #pink-link { + color: pink; + } + #pink-link:hover { + color: rgb(214, 161, 170); + } + </style> + <!-- External Libraries --> + <!-- Invisible Scripts --> + </head> + <body> + <!-- Visable Scripts --> + + <div class="bg-container"> + <img src="https://i.ytimg.com/vi/0sLaYGjGIDo/maxresdefault.jpg" alt="Zero Two"> + </div> + + <div class="container my-5"> + <a href="#" style="text-decoration: none;"><h1 id="white-txt">TODOy</h1></a> + <form action="/todoItems" method="POST" class="my-4 form-inline"> + <label for="todoItem" class="sr-only">TODO Item</label> + <input type="text" name="todoItem" id="todoItem" class="form-control col mr-2"> + <button type="submit" class="btn btn-success">Add TODO Item</button> + </form> + + <table class="table table-striped"> + <thead> + <tr> + <th id="white-txt">TODO Item</th> + <th id="white-txt">TODO Item Created Time</th> + <th id="white-txt">Delete/ Change</th> + </tr> + </thead> + <tbody> + <% todoItems.forEach(todoItem => { %> + <tr> + <td id="white-txt" class="highlightable"><%= todoItem.item %></td> + <td id="white-txt" class="highlightable"><%= todoItem.date %></td> + <td><button class="btn btn-danger">Delete</button> <button class="btn btn-warning">Change</button></td> + </tr> + <% }) %> + </tbody> + </table> + </div> + + <footer> + <link rel="stylesheet" type="text/css" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" /> + Made with <i class="icon ion-heart"></i> by <a href="https://kyzer.co/" id="pink-link">Sin</a>. + </footer> + </body> +</html>
\ No newline at end of file |