diff --git a/backend/models/UploadModel.js b/backend/models/UploadModel.js
index 9716357a295aa0d40d480df02f6792c721ae90c1..477d38a106a10246ee79f7a9c827eccd619e0d07 100644
--- a/backend/models/UploadModel.js
+++ b/backend/models/UploadModel.js
@@ -5,6 +5,10 @@ const postSchema = new mongoose.Schema({
type:String,
required:true
},
+ recipe:{
+ type:String,
+ required:true
+ },
description:{
type:String,
required:true
@@ -13,6 +17,7 @@ const postSchema = new mongoose.Schema({
type: String,
required: false
}
+
})
const postModel = mongoose.model("Post",postSchema)
diff --git a/frontend/src/components/Post.js b/frontend/src/components/Post.js
index 8ec37d71a20e2739dba4853f76db2227afbe75eb..f0db5f7c129c4ee7d7f38d469c2918f1846dc716 100644
--- a/frontend/src/components/Post.js
+++ b/frontend/src/components/Post.js
@@ -3,12 +3,13 @@ import { Paper } from '@mui/material'
import { useState } from 'react'
import axios from 'axios'
import {AiOutlineCamera} from 'react-icons/ai'
-
+import styles from '../styles/styles.module.css'
const Post = () => {
const [name,setName] = useState("")
const [description,setDescription] = useState("")
+ const [recipe,setRecipe] = useState("")
const [imageData,setImageData] = useState('')
@@ -19,11 +20,13 @@ const Post = () => {
formData.append('name',name)
formData.append('description',description)
+ formData.append('recipe',recipe)
formData.append('photo',imageData)
axios.post("http://localhost:5000/save",
formData
)
+
.then((res) => {
console.log(res.data)
}).catch(err=> console.log(err))
@@ -37,16 +40,22 @@ const Post = () => {
}
return (
- <div className='post-container'>
- <input className='post-input1' value={name} onChange={(e) => setName(e.target.value)} placeholder='name' type='text'/>
- <p>Add a picture here 👉👉:</p>
- <label className='pick-file' htmlFor="file_picker">
+ <div className={styles.post_container}>
+ <h1>Make your drink!</h1>
+ <input className={styles.post_input1} value={name} onChange={(e) => setName(e.target.value)} placeholder='Title of your drink' type='text'/>
+ <textarea className={styles.post_input2} value={recipe} onChange={(e) => setRecipe(e.target.value)} placeholder='Recipe:' type='text'/>
+ <textarea className={styles.post_input2} value={description} onChange={(e) => setDescription(e.target.value)} placeholder='How to make it...' type='text' cols = '40' rows="5"/>
+
+ <div className={styles.addpicture}>
+ <p >Add a picture here 👉👉:</p>
+ <label className={styles.pick_file} htmlFor={styles.file_picker}>
<AiOutlineCamera/>
- <input hidden type='file' name='file_picker' id='file_picker' onChange={(e) => setImageData(e.target.files[0])}/>
+ <input hidden type="file" name={styles.file_picker} id={styles.file_picker} onChange={(e) => setImageData(e.target.files[0])}/>
</label>
+ </div>
+ <button onClick={createPost}>Upload</button>
+
- <input className='post-input2' value={description} onChange={(e) => setDescription(e.target.value)} placeholder='description' type='text'/>
- <button onClick={createPost}>Upload</button>
</div>
)
diff --git a/frontend/src/components/Posts.js b/frontend/src/components/Posts.js
index 4f37486567cb1585ab917dea150e88e4e9920fbe..037dcbda9afedd3220712ff0b6ca9c47154b978c 100644
--- a/frontend/src/components/Posts.js
+++ b/frontend/src/components/Posts.js
@@ -1,5 +1,7 @@
-import React from 'react'
-
+import React,{ useState, useEffect } from 'react'
+import styles from '../styles/styles.module.css'
+import axios from 'axios'
+import Upvote from './Upvote'
const Posts = () => {
const [posts,setPosts] = useState([])
@@ -27,13 +29,17 @@ const Posts = () => {
<div>
<div>{posts.map((post) => {
return(
- <div className={styles.posts_container} key={post._id}>
+ <div className={styles.posts_container} key={post._id}>
+ <div className={styles.post_img_container}>
<img className={styles.img} src={`http://localhost:5000/uploads/${post.photo}`}/>
+ </div>
<div>
<h1>{post.name}</h1>
- <p>{post.description}</p>
+ <p>Recipe: {post.recipe}</p>
+ <p>Descrption: {post.description}</p>
+
</div>
-
+ <Upvote/>
</div>
)
})}</div>
diff --git a/frontend/src/components/Upvote.js b/frontend/src/components/Upvote.js
new file mode 100644
index 0000000000000000000000000000000000000000..757092678dace371f651707f11279ab80a0f8e89
--- /dev/null
+++ b/frontend/src/components/Upvote.js
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import axios from 'axios'
+import styles from '../styles/styles.module.css'
+const Upvote = () => {
+ const [count, setCount] = useState(0);
+
+
+ const increment = () => {
+ setCount(count + 1)
+ }
+
+ const decrement = () => {
+ setCount(count - 1)
+ }
+
+ if (count<0){
+ setCount(0);
+ }
+
+ // const formData = new FormData()
+
+ //formData.append('Upvotes',count);
+
+ //axios.post("http://localhost:5000/save",
+ // formData
+ // )
+ return (
+ <div className = {styles.upvote}>
+ <button className={styles.upvote} onClick={increment}>
+ +
+ </button>
+ <div>{count}</div>
+ <button className={styles.upvote} onClick={decrement}>
+ -
+ </button>
+
+ </div>
+ )
+}
+
+export default Upvote;
\ No newline at end of file
diff --git a/frontend/src/pages/Login.js b/frontend/src/pages/Login.js
index f543bf418ed71d9cf3c7fc72bc62b33334f9db67..c09c3b342d02a99981dee5e41396eae42842d19b 100644
--- a/frontend/src/pages/Login.js
+++ b/frontend/src/pages/Login.js
@@ -1,10 +1,18 @@
import React from 'react'
+import {useState, useRef, useEffect} from 'react'
import styles from '../styles/login.module.css'
import LoginForm from '../components/LoginForm'
+
const Login = () => {
+const userRef = useRef();
+const errRef = useRef();
+ const[password,setPassword] = useState("")
+ const[email,setEmail] = useState("")
+ const [errMsg, setErrMsg] = useState('');
+ const [success, setSuccess] = useState(false);
return (
<div className={styles.parent}>
<div className={styles.left}>
diff --git a/frontend/src/styles/styles.module.css b/frontend/src/styles/styles.module.css
index 60db6e528b044fce8acac3d39807b7040fa6ed68..43bb6cc8be4e2999a2cfc646095d6441fac7fff0 100644
--- a/frontend/src/styles/styles.module.css
+++ b/frontend/src/styles/styles.module.css
@@ -1,10 +1,18 @@
p{
- color:white;
+ color:white;
+
}
input{
font-family: 'Poppins', sans-serif;
+ text-align: start;
+ margin-left:10px;
+}
+textarea{
+ font-family: 'Poppins', sans-serif;
+ text-align: start;
+ margin-left:10px;
}
.Header{
height: 90vh;
@@ -25,11 +33,13 @@ input{
color: rgb(255, 240, 153);
font-size: 350%;
}
+
.pick_file {
color: rgb(67, 1, 128);
font-size: 35px;
- margin:0;
- display: flex;
+ margin:10px;
+
+ display: inline;
justify-content: center;
align-items: center;
@@ -44,7 +54,7 @@ input{
display: flex; /* Add display flex to center image vertically */
align-items: center; /* Center image vertically */
justify-content: center; /* Center image horizontally */
-
+
}
.image_container img {
@@ -54,6 +64,7 @@ object-fit: cover;
}
+
.text_container{
display: flex;
flex-direction: column;
@@ -96,10 +107,11 @@ object-fit: cover;
margin-bottom: 15px;
}
+
.post_container{
min-height: 35vh;
margin: auto;
- width: 50vw;
+ width: 600px;
text-align: center;
display: flex;
flex-direction: row;
@@ -109,46 +121,76 @@ object-fit: cover;
-webkit-backdrop-filter: blur(10px);
border-radius: 10px;
box-shadow: 0 8px 23px 0 rgba(0, 0, 0, 0.2);
+ box-align: center;
+}
+.post_container h1{
+ box-align: center;
+ margin-left: 26%;
}
-
.post_input1{
border: none;
- background-color: rgb(11, 58, 58);
- width: 300px;
+ background-color: rgb(26, 100, 100);
+ width: 500px;
height: 30px;
color: aliceblue;
outline: none;
- margin: 10px;
+ margin-left: 50px;
+ margin-bottom: 10px;
margin-top: 15px;
-
+ border-radius:4px;
}
.post_input2{
border: none;
- background-color: rgb(11, 58, 58);
- width: 1000px;
- height: 200px;
- color: aliceblue;
+ background-color: rgb(26, 100, 100);
+ width: 500px;
+ height: 100px;
+ color: rgb(250, 250, 250);
outline: none;
- margin: 10px;
-
+ margin-left: 50px;
+ margin-bottom: 10px;
+ margin-right: 20px;
+ border-radius:4px;
}
.post_container button{
background: rgb(150, 172, 110);
color: white;
font-weight: bold;
+ font-size: 18px;
border: none;
- width: 100px;
- height: 40px;
- margin-left: 15px;
- margin-bottom: 5px;
+ width: 200px;
+ height: 80px;
+ margin-left: 35%;
+ margin-bottom: 25px;
font-family: 'Poppins', sans-serif;
border-radius: 5px;
+
+
+
+}
+.upvote{
+ background-color: rgb(25, 100, 100);
+ height: 30px;
+ width:30px;
+ box-align: center;
+
+ font-size: 18px;
+ font-family: 'Poppins', sans-serif;
+ border-radius: 5px;
+ border: none;
+ color: white;
+
+}
+.upvote button{
+ background: rgb(150, 172, 110);
+ color: white;
+ margin: auto;
}
.posts_container{
min-height: 35vh;
margin: auto;
margin-top: 30px;
- width: 50vw;
+
+ width: 900px;
text-align: center;
display: flex;
flex-direction: row;
@@ -158,4 +200,37 @@ object-fit: cover;
-webkit-backdrop-filter: blur(10px);
border-radius: 10px;
box-shadow: 0 8px 23px 0 rgba(0, 0, 0, 0.2);
+}
+.post_img_container{
+ width: 300px; /* set width of image container */
+ height: 300px; /* set height of image container */
+ border-radius: 50%; /* make image container circular */
+ overflow: hidden;
+ display: flex; /* Add display flex to center image vertically */
+ align-items: center; /* Center image vertically */
+ justify-content: center; /* Center image horizontally */
+ margin-left: 5%;
+ margin-right: 10%;
+ margin-top:5%;
+ margin-bottom:5%;
+}
+.post_img_container img{
+
+ height: 100%;
+ width: 100%;
+ object-fit: cover;
+}
+
+.addpicture{
+ text-align: center;
+ margin-right: 30px;
+ margin-left:31%;
+ margin-bottom: 30px;
+ height:50px;
+ width:500px;
+ display:flex;
+}
+::placeholder {
+ color:aliceblue;
+ text-align: start;
}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000000000000000000000000000000000000..8e286f4f42154252004cd1523e94f0af18aec1d5
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+ "name": "TDDD27",
+ "lockfileVersion": 2,
+ "requires": true,
+ "packages": {}
+}