├── .github ├── ISSUE_TEMPLATE │ ├── bug.yaml │ ├── documentation.yaml │ └── features.yaml ├── labels.json └── workflow │ └── issue-label.yml ├── .gitignore ├── Backend ├── .gitignore ├── db.js ├── index.js ├── package-lock.json ├── package.json └── routers │ ├── books.js │ ├── calendar.js │ ├── diary.js │ ├── movies.js │ └── notes.js ├── Frontend ├── .gitignore ├── netlify.toml ├── package-lock.json ├── package.json ├── public │ ├── Graphicloads-Colorful-Long-Shadow-Diary.ico │ ├── _redirects │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.js │ ├── CSSComponents │ ├── App.css │ ├── Vector Image.jpg │ ├── booksToRead.css │ ├── calendarstyle.css │ ├── delete.css │ ├── diary.css │ ├── ideas.css │ ├── loginback.png │ ├── loginpage.css │ ├── maintenance.svg │ ├── movies.css │ └── window.css │ ├── ConfettiCeleb.js │ ├── Context │ ├── curved_arrow.png │ ├── usercontext.js │ └── —Pngtree—mobile frame png image and_6631525.png │ ├── HowToUse.js │ ├── LoadingScreen.jsx │ ├── PasswordStrengthMeter.js │ ├── axiosClient.js │ ├── booksToRead.jsx │ ├── calendar.js │ ├── diary.jsx │ ├── headercss.css │ ├── howtouse.css │ ├── idea.js │ ├── ideas.js │ ├── images │ ├── PlanZap Logo 1.svg │ ├── PlanZap Logo 2.svg │ ├── PlanZap Logo 3.svg │ ├── PlanZap logo 4.svg │ ├── diary1.png │ ├── diary2.png │ ├── diary3.png │ ├── diary4.png │ ├── diary5.png │ ├── dtask4.png │ ├── movie1.png │ ├── movie2.png │ ├── movie3.png │ ├── movie4.png │ ├── movie5.png │ ├── movie6.png │ ├── note1.png │ ├── note2.png │ ├── note3.png │ ├── note4.png │ ├── note5.png │ ├── right-arrow.png │ ├── spinner.gif │ ├── stask2.png │ ├── stask3.png │ ├── task1.png │ ├── task2.png │ ├── task3.png │ └── task4.png │ ├── index.css │ ├── index.js │ ├── loginpage.js │ ├── modalBox.jsx │ ├── movies.jsx │ ├── pgraphs.jsx │ ├── profpage.js │ ├── reportWebVitals.js │ ├── setupTests.js │ ├── sidebar.jsx │ └── window.js ├── LICENSE.md └── README.md /.github/ISSUE_TEMPLATE/bug.yaml: -------------------------------------------------------------------------------- 1 | name: 🐛 Bug Report 2 | description: Report an issue to help improve the project 3 | title: "[Bug]: " 4 | labels: ["bug", "triage"] 5 | assignees: 6 | - octocat 7 | body: 8 | - type: markdown 9 | attributes: 10 | value: | 11 | Thanks for taking the time to fill out this bug report! 12 | - type: input 13 | id: contact 14 | attributes: 15 | label: Contact Details 16 | description: How can we get in touch with you if we need more info? 17 | placeholder: ex. email@example.com 18 | validations: 19 | required: true 20 | - type: textarea 21 | id: what-happened 22 | attributes: 23 | label: What happened? 24 | description: Also tell us, what did you expect to happen? 25 | placeholder: Tell us what you see! 26 | value: "A bug happened!" 27 | validations: 28 | required: true 29 | - type: textarea 30 | id: logs 31 | attributes: 32 | label: Relevant log output 33 | description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks. 34 | render: shell 35 | - type: checkboxes 36 | id: terms 37 | attributes: 38 | label: Code of Conduct 39 | description: By submitting this issue, you agree to follow our Code of Conduct. 40 | options: 41 | - label: I agree to follow this project's Code of Conduct 42 | required: true -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/documentation.yaml: -------------------------------------------------------------------------------- 1 | name: 📄 Documentation 2 | description: Report an issue related to documentation 3 | title: "Documentation: " 4 | labels: ["documentation"] 5 | assignees: 6 | - octocat 7 | body: 8 | - type: markdown 9 | attributes: 10 | value: | 11 | Thanks for taking the time to make our documentation better 12 | - type: textarea 13 | id: what-happened 14 | attributes: 15 | label: Description 16 | description: A clear and concise description of what the issue is. 17 | placeholder: Tell us what you see! 18 | validations: 19 | required: true 20 | - type: checkboxes 21 | id: no_prev_same 22 | attributes: 23 | label: 👀 Have you spent some time to check if this issue has been raised before? 24 | description: Have you Googled for a similar issue or checked our older issues for a similar bug? 25 | options: 26 | - label: I checked and didn't find similar issue 27 | required: true 28 | - type: checkboxes 29 | id: terms 30 | attributes: 31 | label: 🏢 Have you read the Code of Conduct? 32 | description: By submitting this issue, you agree to follow our Code of Conduct. 33 | options: 34 | - label: I agree to follow this project's Code of Conduct 35 | required: true -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/features.yaml: -------------------------------------------------------------------------------- 1 | name: 💡 Feature 2 | description: Submit a proposal for a new feature 3 | title: "Feature: " 4 | labels: ["enhancement"] 5 | assignees: 6 | - octocat 7 | body: 8 | - type: markdown 9 | attributes: 10 | value: | 11 | Thanks for taking the time to fill out our feature request form 12 | - type: textarea 13 | id: what-happened 14 | attributes: 15 | label: Feature description 16 | description: A clear and concise description of what the feature is. 17 | placeholder: You should add ... 18 | validations: 19 | required: true 20 | - type: checkboxes 21 | id: no_prev_same 22 | attributes: 23 | label: 👀 Have you spent some time to check if this issue has been raised before? 24 | description: Have you Googled for a similar issue or checked our older issues for a similar bug? 25 | options: 26 | - label: I checked and didn't find similar issue 27 | required: true 28 | - type: checkboxes 29 | id: terms 30 | attributes: 31 | label: 🏢 Have you read the Code of Conduct? 32 | description: By submitting this issue, you agree to follow our Code of Conduct. 33 | options: 34 | - label: I agree to follow this project's Code of Conduct 35 | required: true -------------------------------------------------------------------------------- /.github/labels.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "good first issue", 4 | "description": "This issue is good for first timers", 5 | "color": "7057ff" 6 | }, 7 | { 8 | "name": "help wanted", 9 | "description": "This issue needs help ! Please help if possible !", 10 | "color": "008672" 11 | }, 12 | { 13 | "name": "hard", 14 | "description": "Points will be: 5(1st Phase), 8(2nd Phase). 4 days will be allotted.", 15 | "color": "f90716" 16 | }, 17 | { 18 | "name": "medium", 19 | "description": "Points will be: 3(1st Phase), 4(2nd Phase). 2-3 days will be allotted.", 20 | "color": "ffe400" 21 | }, 22 | { 23 | "name": "easy", 24 | "description": "Points will be: 1(1st Phase), 2(2nd Phase). 1 day will be allotted.", 25 | "color": "28ffbf" 26 | }, 27 | { 28 | "name": "JWOC", 29 | "description": "This issue/pull request will be considered for JWOC 2k22.", 30 | "color": "1d4cb0" 31 | }, 32 | { 33 | "name": "🤩 Up for Grab", 34 | "description": "This issue is not assigned ! Grab It !", 35 | "color": "bf00ff" 36 | } 37 | ] -------------------------------------------------------------------------------- /.github/workflow/issue-label.yml: -------------------------------------------------------------------------------- 1 | name: Issue/Pull Request Label 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v1 10 | - name: Label Syncer 11 | uses: micnncim/action-label-syncer@v1.3.0 12 | env: 13 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 14 | GITHUB_REPOSITORY: ${{ github.repository }} 15 | with: 16 | manifest: .github/labels.json 17 | prune: false 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | .env -------------------------------------------------------------------------------- /Backend/.gitignore: -------------------------------------------------------------------------------- 1 | #blurr 2 | /node_modules 3 | -------------------------------------------------------------------------------- /Backend/db.js: -------------------------------------------------------------------------------- 1 | const mysql = require("mysql"); 2 | // require('dotenv').config(); 3 | 4 | var db_config = { 5 | connectionLimit: 10, 6 | 7 | user: process.env.DATABASE_USERNAME, 8 | host: "remotemysql.com", 9 | password: process.env.DATABASE_PASSWORD, 10 | database: process.env.DATABASE_USERNAME, 11 | }; 12 | 13 | var db = mysql.createPool(db_config); 14 | 15 | module.exports = db; 16 | -------------------------------------------------------------------------------- /Backend/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const cors = require("cors"); 3 | const app = express(); 4 | const db = require("./db"); 5 | const bodyParser = require("body-parser"); 6 | const cookieParser = require("cookie-parser"); 7 | const session = require("express-session"); 8 | const bcrypt = require("bcrypt"); 9 | const saltRounds = 10; 10 | 11 | app.use(express.json()); 12 | app.use(express.urlencoded({ extended: true })); 13 | function updateResponse(req, res, next) { 14 | res.set("Device-Type", "Test"); 15 | next(); 16 | } 17 | app.use(updateResponse); 18 | app.use( 19 | cors({ 20 | origin: [ 21 | "http://localhost:3001", 22 | "https://planzap.netlify.app", 23 | "http://localhost:3000", 24 | ], 25 | methods: ["GET", "POST", "DELETE", "PUT"], 26 | credentials: true, 27 | }) 28 | ); 29 | app.use(cookieParser()); 30 | app.enable("trust proxy"); 31 | 32 | app.use( 33 | session({ 34 | key: process.env.KEY, 35 | secret: process.env.SECRET, 36 | resave: false, 37 | saveUninitialized: false, 38 | 39 | cookie: { 40 | httpOnly: true, 41 | secure: true, 42 | sameSite: "none", 43 | expires: 60 * 60 * 24 * 365 * 10, 44 | }, 45 | }) 46 | ); 47 | 48 | app.post("/getquote", (req, res) => { 49 | const userid = req.body.userid; 50 | db.query( 51 | "SELECT * FROM user_database WHERE userid=?", 52 | [userid], 53 | (err, result) => { 54 | if (err) { 55 | console.log(err); 56 | } else { 57 | res.send(result[0]); 58 | } 59 | } 60 | ); 61 | }); 62 | 63 | app.use("/", require("./routers/books.js")); 64 | //============================================== D I A R Y ==================================================================================================== 65 | app.use("/", require("./routers/diary.js")); 66 | //====================================================I d e a & n o t e s ======================================================================== 67 | app.use("/", require("./routers/notes.js")); 68 | //===========================================================================C a l e n d a r================================================================ 69 | app.use("/", require("./routers/calendar.js")); 70 | //========================================================================M O V I E L I S T ====================================================== 71 | app.use("/", require("./routers/movies.js")); 72 | //================================================================L o g i n p a g e============================================================ 73 | app.put("/logout", (req, res) => { 74 | req.session.destroy(); 75 | }); 76 | 77 | app.post("/usercreate", (req, res) => { 78 | const useremail = req.body.useremail; 79 | const password = req.body.password; 80 | 81 | // checking if email is already registered or not 82 | db.query( 83 | "SELECT * FROM user_database WHERE useremail=?", 84 | [useremail], 85 | (err, result) => { 86 | if (err) { 87 | console.log(err); 88 | } else { 89 | if (result.length > 0) { 90 | res.send({ message: "Email Id already registered." }); 91 | } else { 92 | bcrypt.hash(password, saltRounds, (err, hash) => { 93 | if (err) { 94 | console.log(err); 95 | } 96 | db.query( 97 | "INSERT INTO user_database (useremail,password) VALUES (?,?)", 98 | [useremail, hash], 99 | (err, result) => { 100 | if (err) { 101 | console.log(err); 102 | } else { 103 | res.send({ message: "User Added Successfully." }); 104 | } 105 | } 106 | ); 107 | }); 108 | } 109 | } 110 | } 111 | ); 112 | 113 | // Adding the new user 114 | 115 | // console.log(name+rating+desc); 116 | }); 117 | 118 | app.get("/slogin", (req, res) => { 119 | if (req.session.user) { 120 | res.send({ loggedin: true, user: req.session.user }); 121 | } else { 122 | res.send({ loggedin: false }); 123 | } 124 | }); 125 | app.post("/userlogin", (req, res) => { 126 | const useremail = req.body.useremail; 127 | const password = req.body.password; 128 | // console.log(useremail+password+"logged in man!!"); 129 | db.query( 130 | "SELECT * FROM user_database WHERE useremail=?", 131 | [useremail], 132 | (err, result) => { 133 | if (err) { 134 | console.log(err); 135 | } else { 136 | //console.log("no error"); 137 | if (result.length > 0) { 138 | bcrypt.compare(password, result[0].password, (error, response) => { 139 | if (response) { 140 | req.session.user = result[0]; 141 | res.send(result); 142 | } else { 143 | res.send({ message: "Invalid Username/Password" }); 144 | } 145 | }); 146 | } else { 147 | res.send({ message: "Invalid Username/Password" }); 148 | } 149 | } 150 | } 151 | ); 152 | }); 153 | 154 | app.listen(process.env.PORT || 3001, () => { 155 | console.log("message is running"); 156 | }); 157 | -------------------------------------------------------------------------------- /Backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "serverside", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node index.js", 9 | "devStart": "nodemon index.js" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "bcrypt": "^5.0.1", 15 | "body-parser": "^1.19.0", 16 | "cookie-parser": "^1.4.5", 17 | "cors": "^2.8.5", 18 | "express": "^4.17.1", 19 | "express-session": "^1.17.2", 20 | "mysql": "^2.18.1" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /Backend/routers/books.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const db = require("../db"); 3 | 4 | const bookRouter = express.Router(); 5 | 6 | bookRouter.post("/book/create", (req, res) => { 7 | const book_name = req.body.book_name; 8 | const book_author = req.body.book_author; 9 | const book_description = req.body.book_description; 10 | const user_id = req.body.userid; 11 | // console.log(name+rating+desc); 12 | db.query( 13 | "INSERT INTO book_list (book_name,book_author,book_description,user_id) VALUES (?,?,?,?)", 14 | [book_name, book_author, book_description, user_id], 15 | (err, result) => { 16 | if (err) { 17 | res.send(err); 18 | } else { 19 | res.send(result); 20 | } 21 | } 22 | ); 23 | }); 24 | 25 | bookRouter.put("/updatequote", (req, res) => { 26 | const userid = req.body.id; 27 | const userquote = req.body.userquote; 28 | console.log(req.body); 29 | db.query( 30 | "UPDATE user_database SET userquote=? WHERE userid=?", 31 | [userquote, userid], 32 | (err, result) => { 33 | if (err) { 34 | res.send(err); 35 | } else { 36 | console.log("no error"); 37 | res.send(result); 38 | } 39 | } 40 | ); 41 | }); 42 | 43 | bookRouter.post("/book/list", (req, res) => { 44 | const user_id = req.body.userid; 45 | db.query( 46 | "SELECT * FROM book_list WHERE user_id=?", 47 | [user_id], 48 | (err, result) => { 49 | if (err) { 50 | res.send(err); 51 | } else { 52 | res.send(result); 53 | } 54 | } 55 | ); 56 | }); 57 | 58 | bookRouter.put("/update/description", (req, res) => { 59 | const id = req.body.id; 60 | const book_description = req.body.book_description; 61 | db.query( 62 | "UPDATE book_list SET book_description=? WHERE id=?", 63 | [book_description, id], 64 | (err, result) => { 65 | if (err) { 66 | res.send(err); 67 | } else { 68 | res.send(result); 69 | } 70 | } 71 | ); 72 | }); 73 | 74 | bookRouter.delete("/book/delete/:id", (req, res) => { 75 | const id = req.params.id; 76 | db.query("DELETE from book_list WHERE id=?", id, (err, result) => { 77 | if (err) { 78 | res.send(err); 79 | } else { 80 | res.send(result); 81 | } 82 | }); 83 | }); 84 | 85 | module.exports = bookRouter; 86 | -------------------------------------------------------------------------------- /Backend/routers/calendar.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const db = require("../db"); 3 | 4 | const calendarRouter = express.Router(); 5 | 6 | calendarRouter.put("/updateprog", (req, res) => { 7 | const taskid = req.body.id; 8 | const progress = req.body.progress; 9 | 10 | db.query("UPDATE task_database SET progress=? WHERE taskid=?", [progress, taskid], (err, result) => { 11 | if (err) { 12 | console.log(err); 13 | } 14 | else { 15 | res.send(result); 16 | } 17 | }) 18 | }); 19 | calendarRouter.post( 20 | "/addtask", (req, res) => { 21 | const taskname = req.body.taskname; 22 | const priority = req.body.priority; 23 | const deadline = req.body.deadline; 24 | const userid = req.body.userid; 25 | // console.log(name+rating+desc); 26 | db.query("INSERT INTO task_database (taskname,priority,deadline,userid) VALUES (?,?,?,?)", [taskname, priority, deadline, userid], (err, result) => { 27 | if (err) { 28 | console.log(err); 29 | } 30 | else { 31 | res.send("Values Inserted"); 32 | } 33 | }); 34 | } 35 | 36 | ); 37 | calendarRouter.post( 38 | "/gettaskdata", (req, res) => { 39 | const userid = req.body.userid; 40 | db.query("SELECT * FROM task_database WHERE userid=?", [userid], (err, result) => { 41 | if (err) { 42 | console.log(err); 43 | } 44 | else { 45 | res.send(result); 46 | } 47 | }); 48 | }); 49 | calendarRouter.delete("/deletetask/:id", (req, res) => { 50 | const id = req.params.id; 51 | db.query("DELETE from task_database WHERE taskid=?", id, (err, result) => { 52 | if (err) { 53 | console.log(err); 54 | } 55 | else { 56 | res.send(result); 57 | } 58 | }) 59 | }) 60 | 61 | module.exports = calendarRouter; -------------------------------------------------------------------------------- /Backend/routers/diary.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const db = require("../db"); 3 | const diaryRouter = express.Router(); 4 | 5 | diaryRouter.put("/updatediary", (req, res, next) => { 6 | const userid = req.body.userid; 7 | const data_entry = req.body.data_entry; 8 | const entry_date = req.body.entry_date; 9 | 10 | db.query( 11 | "UPDATE diary_table SET data_entry=? WHERE entry_date=? AND userid=?", 12 | [data_entry, entry_date, userid], 13 | (err, result) => { 14 | if (err) { 15 | next(err); 16 | } else { 17 | res.send(result); 18 | } 19 | } 20 | ); 21 | }); 22 | diaryRouter.post("/insertdiary", (req, res) => { 23 | const userid = req.body.userid; 24 | const data_entry = req.body.data_entry; 25 | const entry_date = req.body.entry_date; 26 | 27 | db.query( 28 | "INSERT INTO diary_table (entry_date,data_entry,userid) VALUES (?,?,?)", 29 | [entry_date, data_entry, userid], 30 | (err, result) => { 31 | if (err) { 32 | console.log(err); 33 | } else { 34 | res.send(result); 35 | } 36 | } 37 | ); 38 | }); 39 | diaryRouter.post("/getentry", (req, res) => { 40 | const userid = req.body.userid; 41 | const entry_date = req.body.entry_date; 42 | db.query( 43 | "SELECT * FROM diary_table WHERE entry_date=? AND userid=?", 44 | [entry_date, userid], 45 | (err, result) => { 46 | if (err) { 47 | console.log(err); 48 | } else { 49 | if (result.length > 0) { 50 | res.send(result[0]); 51 | } else { 52 | res.send({ message: "No entry exists this date " }); 53 | } 54 | } 55 | } 56 | ); 57 | }); 58 | diaryRouter.delete("/deleteentry/:tid", (req, res) => { 59 | const id = req.params.tid; 60 | console.log(id); 61 | db.query("DELETE from diary_table WHERE id=?", id, (err, result) => { 62 | if (err) { 63 | console.log(err); 64 | } else { 65 | res.send(result); 66 | } 67 | }); 68 | }); 69 | 70 | module.exports = diaryRouter; 71 | -------------------------------------------------------------------------------- /Backend/routers/movies.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const db = require("../db"); 3 | 4 | const movieRouter = express.Router(); 5 | 6 | movieRouter.post("/create", (req, res) => { 7 | const movie_name = req.body.movie_name; 8 | const movie_rating = req.body.movie_rating; 9 | const movie_desc = req.body.movie_desc; 10 | const user_id = req.body.userid; 11 | // console.log(name+rating+desc); 12 | db.query( 13 | "INSERT INTO movie_list (movie_name,movie_rating,movie_desc,user_id) VALUES (?,?,?,?)", 14 | [movie_name, movie_rating, movie_desc, user_id], 15 | (err, result) => { 16 | if (err) { 17 | console.log(err); 18 | } else { 19 | res.send("Values Inserted"); 20 | } 21 | } 22 | ); 23 | }); 24 | 25 | movieRouter.put("/updatequote", (req, res) => { 26 | const userid = req.body.id; 27 | const userquote = req.body.userquote; 28 | console.log(req.body); 29 | db.query( 30 | "UPDATE user_database SET userquote=? WHERE userid=?", 31 | [userquote, userid], 32 | (err, result) => { 33 | if (err) { 34 | console.log(err); 35 | } else { 36 | console.log("no error"); 37 | res.send(result); 38 | } 39 | } 40 | ); 41 | }); 42 | movieRouter.post("/getdata", (req, res) => { 43 | const user_id = req.body.userid; 44 | db.query( 45 | "SELECT * FROM movie_list WHERE user_id=?", 46 | [user_id], 47 | (err, result) => { 48 | if (err) { 49 | console.log(err); 50 | } else { 51 | res.send(result); 52 | } 53 | } 54 | ); 55 | }); 56 | movieRouter.put("/updatedesc", (req, res) => { 57 | const id = req.body.id; 58 | const movie_desc = req.body.movie_desc; 59 | db.query( 60 | "UPDATE movie_list SET movie_desc=? WHERE id=?", 61 | [movie_desc, id], 62 | (err, result) => { 63 | if (err) { 64 | console.log(err); 65 | } else { 66 | res.send(result); 67 | } 68 | } 69 | ); 70 | }); 71 | movieRouter.delete("/deletemovie/:id", (req, res) => { 72 | const id = req.params.id; 73 | db.query("DELETE from movie_list WHERE id=?", id, (err, result) => { 74 | if (err) { 75 | console.log(err); 76 | } else { 77 | res.send(result); 78 | } 79 | }); 80 | }); 81 | 82 | module.exports = movieRouter; 83 | -------------------------------------------------------------------------------- /Backend/routers/notes.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const db = require("../db"); 3 | 4 | const notesRouter = express.Router(); 5 | 6 | notesRouter.put("/updateideadesc", (req, res) => { 7 | const id = req.body.id; 8 | const idea_name = req.body.new_idea; 9 | const idea_desc = req.body.new_desc; 10 | console.log(req.body); 11 | db.query( 12 | "UPDATE ideas_table SET idea_name=?, idea_desc=? WHERE ideaid=?", 13 | [idea_name, idea_desc, id], 14 | (err, result) => { 15 | if (err) { 16 | console.log(err); 17 | } else { 18 | res.send(result); 19 | } 20 | } 21 | ); 22 | }); 23 | notesRouter.post("/addidea", (req, res) => { 24 | const idea_name = req.body.idea_name; 25 | const idea_desc = req.body.idea_desc; 26 | const userid = req.body.userid; 27 | // console.log(name+rating+desc); 28 | db.query( 29 | "INSERT INTO ideas_table (idea_name,idea_desc,userid) VALUES (?,?,?)", 30 | [idea_name, idea_desc, userid], 31 | (err, result) => { 32 | if (err) { 33 | console.log(err); 34 | } else { 35 | res.send("Values Inserted"); 36 | } 37 | } 38 | ); 39 | }); 40 | notesRouter.post("/getideadata", (req, res) => { 41 | const user_id = req.body.userid; 42 | db.query( 43 | "SELECT * FROM ideas_table WHERE userid=?", 44 | [user_id], 45 | (err, result) => { 46 | if (err) { 47 | console.log(err); 48 | } else { 49 | res.send(result); 50 | } 51 | } 52 | ); 53 | }); 54 | notesRouter.delete("/deleteidea/:id", (req, res) => { 55 | const id = req.params.id; 56 | db.query("DELETE from ideas_table WHERE ideaid=?", id, (err, result) => { 57 | if (err) { 58 | console.log(err); 59 | } else { 60 | res.send(result); 61 | } 62 | }); 63 | }); 64 | 65 | module.exports = notesRouter; 66 | -------------------------------------------------------------------------------- /Frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Frontend/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "CI= npm run build" 3 | publish="build/" 4 | [[redirects]] 5 | from = '/*' 6 | to = '/index.html' 7 | status = 200 -------------------------------------------------------------------------------- /Frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "planex", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.4.1", 7 | "@emotion/styled": "^11.3.0", 8 | "@mui/icons-material": "^5.0.0", 9 | "@mui/material": "^5.0.0", 10 | "@testing-library/jest-dom": "^5.14.1", 11 | "@testing-library/react": "^11.2.7", 12 | "@testing-library/user-event": "^12.8.3", 13 | "axios": "^0.22.0", 14 | "date-fns": "^2.25.0", 15 | "express": "^4.17.2", 16 | "mysql": "^2.18.1", 17 | "react": "^17.0.2", 18 | "react-big-calendar": "^0.35.0", 19 | "react-calendar": "^3.4.0", 20 | "react-confetti": "^6.0.1", 21 | "react-dom": "^17.0.2", 22 | "react-icons": "^4.3.1", 23 | "react-modal": "^3.14.4", 24 | "react-router": "^6.0.2", 25 | "react-router-dom": "^6.0.2", 26 | "react-scripts": "^4.0.3", 27 | "react-textarea-autosize": "^8.3.3", 28 | "web-vitals": "^1.1.2", 29 | "zxcvbn": "^4.4.2" 30 | }, 31 | "scripts": { 32 | "start": "react-scripts start", 33 | "build": "react-scripts build", 34 | "test": "react-scripts test", 35 | "eject": "react-scripts eject" 36 | }, 37 | "eslintConfig": { 38 | "extends": [ 39 | "react-app", 40 | "react-app/jest" 41 | ] 42 | }, 43 | "browserslist": { 44 | "production": [ 45 | ">0.2%", 46 | "not dead", 47 | "not op_mini all" 48 | ], 49 | "development": [ 50 | "last 1 chrome version", 51 | "last 1 firefox version", 52 | "last 1 safari version" 53 | ] 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /Frontend/public/Graphicloads-Colorful-Long-Shadow-Diary.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/public/Graphicloads-Colorful-Long-Shadow-Diary.ico -------------------------------------------------------------------------------- /Frontend/public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /Frontend/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/public/favicon.ico -------------------------------------------------------------------------------- /Frontend/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Planzap 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Frontend/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/public/logo192.png -------------------------------------------------------------------------------- /Frontend/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/public/logo512.png -------------------------------------------------------------------------------- /Frontend/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Frontend/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Frontend/src/App.js: -------------------------------------------------------------------------------- 1 | import "./CSSComponents/App.css"; 2 | import React, { useState, useEffect } from "react"; 3 | import Login from "./loginpage"; 4 | import Profile from "./profpage"; 5 | import { Routes, Route,NavLink } from "react-router-dom"; 6 | import Calender from "./calendar"; 7 | import Loader from "./LoadingScreen"; 8 | import Movies from "./movies"; 9 | import Ideas from "./ideas"; 10 | import Diary from "./diary"; 11 | import { usercontext } from "./Context/usercontext"; 12 | import { getRequest, postRequest, putRequest } from './axiosClient'; 13 | import Modal from "react-modal"; 14 | import ConfettiCeleb from "./ConfettiCeleb"; 15 | import MaintenanceImg from "./CSSComponents/maintenance.svg"; 16 | import HowToUse from "./HowToUse"; 17 | import Bookstoread from "./booksToRead"; 18 | 19 | import EditIcon from "@mui/icons-material/Edit"; 20 | import TaskIcon from "@mui/icons-material/Task"; 21 | import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"; 22 | import MenuBookIcon from "@mui/icons-material/MenuBook"; 23 | import CollectionsBookmarkIcon from "@mui/icons-material/CollectionsBookmark"; 24 | import LogoutIcon from "@mui/icons-material/Logout"; 25 | import LocalLibraryIcon from "@mui/icons-material/LocalLibrary"; 26 | 27 | Modal.setAppElement("#root"); 28 | 29 | function App() { 30 | const [confetti, setConfetti] = useState(false); 31 | const [notloggedin, setloginstatus] = useState(true); 32 | const underMaintenance = false; 33 | const [userquote, setuserquote] = useState(null); 34 | const [usernewquote, setnewuserquote] = useState(null); 35 | const [userid, setuserid] = useState(0); 36 | const [loading, setloading] = useState(true); 37 | const [logoutstatus, setlogout] = useState(false); 38 | //const history=useHistory(); 39 | const [isOpen, setIsOpen] = useState(false); 40 | const [isHowToUseModal, setIsHowToUseModal] = useState(false); 41 | 42 | function checkHowToUseModal() { 43 | if (!localStorage.getItem("isVisited")) { 44 | localStorage.setItem("isVisited", "yes"); 45 | setIsHowToUseModal(true); 46 | } 47 | } 48 | 49 | useEffect(() => { 50 | checkHowToUseModal(); 51 | }, [isHowToUseModal]); 52 | 53 | function toggleModal() { 54 | console.log("Clicked"); 55 | setIsOpen(!isOpen); 56 | } 57 | 58 | const logout = () => { 59 | setlogout(true); 60 | setloginstatus(true); 61 | setloading(true); 62 | putRequest("logout", { status: true }).then( 63 | (response) => { 64 | setloginstatus(true); 65 | setloading(false); 66 | } 67 | ); 68 | }; 69 | 70 | //loggedin= 71 | useEffect(() => { 72 | getRequest("slogin").then((response) => { 73 | if (response.data.loggedin === true && logoutstatus === false) { 74 | setloginstatus(false); 75 | setuserid(response.data.user.userid); 76 | console.log("user ID :" + userid); 77 | } 78 | setloading(false); 79 | }); 80 | postRequest("getquote", { 81 | userid: userid, 82 | }).then((response) => { 83 | setuserquote(response.data.userquote); 84 | console.log(userquote); 85 | }); 86 | }); 87 | const updateuserquote = () => { 88 | console.log(userid + " ok " + userquote); 89 | putRequest("updatequote", { 90 | id: userid, 91 | userquote: usernewquote ? usernewquote : userquote, 92 | }).then((response) => { 93 | postRequest("getquote", { 94 | userid: userid, 95 | }).then((response) => { 96 | setuserquote(response.data.userquote); 97 | console.log(userquote); 98 | }); 99 | console.log("updated"); 100 | }); 101 | }; 102 | console.log("user ID 2 :" + userid); 103 | return ( 104 |
105 | {underMaintenance ? ( 106 |
115 | Maintenance 126 |

127 | We're under maintenance now!👨‍🔧 128 |

129 |

137 | We expect this work to last about 1 hour. For any queries, please 138 | contact us via email at saraswatmajumder@gmail.com. 139 |

140 |

148 | We apologize for any inconvenience. 149 |

150 |
151 | ) : ( 152 |
153 | {confetti && } 154 | 155 | 158 | 179 |
180 | 181 | 192 |
193 | 202 |
203 | 204 | {loading ? ( 205 | 206 | ) : notloggedin ? ( 207 | 208 | ) : ( 209 |
210 |
211 | {/* 212 | 213 |     Profile 214 | */} 215 |
216 | "{userquote}"
217 | 218 |
219 | 222 | `link ${ 223 | isActive 224 | ? "selected" 225 | : // Couldn't do this before! 226 | "barelement" 227 | }` 228 | } 229 | > 230 | 231 | Tasks and Progress 232 | 233 | {/* 234 |    Performance Graphs 235 | */} 236 | 239 | `link ${ 240 | isActive 241 | ? "selected" 242 | : // Couldn't do this before! 243 | "barelement" 244 | }` 245 | } 246 | > 247 | {" "} 250 | Movies to Watch 251 | 252 | 255 | `link ${ 256 | isActive 257 | ? "selected" 258 | : // Couldn't do this before! 259 | "barelement" 260 | }` 261 | } 262 | > 263 | {" "} 264 | Personal Diary
265 | 266 | 269 | `link ${ 270 | isActive 271 | ? "selected" 272 | : // Couldn't do this before! 273 | "barelement" 274 | }` 275 | } 276 | > 277 | {" "} 280 | Ideas and Notes
281 | 282 | 285 | `link ${ 286 | isActive 287 | ? "selected" 288 | : // Couldn't do this before! 289 | "barelement" 290 | }` 291 | } 292 | > 293 | {" "} 294 | Books to Read
295 | 296 | {/* 299 | `link ${ 300 | isActive 301 | ? "selected" 302 | : // Couldn't do this before! 303 | "barelement" 304 | }` 305 | } 306 | > 307 | {" "} 310 | How To Use
311 | */} 312 |
313 | Log Out{" "} 314 |
315 |
316 | 317 |
318 | { 321 | setIsHowToUseModal(false); 322 | }} 323 | style={{ 324 | overlay: { 325 | backgroundColor: "rgba(0, 0, 0, 0.75)", 326 | }, 327 | content: { 328 | width: "25vw", 329 | height: "30vh", 330 | margin: "auto", 331 | padding: "1%", 332 | borderRadius: "7px", 333 | backgroundColor: "white", 334 | display: "flex", 335 | flexDirection: "column", 336 | alignItems: "center", 337 | justifyContent: "space-around", 338 | }, 339 | }} 340 | centered 341 | > 342 |

Welcome to Planzapp

343 | {/*

344 | You are new here so, you can check how to use it properly 345 |

346 | 347 | 348 | 355 | */} 356 | 357 | 358 | 359 | ] 360 | } 363 | /> 364 | }> 365 | } 368 | > 369 | }> 370 | }> 371 | }> 372 | } 375 | > 376 | }> 377 | 378 |
379 |
380 | )} 381 | 382 |
383 | )}{" "} 384 |
385 | ); 386 | } 387 | 388 | export default App; 389 | -------------------------------------------------------------------------------- /Frontend/src/CSSComponents/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | display: flex; 3 | flex-direction: row; 4 | color:white; 5 | /*height: 100vh;*/ 6 | } 7 | input:focus, 8 | select:focus, 9 | textarea:focus { 10 | outline: none; 11 | } 12 | .editbutton:hover { 13 | cursor: pointer; 14 | } 15 | .sidebar { 16 | display: flex; 17 | background-color: black; 18 | margin-left: 0; 19 | margin-right: 0%; 20 | margin-top: 0%; 21 | margin-bottom: 0%; 22 | flex-direction: column; 23 | height: 100vh; 24 | width: 15%; 25 | overflow-y: hidden; 26 | overflow-x: hidden; 27 | position: fixed; 28 | } 29 | 30 | .quotearea { 31 | margin-top: 3vh; 32 | color: white; 33 | font-style: italic; 34 | padding-left: 10%; 35 | font-size: 2.3vh; 36 | height: 13vh; 37 | padding-right: 10%; 38 | } 39 | .editbutton { 40 | padding-right: 80%; 41 | height: 2.6vh; 42 | margin-top: 1vh; 43 | text-align: center; 44 | color: rgb(90, 89, 89); 45 | } 46 | .editbutton :hover { 47 | color: white; 48 | } 49 | .barelement { 50 | display: flex; 51 | align-items: center; 52 | background-color: black; 53 | margin: 0%; 54 | font-size: 1.9vh; 55 | font-weight: 700; 56 | text-decoration: none; 57 | font-style: normal; 58 | color: grey; 59 | height: 8.66vh; 60 | padding-left: 10%; 61 | margin-right: 0.5vw; 62 | } 63 | .barelement:hover { 64 | color: white; 65 | text-decoration: "none"; 66 | font-style: normal; 67 | } 68 | 69 | .selected { 70 | display: flex; 71 | align-items: center; 72 | margin: 0%; 73 | font-size: 1.9vh; 74 | font-weight: 700; 75 | text-decoration: none; 76 | font-style: normal; 77 | height: 8.66vh; 78 | padding-left: 10%; 79 | margin-right: 0.5vw; 80 | } 81 | .logout { 82 | position: absolute; 83 | display: flex; 84 | align-items: center; 85 | color: grey; 86 | height: 3vh; 87 | padding-left: 10%; 88 | bottom: 3vh; 89 | } 90 | .logout:hover { 91 | color: white; 92 | cursor: pointer; 93 | } 94 | .profpage { 95 | color: black; 96 | font-size: 10px; 97 | text-align: center; 98 | font-weight: 600; 99 | height: 100vh; 100 | width: 85vw; 101 | margin-bottom: 0%; 102 | margin-top: 0%; 103 | display: grid; 104 | background-color: bisque; 105 | } 106 | 107 | .push-out { 108 | --primary: rgb(11, 97, 78); 109 | --duration: 0.86; 110 | height: 101px; 111 | width: 101px; 112 | position: absolute; 113 | top: 0; 114 | bottom: 0; 115 | left: 0; 116 | right: 0; 117 | 118 | margin: auto; 119 | 120 | overflow: hidden; 121 | } 122 | .push-out > div:nth-of-type(1) { 123 | height: 20px; 124 | width: 20px; 125 | position: absolute; 126 | -webkit-animation: push-out-slide calc(var(--duration) * 1s) infinite 127 | alternate ease-in-out; 128 | animation: push-out-slide calc(var(--duration) * 1s) infinite alternate 129 | ease-in-out; 130 | -webkit-transform: translate(0, -100%); 131 | transform: translate(0, -100%); 132 | top: 100%; 133 | left: 0; 134 | } 135 | .push-out > div:nth-of-type(1):after { 136 | -webkit-animation: push-out-flip calc(var(--duration) * 1s) infinite alternate 137 | ease-in-out; 138 | animation: push-out-flip calc(var(--duration) * 1s) infinite alternate 139 | ease-in-out; 140 | background: var(--primary); 141 | content: ""; 142 | height: 100%; 143 | position: absolute; 144 | width: 100%; 145 | } 146 | .push-out > div:nth-of-type(2) { 147 | background: var(--primary); 148 | height: 30px; 149 | left: 50%; 150 | position: absolute; 151 | top: 100%; 152 | -webkit-transform: translate(-50%, -100%); 153 | transform: translate(-50%, -100%); 154 | width: 20px; 155 | } 156 | .push-out:after, 157 | .push-out:before { 158 | -webkit-animation-timing-function: ease; 159 | animation-timing-function: ease; 160 | -webkit-animation-iteration-count: infinite; 161 | animation-iteration-count: infinite; 162 | -webkit-animation-duration: calc(var(--duration) * 4s); 163 | animation-duration: calc(var(--duration) * 4s); 164 | background: var(--primary); 165 | bottom: 0; 166 | content: ""; 167 | height: 40px; 168 | position: absolute; 169 | width: 20px; 170 | } 171 | .push-out:after { 172 | -webkit-animation-name: push-out-pushed-1; 173 | animation-name: push-out-pushed-1; 174 | right: 0; 175 | } 176 | .push-out:before { 177 | -webkit-animation-name: push-out-pushed-2; 178 | animation-name: push-out-pushed-2; 179 | left: 0; 180 | } 181 | 182 | @-webkit-keyframes push-out-pushed-1 { 183 | 0%, 184 | 18.125%, 185 | 50%, 186 | 68.125%, 187 | 100% { 188 | -webkit-transform: translate(0, 0); 189 | transform: translate(0, 0); 190 | } 191 | 25%, 192 | 43.125%, 193 | 75%, 194 | 93.125% { 195 | -webkit-transform: translate(0, 100%); 196 | transform: translate(0, 100%); 197 | } 198 | } 199 | 200 | @keyframes push-out-pushed-1 { 201 | 0%, 202 | 18.125%, 203 | 50%, 204 | 68.125%, 205 | 100% { 206 | -webkit-transform: translate(0, 0); 207 | transform: translate(0, 0); 208 | } 209 | 25%, 210 | 43.125%, 211 | 75%, 212 | 93.125% { 213 | -webkit-transform: translate(0, 100%); 214 | transform: translate(0, 100%); 215 | } 216 | } 217 | 218 | @-webkit-keyframes push-out-pushed-2 { 219 | 0%, 220 | 18.125%, 221 | 50%, 222 | 68.125%, 223 | 100% { 224 | -webkit-transform: translate(0, 100%); 225 | transform: translate(0, 100%); 226 | } 227 | 25%, 228 | 43.125%, 229 | 75%, 230 | 93.125% { 231 | -webkit-transform: translate(0, 0); 232 | transform: translate(0, 0); 233 | } 234 | } 235 | 236 | @keyframes push-out-pushed-2 { 237 | 0%, 238 | 18.125%, 239 | 50%, 240 | 68.125%, 241 | 100% { 242 | -webkit-transform: translate(0, 100%); 243 | transform: translate(0, 100%); 244 | } 245 | 25%, 246 | 43.125%, 247 | 75%, 248 | 93.125% { 249 | -webkit-transform: translate(0, 0); 250 | transform: translate(0, 0); 251 | } 252 | } 253 | 254 | @-webkit-keyframes push-out-flip { 255 | 0% { 256 | -webkit-transform: translate(0, 0) rotate(0deg); 257 | transform: translate(0, 0) rotate(0deg); 258 | } 259 | 50% { 260 | -webkit-transform: translate(0, -80px) rotate(90deg); 261 | transform: translate(0, -80px) rotate(90deg); 262 | } 263 | 100% { 264 | -webkit-transform: translate(0, 0) rotate(180deg); 265 | transform: translate(0, 0) rotate(180deg); 266 | } 267 | } 268 | 269 | @keyframes push-out-flip { 270 | 0% { 271 | -webkit-transform: translate(0, 0) rotate(0deg); 272 | transform: translate(0, 0) rotate(0deg); 273 | } 274 | 50% { 275 | -webkit-transform: translate(0, -80px) rotate(90deg); 276 | transform: translate(0, -80px) rotate(90deg); 277 | } 278 | 100% { 279 | -webkit-transform: translate(0, 0) rotate(180deg); 280 | transform: translate(0, 0) rotate(180deg); 281 | } 282 | } 283 | 284 | @-webkit-keyframes push-out-slide { 285 | to { 286 | -webkit-transform: translate(0, -100%) translate(80px, 0); 287 | transform: translate(0, -100%) translate(80px, 0); 288 | } 289 | } 290 | 291 | @keyframes push-out-slide { 292 | to { 293 | -webkit-transform: translate(0, -100%) translate(80px, 0); 294 | transform: translate(0, -100%) translate(80px, 0); 295 | } 296 | } 297 | 298 | /* Quote Popup modal Css at App.js file */ 299 | .quote-div { 300 | display: flex; 301 | flex-direction: column; 302 | align-items: center; 303 | margin: 1rem 1rem; 304 | } 305 | .quote-div > textarea { 306 | border-radius: 5px; 307 | font-size: 1rem; 308 | width: 90%; 309 | resize: vertical; 310 | margin-top: 20px; 311 | text-indent: 10px; 312 | border: none; 313 | padding: 10px; 314 | } 315 | 316 | .quote-div > label { 317 | font-size: 1.5rem; 318 | font-weight: bold; 319 | } 320 | 321 | .quote-btn { 322 | all:revert; 323 | padding: .5em 1em; 324 | color: #fff; 325 | background:rgb(255, 183, 1); 326 | border: none; 327 | border-radius: 5px; 328 | align-self: flex-end; 329 | cursor: pointer; 330 | box-shadow: 0px 5px 10px -3px rgb(255, 183, 1); 331 | } 332 | -------------------------------------------------------------------------------- /Frontend/src/CSSComponents/Vector Image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/CSSComponents/Vector Image.jpg -------------------------------------------------------------------------------- /Frontend/src/CSSComponents/booksToRead.css: -------------------------------------------------------------------------------- 1 | .books { 2 | position: absolute; 3 | height: 100vh; 4 | width: 85%; 5 | margin-left: 15%; 6 | } 7 | .heading, 8 | .list { 9 | height: auto; 10 | width: 100%; 11 | display: flex; 12 | background-color: #183340; 13 | color: white; 14 | } 15 | .heading { 16 | font-weight: 500; 17 | } 18 | .bookname, 19 | .author { 20 | width: 25%; 21 | display: flex; 22 | justify-content: center; 23 | border: 1px solid #5db2dd; 24 | } 25 | .bookdesc { 26 | width: 50%; 27 | display: flex; 28 | justify-content: center; 29 | text-align: center; 30 | border: 1px solid #5db2dd; 31 | height: auto; 32 | } 33 | 34 | .list .bookname, 35 | .list .author { 36 | justify-content: space-around; 37 | align-items: baseline; 38 | } 39 | .list .bookdesc { 40 | white-space: pre-wrap; 41 | } 42 | 43 | .bookentry { 44 | padding: 7.05rem 0; 45 | display: flex; 46 | justify-content: center; 47 | align-items: center; 48 | } 49 | .bookDialog { 50 | display: flex; 51 | flex-direction: column; 52 | align-items: center; 53 | padding: 1rem 2rem 2rem 2rem; 54 | border-radius: 20px; 55 | background-color: #183340; 56 | color: #468bae; 57 | } 58 | .bookDialog h1 { 59 | color: white; 60 | } 61 | .booktext { 62 | background-color: transparent; 63 | resize: vertical; 64 | width: 90%; 65 | border-bottom: 1.5px solid #468bae; 66 | color: white !important; 67 | } 68 | .booktext:last-child { 69 | white-space: pre-wrap; 70 | } 71 | ::-webkit-input-placeholder { 72 | /* WebKit, Blink, Edge */ 73 | color: rgb(204, 204, 204); 74 | } 75 | :-moz-placeholder { 76 | /* Mozilla Firefox 4 to 18 */ 77 | color: rgb(204, 204, 204); 78 | opacity: 1; 79 | } 80 | 81 | .bookDialog form label { 82 | font-weight: 500; 83 | } 84 | .booksSearchResultContainer { 85 | display: flex; 86 | flex-wrap: wrap; 87 | } 88 | .bookCard { 89 | display: flex; 90 | padding: 1vw; 91 | /* height: 30rem; */ 92 | width: 40%; 93 | background-color: #181a1c; 94 | box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.1), 95 | 5px 5px 15px rgba(0, 0, 0, 0.5), 96 | inset -5px -5px 10px rgba(255, 255, 255, 0.1), 97 | inset 5px 5px 15px rgba(0, 0, 0, 0.5); 98 | 99 | border-radius: 10px; 100 | margin: 2rem; 101 | font-family: "Poppins", sans-serif; 102 | color: white; 103 | } 104 | .bookThumbnail { 105 | width: 30%; 106 | margin: 1rem; 107 | } 108 | .bookDescription { 109 | width: 70%; 110 | margin: 1rem; 111 | } 112 | 113 | .bookDescription p { 114 | margin-top: 0; 115 | } 116 | .bookCardLabel { 117 | color: #03a9f4; 118 | font-weight: bold; 119 | margin: 0; 120 | } 121 | -------------------------------------------------------------------------------- /Frontend/src/CSSComponents/calendarstyle.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); 2 | 3 | .loader { 4 | color: darkgoldenrod; 5 | position: absolute; 6 | top: 62%; 7 | left: 65%; 8 | width: 400px; 9 | height: 400px; 10 | transform: translate(-50%, -50%); 11 | } 12 | .calpage { 13 | display: flex; 14 | flex-direction: column; 15 | width: 85vw; 16 | margin-left: 15vw; 17 | height: 100vh; 18 | } 19 | .toppart { 20 | height: 100vh; 21 | width: 85vw; 22 | display: flex; 23 | flex-wrap: wrap; 24 | justify-content: space-around; 25 | padding-bottom: 15vh; 26 | } 27 | .bottompart { 28 | height: 9vh; 29 | width: 84.5vw; 30 | background-color: darkgoldenrod; 31 | color: white; 32 | display: flex; 33 | padding-right: 20px; 34 | justify-content: space-between; 35 | align-items: center; 36 | position: fixed; 37 | margin-top: 91vh; 38 | } 39 | .hoverOnCursor:hover { 40 | cursor: pointer; 41 | } 42 | 43 | .sider { 44 | position: relative; 45 | left: 17.5%; 46 | } 47 | 48 | .commonbox { 49 | margin-top: 1rem; 50 | border-radius: 5px; 51 | color: white; 52 | height: 33vh; 53 | width: 15vw; 54 | display: flex; 55 | flex-direction: column; 56 | justify-content: space-around; 57 | padding: 0.2rem; 58 | box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3); 59 | position: relative; 60 | padding-bottom: 1rem; 61 | font-family: "Poppins", sans-serif; 62 | transition: 0.5s; 63 | } 64 | .slider{ 65 | width: 10vw; 66 | } 67 | @media(min-width: 1200px) and (max-width: 1500px){ 68 | .commonbox{ 69 | width: 20vw; 70 | } 71 | .slider{ 72 | width: 15vw; 73 | } 74 | 75 | } 76 | @media(max-width: 1200px)and(min-width: 1000px){ 77 | .commonbox{ 78 | width: 24vw; 79 | } 80 | .slider{ 81 | width: 20vw; 82 | } 83 | } 84 | @media(max-width: 1000px){ 85 | .commonbox{ 86 | width: 30vw; 87 | } 88 | .slider{ 89 | width: 20vw; 90 | } 91 | } 92 | .commonbox::before { 93 | content: ""; 94 | position: absolute; 95 | top: 2rem; 96 | left: 0; 97 | width: 100%; 98 | height: 25%; 99 | background: rgba(255, 255, 255, 0.1); 100 | z-index: 1; 101 | } 102 | .commonbox:hover { 103 | transform: scale(1.1); 104 | } 105 | 106 | .taskbox { 107 | background-image: linear-gradient(-45deg, #ffec61, #f321d7); 108 | margin-left: 1rem; 109 | margin-right: 1rem; 110 | } 111 | .taskbox .buthover { 112 | background-image: linear-gradient(45deg, #ffec61, #f321d7); 113 | } 114 | 115 | .popupBtn { 116 | padding: 10px 20px; 117 | border-radius: 10px; 118 | background-color: black; 119 | color: white; 120 | } 121 | .mediumtaskbox { 122 | background-image: linear-gradient(-45deg, #f403d1, #64b5f6); 123 | margin-left: 1rem; 124 | margin-right: 1rem; 125 | } 126 | .mediumtaskbox .buthover { 127 | background-image: linear-gradient(45deg, #f403d1, #64b5f6); 128 | } 129 | .lowtaskbox { 130 | background-image: linear-gradient(-45deg, #24ff72, #9a4eff); 131 | margin-left: 1rem; 132 | margin-right: 1rem; 133 | } 134 | .lowtaskbox .buthover { 135 | background-image: linear-gradient(45deg, #24ff72, #9a4eff); 136 | } 137 | 138 | .newtaskbutton { 139 | border-radius: 11px; 140 | background-color: bisque; 141 | color: black; 142 | width: 15vw; 143 | display: flex; 144 | align-items: center; 145 | justify-content: center; 146 | text-align: center; 147 | height: 7vh; 148 | font-weight: bolder; 149 | font-size: 2.3vh; 150 | } 151 | 152 | .prioritydesc { 153 | display: flex; 154 | align-items: center; 155 | justify-content: center; 156 | margin-left: 3vw; 157 | font-size: 2vh; 158 | cursor: pointer; 159 | } 160 | .redbox { 161 | background-image: linear-gradient(-45deg, #ffec61, #f321d7); 162 | height: 3vh; 163 | width: 3vh; 164 | margin-right: 0.5vw; 165 | } 166 | .yellowbox { 167 | background-image: linear-gradient(-45deg, #24ff72, #9a4eff); 168 | height: 3vh; 169 | width: 3vh; 170 | margin-right: 0.5vw; 171 | } 172 | .violetbox { 173 | background-image: linear-gradient(-45deg, #f403d1, #64b5f6); 174 | height: 3vh; 175 | width: 3vh; 176 | margin-right: 0.5vw; 177 | } 178 | .newtaskbutton:hover { 179 | background-color: rgb(236, 193, 140); 180 | text-decoration: none; 181 | cursor: pointer; 182 | } 183 | 184 | .New-Task { 185 | position: absolute; 186 | width: 45vw; 187 | top: 50%; 188 | left: 50%; 189 | transform: translate(-50%, -50%); 190 | } 191 | 192 | .new-task-div { 193 | width: 90%; 194 | max-width: 600px; 195 | } 196 | 197 | .forhover :hover { 198 | color: white; 199 | } 200 | .toppar2 { 201 | margin: 0%; 202 | padding: 0%; 203 | } 204 | .topbar { 205 | margin: 0%; 206 | } 207 | .high { 208 | height: 5px; 209 | background-color: #fdc379 ; 210 | } 211 | .med { 212 | background-color: #59afb1; 213 | } 214 | .low { 215 | background-color: #7a9af0; 216 | } 217 | #date { 218 | filter: invert(100%); 219 | color: black; 220 | } 221 | 222 | .formarea { 223 | padding: 0vw 0vw 0vw 1vw; 224 | font-weight: bolder; 225 | display: flex; 226 | flex-direction: column; 227 | } 228 | .fields { 229 | width: 88%; 230 | border: none; 231 | margin-top: 0.5vh; 232 | margin-bottom: 1.5vh; 233 | 234 | padding: 0%; 235 | border-bottom: 2px solid red; 236 | background-color: rgba(128, 128, 124, 0); 237 | color: black; 238 | text-decoration: solid; 239 | font-size: 1.8vh; 240 | } 241 | 242 | .subbut { 243 | width: 30%; 244 | background-color: #04ef0d; 245 | color: #000; 246 | border: none; 247 | border-radius: 4px; 248 | cursor: pointer; 249 | align-self: center; 250 | margin-left: 35%; 251 | margin-right: 35%; 252 | margin-top: 2%; 253 | height: 14%; 254 | font-size: 2.5vh; 255 | font-weight: bold; 256 | } 257 | .subbut:active { 258 | transform: translate(0px, 2px); 259 | } 260 | .subbut:hover { 261 | background-color: #2ec633; 262 | cursor: pointer; 263 | } 264 | .buthover { 265 | color: black; 266 | font-weight: 600; 267 | cursor: pointer; 268 | font-size: 1rem; 269 | padding: 0.1rem 1rem; 270 | border-radius: 50rem; 271 | color: white; 272 | } 273 | .buthover:hover { 274 | color: black; 275 | } 276 | 277 | .Sort-Tasks { 278 | position: absolute; 279 | top: 50%; 280 | left: 50%; 281 | transform: translate(-50%, -50%); 282 | width: 40vw; 283 | } 284 | 285 | .select-option { 286 | width: auto; 287 | height: 5vh; 288 | font-size: 2.2vh; 289 | margin-top: 2vh; 290 | } 291 | .select-option:focus { 292 | outline: none; 293 | border: none; 294 | } 295 | 296 | .sorted-wrapper { 297 | display: flex; 298 | flex-direction: column; 299 | width: 100%; 300 | height: 90%; 301 | } 302 | 303 | .task-object { 304 | width: 100%; 305 | display: flex; 306 | flex-direction: row; 307 | justify-content: space-around; 308 | } 309 | 310 | .task-elem { 311 | font-size: 2vh; 312 | text-align: center; 313 | width: 25%; 314 | } 315 | .task-elem-heading { 316 | font-size: 2.5vh; 317 | text-align: center; 318 | width: 25%; 319 | } 320 | 321 | @media screen and (max-width: 1000px) { 322 | .Sort-Tasks { 323 | width: 55vw; 324 | } 325 | .New-Task { 326 | width: 55vw; 327 | } 328 | } 329 | 330 | @media screen and (max-width: 800px) { 331 | .Sort-Tasks { 332 | width: 65vw; 333 | } 334 | .New-Task { 335 | width: 65vw; 336 | } 337 | } 338 | 339 | @media screen and (max-width: 700px) { 340 | .newtaskbutton { 341 | font-size: 2vh; 342 | margin-left: 1vw; 343 | margin-right: 2vw; 344 | } 345 | .Sort-Tasks { 346 | width: 69vw; 347 | } 348 | .New-Task { 349 | width: 69vw; 350 | } 351 | } 352 | option { 353 | color: #000; 354 | } 355 | -------------------------------------------------------------------------------- /Frontend/src/CSSComponents/delete.css: -------------------------------------------------------------------------------- 1 | .delete-btns { 2 | width: 80%; 3 | display: flex; 4 | flex-direction: row-reverse; 5 | justify-content: space-between; 6 | } 7 | .confirm-btn, 8 | .cancel-btn { 9 | width: 10rem; 10 | border-radius: 3px !important; 11 | } 12 | 13 | .cancel-btn { 14 | background-color: gray; 15 | } 16 | 17 | .cross { 18 | height: 60px; 19 | width: 60px; 20 | border-radius: 50%; 21 | box-shadow: inset 0 0 0 7px #ff0000; 22 | color: #ff0000; 23 | } 24 | 25 | .delete-message { 26 | font-weight: 400; 27 | } 28 | -------------------------------------------------------------------------------- /Frontend/src/CSSComponents/diary.css: -------------------------------------------------------------------------------- 1 | .fhover:hover { 2 | color: aqua; 3 | } 4 | .btn-entry { 5 | width: 100%; 6 | display: flex; 7 | justify-content: center; 8 | } 9 | .add-entry { 10 | height: 3.6vh; 11 | padding: 3% 0 5% 0; 12 | font-weight: bold; 13 | font-size: 2vh; 14 | 15 | width: 15rem; 16 | text-align: center; 17 | } 18 | .datepicker{ 19 | padding-top: 30px; 20 | 21 | } 22 | input[type=date] { 23 | 24 | padding: 20px 20px; 25 | margin: 8px 0; 26 | box-sizing: border-box; 27 | border: 3px solid #ccc; 28 | -webkit-transition: 0.5s; 29 | transition: 0.5s; 30 | outline: none; 31 | } 32 | 33 | input[type=date]:focus { 34 | border: 3px solid #555; 35 | } 36 | input[type="date"]::-webkit-calendar-picker-indicator { 37 | cursor: pointer; 38 | 39 | filter:brightness(0%) 40 | } 41 | 42 | input[type="date"]::-webkit-calendar-picker-indicator:hover { 43 | opacity: 1 44 | } 45 | 46 | ::-webkit-scrollbar{ 47 | width:15px; 48 | } 49 | 50 | ::-webkit-scrollbar-track{ 51 | border-radius:10px; 52 | background:white; 53 | box-shadow:inset 0 0 6px rgba(0,0,0,0.3); 54 | } 55 | 56 | ::-webkit-scrollbar-thumb{ 57 | border-radius:10px; 58 | background:grey; 59 | box-shadow:inset 0 0 6px rgba(0,0,0,0.3); 60 | } -------------------------------------------------------------------------------- /Frontend/src/CSSComponents/ideas.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;800;900&display=swap"); 2 | .ideaspage { 3 | display: flex; 4 | flex-direction: column; 5 | min-height: 100vh; 6 | width: 85vw; 7 | margin-left: 15vw; 8 | align-items: center; 9 | font-family: "Poppins", sans-serif; 10 | background-image: url("https://www.transparenttextures.com/patterns/cubes.png"); 11 | background-color: rgb(100, 100, 100); 12 | color:black; 13 | } 14 | .hoverOnCursor:hover { 15 | cursor: pointer; 16 | } 17 | .dclose { 18 | padding: 8px 15px; 19 | color: rgb(130, 130, 130); 20 | } 21 | .dclose:hover { 22 | color: black; 23 | } 24 | 25 | .douter { 26 | position: relative; 27 | display: inline-block; 28 | padding: 0.5rem 1rem; 29 | border: 2px solid #111; 30 | color: #111; 31 | text-decoration: none; 32 | font-weight: 600; 33 | font-size: 1rem; 34 | cursor: pointer; 35 | } 36 | .douter:before { 37 | content: ""; 38 | position: absolute; 39 | top: 6px; 40 | left: -2px; 41 | width: calc(100% + 4px); 42 | height: calc(100% - 12px); 43 | background-color: #fff; 44 | transition: 0.5s ease-in-out; 45 | transform: scaleY(1); 46 | } 47 | .douter { 48 | position: relative; 49 | 50 | padding: 0.3rem 1rem; 51 | border: 2px solid #111; 52 | color: #111; 53 | text-decoration: none; 54 | font-weight: 600; 55 | font-size: 20px; 56 | cursor: pointer; 57 | display: flex; 58 | justify-content: center; 59 | 60 | width: 10%; 61 | margin: auto; 62 | } 63 | .douter:after { 64 | content: ""; 65 | position: absolute; 66 | left: 6px; 67 | top: -2px; 68 | height: calc(100% + 4px); 69 | width: calc(100% - 12px); 70 | background-color: #fff; 71 | transition: 0.5s ease-in-out; 72 | transform: scaleX(1); 73 | } 74 | .douter:hover:after { 75 | transform: scaleX(0); 76 | } 77 | .douter .dsubmit { 78 | position: relative; 79 | z-index: 3; 80 | font-size: 1rem; 81 | font-weight: bold; 82 | } 83 | 84 | .fields { 85 | width: 88%; 86 | border: none; 87 | margin-top: 7px; 88 | padding: 0%; 89 | padding-left: 6px; 90 | border-bottom: 2px solid #fff; 91 | background-color: rgba(128, 128, 124, 0); 92 | color: #fff; 93 | text-decoration: solid; 94 | font-size: 2vh; 95 | margin-bottom: 13px; 96 | } 97 | ::-webkit-calendar-picker-indicator { 98 | filter: invert(1); 99 | } 100 | .ideabox { 101 | height: auto; 102 | display: flex; 103 | word-wrap: break-word; 104 | max-width: 35vw; 105 | border-radius: 10px; 106 | flex-direction: column; 107 | align-items: center; 108 | background: #ffc; 109 | padding: 1rem; 110 | font-family: "Poppins", sans-serif; 111 | } 112 | 113 | #dname { 114 | margin-bottom: none; 115 | font-size: 1.5rem; 116 | background-color: transparent; 117 | width: 80%; 118 | font-family: "Poppins", sans-serif; 119 | font-weight: 500; 120 | padding-top: 0; 121 | } 122 | #dname:focus { 123 | background-color: white; 124 | } 125 | #ddesc { 126 | border: none; 127 | font-size: 1rem; 128 | margin-top: 0; 129 | padding-left: 18px; 130 | color: rgb(55, 55, 55); 131 | caret-color: auto; 132 | font-family: "Poppins", sans-serif; 133 | } 134 | .ideaboxtop { 135 | height: max-content; 136 | width: 96.5%; 137 | font-size: 1.5rem; 138 | text-align: left; 139 | background: #ffc; 140 | font-weight: 600; 141 | display: flex; 142 | /* flex-direction: row; */ 143 | align-items: center; 144 | justify-content: space-between; 145 | /* box-shadow: 5px 5px 7px rgba(118, 118, 118, 0.7); */ 146 | /* padding-left: 4%; */ 147 | /* padding: 0.5vh; */ 148 | border-bottom: 0.5px solid rgba(128, 128, 128, 0.3); 149 | } 150 | .ideaboxtop > div { 151 | margin-right: 3%; 152 | color: rgb(118, 118, 118); 153 | } 154 | 155 | .ideaboxtop > div > *:hover { 156 | color: rgb(0, 0, 0); 157 | } 158 | 159 | .ideaboxbottom { 160 | height: auto; 161 | width: 100%; 162 | font-size: 1rem; 163 | background: #ffc; 164 | margin-top: 10px; 165 | } 166 | .ideaboxbottom > * { 167 | padding: 0 1rem; 168 | } 169 | 170 | .newideabutton { 171 | background-color: rgb(255, 196, 0); 172 | position: fixed; 173 | bottom: 25px; 174 | right: 30px; 175 | height: 50px; 176 | width: 50px; 177 | display: flex; 178 | align-items: center; 179 | justify-content: center; 180 | border: 0.5vh; 181 | border-radius: 50%; 182 | color: white; 183 | padding: 1vh; 184 | transition: 0.5s; 185 | } 186 | .newideabutton:hover { 187 | background-color: rgb(255, 174, 0); 188 | animation: rotate 0.5s ease-in-out; 189 | } 190 | 191 | @keyframes rotate { 192 | from { 193 | transform: rotate(0); 194 | } 195 | to { 196 | transform: rotate(360deg); 197 | } 198 | } 199 | 200 | .editableIdeaName { 201 | display: flex; 202 | justify-content: space-around; 203 | flex-direction: row; 204 | align-items: center; 205 | 206 | height: 4vh; 207 | width: 60%; 208 | padding: 0.5vh; 209 | font-size: 3vh; 210 | text-align: left; 211 | 212 | color: white; 213 | font-weight: bold; 214 | display: flex; 215 | align-items: center; 216 | } 217 | 218 | .ideabtn { 219 | padding: 10px; 220 | height: 30px; 221 | width: 80px; 222 | } 223 | 224 | .ideainput { 225 | width: 100%; 226 | border-bottom: 1px solid black; 227 | background-color: transparent; 228 | font-size: 1.5rem; 229 | font-family: "Poppins", sans-serif; 230 | font-weight: 600; 231 | padding: 0; 232 | } 233 | .ideainput:hover { 234 | color: #000000; 235 | } 236 | .ideainput2 { 237 | padding: 1rem; 238 | box-shadow: inset 0 0 3px #000000; 239 | border: none; 240 | margin-bottom: 3px; 241 | color: black; 242 | font-size: 1rem; 243 | text-align: left; 244 | font-family: "Poppins", sans-serif; 245 | } 246 | .savebtn { 247 | width: 60px; 248 | height: 20px; 249 | text-align: center; 250 | display: flex; 251 | flex-direction: row; 252 | align-items: center; 253 | justify-content: space-between; 254 | margin-left: 10px; 255 | } 256 | 257 | .cancelbtn { 258 | width: 70px; 259 | height: 20px; 260 | text-align: center; 261 | display: flex; 262 | flex-direction: row; 263 | align-items: center; 264 | justify-content: space-between; 265 | margin-left: 10px; 266 | } 267 | 268 | .idea-box { 269 | width: 90%; 270 | margin: 0 auto; 271 | padding: 16px 10px; 272 | display: grid; 273 | grid-gap: 1rem; 274 | grid-template-columns: repeat(2, 1fr); 275 | } 276 | -------------------------------------------------------------------------------- /Frontend/src/CSSComponents/loginback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/CSSComponents/loginback.png -------------------------------------------------------------------------------- /Frontend/src/CSSComponents/loginpage.css: -------------------------------------------------------------------------------- 1 | .loginpage { 2 | height: 100vh; 3 | width: 100vw; 4 | display: flex; 5 | flex-direction: row-reverse; 6 | } 7 | 8 | .password { 9 | display: flex; 10 | } 11 | 12 | .togglebtn { 13 | padding-top: 0.75rem; 14 | padding-right: 0.5rem; 15 | display: block; 16 | min-width: min-content; 17 | background-color: white; 18 | border-bottom: 2px solid rgb(255, 183, 1); 19 | } 20 | 21 | .logo-div { 22 | height: 90%; 23 | width: 55%; 24 | display: flex; 25 | flex-direction: column; 26 | align-items: center; 27 | justify-content: space-between; 28 | } 29 | 30 | .logo-div h2 { 31 | font-size: 15vh; 32 | height: auto; 33 | padding: 0px; 34 | } 35 | 36 | .logo-div img { 37 | width: 50%; 38 | } 39 | 40 | .loginbox { 41 | margin-top: 0vh; 42 | margin-left: 5vw; 43 | width: 45%; 44 | height: fit-content; 45 | padding: 6vh; 46 | padding-bottom: 23vh; 47 | align-content: center; 48 | background-color: rgba(0, 0, 0, 0.096); 49 | border-radius: 0 0 20px 20px; 50 | } 51 | 52 | .regform { 53 | width: auto; 54 | height: 80vh; 55 | padding-inline: 2vw; 56 | padding-block: 5vh; 57 | align-content: center; 58 | background-color: rgba(0, 0, 0, 0.096); 59 | border-radius: 20px 20px 20px 20px; 60 | } 61 | 62 | .loginform { 63 | position: relative; 64 | padding: 0px; 65 | color: black; 66 | } 67 | 68 | input { 69 | width: 100%; 70 | padding: 15px; 71 | font-size: 15px; 72 | background-color: white; 73 | border: none; 74 | } 75 | 76 | button { 77 | background-color: rgb(255, 183, 1); 78 | color: white; 79 | padding: 15px; 80 | font-size: 15px; 81 | border: none; 82 | cursor: pointer; 83 | width: 100%; 84 | } 85 | 86 | button:hover { 87 | opacity: 0.7; 88 | } 89 | 90 | .heading-login { 91 | width: auto; 92 | height: auto; 93 | font-size: 3.9vh; 94 | text-align: center; 95 | } 96 | 97 | .reg-modal { 98 | width: 46%; 99 | background-color: rgb(241, 241, 241); 100 | top: 50%; 101 | left: 50%; 102 | transform: translate(-50%, -50%); 103 | /* css for making register modal scrollable */ 104 | overflow-y: scroll !important; 105 | } 106 | ::-webkit-scrollbar { 107 | width: 0.1rem; 108 | } 109 | .heading-register { 110 | width: auto; 111 | height: auto; 112 | font-size: 3.9vh; 113 | text-align: center; 114 | } 115 | 116 | .holders { 117 | background-color: white; 118 | border: none; 119 | border-bottom: 2px solid rgb(255, 183, 1); 120 | width: 95%; 121 | } 122 | 123 | .modal { 124 | position: absolute; 125 | top: 30px; 126 | left: 20vw; 127 | right: 20vw; 128 | bottom: 40px; 129 | background-color: grey; 130 | } 131 | 132 | .overlay { 133 | position: fixed; 134 | top: 0; 135 | left: 0; 136 | right: 0; 137 | bottom: 0; 138 | background-color: black; 139 | opacity: 0.8; 140 | } 141 | 142 | @media screen and (max-width: 1600px) { 143 | .logo-div { 144 | height: 89%; 145 | } 146 | 147 | .logo-div h2 { 148 | font-size: 10vh; 149 | margin-top: 3vh; 150 | } 151 | .logo-div img { 152 | width: 50%; 153 | } 154 | } 155 | 156 | @media screen and (max-width: 1400px) { 157 | .logo-div img { 158 | width: 60%; 159 | } 160 | .logo-div { 161 | height: 93%; 162 | } 163 | } 164 | 165 | @media screen and (max-width: 1100px) { 166 | .logo-div { 167 | height: 99%; 168 | } 169 | .logo-div img { 170 | width: 70%; 171 | } 172 | .loginbox { 173 | padding-bottom: 21vh; 174 | } 175 | .reg-modal { 176 | width: 60%; 177 | } 178 | } 179 | 180 | @media screen and (max-width: 870px) { 181 | .loginpage { 182 | flex-direction: column; 183 | justify-content: center; 184 | align-items: center; 185 | height: auto; 186 | } 187 | 188 | .logo-div { 189 | width: 70%; 190 | padding-left: 6vh; 191 | padding-right: 6vh; 192 | } 193 | 194 | .logo-div img { 195 | width: 60%; 196 | } 197 | 198 | .loginbox { 199 | margin-left: 0px; 200 | width: 70%; 201 | padding-bottom: 6vh; 202 | margin-bottom: 20px; 203 | } 204 | .reg-modal { 205 | width: 70%; 206 | } 207 | } 208 | -------------------------------------------------------------------------------- /Frontend/src/CSSComponents/maintenance.svg: -------------------------------------------------------------------------------- 1 | preservation -------------------------------------------------------------------------------- /Frontend/src/CSSComponents/movies.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;800;900&display=swap"); 2 | 3 | .moviesback { 4 | position: absolute; 5 | min-height: 100vh; 6 | height: auto; 7 | margin-left: 15%; 8 | width: 85%; 9 | display: flex; 10 | flex-direction: column; 11 | background-image: url("https://www.transparenttextures.com/patterns/cubes.png"); 12 | background-color: #181a1c; 13 | font-family: "Poppins", sans-serif; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | padding: 0 0 10vh 0; 18 | color: black; 19 | } 20 | .moviesback > * { 21 | width: 100%; 22 | } 23 | .hoverOnCursor:hover { 24 | cursor: pointer; 25 | } 26 | .topbar { 27 | width: 100%; 28 | height: 5vh; 29 | background-color: #0b6d9b; 30 | color: white; 31 | display: flex; 32 | font-size: 1.5rem; 33 | font-weight: 400; 34 | border-bottom: 1px; 35 | border-bottom-style: solid; 36 | } 37 | .topbar2 { 38 | width: 100%; 39 | height: auto; 40 | display: flex; 41 | font-size: 1rem; 42 | border-bottom: 1px; 43 | border-bottom-style: solid; 44 | font-weight: 300; 45 | background-color: #8ec5df; 46 | } 47 | 48 | .topbar2 p { 49 | margin: 0.5rem 0; 50 | } 51 | 52 | .topbar2:nth-of-type(even) { 53 | background-color: #0b6d9b; 54 | color: white; 55 | } 56 | 57 | .moviename { 58 | border-right: 1px; 59 | width: 35%; 60 | border-color: white; 61 | border-right-style: solid; 62 | font-weight: bolder; 63 | font-family: "Poppins", sans-serif; 64 | display: flex; 65 | justify-content: center; 66 | align-items: center; 67 | } 68 | .moviename2 { 69 | border-right: 1px; 70 | width: 35%; 71 | border-right-style: solid; 72 | border-color: white; 73 | font-weight: bolder; 74 | font-family: "Poppins", sans-serif; 75 | display: flex; 76 | align-items: center; 77 | } 78 | .moviename2 p { 79 | padding-left: 1rem; 80 | } 81 | .box { 82 | width: 10vh; 83 | height: 10vh; 84 | background-color: blue; 85 | } 86 | .movierating { 87 | border-right: 1px; 88 | border-right-style: solid; 89 | border-color: white; 90 | font-weight: bolder; 91 | display: flex; 92 | justify-content: center; 93 | align-items: center; 94 | 95 | width: 15%; 96 | } 97 | .movierating2 { 98 | border-right: 1px; 99 | border-right-style: solid; 100 | border-color: white; 101 | font-weight: bolder; 102 | display: flex; 103 | align-items: center; 104 | justify-content: center; 105 | 106 | width: 15%; 107 | } 108 | .moviedesc { 109 | width: 50%; 110 | font-weight: bolder; 111 | display: flex; 112 | justify-content: center; 113 | align-items: center; 114 | } 115 | .moviedesc2 { 116 | width: 50%; 117 | 118 | font-weight: bolder; 119 | display: flex; 120 | align-items: center; 121 | justify-content: space-between; 122 | } 123 | .moviedesc2 p { 124 | padding-left: 1rem; 125 | } 126 | .moviedesc2 div { 127 | padding-right: 1rem; 128 | } 129 | 130 | .edit-icon:hover { 131 | color: rgb(70, 70, 70); 132 | } 133 | 134 | .trash-icon:hover { 135 | color: rgb(70, 70, 70); 136 | } 137 | 138 | .Heading { 139 | border: 0; 140 | display: flex; 141 | justify-content: center; 142 | align-items: center; 143 | font-size: 1.5rem; 144 | } 145 | .entrybox { 146 | padding: 1vw; 147 | height: auto; 148 | /* margin-bottom: 20rem; */ 149 | background-color: #181a1c; 150 | box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.1), 151 | 5px 5px 15px rgba(0, 0, 0, 0.5), 152 | inset -5px -5px 10px rgba(255, 255, 255, 0.1), 153 | inset 5px 5px 15px rgba(0, 0, 0, 0.5); 154 | 155 | border-radius: 10px; 156 | margin-top: 2rem; 157 | font-family: "Poppins", sans-serif; 158 | width: 24rem; 159 | color: white; 160 | } 161 | 162 | .formbox { 163 | margin-top: 20px; 164 | margin-left: 10px; 165 | } 166 | 167 | .numbin { 168 | border: none; 169 | margin-top: 7px; 170 | border-bottom: 2px solid red; 171 | background-color: rgba(128, 128, 124, 0); 172 | color: aliceblue; 173 | text-decoration: solid; 174 | font-size: 2vh; 175 | 176 | margin-bottom: 13px; 177 | } 178 | 179 | .moviesback textarea { 180 | width: 88%; 181 | border: none; 182 | margin-top: 7px; 183 | font-family: "Poppins", sans-serif; 184 | background-color: rgba(128, 128, 124, 0); 185 | color: aliceblue; 186 | text-decoration: solid; 187 | font-size: 2vh; 188 | padding: 0%; 189 | padding-left: 6px; 190 | } 191 | .center { 192 | width: 100%; 193 | display: flex; 194 | justify-content: center; 195 | align-items: center; 196 | } 197 | .subm2 { 198 | border-radius: 40px; 199 | color: white; 200 | 201 | background-color: #181a1c; 202 | cursor: pointer; 203 | 204 | padding: 1rem; 205 | box-shadow: inset -2px 2px 6px rgba(255, 255, 255, 0.25), 206 | inset 2px 2px 6px rgba(0, 0, 0, 0.8); 207 | transition: all 1s; 208 | font-weight: bold; 209 | margin: 10px auto; 210 | width: 30%; 211 | min-width: 8rem; 212 | } 213 | .subm2:hover { 214 | background-color: #03a9f4; 215 | 216 | color: black; 217 | } 218 | .save-button { 219 | width: 15rem; 220 | margin: auto; 221 | border-radius: 0.6rem; 222 | background-color: #181a1c; 223 | transition: all 1s; 224 | } 225 | .save-button:hover { 226 | color: black; 227 | background-color: #03a9f4; 228 | } 229 | 230 | .movie-edit { 231 | display: flex; 232 | flex-direction: column; 233 | justify-content: center; 234 | } 235 | 236 | .rating-sort-btn { 237 | display: flex; 238 | align-items: center; 239 | margin-left: 10px; 240 | cursor: pointer; 241 | } 242 | 243 | .donkey { 244 | width: 80%; 245 | font-family: "Poppins", sans-serif; 246 | background-color: #181a1c; 247 | border: none; 248 | outline: none; 249 | border-radius: 40px; 250 | padding: 10px 15px; 251 | color: white; 252 | 253 | box-shadow: inset -2px 2px 6px rgba(255, 255, 255, 0.25), 254 | inset 2px 2px 6px rgba(0, 0, 0, 0.3); 255 | } 256 | #mdesc { 257 | resize: vertical; 258 | color: white; 259 | font-family: "Poppins", sans-serif; 260 | font-size: 1rem; 261 | } 262 | 263 | .formbox label { 264 | color: #03a9f4; 265 | font-weight: bold; 266 | } 267 | 268 | ::-webkit-scrollbar{ 269 | width:15px; 270 | } 271 | 272 | ::-webkit-scrollbar-track{ 273 | border-radius:10px; 274 | background:white; 275 | box-shadow:inset 0 0 6px rgba(0,0,0,0.3); 276 | } 277 | 278 | ::-webkit-scrollbar-thumb{ 279 | border-radius:10px; 280 | background:grey; 281 | box-shadow:inset 0 0 6px rgba(0,0,0,0.3); 282 | } -------------------------------------------------------------------------------- /Frontend/src/CSSComponents/window.css: -------------------------------------------------------------------------------- 1 | .Landscape { 2 | height: 100vh; 3 | width: 100vw; 4 | display: flex; 5 | flex-direction: column; 6 | text-align: center; 7 | align-items: center; 8 | justify-content: center; 9 | } 10 | .arrow { 11 | height: 80px; 12 | } 13 | 14 | .phone { 15 | height: 250px; 16 | transform: rotate(0deg); 17 | animation: rotate 5s linear infinite; 18 | } 19 | 20 | @keyframes rotate { 21 | 0% { 22 | transform: rotate(0deg); 23 | } 24 | 50% { 25 | transform: rotate(90deg); 26 | } 27 | 100% { 28 | transform: rotate(0deg); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /Frontend/src/ConfettiCeleb.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Confetti from "react-confetti"; 3 | 4 | export default function ConfettiCeleb() { 5 | const confetti = { 6 | width: "100vw", 7 | height: "100vh", 8 | position: "fixed", 9 | }; 10 | 11 | return ( 12 |
13 | 22 |
23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /Frontend/src/Context/curved_arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/Context/curved_arrow.png -------------------------------------------------------------------------------- /Frontend/src/Context/usercontext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const usercontext = createContext({}); 4 | -------------------------------------------------------------------------------- /Frontend/src/Context/—Pngtree—mobile frame png image and_6631525.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/Context/—Pngtree—mobile frame png image and_6631525.png -------------------------------------------------------------------------------- /Frontend/src/LoadingScreen.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./CSSComponents/App.css"; 3 | // import CircularProgress from "@mui/material/CircularProgress"; 4 | // import { blue } from "@mui/material/colors"; 5 | 6 | const Loader = () => { 7 | return ( 8 |
9 |
10 |
11 |
12 | ); 13 | }; 14 | 15 | export default Loader; 16 | -------------------------------------------------------------------------------- /Frontend/src/PasswordStrengthMeter.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import zxcvbn from "zxcvbn"; 3 | 4 | ; 10 | 11 | const PasswordStrengthMeter = ({ passM }) => { 12 | // code 13 | const testResult = zxcvbn(passM); 14 | const num = (testResult.score * 100) / 4; 15 | 16 | const createPassLabel = () => { 17 | switch (testResult.score) { 18 | case 0: 19 | return " "; 20 | case 1: 21 | return "Weak"; 22 | case 2: 23 | return "Fair"; 24 | case 3: 25 | return "Good"; 26 | case 4: 27 | return "Strong"; 28 | default: 29 | return ""; 30 | } 31 | }; 32 | 33 | const funcProgressColor = () => { 34 | switch (testResult.score) { 35 | case 0: 36 | return "#828282"; 37 | case 1: 38 | return "#EA1111"; 39 | case 2: 40 | return "#FFAD00"; 41 | case 3: 42 | return "#9bc158"; 43 | case 4: 44 | return "#00b500"; 45 | default: 46 | return "none"; 47 | } 48 | }; 49 | 50 | const changePasswordColor = () => ({ 51 | width: `${num}%`, 52 | background: funcProgressColor(), 53 | height: "7px", 54 | }); 55 | 56 | const myStyle = { 57 | height: "7px", 58 | 59 | marginTop: "5px", 60 | marginBottom: "0%", 61 | }; 62 | 63 | return ( 64 | <> 65 |
66 |
67 |
68 |

{createPassLabel()}

69 | 70 | ); 71 | }; 72 | 73 | export default PasswordStrengthMeter; 74 | -------------------------------------------------------------------------------- /Frontend/src/axiosClient.js: -------------------------------------------------------------------------------- 1 | 2 | import axios from 'axios'; 3 | 4 | // Axios instance for optimzed usage 5 | const axiosClient = axios.create(); 6 | 7 | axiosClient.defaults.baseURL = 'https://planzap.herokuapp.com'; 8 | 9 | // axiosClient.defaults.headers = { 10 | // 'Content-Type': 'application/json', 11 | // Accept: 'application/json' 12 | // }; 13 | 14 | //All request will wait 2 seconds before timeout 15 | axiosClient.defaults.timeout = 2000; 16 | 17 | axiosClient.defaults.withCredentials = true; 18 | 19 | 20 | 21 | // making new functions for convenience 22 | export async function getRequest(URL) { 23 | const response = await axiosClient.get(`/${URL}`); 24 | return response; 25 | } 26 | 27 | export async function postRequest(URL, payload) { 28 | const response = await axiosClient.post(`/${URL}`, payload); 29 | return response; 30 | } 31 | 32 | export async function putRequest(URL, payload) { 33 | const response = await axiosClient.put(`/${URL}`, payload); 34 | return response; 35 | } 36 | 37 | export async function patchRequest(URL, payload) { 38 | const response = await axiosClient.patch(`/${URL}`, payload); 39 | return response; 40 | } 41 | 42 | export async function deleteRequest(URL) { 43 | const response = await axiosClient.delete(`/${URL}`); 44 | return response; 45 | } -------------------------------------------------------------------------------- /Frontend/src/booksToRead.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useContext } from "react"; 2 | import "./CSSComponents/movies.css"; 3 | import "./CSSComponents/booksToRead.css"; 4 | import Axios from "axios"; 5 | import EditIcon from "@mui/icons-material/Edit"; 6 | import Modal from "react-modal"; 7 | import { usercontext } from "./Context/usercontext"; 8 | import "./CSSComponents/delete.css"; 9 | import DeleteIcon from "@mui/icons-material/Delete"; 10 | 11 | Modal.setAppElement("#root"); 12 | 13 | const Books = () => { 14 | const [book_name, setbookname] = useState(""); 15 | // const [book_author, setbookauthor] = useState(""); 16 | // const [book_description, setbookdesc] = useState(""); 17 | const [bookToDelete ,setBookToDelete] = useState(null); 18 | const [booklist, setbooklist] = useState([]); 19 | const [newname, setnewname] = useState(""); 20 | const [newdesc, setnewdesc] = useState(""); 21 | const [tempname, settempname] = useState(""); 22 | const [tempdesc, settempdesc] = useState(""); 23 | const [isOpen, setIsOpen] = useState(false); 24 | const [tempid, settempid] = useState(0); 25 | const [searchedBooks, setSearchedBooks] = useState([]); 26 | 27 | const { userid, setuserid } = useContext(usercontext); 28 | const [isPopup, setPopup] = useState(false); 29 | const [isRatingAsc, setIsRatingAsc] = useState(null); 30 | const booksListOrder = isRatingAsc 31 | ? booklist.sort((a, b) => (a.book_author < b.book_author ? 1 : -1)) 32 | : booklist.sort((a, b) => (a.book_author > b.book_author ? 1 : -1)); 33 | 34 | const BookCard = ({ 35 | curAuthors, 36 | curAverageRating, 37 | curDescription, 38 | curImageLinks, 39 | curTitle, 40 | index, 41 | }) => { 42 | return ( 43 |
44 |
45 | {curImageLinks ? ( 46 | Book thumbnail 52 | ) : ( 53 | "Image not available" 54 | )} 55 |
56 |
57 |

Title

58 |

{curTitle}

59 |

Description

60 | {curDescription ? ( 61 |

62 | {curDescription.length > 200 63 | ? curDescription.substring(0, 195) + "..." 64 | : curDescription} 65 |

66 | ) : ( 67 | "N/A" 68 | )} 69 | 70 |

Authors

71 | {curAuthors 72 | ? curAuthors.map((author, key) => { 73 | return {`${author}, `}; 74 | }) 75 | : "N/A"} 76 |

Rating

77 |

{curAverageRating ? curAverageRating : "*Not Rated*"}

78 | { 83 | const { authors, averageRating, description, imageLinks, title } = 84 | searchedBooks[index]; 85 | addbook(event, authors, description, title); 86 | }} 87 | /> 88 |
89 |
90 | ); 91 | }; 92 | 93 | function toggleModal() { 94 | setIsOpen(!isOpen); 95 | } 96 | 97 | const searchBoock = (event, title) => { 98 | event.preventDefault(); 99 | if (title === "") { 100 | setSearchedBooks([]); 101 | alert("Enter tiile to search for books"); 102 | return; 103 | } 104 | fetch(`https://www.googleapis.com/books/v1/volumes?q=+intitle:${title}`) 105 | .then((res) => res.json()) 106 | .then((books) => { 107 | console.log(books); 108 | if (books.totalItems === 0) { 109 | setSearchedBooks([]); 110 | alert("No Result Found"); 111 | return; 112 | } 113 | var searchedBooksList = []; 114 | books.items.forEach((book) => { 115 | const { 116 | authors, 117 | averageRating, 118 | description, 119 | imageLinks, 120 | title, 121 | ...rest 122 | } = book.volumeInfo; 123 | searchedBooksList.push({ 124 | authors, 125 | averageRating, 126 | description, 127 | imageLinks, 128 | title, 129 | }); 130 | }); 131 | setSearchedBooks(searchedBooksList); 132 | }); 133 | }; 134 | 135 | const updatebook = () => { 136 | console.log(tempid); 137 | Axios.put("https://planzap.herokuapp.com/update/description", { 138 | id: tempid, 139 | book_name: newname, 140 | book_description: newdesc, 141 | }).then((response) => { 142 | Axios.post("https://planzap.herokuapp.com/book/list", { 143 | userid: userid, 144 | }).then((response) => { 145 | setbooklist(response.data); 146 | }); 147 | console.log("updated"); 148 | }); 149 | }; 150 | 151 | const addbook = (event, authors, description, title) => { 152 | event.preventDefault(); 153 | const data = Axios.post("https://planzap.herokuapp.com/book/create", { 154 | book_name: title, 155 | book_author: authors ? authors[0] : "N/A", 156 | book_description: description ? description : "N/A", 157 | userid: userid, 158 | }).then(() => { 159 | Axios.post("https://planzap.herokuapp.com/book/list", { 160 | userid: userid, 161 | }).then((response) => { 162 | console.log("New List of books : ", response.data); 163 | setbooklist(response.data); 164 | }); 165 | console.log("success"); 166 | }); 167 | }; 168 | 169 | console.log(setuserid); //This is for removing warning only 170 | useEffect(() => { 171 | Axios.post("https://planzap.herokuapp.com/book/list", { 172 | userid: userid, 173 | }).then((response) => { 174 | setbooklist(response.data); 175 | }); 176 | }, [userid]); 177 | 178 | const deletebook = () => { 179 | Axios.delete(`https://planzap.herokuapp.com/book/delete/${bookToDelete}`).then( 180 | (respose) => { 181 | setbooklist( 182 | booklist.filter((val) => { 183 | return val.id !== bookToDelete; 184 | }) 185 | ); 186 | } 187 | ); 188 | }; 189 | 190 | return ( 191 |
192 | 215 |
216 | 219 |
220 | { 229 | setnewname(event.target.value); 230 | }} 231 | /> 232 |
233 |
234 | 237 |
238 | 250 |
251 |
252 | 261 |
262 | 263 | 264 |
265 |
Title
266 |
267 | Author 268 |
271 | isRatingAsc ? setIsRatingAsc(false) : setIsRatingAsc(true) 272 | } 273 | title="Sort by Rating" 274 | > 275 | 281 | 286 | 287 |
288 |
289 |
Description
290 |
291 | 292 |
293 | {booksListOrder.map((val, key) => { 294 | return ( 295 |
296 |
297 |

{val.book_name}

298 |
299 |
{val.book_author}
300 |
301 |

302 | {val.book_description.length > 500 303 | ? val.book_description.substring(0, 495) + " . . ." 304 | : val.book_description} 305 |

306 |
307 | { 311 | settempname(val.book_name); 312 | settempdesc(val.book_description); 313 | setnewname(val.book_name); 314 | setnewdesc(val.book_description); 315 | settempid(val.id); 316 | toggleModal(); 317 | }} 318 | /> 319 | { 323 | setPopup(true); 324 | setBookToDelete(val.id); 325 | }} 326 | /> 327 |
328 |
329 | 330 | { 333 | setPopup(false); 334 | }} 335 | style={{ 336 | overlay: { 337 | backgroundColor: "rgba(0, 0, 0, 0.75)", 338 | }, 339 | content: { 340 | width: "30vw", 341 | height: "30vh", 342 | margin: "auto", 343 | padding: "1%", 344 | borderRadius: "7px", 345 | backgroundColor: "white", 346 | display: "flex", 347 | flexDirection: "column", 348 | alignItems: "center", 349 | justifyContent: "space-around", 350 | }, 351 | }} 352 | centered 353 | > 354 |

355 | Do you want to delete the book? 356 |

357 |
358 | 368 | 369 | 377 |
378 | 379 |
380 | ); 381 | })} 382 |
383 | 384 |
385 |
386 | 387 |
388 |
389 | { 398 | setbookname(event.target.value); 399 | }} 400 | /> 401 | 402 |
403 | { 408 | searchBoock(event, book_name); 409 | }} 410 | /> 411 |
412 |
413 |
414 |
415 | {searchedBooks.map((book, key) => { 416 | const { title, authors, averageRating, description, imageLinks } = 417 | book; 418 | console.log(book, " ", key); 419 | return ( 420 | 429 | ); 430 | })} 431 |
432 |
433 | ); 434 | }; 435 | 436 | export default Books; 437 | -------------------------------------------------------------------------------- /Frontend/src/calendar.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext, useEffect } from "react"; 2 | import "./CSSComponents/calendarstyle.css"; 3 | import CloseIcon from "@mui/icons-material/Close"; 4 | import Modal from "react-modal"; 5 | import { putRequest, postRequest, deleteRequest } from './axiosClient'; 6 | import { usercontext } from "./Context/usercontext"; 7 | import Slider from "@mui/material/Slider"; 8 | import Box from "@mui/material/Box"; 9 | import "./CSSComponents/delete.css"; 10 | import CircularProgress from "@mui/material/CircularProgress"; 11 | const { format } = require("date-fns"); 12 | 13 | Modal.setAppElement("#root"); 14 | 15 | const Calender = (props) => { 16 | function daysLeft(a) { 17 | //calculates the number of days left 18 | var x = Date.now(); 19 | var timeDiff = Date.parse(a.deadline) - x; 20 | var noOfDays = timeDiff / (1000 * 60 * 60 * 24); 21 | return noOfDays; 22 | } 23 | 24 | function weightedPriority(pr, d, progress) { 25 | var wP = d / ((100 - progress) * pr); 26 | return wP; 27 | } 28 | 29 | function getFormattedDate(val) { 30 | var ts = Date.parse(val); 31 | var n = new Date(ts); 32 | return n.getDate() + "/" + (n.getMonth() + 1) + "/" + n.getFullYear(); 33 | } 34 | 35 | function priorityNumVal(a) { 36 | //gets priority as an integer (1-3) 37 | switch (a.priority) { 38 | case "Highest Priority": 39 | return 3; 40 | 41 | case "Medium Priority": 42 | return 2; 43 | 44 | case "Lowest priority": 45 | return 1; 46 | 47 | default: 48 | break; 49 | } 50 | } 51 | 52 | const [taskname, settask] = useState(""); 53 | const [priority, setpriority] = useState(""); 54 | const [deadline, setdeadline] = useState(""); 55 | const [isPopup, setPopup] = useState(false); 56 | const [isOpen, setIsOpen] = useState(false); 57 | const { userid, setuserid } = useContext(usercontext); 58 | const [isLoader, setIsLoader] = useState(true); 59 | 60 | const [isSortPopup, setSortPopup] = useState(false); 61 | const today = new Date().toISOString().split("T")[0]; 62 | const [deleteTaskID, setDeleteTaskID] = useState(null); 63 | 64 | console.log(setuserid); //This is for removing warning only 65 | 66 | const [tasklist, settasklist] = useState([]); 67 | 68 | var taskArr = [...tasklist]; 69 | const [sortedTasks, setSortedTasks] = useState(taskArr); 70 | 71 | const [progress, setprogress] = useState(); 72 | const [sortType, setSortType] = useState({ sortBy: "default" }); 73 | 74 | const handleChange = (e) => { 75 | const value = e.target.value; 76 | setSortType({ 77 | ...sortType, 78 | sortBy: value, 79 | }); 80 | 81 | if (e.target.value === "deadline") { 82 | taskArr.sort((a, b) => { 83 | if (a.deadline < b.deadline) { 84 | return -1; 85 | } else if (a.deadline > b.deadline) { 86 | return 1; 87 | } else { 88 | return 0; 89 | } 90 | }); 91 | 92 | setSortedTasks(taskArr); 93 | } else if (e.target.value === "workleft") { 94 | taskArr.sort((a, b) => { 95 | return a.progress - b.progress; 96 | }); 97 | setSortedTasks(taskArr); 98 | } else { 99 | taskArr.sort((a, b) => { 100 | let prA = priorityNumVal(a), 101 | prB = priorityNumVal(b), 102 | dA = daysLeft(a), 103 | dB = daysLeft(b); 104 | return ( 105 | weightedPriority(prA, dA, a.progress) - 106 | weightedPriority(prB, dB, b.progress) 107 | ); 108 | }); 109 | setSortedTasks(taskArr); 110 | } 111 | }; 112 | 113 | const deletetask = (id) => { 114 | deleteRequest(`deletetask/${id}`).then( 115 | (response) => { 116 | settasklist( 117 | tasklist.filter((val) => { 118 | return val.taskid !== id; 119 | }) 120 | ); 121 | } 122 | ); 123 | }; 124 | 125 | const taskComplete = (id) => { 126 | //when finishes a task, confetti celeb action 127 | props.setConfetti(true); 128 | 129 | deleteRequest(`deletetask/${id}`).then( 130 | (response) => { 131 | settasklist( 132 | tasklist.filter((val) => { 133 | return val.taskid !== id; 134 | }) 135 | ); 136 | } 137 | ); 138 | 139 | //after 5s remove confetti and delete task 140 | setTimeout(() => { 141 | props.setConfetti(false); 142 | }, 5000); 143 | }; 144 | 145 | function toggleModal() { 146 | setIsOpen(!isOpen); 147 | } 148 | 149 | function toggleTaskSort() { 150 | setSortPopup(!isSortPopup); 151 | } 152 | 153 | useEffect(() => { 154 | setIsLoader(true); 155 | 156 | postRequest("gettaskdata", { 157 | userid: userid, 158 | }).then((response) => { 159 | setIsLoader(false); 160 | settasklist(response.data); 161 | }); 162 | }, [userid]); 163 | 164 | const checktask = () => { 165 | let tn = document.getElementById("taskname"); 166 | let d = document.getElementById("date"); 167 | let p = document.getElementById("priority"); 168 | console.log(tn.value); 169 | if (tn.value !== "" && d.value !== "" && p.value !== "") { 170 | return 1; 171 | } else { 172 | return 0; 173 | } 174 | }; 175 | 176 | const addtask = () => { 177 | postRequest("addtask", { 178 | taskname: taskname, 179 | priority: priority, 180 | deadline: deadline, 181 | userid: userid, 182 | }).then(() => { 183 | postRequest("gettaskdata", { 184 | userid: userid, 185 | }).then((response) => { 186 | settasklist(response.data); 187 | }); 188 | // console.log(typeof deadline); 189 | // console.log("success"); 190 | // console.log(taskname); 191 | }); 192 | 193 | settask(""); 194 | setpriority(""); 195 | setdeadline(""); 196 | 197 | toggleModal(); 198 | }; 199 | const updateprogess = (id) => { 200 | putRequest("updateprog", { 201 | id: id, 202 | progress: progress, 203 | }).then((response) => { 204 | postRequest("gettaskdata", { 205 | userid: userid, 206 | }).then((response) => { 207 | settasklist(response.data); 208 | }); 209 | console.log("updated"); 210 | }); 211 | }; 212 | 213 | if (isLoader) { 214 | return ( 215 |
216 |
217 | 218 |
219 | 220 |
221 |
222 |
223 | High Priority 224 |
225 |
226 |
227 | Medium Priority 228 |
229 |
230 |
231 | Low Priority 232 |
233 | 234 |
235 | Add new task 236 |
237 | 238 |
239 | Sort tasks 240 |
241 |
242 |
243 | ); 244 | } 245 | 246 | return ( 247 |
248 |
249 | {tasklist.map((val, index) => { 250 | return ( 251 |
261 |
271 | 281 | {" "} 282 | 283 | 287 | {" "} 288 | { 291 | setPopup(true); 292 | setDeleteTaskID(val.taskid); 293 | }} 294 | style={{ width: "1.6vw", height: "1.6vw" }} 295 | /> 296 | 297 | 298 | { 301 | setPopup(false); 302 | }} 303 | style={{ 304 | overlay: { 305 | backgroundColor: "rgba(0, 0, 0, 0.75)", 306 | }, 307 | content: { 308 | width: "30vw", 309 | height: "30vh", 310 | margin: "auto", 311 | padding: "1%", 312 | borderRadius: "7px", 313 | backgroundColor: "white", 314 | display: "flex", 315 | flexDirection: "column", 316 | alignItems: "center", 317 | justifyContent: "space-around", 318 | }, 319 | }} 320 | centered 321 | > 322 |

323 | Do you want to delete the task? 324 |

325 |
326 | 336 | 337 | 345 |
346 | 347 |
348 |
358 | {val.taskname} 359 |
360 |
370 | {" "} 371 | Task Progress 372 |
373 |
381 | 382 | { 389 | setprogress(event.target.value); 390 | updateprogess(val.taskid); 391 | }} 392 | onChangeCommitted={(event) => { 393 | setprogress(event.target.value); 394 | updateprogess(val.taskid); 395 | }} 396 | // style={{ width: "10vw" }} 397 | /> 398 | 399 |
{" "} 400 |
408 | Deadline : {format(new Date(val.deadline), "PPPP")} 409 |
410 |
418 |
{ 421 | taskComplete(val.taskid); 422 | }} 423 | > 424 | Done 425 |
426 |
427 |
428 | ); 429 | })} 430 |
431 |
432 |
433 |
434 | High Priority 435 |
436 |
437 |
438 | Medium Priority 439 |
440 |
441 |
442 | Low Priority 443 |
444 | 445 |
446 | Add new task 447 |
448 | 449 |
450 | Sort tasks 451 |
452 |
453 | 454 | 476 | 490 | 491 |
492 |
493 |

Task Name

494 |

Progress

495 |

Priority

496 |

Deadline

497 |
498 | {sortedTasks.map((val, key) => { 499 | return ( 500 |
501 |

{val.taskname}

502 |

{0+val.progress}%

503 |

{val.priority}

504 |

{getFormattedDate(val.deadline)}

505 |
506 | ); 507 | })} 508 |
509 | 510 | 511 | 535 |
536 |
537 | 543 | { 551 | settask(event.target.value); 552 | }} 553 | required 554 | /> 555 | 556 | 562 | 563 | { 570 | setdeadline(event.target.value); 571 | }} 572 | required 573 | /> 574 | 575 | 578 | 593 | { 599 | let a = checktask(); 600 | console.log(a); 601 | a === 1 ? addtask() : alert("please fill all the fields"); 602 | }} 603 | /> 604 |
605 |
606 | 607 |
608 | ); 609 | }; 610 | export default Calender; 611 | -------------------------------------------------------------------------------- /Frontend/src/diary.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext } from "react"; 2 | import "./CSSComponents/diary.css"; 3 | import { usercontext } from "./Context/usercontext"; 4 | import Modal from "react-modal"; 5 | import { putRequest, postRequest } from "./axiosClient"; 6 | 7 | const { format } = require("date-fns"); 8 | 9 | const Diary = () => { 10 | const { userid, setuserid } = useContext(usercontext); 11 | const [isOpen, setIsOpen] = useState(false); 12 | const [date, setdate] = useState(new Date()); 13 | const [newdesc, setnewdesc] = useState(""); 14 | const [desc, setdesc] = useState(); 15 | const [entryexists, setentrystatus] = useState(false); 16 | const [errormessage, seterrormessage] = useState(""); 17 | const [extracteddesc, setextracteddesc] = useState(""); 18 | const [extractdate, setextractdate] = useState(false); 19 | const today = new Date().toISOString().split("T")[0]; 20 | 21 | const [id, setid] = useState(0); 22 | console.log(today); 23 | 24 | console.log(setuserid); //This is for removing warning only 25 | console.log(id); //This is for removing warning only 26 | 27 | const toggleModal = () => { 28 | postRequest("getentry", { 29 | userid: userid, 30 | entry_date: date, 31 | }).then((response) => { 32 | if (response.data.message) { 33 | setentrystatus(false); 34 | setextracteddesc(""); 35 | setextractdate(""); 36 | setIsOpen(!isOpen); 37 | } else { 38 | setextractdate(response.data.entry_date); 39 | setentrystatus(true); 40 | setextracteddesc(response.data.data_entry); 41 | seterrormessage(""); 42 | setnewdesc(response.data.data_entry); 43 | setIsOpen(!isOpen); 44 | 45 | setid(response.data.id); 46 | } 47 | }); 48 | }; 49 | /* useEffect(() => { 50 | 51 | }, [])*/ 52 | const update = (e) => { 53 | putRequest("updatediary", { 54 | userid: userid, 55 | data_entry: newdesc, 56 | entry_date: date, 57 | }).then((response) => { 58 | console.log("updated"); 59 | }); 60 | }; 61 | const add = (e) => { 62 | postRequest("insertdiary", { 63 | userid: userid, 64 | data_entry: desc, 65 | entry_date: date, 66 | }).then((response) => { 67 | console.log("inserted"); 68 | }); 69 | }; 70 | const getentry = (datadate) => { 71 | postRequest("getentry", { 72 | userid: userid, 73 | entry_date: datadate, 74 | }).then((response) => { 75 | if (response.data.message) { 76 | seterrormessage(response.data.message); 77 | setentrystatus(false); 78 | setextracteddesc(""); 79 | setextractdate(""); 80 | } else { 81 | setextractdate(response.data.entry_date); 82 | setentrystatus(true); 83 | setextracteddesc(response.data.data_entry); 84 | seterrormessage(""); 85 | 86 | setid(response.data.id); 87 | } 88 | }); 89 | }; 90 | return ( 91 |
102 | 123 |
124 | 127 |
128 | 146 |
147 |
148 | 158 |
159 |
160 | 161 |
162 | { 172 | setdate(event.target.value); 173 | getentry(event.target.value); 174 | }} 175 | /> 176 |
177 |
178 | 179 |
180 | 192 |   193 |
194 |
195 |
204 | {errormessage} 205 |
206 |
216 | {entryexists ? format(new Date(extractdate), "PPPP") : " "} 217 | {entryexists ? " ," : " "} 218 | {/*entryexists ? {deleteentry(id)}} className="fhover"/>: " "*/} 219 |
220 | 221 |
230 | {entryexists 231 | ? extracteddesc.split("\n").map((text) => ( 232 |
233 | {text} 234 |
235 |
236 | )) 237 | : " "} 238 |
239 |
240 | ); 241 | }; 242 | 243 | export default Diary; 244 | -------------------------------------------------------------------------------- /Frontend/src/headercss.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/headercss.css -------------------------------------------------------------------------------- /Frontend/src/howtouse.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap"); 2 | 3 | .frame { 4 | padding-left: 15vw; 5 | width: 84vw; 6 | } 7 | .head-txt { 8 | text-align: center; 9 | margin-bottom: 2rem; 10 | font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 11 | } 12 | .sub-frame { 13 | margin-bottom: 50px; 14 | margin-top: 50px; 15 | } 16 | .sub-frame > h3 { 17 | text-align: center; 18 | font-family: Nunito; 19 | font-size: 1.4rem; 20 | } 21 | .step-number { 22 | font-weight: bold; 23 | margin-right: 1rem; 24 | } 25 | .sub-frame > div { 26 | display: flex; 27 | align-items: center; 28 | } 29 | 30 | .steps-container { 31 | display: flex; 32 | justify-content: center; 33 | } 34 | .steps { 35 | width: 25%; 36 | display: flex; 37 | flex-direction: column; 38 | align-items: center; 39 | margin-left: 10px; 40 | margin-right: 10px; 41 | } 42 | .steps > img { 43 | width: 80%; 44 | } 45 | .steps p { 46 | text-align: center; 47 | margin-left: 0px; 48 | } 49 | .right-arrow { 50 | width: 5vh; 51 | height: 5vh; 52 | } 53 | hr { 54 | margin-left: 10px; 55 | } 56 | -------------------------------------------------------------------------------- /Frontend/src/idea.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "./CSSComponents/ideas.css"; 3 | import TextareaAutosize from "react-textarea-autosize"; 4 | import EditIcon from "@mui/icons-material/Edit"; 5 | import Modal from "react-modal"; 6 | import SaveIcon from "@mui/icons-material/Save"; 7 | import CloseIcon from "@mui/icons-material/Close"; 8 | import "./CSSComponents/delete.css"; 9 | 10 | function Idea({ 11 | idea_list, 12 | deletenote, 13 | update, 14 | tempidea, 15 | settempidea, 16 | tempideadesc, 17 | settempdesc, 18 | setnewidea, 19 | setnewdesc, 20 | settempid, 21 | }) { 22 | const [isedit, setIsedit] = useState(false); 23 | const [isPopup, setPopup] = useState(false); 24 | 25 | // console.log(idea_list) 26 | 27 | return ( 28 |
29 |
30 | {isedit ? ( 31 |
32 | { 36 | setnewidea(event.target.value); 37 | }} 38 | className="ideainput" 39 | /> 40 |
41 | ) : ( 42 | idea_list.idea_name 43 | )} 44 | 45 |
51 | {isedit ? ( 52 |
53 | { 55 | update(); 56 | 57 | setIsedit(false); 58 | }} 59 | /> 60 |
61 | ) : ( 62 | { 65 | settempidea(idea_list.idea_name); 66 | settempdesc(idea_list.idea_desc); 67 | setnewidea(idea_list.idea_name); 68 | setnewdesc(idea_list.idea_desc); 69 | settempid(idea_list.ideaid); 70 | setIsedit(true); 71 | }} 72 | /> 73 | )} 74 |  {" "} 75 | {isedit ? ( 76 |
77 | { 79 | setIsedit(false); 80 | }} 81 | /> 82 |
83 | ) : ( 84 |
85 | { 88 | setIsedit(false); 89 | setPopup(true); 90 | }} 91 | /> 92 |
93 | )} 94 |
95 |
96 | 97 |
98 | {isedit ? ( 99 |
100 | {" "} 101 | { 108 | setnewdesc(event.target.value); 109 | }} 110 | />{" "} 111 |
112 | ) : ( 113 | idea_list.idea_desc.split("\n").map((text) => ( 114 |
115 | {text} 116 |
117 |
118 | )) 119 | )} 120 |
121 | 122 | { 125 | setPopup(false); 126 | }} 127 | style={{ 128 | overlay: { 129 | backgroundColor: "rgba(0, 0, 0, 0.75)", 130 | }, 131 | content: { 132 | width: "30vw", 133 | height: "30vh", 134 | margin: "auto", 135 | padding: "1%", 136 | borderRadius: "7px", 137 | backgroundColor: "white", 138 | display: "flex", 139 | flexDirection: "column", 140 | alignItems: "center", 141 | justifyContent: "space-around", 142 | }, 143 | }} 144 | centered 145 | > 146 |

Do you want to delete the idea?

147 |
148 | 158 | 159 | 167 |
168 | 169 |
170 | 171 | ); 172 | } 173 | 174 | export default Idea; 175 | -------------------------------------------------------------------------------- /Frontend/src/ideas.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useContext } from "react"; 2 | import "./CSSComponents/ideas.css"; 3 | import { putRequest, postRequest, deleteRequest } from './axiosClient'; 4 | 5 | import Modal from "react-modal"; 6 | import { usercontext } from "./Context/usercontext"; 7 | import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline"; 8 | import CloseIcon from "@mui/icons-material/Close"; 9 | import "./CSSComponents/delete.css"; 10 | 11 | import Idea from "./idea"; 12 | 13 | Modal.setAppElement("#root"); 14 | 15 | const Ideas = () => { 16 | const { userid, setuserid } = useContext(usercontext); 17 | const [idea_name, setideaname] = useState(""); 18 | const [idea_desc, setideadesc] = useState(""); 19 | const [idea_list, setidealist] = useState([]); 20 | const [isOpen, setIsOpen] = useState(false); 21 | 22 | const [tempidea, settempidea] = useState(""); 23 | const [tempideadesc, settempdesc] = useState(""); 24 | const [newidea, setnewidea] = useState(""); 25 | const [newdesc, setnewdesc] = useState(""); 26 | const [tempid, settempid] = useState(0); 27 | 28 | console.log(setuserid); //This is for removing warning only 29 | 30 | function toggleModal() { 31 | setIsOpen(!isOpen); 32 | } 33 | 34 | const addidea = () => { 35 | postRequest("addidea", { 36 | idea_name: idea_name, 37 | idea_desc: idea_desc, 38 | userid: userid, 39 | }).then(() => { 40 | postRequest("getideadata", { 41 | userid: userid, 42 | }).then((response) => { 43 | setidealist(response.data); 44 | }); 45 | console.log("success"); 46 | }); 47 | }; 48 | 49 | useEffect(() => { 50 | postRequest("getideadata", { 51 | userid: userid, 52 | }).then((response) => { 53 | setidealist(response.data); 54 | }); 55 | }, [userid]); 56 | 57 | const update = () => { 58 | putRequest("updateideadesc", { 59 | id: tempid, 60 | new_idea: newidea, 61 | new_desc: newdesc, 62 | }).then((response) => { 63 | postRequest("getideadata", { 64 | userid: userid, 65 | }).then((response) => { 66 | setidealist(response.data); 67 | }); 68 | 69 | console.log("updated"); 70 | }); 71 | }; 72 | 73 | const deletenote = (id) => { 74 | deleteRequest(`deleteidea/${id}`).then( 75 | (respose) => { 76 | setidealist( 77 | idea_list.filter((val) => { 78 | return val.ideaid !== id; 79 | }) 80 | ); 81 | } 82 | ); 83 | }; 84 | 85 | return ( 86 |
87 | 108 |
119 | Create New Note 120 | 121 |
122 |
123 |
124 | { 131 | setideaname(event.target.value); 132 | }} 133 | /> 134 | 135 | 148 |
{ 151 | addidea(); 152 | toggleModal(); 153 | }} 154 | > 155 | 156 | ADD 157 | 158 |
159 |
160 | 161 |
162 | {idea_list.map((val, key) => { 163 | return ( 164 | 176 | ); 177 | })} 178 |
179 |
184 | 185 |
186 |
187 | ); 188 | }; 189 | 190 | export default Ideas; 191 | -------------------------------------------------------------------------------- /Frontend/src/images/PlanZap Logo 1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Frontend/src/images/PlanZap Logo 2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Frontend/src/images/PlanZap Logo 3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Frontend/src/images/PlanZap logo 4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Frontend/src/images/diary1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/diary1.png -------------------------------------------------------------------------------- /Frontend/src/images/diary2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/diary2.png -------------------------------------------------------------------------------- /Frontend/src/images/diary3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/diary3.png -------------------------------------------------------------------------------- /Frontend/src/images/diary4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/diary4.png -------------------------------------------------------------------------------- /Frontend/src/images/diary5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/diary5.png -------------------------------------------------------------------------------- /Frontend/src/images/dtask4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/dtask4.png -------------------------------------------------------------------------------- /Frontend/src/images/movie1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/movie1.png -------------------------------------------------------------------------------- /Frontend/src/images/movie2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/movie2.png -------------------------------------------------------------------------------- /Frontend/src/images/movie3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/movie3.png -------------------------------------------------------------------------------- /Frontend/src/images/movie4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/movie4.png -------------------------------------------------------------------------------- /Frontend/src/images/movie5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/movie5.png -------------------------------------------------------------------------------- /Frontend/src/images/movie6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/movie6.png -------------------------------------------------------------------------------- /Frontend/src/images/note1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/note1.png -------------------------------------------------------------------------------- /Frontend/src/images/note2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/note2.png -------------------------------------------------------------------------------- /Frontend/src/images/note3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/note3.png -------------------------------------------------------------------------------- /Frontend/src/images/note4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/note4.png -------------------------------------------------------------------------------- /Frontend/src/images/note5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/note5.png -------------------------------------------------------------------------------- /Frontend/src/images/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/right-arrow.png -------------------------------------------------------------------------------- /Frontend/src/images/spinner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/spinner.gif -------------------------------------------------------------------------------- /Frontend/src/images/stask2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/stask2.png -------------------------------------------------------------------------------- /Frontend/src/images/stask3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/stask3.png -------------------------------------------------------------------------------- /Frontend/src/images/task1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/task1.png -------------------------------------------------------------------------------- /Frontend/src/images/task2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/task2.png -------------------------------------------------------------------------------- /Frontend/src/images/task3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/task3.png -------------------------------------------------------------------------------- /Frontend/src/images/task4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SaraswatGit/PlanZap/44e1755062fd40adca8bee368e7607c4b08319cc/Frontend/src/images/task4.png -------------------------------------------------------------------------------- /Frontend/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | a, a:hover, a:focus, a:active { 15 | text-decoration: none; 16 | color: inherit; 17 | } 18 | -------------------------------------------------------------------------------- /Frontend/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import reportWebVitals from "./reportWebVitals"; 5 | import { BrowserRouter as Router } from "react-router-dom"; 6 | import { StyledEngineProvider } from "@mui/material/styles"; 7 | import Component from "./window"; 8 | 9 | ReactDOM.render( 10 | 11 | 12 | 13 | 14 | 15 | 16 | , 17 | document.getElementById("root") 18 | ); 19 | 20 | // If you want to start measuring performance in your app, pass a function 21 | // to log results (for example: reportWebVitals(console.log)) 22 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 23 | reportWebVitals(); 24 | -------------------------------------------------------------------------------- /Frontend/src/loginpage.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useState } from 'react'; 2 | import { BsFillEyeFill, BsFillEyeSlashFill } from 'react-icons/bs'; 3 | import ReactModal from 'react-modal'; 4 | import { postRequest } from './axiosClient'; 5 | import { usercontext } from './Context/usercontext'; 6 | import './CSSComponents/loginpage.css'; 7 | import PasswordStrengthMeter from './PasswordStrengthMeter'; 8 | 9 | const Login = () => { 10 | const { notloggedin, setloginstatus, userid, setuserid } = 11 | useContext(usercontext); 12 | const [useremail, setuseremail] = useState(''); 13 | const [password, setPassword] = useState(''); 14 | const [confirmPassword, setConfirmPassword] = useState(''); 15 | const [lmail, setlmail] = useState(''); 16 | const [pass, setpass] = useState(''); 17 | const [loginMessage, setLoginMessage] = useState(''); 18 | const [registerMessage, setRegisterMessage] = useState(''); 19 | const [passM, setPasssword] = useState(''); 20 | const [visible, setVisible] = useState(false); 21 | 22 | function togglePasswordView() { 23 | setVisible(!visible); 24 | } 25 | 26 | const registeruser = (e) => { 27 | //console.log(useremail+password); 28 | console.log(userid); //This is for removing warning only 29 | console.log(notloggedin); //This is for removing warning only 30 | 31 | e.preventDefault(); // added this line so that the default submission of form (which caused refreshing of the page)can be prevented and we get submit using post method. 32 | if (password === confirmPassword) { 33 | postRequest('usercreate', { 34 | useremail: useremail, 35 | password: password, 36 | }).then((response) => { 37 | setRegisterMessage(response.data.message); 38 | setTimeout(() => { 39 | setRegisterMessage(''); 40 | }, 3000); 41 | window.location.reload(); 42 | // postRequest('userlogin', { 43 | // useremail: useremail, 44 | // password: password, 45 | // }).then((response) => { 46 | // if (response.data.message) { 47 | // setLoginMessage(response.data.message); 48 | // } else { 49 | // setuserid(response.data[0].userid); 50 | // setloginstatus(false); 51 | // } 52 | // }); 53 | }); 54 | } else { 55 | setRegisterMessage('Please make sure your passwords match.'); 56 | } 57 | }; 58 | 59 | const loginuser = (e) => { 60 | e.preventDefault(); 61 | postRequest('userlogin', { 62 | useremail: lmail, 63 | password: pass, 64 | }).then((response) => { 65 | if (response.data.message) { 66 | setLoginMessage(response.data.message); 67 | } else { 68 | setuserid(response.data[0].userid); 69 | 70 | setloginstatus(false); 71 | } 72 | }); 73 | }; 74 | 75 | const [modalIsOpen, setModalisOpen] = useState(false); 76 | const [confirmPasswordVisible, setConfirmPasswordVisible] = useState(false); 77 | const [passwordVisible, setPassswordVisible] = useState(false); 78 | 79 | function togglePassword() { 80 | setPassswordVisible(!passwordVisible); 81 | } 82 | 83 | function toggleConfirmPassword() { 84 | setConfirmPasswordVisible(!confirmPasswordVisible); 85 | } 86 | 87 | return ( 88 |
89 |
90 |

99 | 110 | {' '} 111 | PlanZap 112 |

113 | 114 |

124 | One Place for your notes, goals, movies, personal diary and 125 | more! 126 |

127 | 132 |
133 | 134 |
135 |
136 |
137 | 138 | "A good plan today is better than a perfect plan 139 | tomorrow" 140 | 141 |
142 |
143 |
151 | LOGIN 152 |
153 |
154 | 155 |
156 |
157 |
158 | { 166 | setlmail(event.target.value); 167 | }} 168 | required 169 | /> 170 |
171 |
172 | { 181 | setpass(event.target.value); 182 | // setPasssword(event.target.value); 183 | }} 184 | required 185 | /> 186 | 187 | {/* */} 188 | {/* Write PasswordMeter Code Here */} 189 |
190 |
191 |
{loginMessage}
192 | 195 | 196 |
197 | Visiting for the first time? 198 |
199 |
200 | 206 |
207 |
208 | 209 | setModalisOpen(false)} 213 | style={{ 214 | overlay: { 215 | backgroundColor: 'rgba(0, 0, 0, 0.8)', 216 | }, 217 | 218 | content: { 219 | position: 'absolute', 220 | height: '90vh', 221 | borderRadius: '20px 20px 20px 20px', 222 | 223 | outline: 'none', 224 | padding: '0px', 225 | }, 226 | }} 227 | > 228 |
229 |
230 |
231 |
239 | REGISTER 240 |
241 |
242 | 243 |
244 |
248 | { 257 | setuseremail(event.target.value); 258 | }} 259 | required 260 | /> 261 |
262 |
263 |
264 | { 277 | setPassword(event.target.value); 278 | }} 279 | required 280 | /> 281 |
285 | {!passwordVisible ? ( 286 | 287 | ) : ( 288 | 289 | )} 290 |
291 |
292 | 293 |
294 |
295 | { 307 | setConfirmPassword( 308 | event.target.value, 309 | ); 310 | setPasssword( 311 | event.target.value, 312 | ); 313 | }} 314 | required 315 | /> 316 |
320 | {!confirmPasswordVisible ? ( 321 | 322 | ) : ( 323 | 324 | )} 325 |
326 |
327 | 328 |
329 | 330 |
331 | 332 |
333 | {registerMessage} 334 | {} 335 |
336 | 339 | 340 |
341 |
342 |
343 | 344 |
345 |
346 |
347 | ); 348 | }; 349 | 350 | export default Login; 351 | -------------------------------------------------------------------------------- /Frontend/src/modalBox.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import PropTypes from "prop-types"; 3 | import Button from "@mui/material/Button"; 4 | import List from "@mui/material/List"; 5 | import ListItem from "@mui/material/ListItem"; 6 | import ListItemText from "@mui/material/ListItemText"; 7 | import DialogTitle from "@mui/material/DialogTitle"; 8 | import Dialog from "@mui/material/Dialog"; 9 | import Axios from "axios"; 10 | 11 | function SimpleDialog(props) { 12 | const { onClose, selectedValue, open, emails } = props; 13 | 14 | const handleClose = () => { 15 | onClose(selectedValue); 16 | }; 17 | 18 | const handleListItemClick = (value) => { 19 | onClose(value); 20 | }; 21 | console.log(emails); 22 | return ( 23 | 24 | Select Movie 25 | 26 | {emails 27 | ? emails.map((email) => ( 28 | handleListItemClick(email.imdb_id)} 31 | key={email.imdb_id} 32 | > 33 | 34 | 35 | )) 36 | : null} 37 | 38 | 39 | ); 40 | } 41 | 42 | SimpleDialog.propTypes = { 43 | onClose: PropTypes.func.isRequired, 44 | open: PropTypes.bool.isRequired, 45 | selectedValue: PropTypes.string.isRequired, 46 | emails: PropTypes.array, 47 | }; 48 | 49 | export default function SimpleDialogDemo({ title, setIMDB, setDescription }) { 50 | const [emails, setEmails] = React.useState(undefined); 51 | const [open, setOpen] = React.useState(false); 52 | const [selectedValue, setSelectedValue] = React.useState(""); 53 | // React.useEffect(() => { 54 | // if (typeof emails !== undefined) { 55 | // setEmails(sendRequest(title).results); 56 | // } 57 | // }, [title, emails]); 58 | 59 | const handleClickOpen = async () => { 60 | var options = { 61 | method: "GET", 62 | url: `https://data-imdb1.p.rapidapi.com/movie/imdb_id/byTitle/${title}/`, 63 | headers: { 64 | "x-rapidapi-host": "data-imdb1.p.rapidapi.com", 65 | "x-rapidapi-key": process.env.REACT_APP_PUBLIC_IMDB_API_KEY, 66 | }, 67 | }; 68 | 69 | // var data; 70 | const data = await Axios.request(options) 71 | .then((res) => { 72 | return res.data; 73 | }) 74 | .catch((e) => e); 75 | setEmails(data.results); 76 | setOpen(true); 77 | }; 78 | 79 | const handleClose = async (value) => { 80 | setOpen(false); 81 | setSelectedValue(value); 82 | var options = { 83 | method: "GET", 84 | url: `https://data-imdb1.p.rapidapi.com/movie/id/${value}/`, 85 | headers: { 86 | "x-rapidapi-host": "data-imdb1.p.rapidapi.com", 87 | "x-rapidapi-key": "4d9a5d0385msh520a8009f617595p1ac0c4jsn66f1251519a3", 88 | }, 89 | }; 90 | 91 | const response = await Axios.request(options) 92 | .then((res) => { 93 | return res.data; 94 | }) 95 | .catch((e) => e); 96 | const details = response.results; 97 | setIMDB(details.rating); 98 | setDescription(details.description); 99 | }; 100 | 101 | return ( 102 |
103 | {/* 104 | Selected: {selectedValue} 105 | 106 |
*/} 107 | 108 | 114 |
115 | ); 116 | } 117 | -------------------------------------------------------------------------------- /Frontend/src/movies.jsx: -------------------------------------------------------------------------------- 1 | import DeleteIcon from '@mui/icons-material/Delete'; 2 | import EditIcon from '@mui/icons-material/Edit'; 3 | import React, { useContext, useEffect, useState } from 'react'; 4 | import Modal from 'react-modal'; 5 | import { deleteRequest, postRequest, putRequest } from './axiosClient'; 6 | import { usercontext } from './Context/usercontext'; 7 | import './CSSComponents/delete.css'; 8 | import './CSSComponents/movies.css'; 9 | import SimpleDialogDemo from './modalBox'; 10 | 11 | Modal.setAppElement('#root'); 12 | 13 | const Movies = () => { 14 | const [movie_name, setmoviename] = useState(''); 15 | const [movie_rating, setmovierating] = useState(0); 16 | const [movie_desc, setmoviedesc] = useState(''); 17 | const [movielist, setmovielist] = useState([]); 18 | const [newname, setnewname] = useState(0); 19 | const [newdesc, setnewdesc] = useState(0); 20 | const [tempname, settempname] = useState(''); 21 | const [tempdesc, settempdesc] = useState(''); 22 | const [isOpen, setIsOpen] = useState(false); 23 | //const [defaulttext, setdefaulttext] = useState(""); 24 | const [tempid, settempid] = useState(0); 25 | 26 | const { userid, setuserid } = useContext(usercontext); 27 | const [isPopup, setPopup] = useState(false); 28 | const [isRatingAsc, setIsRatingAsc] = useState(null); 29 | const moviesListOrder = isRatingAsc 30 | ? movielist.sort((a, b) => (a.movie_rating < b.movie_rating ? 1 : -1)) 31 | : movielist.sort((a, b) => (a.movie_rating > b.movie_rating ? 1 : -1)); 32 | 33 | function toggleModal() { 34 | setIsOpen(!isOpen); 35 | } 36 | 37 | const updatemovie = () => { 38 | console.log(tempid); 39 | putRequest('updatedesc', { 40 | id: tempid, 41 | movie_name: newname, 42 | movie_desc: newdesc, 43 | }).then((response) => { 44 | postRequest('getdata', { 45 | userid: userid, 46 | }).then((response) => { 47 | setmovielist(response.data); 48 | }); 49 | 50 | console.log('updated'); 51 | }); 52 | }; 53 | 54 | const addmovie = () => { 55 | if (!movie_desc || !movie_name || !movie_rating) { 56 | alert('Enter all the fields'); 57 | return; 58 | } 59 | const data = postRequest('create', { 60 | movie_name: movie_name, 61 | movie_rating: movie_rating, 62 | movie_desc: movie_desc, 63 | userid: userid, 64 | }).then(() => { 65 | postRequest('getdata', { 66 | userid: userid, 67 | }).then((response) => { 68 | setmovielist(response.data); 69 | }); 70 | console.log('success'); 71 | }); 72 | if (data) { 73 | setmoviedesc(''); 74 | setmoviename(''); 75 | setmovierating(''); 76 | } 77 | }; 78 | 79 | console.log(setuserid); //This is for removing warning only 80 | useEffect(() => { 81 | postRequest('getdata', { 82 | userid: userid, 83 | }).then((response) => { 84 | setmovielist(response.data); 85 | }); 86 | }, [userid]); 87 | 88 | const deletemovie = (id) => { 89 | deleteRequest(`deletemovie/${id}`).then((response) => { 90 | setmovielist( 91 | movielist.filter((val) => { 92 | return val.id !== id; 93 | }), 94 | ); 95 | }); 96 | }; 97 | 98 | return ( 99 |
100 | 123 |
124 | 127 |
128 | { 137 | setnewname(event.target.value); 138 | }} 139 | /> 140 |
141 |
142 | 145 |
146 | 158 |
159 |
160 | 169 |
170 | 171 | 172 |
173 |
Title
174 |
175 | IMDb 176 |
179 | isRatingAsc 180 | ? setIsRatingAsc(false) 181 | : setIsRatingAsc(true) 182 | } 183 | title='Sort by Rating' 184 | > 185 | 195 | 200 | 201 |
202 |
203 |
Description
204 |
205 | 206 |
207 | {moviesListOrder.map((val, key) => { 208 | return ( 209 |
210 |
211 |

212 | 223 | {val.movie_rating} 224 |

225 |
226 |

{val.movie_desc}

227 |
228 | { 235 | settempname(val.movie_name); 236 | settempdesc(val.movie_desc); 237 | setnewname(val.movie_name); 238 | setnewdesc(val.movie_desc); 239 | settempid(val.id); 240 | toggleModal(); 241 | }} 242 | /> 243 | { 250 | setPopup(true); 251 | }} 252 | /> 253 |
254 |
255 | 256 | { 259 | setPopup(false); 260 | }} 261 | style={{ 262 | overlay: { 263 | backgroundColor: 'rgba(0, 0, 0, 0.75)', 264 | }, 265 | content: { 266 | width: '30vw', 267 | height: '30vh', 268 | margin: 'auto', 269 | padding: '1%', 270 | borderRadius: '7px', 271 | backgroundColor: 'white', 272 | display: 'flex', 273 | flexDirection: 'column', 274 | alignItems: 'center', 275 | justifyContent: 'space-around', 276 | }, 277 | }} 278 | centered 279 | > 280 |

281 | Do you want to delete the movie? 282 |

283 |
284 | 294 | 295 | 303 |
304 | 305 |
306 | ); 307 | })} 308 |
309 | 310 |
311 |
Enter the Movie Details here
312 |
313 |
314 | 315 |
316 |
317 | { 326 | setmoviename(event.target.value); 327 | }} 328 | /> 329 | {/* */} 332 | 337 | {/*
*/} 338 | 339 |
340 | 341 |
342 |
343 | { 352 | setmovierating(event.target.value); 353 | }} 354 | /> 355 |
356 |
357 | 358 |
359 | 374 |
375 | 381 |
382 |
383 |
384 | 385 |
386 |
387 | ); 388 | }; 389 | 390 | export default Movies; 391 | -------------------------------------------------------------------------------- /Frontend/src/pgraphs.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./CSSComponents/App.css"; 3 | 4 | const Pgraph = () => { 5 | return ( 6 |
7 |

This is the Performance Page

8 |
9 | ); 10 | }; 11 | 12 | export default Pgraph; 13 | -------------------------------------------------------------------------------- /Frontend/src/profpage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./CSSComponents/App.css"; 3 | 4 | const Profile = () => { 5 | return ( 6 |
7 |

This is the profile page

8 |
9 | ); 10 | }; 11 | 12 | export default Profile; 13 | -------------------------------------------------------------------------------- /Frontend/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = (onPerfEntry) => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /Frontend/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import "@testing-library/jest-dom"; 6 | -------------------------------------------------------------------------------- /Frontend/src/sidebar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { 3 | ProSidebar, 4 | Menu, 5 | MenuItem, 6 | SidebarHeader, 7 | SidebarFooter, 8 | SidebarContent, 9 | } from "react-pro-sidebar"; 10 | -------------------------------------------------------------------------------- /Frontend/src/window.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import App from "./App"; 3 | import image from "./Context/—Pngtree—mobile frame png image and_6631525.png"; 4 | import arrow from "./Context/curved_arrow.png"; 5 | import "./CSSComponents/window.css"; 6 | 7 | function getWindowSize() { 8 | const { innerWidth: width, innerHeight: height } = window; 9 | return { 10 | width, 11 | height, 12 | }; 13 | } 14 | 15 | function useWindowSize() { 16 | const [windowSize, setWindowSize] = useState(getWindowSize()); 17 | 18 | useEffect(() => { 19 | function handleResize() { 20 | setWindowSize(getWindowSize()); 21 | } 22 | window.addEventListener("resize", handleResize); 23 | return () => window.removeEventListener("resize", handleResize()); 24 | }, []); 25 | 26 | return windowSize; 27 | } 28 | 29 | function Component() { 30 | const { height, width } = useWindowSize(); 31 | console.log(height); //This is for removing warning only 32 | if (width > 600) { 33 | return ; 34 | } 35 | return ( 36 |
37 | 38 | 39 |

Turn Your Device

40 |

Webiste is only available in Landscape mode

41 |
42 | ); 43 | } 44 | 45 | export default Component; 46 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Saraswat Majumder 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

5 |

📓 PlanZap 📓

6 | PlanZap logo 7 |
8 |

9 |
10 | 11 | Issues 12 | 13 | 14 | Issues 15 | 16 | 17 | Issues 18 | 19 | 20 | GitHub pull requests 21 | 22 |

23 | View Demo 24 | · 25 | Report Bug 26 | · 27 | Request Feature 28 |

29 |


30 | 31 | ## 🌟 Index 32 | 33 | - About the Project 34 | - Built With 35 | - Structure 36 | - Live Site 37 | - Getting Started 38 | - Prerequisites 39 | - Installation and Setup 40 | - Contributing 41 | - Roadmap 42 | - Things that can be improved 43 | - Code of Conduct 44 | - How to resolve merge conflicts 45 | - Contributing using Github Desktop 46 | - Open Source Participation 47 | - Contributors 48 | - Project Admin 49 | 50 |
51 |
52 | 53 | ## 🌟 About The Project 54 | 55 | A productivity cum utility based open source application, where users can keep an eye on their tasks update their progress , maintain a watchlist for movies, books , personal diary as well as notes. 56 | 57 |
58 |
59 | 60 | ## 🌟 Built With 61 | 62 | - HTML 63 | - CSS 64 | - React 65 | - Material UI 66 | - REST APIs 67 | 68 |
69 |
70 | 71 | ## 🌟 Structure 72 | 73 | - A side navbar with the fixed position, that render everytime a new section is clicked, in the area beside it- refered to as "routearea" in the app 74 | - All CSS of all files is present in the CSS components file 75 | - `useContext` has been used to get access to userid , login status etc. 76 | 77 |
78 |
79 | 80 | ### Live site 81 | 82 | **_Have a look here on the live site._** 83 | 84 |
85 |
86 | 87 | ## 🌟 Getting Started 88 | 89 | To get a local copy up and running follow these simple steps. 90 | 91 |
92 |
93 | 94 | ### Prerequisites 95 | 96 | - You need to install [Node js](https://nodejs.org/en/) to successfully run this project on your local machine. 97 | 98 | 99 |
100 |
101 | 102 | ## 🌟 Installation and Setup 103 | 104 | **1.** Navigate to the project directory 105 | 106 | ```sh 107 | cd PlanZap 108 | ``` 109 | 110 | **2.** In the project directory, navigate to "Backend" directory 111 | 112 | ```sh 113 | cd Backend 114 | ``` 115 | 116 | **3.** In the Backend directory, install the packages using 117 | 118 | ```sh 119 | npm install 120 | ``` 121 | 122 | **4.** Now move out of the Backend directory, to the project directory using 123 | 124 | ``` 125 | cd .. 126 | ``` 127 | 128 | **5.** In the project directory, navigate to "Frontend" directory 129 | 130 | ```sh 131 | cd Frontend 132 | ``` 133 | 134 | **6.** In the Frontend directory, install the packages using 135 | 136 | ```sh 137 | npm install 138 | ``` 139 | 140 | **7.** Once all the packages are installed, run the app on your local server using 141 | 142 | ```sh 143 | npm start 144 | ``` 145 | 146 | Open [http://localhost:3000](http://localhost:3000) or [http://localhost:3001](http://localhost:3001) to view it in the browser. 147 | The page will reload if you make edits.\ 148 | You will also see any lint errors in the console. 149 | 150 |
151 |
152 | 153 | ## 🌟 Contributing 154 | 155 | Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. 156 | 157 | **1.** To contribute to this project you first need to fork this repository 158 | Fork [this](https://github.com/SaraswatGit/PlanZap) repository. 159 | To fork it click on the fork 160 | ![image](https://user-images.githubusercontent.com/75252077/154020163-b87b8d2d-86f2-48ba-8a4a-963cb01a703e.png) 161 | 162 | **2.** Clone your forked copy of the project. 163 | To clone open git bash in your device and type the following command 164 | 165 | ``` 166 | git clone https://github.com//PlanZap.git 167 | ``` 168 | 169 | **3.** Now open git bash in cloned repository folder 170 | 171 | **4.** Add a reference(remote) to the original repository. 172 | 173 | ``` 174 | git remote add upstream https://github.com/SaraswatGit/PlanZap.git 175 | ``` 176 | 177 | **5.** Check the remotes for this repository. 178 | 179 | ``` 180 | git remote -v 181 | ``` 182 | 183 | **6.** Always take a pull from the upstream repository to your master branch to keep it at par with the main project(updated repository). 184 | 185 | ``` 186 | git pull upstream main 187 | ``` 188 | 189 | **7.** Create a new branch. 190 | 191 | ``` 192 | git checkout -b 193 | ``` 194 | 195 | **8.** Perform your desired changes to the code base. 196 | 197 | **9.** Track your changes:heavy_check_mark: . 198 | 199 | ``` 200 | git add . 201 | ``` 202 | 203 | **10.** Commit your changes . 204 | 205 | ``` 206 | git commit -m "Relevant message" 207 | ``` 208 | 209 | **11.** Push the committed changes in your feature branch to your remote repo. 210 | 211 | ``` 212 | git push -u origin 213 | ``` 214 | 215 | **12.** To create a pull request, click on `compare and pull requests`. Please ensure you compare your feature branch to the desired branch of the repository you are supposed to make a PR to. 216 | 217 | **13.** Add appropriate title and description to your pull request explaining your changes and efforts done. 218 | 219 | **14.** Add a screenshot or screen-recording when submitting a PR. 220 | 221 | **15.** Click on `Create Pull Request`. 222 | 223 |
224 |
225 | 226 | ## 🌟 Roadmap 227 | 228 | See the [open issues](https://github.com/SaraswatGit/PlanZap/issues) for a list of proposed features . Feel free to raise new issues. 229 | 230 |
231 |
232 | 233 | ### Things that can be improved 234 | 235 | - On login page confirm password and password don't yet have matching ability 236 | - Improving the UI of the login page 237 | - Implementing responsiveness 238 | - Improving the Modals (that pops up to create new movie entry or new diary entry) 239 | - Improving the User experience of the Personal Diary 240 | 241 |
242 |
243 | 244 | ## 🌟 Code of Conduct 245 | 246 | - Only npm should be used for managing packages. 247 | - Only the libraries with 1000+ downloads per week should be used. 248 | - Spamming issues may lead to banning user from contributing to the project. 249 | - No disrespectful comments towards any gender, sex, caste or nationality will be tolerated. 250 | 251 | 252 |
253 |
254 | 255 | ## 🌟 How to resolve merge conflicts 256 | 257 | - Conflicts generally arise when two people have changed the same lines in a file, or if one developer deleted a file while another developer was modifying it. In these cases, Git cannot automatically determine what is correct. Conflicts only affect the developer conducting the merge, the rest of the team is unaware of the conflict. Git will mark the file as being conflicted and halt the merging process. It is then the developers' responsibility to resolve the conflict. 258 | 259 | - The most direct way to resolve a merge conflict is to edit the conflicted file 260 | - Git commands that can help resolve merge conflicts :- 261 | 262 | 1 .The status command is in frequent use when a working with Git and during a merge it will help identify conflicted files. 263 | 264 | ![image](https://user-images.githubusercontent.com/75252077/154049611-a350ccd5-125e-4730-9620-a83a5619f51e.png) 265 | 2 . Passing the --merge argument to the git log command will produce a log with a list of commits that conflict between the merging branches. 266 | 267 | ![image](https://user-images.githubusercontent.com/75252077/154049747-e7e96be6-2df7-41c8-8118-c659d13b393b.png) 268 | 269 | 3 . diff helps find differences between states of a repository/files. This is useful in predicting and preventing merge conflicts. 270 | 271 | ![image](https://user-images.githubusercontent.com/75252077/154049841-b802abec-0203-4cea-b93c-b9212738c61b.png) 272 | 273 | - If above are not resolving your issue you can checkout this [url](https://www.atlassian.com/git/tutorials/using-branches/merge-conflicts) 274 | 275 |
276 |
277 | 278 | ## 🌟 Contributing using Github Desktop 279 | 280 | Use this method if you have github desktop downloaded. 281 | 282 | **1.** Fork [this](https://github.com/SaraswatGit/PlanZap) repository by clicking on the fork. Forking would create a copy of this repository so you can make changes freely without affecting the original repository. 283 | 284 | ![image](https://user-images.githubusercontent.com/76390773/156126009-a1991e8d-9fa3-4721-8c3a-442c2bf42d6b.png) 285 | 286 | **2.** Open you github desktop, go to file and click on clone repository . 287 | 288 | ![image](https://user-images.githubusercontent.com/76390773/156126417-a871f7d3-3cab-4f79-b3f1-4ae40ac71d2f.png) 289 | 290 | **3.** Choose the forked repository from the options and click on clone. 291 | 292 | ![image](https://user-images.githubusercontent.com/76390773/156126776-f7d065bf-29e4-4aee-ab56-d8d5eeeec027.png) 293 | 294 | **4.** Then click "to contribute on the parent project" option and then continue 295 | 296 | **5.** Make a new branch by Clicking on Current Branch, then click on new branch. 297 | 298 | ![image](https://user-images.githubusercontent.com/76390773/156127373-aafe1680-b650-4ea0-bb82-f36ca4bc59f8.png) 299 | 300 | **6.** Give your branch a new name. 301 | 302 | **7.** Click on "open in visual studio code" option. This would create a new workspace in your vsc. 303 | 304 | ![image](https://user-images.githubusercontent.com/76390773/156127803-ef31c105-6adf-4536-8214-5a1567c1d921.png) 305 | 306 | **8.** Make the changes you want to make and save. For example the one below: 307 | 308 | ![image](https://user-images.githubusercontent.com/76390773/156128151-62f96818-b4d4-4799-8a40-8f314dd05e72.png) 309 | 310 | **9.** Now go back to the github desktop and you will automatically see the changes. 311 | 312 | ![image](https://user-images.githubusercontent.com/76390773/156128305-ad76f340-e17c-41f8-914b-83fcc92c9a2e.png) 313 | 314 | **10.** Add the title of your change and description and commit. 315 | 316 | ![image](https://user-images.githubusercontent.com/76390773/156128520-ca17860e-497b-4951-8a19-881a27fdd9e6.png) 317 | 318 | **11.** Now click on publish branch. 319 | 320 | **12.** Now click on create pull request.This will redirect you to the github website where you can see your changes. Click on "create pull request" . 321 | 322 | ![image](https://user-images.githubusercontent.com/76390773/156129104-3e3764f9-93de-46c4-a33c-8cbb0f8eea83.png) 323 | 324 | **13.** Your work is now done, wait for the creater to merge your changes. Happy contributing! :)) 325 | 326 | ![image](https://user-images.githubusercontent.com/76390773/156129451-2f62604a-593c-4a24-a317-46082c17c197.png) 327 | 328 |
329 |
330 | 331 | ## 🌟 Open Source Participation 332 | 333 | This project is a part of these Open Source Programs 334 | 335 |
336 | 337 | 338 | 341 | 344 | 345 |
339 | 340 | 342 | 343 |
346 | 347 |
348 |
349 | 350 | ## 🌟 Contributors 351 | 352 | Thanks to these wonderful people ✨✨: 353 | 354 | 355 | 356 | 361 | 362 |
357 | 358 | 359 | 360 |
363 | 364 |
365 |
366 | 367 | ## 🌟 Project Admin 368 | 369 |
370 |

371 | 372 |

373 |

374 |    375 |

376 | 377 |

378 | Back to Top^ 379 |

--------------------------------------------------------------------------------