From 39102177042e53aa89e7cc6056f46953c0ab2209 Mon Sep 17 00:00:00 2001
From: gabster94 <iofe.gabriella@gmail.com>
Date: Fri, 25 Oct 2024 14:47:02 +0200
Subject: [PATCH 1/9] created a thought component which GETs the data from the
 api and returns the messages as listed

---
 src/App.jsx            | 11 ++++++++++-
 src/utils/Thoughts.jsx | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/Thoughts.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 1091d431..120afdbc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,3 +1,12 @@
+import React from "react"
+import { Thoughts } from "./utils/Thoughts"
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  return (
+    <div>
+      <Thoughts />
+    
+    
+    </div>
+  );
 };
diff --git a/src/utils/Thoughts.jsx b/src/utils/Thoughts.jsx
new file mode 100644
index 00000000..554cc44f
--- /dev/null
+++ b/src/utils/Thoughts.jsx
@@ -0,0 +1,33 @@
+
+import { useState,useEffect } from "react"
+
+export const Thoughts = () => {
+  const [thoughts, setThoughts] = useState([])
+
+  const URL = "https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts"
+
+  const fetchThoughts = async () => {
+    const response = await fetch(URL)
+    const data = await response.json()
+    setThoughts(data)
+    console.log("Thought is", data)
+  }
+
+  useEffect(() => {
+    fetchThoughts()
+  }, []);
+  
+  return (
+    <section>
+      <ul>
+      {thoughts.map((thought, index) => (
+          <li key={index}>{thought.message}</li> // Assuming each thought object has a 'message' field
+        ))}
+      </ul>
+    </section>
+  )
+
+}
+
+
+

From 22a7e434a8eb698adcf9f21fbba20d3554e407f9 Mon Sep 17 00:00:00 2001
From: gabster94 <iofe.gabriella@gmail.com>
Date: Fri, 25 Oct 2024 17:40:11 +0200
Subject: [PATCH 2/9] created 3 components: header, footer and SendThoughts.
 The latter makes a POST-request. Successful

---
 src/App.jsx                            |  8 +++-
 src/components/Footer.jsx              |  8 ++++
 src/components/Header.jsx              |  9 ++++
 src/components/SendThoughts.jsx        | 57 ++++++++++++++++++++++++++
 src/{utils => components}/Thoughts.jsx | 11 +++--
 src/index.css                          |  2 +
 6 files changed, 88 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Footer.jsx
 create mode 100644 src/components/Header.jsx
 create mode 100644 src/components/SendThoughts.jsx
 rename src/{utils => components}/Thoughts.jsx (65%)

diff --git a/src/App.jsx b/src/App.jsx
index 120afdbc..49198d63 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,16 @@
 import React from "react"
-import { Thoughts } from "./utils/Thoughts"
+import { Header } from "./components/Header";
+import { Text } from "./components/SendThoughts";
+import { Thoughts } from "./components/Thoughts"
+import { Footer } from "./components/Footer";
 
 export const App = () => {
   return (
     <div>
+      <Header />
+      <Text />
       <Thoughts />
+      <Footer />
     
     
     </div>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
new file mode 100644
index 00000000..9a923676
--- /dev/null
+++ b/src/components/Footer.jsx
@@ -0,0 +1,8 @@
+export const Footer = () => {
+  return (
+    <>
+      <h3>Thank you for your sparkle</h3>
+      <p>copyright by Gabriella Iofe</p>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 00000000..953ce6df
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,9 @@
+export const Header = () => {
+  return (
+    <>
+      <h1>Happpy Thoughts Bank</h1>
+      <p>Here we share all our happy rhoughts to send some shine to eachother</p>
+    </>
+  )
+
+}
\ No newline at end of file
diff --git a/src/components/SendThoughts.jsx b/src/components/SendThoughts.jsx
new file mode 100644
index 00000000..51c0d448
--- /dev/null
+++ b/src/components/SendThoughts.jsx
@@ -0,0 +1,57 @@
+import { useState } from "react";
+
+export const Text = () => {
+    
+    const [body, setBody] = useState('')
+    const [response, setResponse] = useState(null)
+
+    const handleSubmit = async (event) => {
+        event.preventDefault()
+
+        const URL = "https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts"
+
+        try {
+            const res = await fetch(URL, {
+                method: "POST",
+                headers: {
+                    "content-type": "application/json; charset=utf-8"
+                }, //this is a way to send extra information to our API. Some request an API key as a header or access tokens: 'AccessToken': 'myaccesstoken'
+                body: JSON.stringify({
+                    // title, //write it like this if our name for it is different title: titleText. same for body
+                    message: body
+                    // userID: 1 -optional
+            })
+        })
+
+            const data = await res.json()
+            setResponse(data) //this is optional. it displays the post and shows it to the user in the browser  
+        }   catch (error) {
+            console.log("error:", error)
+        }
+    }
+
+
+
+    return (
+        <section>
+            <h2>Submit a port</h2>
+            <form onSubmit={handleSubmit}>
+                <label>
+                    Body:
+                    <textarea 
+                    value={body}
+                    onChange={(e) => setBody(e.target.value)} />
+                </label>
+                <button type="submit">Submit</button>
+            </form>
+
+            {response && ( //response can be && body or title or titleText. depending on how specified i want to be 
+                <div>
+                    <h2>Response from API</h2>
+                    {/* pre means preformatted and the rest makes it look like a json response in the browser */}
+                    <pre>{JSON.stringify(response, null, 2)}</pre> 
+                </div>
+            )}
+        </section>
+    )
+}
\ No newline at end of file
diff --git a/src/utils/Thoughts.jsx b/src/components/Thoughts.jsx
similarity index 65%
rename from src/utils/Thoughts.jsx
rename to src/components/Thoughts.jsx
index 554cc44f..ed6fafc8 100644
--- a/src/utils/Thoughts.jsx
+++ b/src/components/Thoughts.jsx
@@ -20,14 +20,13 @@ export const Thoughts = () => {
   return (
     <section>
       <ul>
-      {thoughts.map((thought, index) => (
-          <li key={index}>{thought.message}</li> // Assuming each thought object has a 'message' field
-        ))}
+      {thoughts.map((thought) => (
+          <li key={thought._id}>{thought.message}</li> // I tried using both index and thought._id. the second option uses the unique number for each message whereas index creates its own unique numbers.
+        ))};
       </ul>
     </section>
-  )
-
-}
+  );
+};
 
 
 
diff --git a/src/index.css b/src/index.css
index 4558f538..914036f6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,9 +5,11 @@
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 5px;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
+  font-size: 30px;
 }

From f3c038e675f1aeae73bb5857873587a9c5dc186b Mon Sep 17 00:00:00 2001
From: gabster94 <iofe.gabriella@gmail.com>
Date: Sat, 26 Oct 2024 20:29:08 +0200
Subject: [PATCH 3/9] big push: date for post, error handling, message
 limitation, loading for post

---
 package.json                    |   1 +
 src/components/ApiUrl.jsx       |   1 +
 src/components/SendThoughts.jsx | 110 ++++++++++++++++++--------------
 src/components/Thoughts.jsx     |  32 +++++++---
 src/index.css                   |   3 +-
 5 files changed, 88 insertions(+), 59 deletions(-)
 create mode 100644 src/components/ApiUrl.jsx

diff --git a/package.json b/package.json
index 74245b0c..7bef2983 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "date-fns": "^4.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/src/components/ApiUrl.jsx b/src/components/ApiUrl.jsx
new file mode 100644
index 00000000..75246af5
--- /dev/null
+++ b/src/components/ApiUrl.jsx
@@ -0,0 +1 @@
+        export const URL = "https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts"
\ No newline at end of file
diff --git a/src/components/SendThoughts.jsx b/src/components/SendThoughts.jsx
index 51c0d448..a5a84bfc 100644
--- a/src/components/SendThoughts.jsx
+++ b/src/components/SendThoughts.jsx
@@ -1,57 +1,73 @@
 import { useState } from "react";
+import { URL } from "./ApiUrl";
 
 export const Text = () => {
-    
-    const [body, setBody] = useState('')
-    const [response, setResponse] = useState(null)
-
-    const handleSubmit = async (event) => {
-        event.preventDefault()
-
-        const URL = "https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts"
-
-        try {
-            const res = await fetch(URL, {
-                method: "POST",
-                headers: {
-                    "content-type": "application/json; charset=utf-8"
-                }, //this is a way to send extra information to our API. Some request an API key as a header or access tokens: 'AccessToken': 'myaccesstoken'
-                body: JSON.stringify({
-                    // title, //write it like this if our name for it is different title: titleText. same for body
-                    message: body
-                    // userID: 1 -optional
-            })
+  const [body, setBody] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [errorMessage, setErrorMessage] = useState('');
+
+  //This functions POSTs a happy thought to the API
+  const handleSubmit = async (event) => {
+    event.preventDefault()
+    setLoading(true) /* Start loading on submit */
+    setErrorMessage('');
+
+    // Validation: Check if message is between 5 and 140 characters
+    if (body.length < 5 || body.length > 140) {
+      setErrorMessage("Message must be between 5 and 140 characters.");
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const response = await fetch(URL, {
+        method: "POST",
+        headers: {
+          //this is a way to send extra information to our API.
+          "content-type": "application/json; charset=utf-8"
+        }, 
+        body: JSON.stringify({
+          message: body //command to tell API the message (and what i call it in my code "body" should be fetched)
         })
+      });
 
-            const data = await res.json()
-            setResponse(data) //this is optional. it displays the post and shows it to the user in the browser  
-        }   catch (error) {
-            console.log("error:", error)
-        }
+    if (response.ok) {
+      setBody('') //this clears the input field after its been posted
+    } else {
+      const errorData = await response.json();
+      setErrorMessage(errorData.message || "An error occurred. Please try again.");
+      }
+    }  catch (error) {
+      setErrorMessage("Network error. Please try again later.");
+      console.log("error:", error);
+    } finally {
+      setLoading(false) /* Stops the loading */
     }
+  }
 
 
 
-    return (
-        <section>
-            <h2>Submit a port</h2>
-            <form onSubmit={handleSubmit}>
-                <label>
-                    Body:
-                    <textarea 
-                    value={body}
-                    onChange={(e) => setBody(e.target.value)} />
-                </label>
-                <button type="submit">Submit</button>
-            </form>
-
-            {response && ( //response can be && body or title or titleText. depending on how specified i want to be 
-                <div>
-                    <h2>Response from API</h2>
-                    {/* pre means preformatted and the rest makes it look like a json response in the browser */}
-                    <pre>{JSON.stringify(response, null, 2)}</pre> 
-                </div>
-            )}
-        </section>
-    )
+  return (
+    <section>
+      <form onSubmit={handleSubmit}>
+        <label>
+          <h3>What's making you happy right now?</h3>
+          <textarea 
+            value={body}
+            className=""
+            placeholder="Share your happy thought here"
+            onChange={(e) => setBody(e.target.value)} 
+          />
+        </label>
+        {errorMessage && <p className="error-message">{errorMessage}</p>}
+        <button 
+        className="submit-button"
+        type="submit"
+        disabled={loading}
+        >
+        {loading ? "Loading..." : "💖Send Happy Thought💖"}{/* Loading? IfTrue show Loading... IfFalse show Submit ❤️ */}
+        </button>
+      </form>
+    </section>
+  )
 }
\ No newline at end of file
diff --git a/src/components/Thoughts.jsx b/src/components/Thoughts.jsx
index ed6fafc8..9e3048e6 100644
--- a/src/components/Thoughts.jsx
+++ b/src/components/Thoughts.jsx
@@ -1,27 +1,39 @@
 
 import { useState,useEffect } from "react"
+import { URL } from "./ApiUrl";
+import { formatDistance } from 'date-fns';
 
+//A function to fetch and display the message object in a list
 export const Thoughts = () => {
   const [thoughts, setThoughts] = useState([])
 
-  const URL = "https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts"
-
-  const fetchThoughts = async () => {
-    const response = await fetch(URL)
-    const data = await response.json()
-    setThoughts(data)
-    console.log("Thought is", data)
-  }
-
   useEffect(() => {
+    const fetchThoughts = async () => {
+      try {
+        const response = await fetch(URL)
+        const data = await response.json()
+        setThoughts(data)
+        console.log("Thought is", data)
+      } catch (error) {
+        console.log("Error fetching Thoughts:", error)
+      }
+    }
     fetchThoughts()
   }, []);
+
+
   
   return (
     <section>
       <ul>
       {thoughts.map((thought) => (
-          <li key={thought._id}>{thought.message}</li> // I tried using both index and thought._id. the second option uses the unique number for each message whereas index creates its own unique numbers.
+          <li key={thought._id}>
+            <p>{thought.message}</p> 
+            <div>
+              <p>LIKE && NR</p>
+              <p>{formatDistance(new Date(thought.createdAt), Date.now(), { addSuffix: true })}</p> {/*npm install date-fns --save*/}
+            </div>
+          </li> // I tried using both index and thought._id. the second option uses the unique number for each message whereas index creates its own unique numbers.
         ))};
       </ul>
     </section>
diff --git a/src/index.css b/src/index.css
index 914036f6..7892b41e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,11 +5,10 @@
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-size: 5px;
+  /* font-size: 5px; */
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
-  font-size: 30px;
 }

From 91ba452db6cbfc88f29bf4cfc14b2a7f6b76d24a Mon Sep 17 00:00:00 2001
From: gabster94 <iofe.gabriella@gmail.com>
Date: Sat, 26 Oct 2024 21:56:01 +0200
Subject: [PATCH 4/9] I sent the recent thought to API but not yet figured out
 how to return together with all the other thoughts/posts

---
 src/components/SendThoughts.jsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/SendThoughts.jsx b/src/components/SendThoughts.jsx
index a5a84bfc..7fa519fe 100644
--- a/src/components/SendThoughts.jsx
+++ b/src/components/SendThoughts.jsx
@@ -5,7 +5,8 @@ export const Text = () => {
   const [body, setBody] = useState('')
   const [loading, setLoading] = useState(false)
   const [errorMessage, setErrorMessage] = useState('');
-
+  const [post, setPost] = useState([]);
+ 
   //This functions POSTs a happy thought to the API
   const handleSubmit = async (event) => {
     event.preventDefault()
@@ -32,7 +33,10 @@ export const Text = () => {
       });
 
     if (response.ok) {
-      setBody('') //this clears the input field after its been posted
+      const recentPost = await response.json(); //Get the new post
+      setPost((previousPost) => [recentPost, ...previousPost]); // Update the post state
+      setBody(''); //this clears the input field after its been posted
+      
     } else {
       const errorData = await response.json();
       setErrorMessage(errorData.message || "An error occurred. Please try again.");
@@ -65,7 +69,7 @@ export const Text = () => {
         type="submit"
         disabled={loading}
         >
-        {loading ? "Loading..." : "💖Send Happy Thought💖"}{/* Loading? IfTrue show Loading... IfFalse show Submit ❤️ */}
+        {loading ? "Loading..." : "💖Send Happy Thought💖"}{/* Loading? If True show Loading... If False show 💖Send Happy Thought💖*/}
         </button>
       </form>
     </section>

From 19246ab4e69f0d09e6d34f937b9a5c94d0f6dbfe Mon Sep 17 00:00:00 2001
From: gabster94 <iofe.gabriella@gmail.com>
Date: Sun, 27 Oct 2024 13:59:14 +0100
Subject: [PATCH 5/9] added a like button with counts

---
 src/App.jsx                                   |  6 ++--
 src/components/ApiUrl.jsx                     | 11 +++++-
 src/components/Likes.jsx                      | 15 ++++++++
 .../{SendThoughts.jsx => PostThoughts.jsx}    |  8 ++---
 src/components/Thoughts.jsx                   | 35 +++++++++++++++++--
 5 files changed, 64 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Likes.jsx
 rename src/components/{SendThoughts.jsx => PostThoughts.jsx} (86%)

diff --git a/src/App.jsx b/src/App.jsx
index 49198d63..7b613e42 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Header } from "./components/Header";
-import { Text } from "./components/SendThoughts";
+import { PostThoughts } from "./components/PostThoughts";
 import { Thoughts } from "./components/Thoughts"
 import { Footer } from "./components/Footer";
 
@@ -8,11 +8,9 @@ export const App = () => {
   return (
     <div>
       <Header />
-      <Text />
+      <PostThoughts />
       <Thoughts />
       <Footer />
-    
-    
     </div>
   );
 };
diff --git a/src/components/ApiUrl.jsx b/src/components/ApiUrl.jsx
index 75246af5..09017c34 100644
--- a/src/components/ApiUrl.jsx
+++ b/src/components/ApiUrl.jsx
@@ -1 +1,10 @@
-        export const URL = "https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts"
\ No newline at end of file
+        export const URL = "https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts"
+
+        //export const BASE_URL = `https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/`
+        //const individual = `_id`
+
+        //export const LIKE_URL = "${BASE_URL}thoughts/${ID}/like"
+
+        // https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/THOUGHT_ID/like
+
+        // 
\ No newline at end of file
diff --git a/src/components/Likes.jsx b/src/components/Likes.jsx
new file mode 100644
index 00000000..c1984e28
--- /dev/null
+++ b/src/components/Likes.jsx
@@ -0,0 +1,15 @@
+import { URL } from "./ApiUrl";
+
+const addLike = async (postId) => {
+  try {
+    fetch(`${URL}/${postId}/like`, {method: "POST"})
+
+    //Update the state with a like
+    setPosts((prevPosts) =>
+    prevPosts.map((post) =>
+    post._id === postId ? { ...post, hearts: post.hearts + 1 } : post
+    ))
+  } catch (error) {
+    console.error("Error liking th epost is:", error)
+  }
+}
\ No newline at end of file
diff --git a/src/components/SendThoughts.jsx b/src/components/PostThoughts.jsx
similarity index 86%
rename from src/components/SendThoughts.jsx
rename to src/components/PostThoughts.jsx
index 7fa519fe..9b262074 100644
--- a/src/components/SendThoughts.jsx
+++ b/src/components/PostThoughts.jsx
@@ -1,11 +1,11 @@
 import { useState } from "react";
 import { URL } from "./ApiUrl";
 
-export const Text = () => {
+export const PostThoughts = () => {
   const [body, setBody] = useState('')
   const [loading, setLoading] = useState(false)
   const [errorMessage, setErrorMessage] = useState('');
-  const [post, setPost] = useState([]);
+  //const [post, setPost] = useState([]); //need to write something in here in the useState parenteses... and further down in the code in the return
  
   //This functions POSTs a happy thought to the API
   const handleSubmit = async (event) => {
@@ -33,8 +33,8 @@ export const Text = () => {
       });
 
     if (response.ok) {
-      const recentPost = await response.json(); //Get the new post
-      setPost((previousPost) => [recentPost, ...previousPost]); // Update the post state
+      //const recentPost = await response.json(); //Get the new post
+      //setPost((previousPost) => [recentPost, ...previousPost]); // Update the post state
       setBody(''); //this clears the input field after its been posted
       
     } else {
diff --git a/src/components/Thoughts.jsx b/src/components/Thoughts.jsx
index 9e3048e6..d4eb958a 100644
--- a/src/components/Thoughts.jsx
+++ b/src/components/Thoughts.jsx
@@ -22,6 +22,24 @@ export const Thoughts = () => {
   }, []);
 
 
+
+
+
+  const addLike = async (postId) => {
+    try {
+      fetch(`${URL}/${postId}/like`, {method: "POST"})
+  
+      //Update the state with a like
+      setThoughts((prevThoughts) =>
+      prevThoughts.map((thought) =>
+      thought._id === postId ? { ...thought, hearts: thought.hearts + 1 } : thought
+      ))
+    } catch (error) {
+      console.error("Error liking th epost is:", error)
+    }
+  }
+
+
   
   return (
     <section>
@@ -30,8 +48,21 @@ export const Thoughts = () => {
           <li key={thought._id}>
             <p>{thought.message}</p> 
             <div>
-              <p>LIKE && NR</p>
-              <p>{formatDistance(new Date(thought.createdAt), Date.now(), { addSuffix: true })}</p> {/*npm install date-fns --save*/}
+
+              <div className="like-container">
+                <button
+                  aria-label={`Like post with message: ${thought.message}`}
+                  className={`like-button ${thought.hearts === 0 ? 'notLikedClass' : 'likedClass'}`}
+                  onClick={() => addLike(thought._id)}
+                >
+                  <span className="heart-icon" aria-label="Like icon">❤️</span> {/* Target heart icon */}
+                </button>
+                <span className="like-count" aria-label="Number of likes"> x {thought.hearts}</span> {/* Display likes outside the button */}
+              </div>
+
+              <div className="time-container">
+              <p>{formatDistance(new Date(thought.createdAt), Date.now(), { addSuffix: true })}</p> {/*npm install date-fns --save to */}
+              </div>
             </div>
           </li> // I tried using both index and thought._id. the second option uses the unique number for each message whereas index creates its own unique numbers.
         ))};

From 3761d1b7b67f6579f6e973144d4ee0d08971f3b8 Mon Sep 17 00:00:00 2001
From: gabster94 <iofe.gabriella@gmail.com>
Date: Tue, 29 Oct 2024 14:13:41 +0100
Subject: [PATCH 6/9] styling for all components

---
 index.html                                    |  1 +
 src/App.jsx                                   |  8 +--
 src/components/Footer.jsx                     |  8 ---
 src/components/Header.jsx                     |  9 ---
 src/components/Likes.jsx                      | 15 -----
 src/components/footer/Footer.jsx              | 10 +++
 src/components/footer/footer.css              | 19 ++++++
 src/components/header/Header.jsx              | 11 ++++
 src/components/header/header.css              | 20 ++++++
 .../{ => postThoughts}/PostThoughts.jsx       | 23 ++++---
 src/components/postThoughts/postThoughts.css  | 65 +++++++++++++++++++
 src/components/{ => thoughts}/Thoughts.jsx    | 18 +++--
 src/components/thoughts/thoughts.css          | 60 +++++++++++++++++
 src/index.css                                 | 13 ++--
 14 files changed, 219 insertions(+), 61 deletions(-)
 delete mode 100644 src/components/Footer.jsx
 delete mode 100644 src/components/Header.jsx
 delete mode 100644 src/components/Likes.jsx
 create mode 100644 src/components/footer/Footer.jsx
 create mode 100644 src/components/footer/footer.css
 create mode 100644 src/components/header/Header.jsx
 create mode 100644 src/components/header/header.css
 rename src/components/{ => postThoughts}/PostThoughts.jsx (71%)
 create mode 100644 src/components/postThoughts/postThoughts.css
 rename src/components/{ => thoughts}/Thoughts.jsx (84%)
 create mode 100644 src/components/thoughts/thoughts.css

diff --git a/index.html b/index.html
index 21cce4e0..b8c35a19 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
     <title>Happy Thought - Project - Week 7</title>
   </head>
   <body>
diff --git a/src/App.jsx b/src/App.jsx
index 7b613e42..22b1213b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,8 @@
 import React from "react"
-import { Header } from "./components/Header";
-import { PostThoughts } from "./components/PostThoughts";
-import { Thoughts } from "./components/Thoughts"
-import { Footer } from "./components/Footer";
+import { Header } from "./components/header/Header";
+import { PostThoughts } from "./components/postThoughts/PostThoughts";
+import { Thoughts } from "./components/thoughts/Thoughts"
+import { Footer } from "./components/footer/Footer";
 
 export const App = () => {
   return (
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
deleted file mode 100644
index 9a923676..00000000
--- a/src/components/Footer.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export const Footer = () => {
-  return (
-    <>
-      <h3>Thank you for your sparkle</h3>
-      <p>copyright by Gabriella Iofe</p>
-    </>
-  )
-}
\ No newline at end of file
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
deleted file mode 100644
index 953ce6df..00000000
--- a/src/components/Header.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const Header = () => {
-  return (
-    <>
-      <h1>Happpy Thoughts Bank</h1>
-      <p>Here we share all our happy rhoughts to send some shine to eachother</p>
-    </>
-  )
-
-}
\ No newline at end of file
diff --git a/src/components/Likes.jsx b/src/components/Likes.jsx
deleted file mode 100644
index c1984e28..00000000
--- a/src/components/Likes.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { URL } from "./ApiUrl";
-
-const addLike = async (postId) => {
-  try {
-    fetch(`${URL}/${postId}/like`, {method: "POST"})
-
-    //Update the state with a like
-    setPosts((prevPosts) =>
-    prevPosts.map((post) =>
-    post._id === postId ? { ...post, hearts: post.hearts + 1 } : post
-    ))
-  } catch (error) {
-    console.error("Error liking th epost is:", error)
-  }
-}
\ No newline at end of file
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
new file mode 100644
index 00000000..a7ee3f45
--- /dev/null
+++ b/src/components/footer/Footer.jsx
@@ -0,0 +1,10 @@
+import "./footer.css";
+
+export const Footer = () => {
+  return (
+      <div className="footer">
+        <h4>Thank you for your sparkle</h4>
+        <h5>© 2024 Copyright - Developed by Gabriella Iofe</h5>
+      </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css
new file mode 100644
index 00000000..5c5798ed
--- /dev/null
+++ b/src/components/footer/footer.css
@@ -0,0 +1,19 @@
+.footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+h4 {
+    font-family: Courier New, monospace;
+    font-size: 16px;
+    margin-bottom: 5px;
+
+}
+
+h5 {
+    font-family: Courier New, monospace;
+    font-size: 11px;
+    margin-top: auto;
+    margin-bottom: 10px;
+}
\ No newline at end of file
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
new file mode 100644
index 00000000..d58a61f1
--- /dev/null
+++ b/src/components/header/Header.jsx
@@ -0,0 +1,11 @@
+import "./header.css";
+
+export const Header = () => {
+  return (
+    <section className="header">
+      <h1>Happy Thoughts Project</h1>
+      <h2>by Gabriella Iofe</h2>
+    </section>
+  )
+
+}
\ No newline at end of file
diff --git a/src/components/header/header.css b/src/components/header/header.css
new file mode 100644
index 00000000..e0267b31
--- /dev/null
+++ b/src/components/header/header.css
@@ -0,0 +1,20 @@
+.header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+h1 {
+    font-family: Courier New, monospace;
+    font-size: 23px;
+    font-weight: bold;
+    margin-bottom: 5px;
+
+}
+
+h2 {
+    font-family: Courier New, monospace;
+    font-size: 15px;
+    margin-top: auto;
+    margin-bottom: 30px;
+}
\ No newline at end of file
diff --git a/src/components/PostThoughts.jsx b/src/components/postThoughts/PostThoughts.jsx
similarity index 71%
rename from src/components/PostThoughts.jsx
rename to src/components/postThoughts/PostThoughts.jsx
index 9b262074..e5a5ce3e 100644
--- a/src/components/PostThoughts.jsx
+++ b/src/components/postThoughts/PostThoughts.jsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { URL } from "./ApiUrl";
+import { URL } from "../ApiUrl";
+import "./postThoughts.css";
 
 export const PostThoughts = () => {
   const [body, setBody] = useState('')
@@ -27,14 +28,12 @@ export const PostThoughts = () => {
           //this is a way to send extra information to our API.
           "content-type": "application/json; charset=utf-8"
         }, 
-        body: JSON.stringify({
-          message: body //command to tell API the message (and what i call it in my code "body" should be fetched)
-        })
+        body: JSON.stringify({message: body})//command to tell API the message (and what i call it in my code "body" should be fetched)
       });
 
     if (response.ok) {
-      //const recentPost = await response.json(); //Get the new post
-      //setPost((previousPost) => [recentPost, ...previousPost]); // Update the post state
+      const recentBody = await response.json(); //Get the new post
+      setBody((previousBody) => [recentBody, ...previousBody]); // Update the post state
       setBody(''); //this clears the input field after its been posted
       
     } else {
@@ -52,24 +51,24 @@ export const PostThoughts = () => {
 
 
   return (
-    <section>
-      <form onSubmit={handleSubmit}>
+    <section className="post-thoughts-container">
+      <form  className="post-thoughts-form" onSubmit={handleSubmit}>
         <label>
           <h3>What's making you happy right now?</h3>
           <textarea 
+            className="textarea"
             value={body}
-            className=""
-            placeholder="Share your happy thought here"
+            placeholder="Share your happy thought here..."
             onChange={(e) => setBody(e.target.value)} 
           />
         </label>
         {errorMessage && <p className="error-message">{errorMessage}</p>}
         <button 
-        className="submit-button"
+        className="send-button"
         type="submit"
         disabled={loading}
         >
-        {loading ? "Loading..." : "💖Send Happy Thought💖"}{/* Loading? If True show Loading... If False show 💖Send Happy Thought💖*/}
+        {loading ? "Loading..." : "💖 Send Happy Thought 💖"}{/* Loading? If True show Loading... If False show 💖Send Happy Thought💖*/}
         </button>
       </form>
     </section>
diff --git a/src/components/postThoughts/postThoughts.css b/src/components/postThoughts/postThoughts.css
new file mode 100644
index 00000000..f36c5f5a
--- /dev/null
+++ b/src/components/postThoughts/postThoughts.css
@@ -0,0 +1,65 @@
+.post-thoughts-container {
+    background-color: rgb(239, 236, 237);
+    border: solid rgb(209, 208, 209) 2px;
+    padding: 15px;
+    margin: 0px 15px 25px 15px;
+    box-shadow: 6px 6px 0px 0px rgb(0, 0, 0);
+    
+
+}
+
+/* .post-thoughts-form {} */
+
+form {
+    /* display: flex;
+    flex-direction: column;
+    align-items: center; */
+    /* margin: 15px; */
+    /* padding: 15px; */
+    
+}
+
+label {
+    /* display: flex;
+    flex-direction: column;
+    align-items: center; */
+    color: black;
+}
+
+h3 {
+    font-family:"Segoe UI", Arial, sans-serif;
+    font-size: 16px;
+}
+
+.textarea {
+    /* display: block; */
+    background-color: white;
+    height: 50px;
+    width: 100%;
+    margin: 10px 0px 10px 0px;
+    padding: 5px;
+    font-family: Courier New, monospace;
+    font-size: 13px;
+}
+
+.error-message {}
+
+.send-button {
+    /* width: 300px;
+    height: 30px; */
+    /* width: ; */
+    padding: 9px;
+    border-radius: 30px;
+    border: none;
+    background-color: rgb(250, 144, 160);
+    font-size: 13px;
+    font-family: "Segoe UI", Arial, sans-serif;
+}
+
+@media only screen and (min-width: 768px) {
+    .post-thoughts-container {
+        width: 450px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+  }
\ No newline at end of file
diff --git a/src/components/Thoughts.jsx b/src/components/thoughts/Thoughts.jsx
similarity index 84%
rename from src/components/Thoughts.jsx
rename to src/components/thoughts/Thoughts.jsx
index d4eb958a..013c7071 100644
--- a/src/components/Thoughts.jsx
+++ b/src/components/thoughts/Thoughts.jsx
@@ -1,7 +1,8 @@
 
 import { useState,useEffect } from "react"
-import { URL } from "./ApiUrl";
+import { URL } from "../ApiUrl";
 import { formatDistance } from 'date-fns';
+import "./thoughts.css";
 
 //A function to fetch and display the message object in a list
 export const Thoughts = () => {
@@ -43,11 +44,14 @@ export const Thoughts = () => {
   
   return (
     <section>
-      <ul>
+      <ul className="thoughts-list-container">
       {thoughts.map((thought) => (
-          <li key={thought._id}>
-            <p>{thought.message}</p> 
-            <div>
+          <li 
+            className="thought-list-item" 
+            key={thought._id}
+          >
+            <p className="thought-message">{thought.message}</p> 
+            <div className="time-count-container">
 
               <div className="like-container">
                 <button
@@ -55,7 +59,7 @@ export const Thoughts = () => {
                   className={`like-button ${thought.hearts === 0 ? 'notLikedClass' : 'likedClass'}`}
                   onClick={() => addLike(thought._id)}
                 >
-                  <span className="heart-icon" aria-label="Like icon">❤️</span> {/* Target heart icon */}
+                  <span className="heart-icon" aria-label="Like icon">💖</span> {/* Target heart icon */}
                 </button>
                 <span className="like-count" aria-label="Number of likes"> x {thought.hearts}</span> {/* Display likes outside the button */}
               </div>
@@ -65,7 +69,7 @@ export const Thoughts = () => {
               </div>
             </div>
           </li> // I tried using both index and thought._id. the second option uses the unique number for each message whereas index creates its own unique numbers.
-        ))};
+        ))}
       </ul>
     </section>
   );
diff --git a/src/components/thoughts/thoughts.css b/src/components/thoughts/thoughts.css
new file mode 100644
index 00000000..cfa5994f
--- /dev/null
+++ b/src/components/thoughts/thoughts.css
@@ -0,0 +1,60 @@
+
+
+.thoughts-list-container {
+    list-style: none;
+    padding: 0;
+    margin: 0px 15px 0px 15px;
+}
+
+.thought-list-item {
+    border: 1px solid black;
+    margin-bottom: 25px;
+    padding: 15px;
+    box-shadow: 6px 6px 0px 0px rgb(0, 0, 0);
+}
+
+.thought-message {
+    font-family: Courier New, monospace;
+    
+    margin: 0;
+    margin-bottom: 5px;
+    overflow: hidden;
+
+}
+
+.time-count-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+
+}
+
+.like-container {
+
+}
+
+.like-button {
+    border-radius: 20px;
+    padding: 8px 9px 8px 9px;
+    border: none;
+}
+
+.time-count-container {
+    font-family: "Segoe UI", Arial, sans-serif;
+    font-size: 13px;
+}
+
+.time-count-container p {
+    margin: 0;
+    padding-bottom: 8px;
+}
+
+
+
+@media only screen and (min-width: 768px) {
+    .thoughts-list-container {
+        width: 450px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+  }
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 7892b41e..d43f258b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,14 +1,15 @@
 :root {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    sans-serif; */
+  /* -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; */
   /* font-size: 5px; */
+  
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  /* font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace; */
 }

From c9cec52d97cade295b3dc4d900b49c2079a1e0c6 Mon Sep 17 00:00:00 2001
From: gabster94 <iofe.gabriella@gmail.com>
Date: Tue, 29 Oct 2024 14:48:33 +0100
Subject: [PATCH 7/9] cleaning

---
 index.html                                   |  1 -
 src/components/ApiUrl.jsx                    | 11 +---------
 src/components/postThoughts/PostThoughts.jsx |  7 ++++---
 src/components/postThoughts/postThoughts.css | 22 +-------------------
 src/components/thoughts/Thoughts.jsx         | 17 ++++++---------
 src/components/thoughts/thoughts.css         |  4 ----
 src/index.css                                | 14 -------------
 7 files changed, 12 insertions(+), 64 deletions(-)

diff --git a/index.html b/index.html
index b8c35a19..21cce4e0 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
     <title>Happy Thought - Project - Week 7</title>
   </head>
   <body>
diff --git a/src/components/ApiUrl.jsx b/src/components/ApiUrl.jsx
index 09017c34..75246af5 100644
--- a/src/components/ApiUrl.jsx
+++ b/src/components/ApiUrl.jsx
@@ -1,10 +1 @@
-        export const URL = "https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts"
-
-        //export const BASE_URL = `https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/`
-        //const individual = `_id`
-
-        //export const LIKE_URL = "${BASE_URL}thoughts/${ID}/like"
-
-        // https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/THOUGHT_ID/like
-
-        // 
\ No newline at end of file
+        export const URL = "https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts"
\ No newline at end of file
diff --git a/src/components/postThoughts/PostThoughts.jsx b/src/components/postThoughts/PostThoughts.jsx
index e5a5ce3e..2e09b834 100644
--- a/src/components/postThoughts/PostThoughts.jsx
+++ b/src/components/postThoughts/PostThoughts.jsx
@@ -2,11 +2,13 @@ import { useState } from "react";
 import { URL } from "../ApiUrl";
 import "./postThoughts.css";
 
+
+
 export const PostThoughts = () => {
   const [body, setBody] = useState('')
   const [loading, setLoading] = useState(false)
   const [errorMessage, setErrorMessage] = useState('');
-  //const [post, setPost] = useState([]); //need to write something in here in the useState parenteses... and further down in the code in the return
+
  
   //This functions POSTs a happy thought to the API
   const handleSubmit = async (event) => {
@@ -47,8 +49,7 @@ export const PostThoughts = () => {
       setLoading(false) /* Stops the loading */
     }
   }
-
-
+  
 
   return (
     <section className="post-thoughts-container">
diff --git a/src/components/postThoughts/postThoughts.css b/src/components/postThoughts/postThoughts.css
index f36c5f5a..719ea25b 100644
--- a/src/components/postThoughts/postThoughts.css
+++ b/src/components/postThoughts/postThoughts.css
@@ -4,25 +4,9 @@
     padding: 15px;
     margin: 0px 15px 25px 15px;
     box-shadow: 6px 6px 0px 0px rgb(0, 0, 0);
-    
-
-}
-
-/* .post-thoughts-form {} */
-
-form {
-    /* display: flex;
-    flex-direction: column;
-    align-items: center; */
-    /* margin: 15px; */
-    /* padding: 15px; */
-    
 }
 
 label {
-    /* display: flex;
-    flex-direction: column;
-    align-items: center; */
     color: black;
 }
 
@@ -32,7 +16,6 @@ h3 {
 }
 
 .textarea {
-    /* display: block; */
     background-color: white;
     height: 50px;
     width: 100%;
@@ -45,9 +28,6 @@ h3 {
 .error-message {}
 
 .send-button {
-    /* width: 300px;
-    height: 30px; */
-    /* width: ; */
     padding: 9px;
     border-radius: 30px;
     border: none;
@@ -58,7 +38,7 @@ h3 {
 
 @media only screen and (min-width: 768px) {
     .post-thoughts-container {
-        width: 450px;
+        width: 417px;
         margin-left: auto;
         margin-right: auto;
     }
diff --git a/src/components/thoughts/Thoughts.jsx b/src/components/thoughts/Thoughts.jsx
index 013c7071..55f75200 100644
--- a/src/components/thoughts/Thoughts.jsx
+++ b/src/components/thoughts/Thoughts.jsx
@@ -16,16 +16,13 @@ export const Thoughts = () => {
         setThoughts(data)
         console.log("Thought is", data)
       } catch (error) {
-        console.log("Error fetching Thoughts:", error)
+        console.log("Error fetching thoughts is:", error)
       }
     }
     fetchThoughts()
   }, []);
 
 
-
-
-
   const addLike = async (postId) => {
     try {
       fetch(`${URL}/${postId}/like`, {method: "POST"})
@@ -36,7 +33,7 @@ export const Thoughts = () => {
       thought._id === postId ? { ...thought, hearts: thought.hearts + 1 } : thought
       ))
     } catch (error) {
-      console.error("Error liking th epost is:", error)
+      console.error("Error liking the post is:", error)
     }
   }
 
@@ -48,12 +45,11 @@ export const Thoughts = () => {
       {thoughts.map((thought) => (
           <li 
             className="thought-list-item" 
-            key={thought._id}
+            key={thought._id}  // I tried using both index and thought._id. the second option uses the unique number for each message whereas index creates its own unique numbers.
           >
             <p className="thought-message">{thought.message}</p> 
             <div className="time-count-container">
-
-              <div className="like-container">
+              <div>
                 <button
                   aria-label={`Like post with message: ${thought.message}`}
                   className={`like-button ${thought.hearts === 0 ? 'notLikedClass' : 'likedClass'}`}
@@ -61,14 +57,13 @@ export const Thoughts = () => {
                 >
                   <span className="heart-icon" aria-label="Like icon">💖</span> {/* Target heart icon */}
                 </button>
-                <span className="like-count" aria-label="Number of likes"> x {thought.hearts}</span> {/* Display likes outside the button */}
+                <span aria-label="Number of likes"> x {thought.hearts}</span> {/* Display likes outside the button */}
               </div>
-
               <div className="time-container">
               <p>{formatDistance(new Date(thought.createdAt), Date.now(), { addSuffix: true })}</p> {/*npm install date-fns --save to */}
               </div>
             </div>
-          </li> // I tried using both index and thought._id. the second option uses the unique number for each message whereas index creates its own unique numbers.
+          </li>
         ))}
       </ul>
     </section>
diff --git a/src/components/thoughts/thoughts.css b/src/components/thoughts/thoughts.css
index cfa5994f..ddb14f54 100644
--- a/src/components/thoughts/thoughts.css
+++ b/src/components/thoughts/thoughts.css
@@ -15,7 +15,6 @@
 
 .thought-message {
     font-family: Courier New, monospace;
-    
     margin: 0;
     margin-bottom: 5px;
     overflow: hidden;
@@ -29,9 +28,6 @@
 
 }
 
-.like-container {
-
-}
 
 .like-button {
     border-radius: 20px;
diff --git a/src/index.css b/src/index.css
index d43f258b..8b137891 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,15 +1 @@
-:root {
-  margin: 0;
-  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif; */
-  /* -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale; */
-  /* font-size: 5px; */
-  
-}
 
-code {
-  /* font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace; */
-}

From dca0719b36a17e201d872922bc5c38d54b35b46b Mon Sep 17 00:00:00 2001
From: gabster94 <iofe.gabriella@gmail.com>
Date: Tue, 29 Oct 2024 14:53:20 +0100
Subject: [PATCH 8/9] https://gabyshappythoughts.netlify.app/

---
 README.md | 26 +-------------------------
 1 file changed, 1 insertion(+), 25 deletions(-)

diff --git a/README.md b/README.md
index 6fc6d095..4e66599b 100644
--- a/README.md
+++ b/README.md
@@ -1,35 +1,11 @@
-<h1 align="center">
-  <a href="">
-    <img src="/src/assets/happy-thoughts.svg" alt="Project Banner Image">
-  </a>
-</h1>
-
 # Happy thoughts Project
 
 In this week's project, you'll be able to practice your React state skills by fetching and posting data to an API.
 
-## Getting Started with the Project
-
-### Dependency Installation & Startup Development Server
-
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
-
-The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
-
-```bash
-npm i && code . && npm run dev
-```
-
 ### The Problem
 
 Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
 
 ### View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
-
-## Instructions
-
-<a href="instructions.md">
-   See instructions of this project
-  </a>
+https://gabyshappythoughts.netlify.app/

From f5266e11742e90e318d82b911c9a894cd28a46de Mon Sep 17 00:00:00 2001
From: gabster94 <iofe.gabriella@gmail.com>
Date: Tue, 29 Oct 2024 15:04:05 +0100
Subject: [PATCH 9/9] README.md

---
 README.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4e66599b..db496a4f 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,11 @@ In this week's project, you'll be able to practice your React state skills by fe
 
 ### The Problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+I started by created the components I believed I needed. My goal was to have the App.jsx as clean as possible and let the components handle the tasks: GET, POST and the returns. I realised quite late that I couldnt insert the new post into the Thoughts list without merging most of the code into one component. Tried many different options but still haven't managed figuring it out. So with more time I would probably create more, but simpler components or just divide it differently. I would also have liked to reach more of the strechgoals.
+
+I managed quite far with the class material but halfway I got stuck and used ChatGPT, Google and previous students code as my help.
+
+Something I find very challenged is to plan correctly and I feel that I don't know what is right and wrong and doubt my solutions a lot.
 
 ### View it live