Milescoded · Ochiengsteven · May 25, 2023 · May 25, 2023 · May 25, 2023 · May 25, 2023
diff --git a/README.md b/README.md
@@ -1,2 +1,152 @@
-# code_your_feels
-This repository is for sharing code that expresses and manages emotions. This could be an app, website, or tool that uses technology to support mental wellness. Submissions are open to any programming language. The deadline for submissions is May 26, 2023. 
+# 🤖 MOOD TRACKER APP <a name="readme-top"></a>
+
+## 📗 Table of Contents
+
+- [📖 About the Project](#about-project)
+  - [🛠 Built With](#built-with)
+    - [Tech Stack](#tech-stack)
+    - [Key Features](#key-features)
+- [💻 Getting Started](#getting-started)
+  - [Prerequisites](#prerequisites)
+  - [Setup](#setup)
+  - [Install](#install)
+  - [Usage](#usage)
+  - [Deployment](#deployment)
+- [👤 Author](#author)
+- [🔭 Future Features](#future-features)
+- [🤝 Contributing](#contributing)
+- [⭐️ Show your support](#support)
+- [🙏 Acknowledgements](#acknowledgements)
+- [❓ FAQ](#faq)
+
+## 📖 INTRODUCTION <a name="about-project"></a>
+
+**MOOD TRACKER** is a responsive, and optimized web app for suggesting different activities for an individual to practice based on his/her mood.
+
+## 🛠 Built With <a name="built-with"></a>
+
+### Tech Stack <a name="tech-stack"></a>
+
+<details>
+  <summary>Client</summary>
+  <ul>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML5</a></li>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS</a></li>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">JAVASCRIPT</a></li>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">TAILWIND</a></li>
+  </ul>
+</details>
+
+### Key Features <a name="key-features"></a>
+
+- **Responsive Design.**
+- **Single page app.**
+- **Intaractive app.**
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🚀 Live Demo <a target="_blank" name="live-demo"></a>
+
+- You can find the website [here](https://ochiengsteven.github.io/code_your_feels/)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 💻 Getting Started <a name="getting-started"></a>
+
+To get a local copy up and running, follow these steps.
+
+### Prerequisites
+
+In order to run this project you need:
+
+- A web browser to view output e.g [Google Chrome](https://www.google.com/chrome/).
+- An IDE e.g [Visual studio code](https://code.visualstudio.com/).
+- `node` should be installed in your local machine, [node website](https://nodejs.org/en/download/).
+- Install the `npm` package manager use this [to install both node and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
+- [A terminal](https://code.visualstudio.com/docs/terminal/basics).
+
+### Setup
+
+Clone this repository to your desired folder or download the Zip folder:
+
+```
+https://github.com/Ochiengsteven/mental-health-app.git
+```
+
+- Navigate to the location of the folder in your machine:
+
+**``you@your-Pc-name:~$ cd mental-health-app``**
+
+### Install
+
+To install all dependencies, run:
+
+```
+npm install
+```
+
+### Usage
+
+- A video explaining how to use the web app [video](https://www.loom.com/share/12a5c7dd735b4b4a93879ba52d43b29d).
+
+### Deployment <a name="deployment"></a>
+
+You can deploy this project using: GitHub Pages,
+- I used GitHub Pages to deploy my website. (https://ochiengsteven.github.io/)
+- For more information about publishing sources, see "[About GitHub pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#publishing-sources-for-github-pages-sites)".
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 👤 Author <a name="author"></a>
+
+👤 **Ochieng steven**
+
+- GitHub: [@Ochiengsteven](https://github.com/Ochiengsteven)
+- LinkedIn: [steven ochieng](https://www.linkedin.com/in/steven-ochieng-a43125179/)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🔭 Future Features <a name="future-features"></a>
+
+- [ ] **add web responsive app**
+- [ ] **Add more pages.**
+- [ ] **Add animations.**
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🤝 Contributing <a name="contributing"></a>
+
+Contributions, issues, and feature requests are welcome!
+
+Feel free to check the [issues page](../../issues/).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## ⭐️ Show your support <a name="support"></a>
+
+
+Give a ⭐️ if you like this project and how I managed to build it!
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🙏 Acknowledgments <a name="acknowledgements"></a>
+
+- Project for [Power learn project](https://powerlearnproject.org/) Mental Health Awareness.
+- Thanks to the Power learn project team for the great support.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## ❓ FAQ <a name="faq"></a>
+
+- **Can I fork and reuse the repository**
+
+  - Yes please, feel free.
+
+- **Can I improve the repository, and my changes will be accepted if they are good?**
+
+  - Yes please, nice ideas are welcome, please.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
diff --git a/app.js b/app.js
@@ -0,0 +1,114 @@
+const moodSelect = document.getElementById('mood');
+const activitySuggestions = document.getElementById('activity-suggestions');
+const suggestions = {
+    happy: [
+        "Spend time in nature: Spending time outdoors can be calming and rejuvenating. Take a hike, go for a bike ride, or simply sit outside and enjoy the fresh air.",
+        "Get creative: Engage in a creative activity, such as painting, writing, or playing music.",
+        "Try some new activity: Take a cooking class, learn a new language, or try a new hobby.",
+        "Relax and unwind: Take a bubble bath, read a book, or watch a movie.",
+    ],
+    sad: [
+        "Listen to your favorite music.",
+        "Practice self-care: Take a warm bath, get a massage, or do something else that makes you feel relaxed and pampered.",
+        "Exercise: Physical activity can help release endorphins, which are natural mood boosters. Go for a walk, run, or do some yoga.",
+        "Connect with others: Reach out to a friend or family member and talk about how you're feeling. Social support can be a powerful tool in improving mood.",
+        "Engage in a hobby: Do something you enjoy, such as painting, playing music, or reading a book.",
+        "Practice mindfulness: Try meditation or deep breathing exercises to help calm your mind and reduce stress.",
+        "Volunteer: Helping others can be a great way to boost your mood and feel a sense of purpose.",
+        "Get outside: Spending time in nature can be calming and rejuvenating. Take a hike, go for a bike ride, or simply sit outside and enjoy the fresh air."
+    ],
+    anxious: [
+        "Practice deep breathing: Take slow, deep breaths in through your nose and out through your mouth. This can help slow down your heart rate and reduce feelings of anxiety.",
+        "Write in a journal: Writing down your thoughts and feelings can help you process them and gain perspective.",
+        "Listen to calming music: Listening to soothing music can help reduce feelings of anxiety and promote relaxation.",
+        "Get organized: Create a to-do list or organize your space to help reduce feelings of overwhelm and promote a sense of control.",
+    ],
+    angry: [
+        "Take a break: If possible, remove yourself from the situation that is causing your anger. Take a walk, go for a drive, or simply step outside for some fresh air.",
+        "Use positive self-talk: Remind yourself that it's okay to feel angry, but that you have the power to control your emotions and respond in a healthy way.",
+        "Talk to someone: Reach out to a friend or family member and talk about how you're feeling. Social support can be a powerful tool in managing anger.",
+        "Writing down your thoughts and feelings can help you process them and gain perspective.",
+    ],
+    stressed: [
+        "Practice deep breathing: Take slow, deep breaths in through your nose and out through your mouth. This can help calm your mind and reduce feelings of stress.",
+        "Connect with others: Reach out to a friend or family member and talk about how you're feeling. Social support can be a powerful tool in reducing stress.",
+    ],
+    tired: [
+        "Take a nap: If possible, take a short nap to help you feel more rested and refreshed.",
+        "Listen to upbeat music: Listening to music with a fast tempo can help boost your energy levels and improve your mood.",
+        "Take a break: If possible, take a break from work or other responsibilities to give yourself time to rest and recharge.",
+    ],
+    excited: [
+        "Take a dance class or join a dance group",
+        "Try a new adventure sport like bungee jumping or skydiving.",
+        "Attend a concert or festival",
+        "Plan a trip or vacation.",
+    ],
+    content: [
+        "Spend time in nature: Spending time outdoors can be calming and rejuvenating. Take a hike, go for a bike ride, or simply sit outside and enjoy the fresh air.",
+        "Get creative: Engage in a creative activity, such as painting, writing, or playing music.",
+        "Volunteer for a cause you care about.",
+        "Spend time with loved ones, like having a picnic or game night",
+    ],
+    other: [
+        "If you're feeling overwhelmed, try making a to-do list or breaking down tasks into smaller, manageable steps.",
+    ],
+};
+
+moodSelect.addEventListener('change', () => {
+  const mood = moodSelect.value;
+  let suggestion = '';
+
+  switch (mood) {
+    case 'happy':
+      suggestion = suggestions.happy;
+      break;
+    case 'sad':
+      suggestion = suggestions.sad;
+      break;
+    case 'anxious':
+      suggestion = suggestions.anxious;
+      break;
+    case 'angry':
+      suggestion = suggestions.angry;
+      break;
+    case 'stressed':
+      suggestion = suggestions.stressed;
+      break;
+    case 'tired':
+      suggestion = suggestions.tired;
+      break;
+    case 'excited':
+      suggestion = suggestions.excited;
+      break;
+    case 'content':
+      suggestion = suggestions.content;
+      break;
+    case 'other':
+      suggestion = suggestions.other;
+      break;
+  }
+console.log(suggestion)
+const suggestionOptions = suggestions[mood];
+
+let suggestionList = '<ul class="list-disc pl-4">';
+
+suggestionOptions.forEach((option) => {
+  suggestionList += `<li class="text-white">${option}</li>`;
+});
+
+suggestionList += '</ul>';
+
+const activitySuggestions = document.getElementById('activity-suggestions');
+activitySuggestions.innerHTML = `<p class="text-gray-700 font-bold mb-2">Activities Suggestion:</p>${suggestionList}`;
+});
+
+const saveButton = document.querySelector('button[type="submit"]');
+saveButton.addEventListener('click', (event) => {
+  event.preventDefault();
+
+  const mood = moodSelect.value;
+
+  localStorage.setItem('mood', mood);
+
+});
diff --git a/fonts/Guisol.otf b/fonts/Guisol.otf
diff --git a/fonts/Guisol.ttf b/fonts/Guisol.ttf
diff --git a/fonts/Guisol.woff b/fonts/Guisol.woff
diff --git a/fonts/Guisol.woff2 b/fonts/Guisol.woff2
diff --git a/fonts/Reikna.ttf b/fonts/Reikna.ttf
diff --git a/fonts/readme.txt b/fonts/readme.txt
@@ -0,0 +1,12 @@
+NOTE: This demo font is FREE for PERSONAL USE ONLY!
+
+By installing or using this font, you are agree to the Product Usage Agreement:
+
+1. This font is ONLY for PERSONAL USE. NO COMMERCIAL USE ALLOWED!
+2. You are requires a license for PROMOTIONAL or COMMERCIAL use. 
+3. CONTACT ME before any Promotional or Commercial Use!
+
+EMAIL SUPPORT: [email protected]
+
+Regards,
+Kulokale Studio
diff --git a/fonts/reikna.zip b/fonts/reikna.zip
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mood Tracker</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://kit.fontawesome.com/ae6d799c5c.js" crossorigin="anonymous"></script>
+  </head>
+  <body>
+    <header class="mx-auto py-4">
+      <div class="container mx-auto px-4">
+        <h1 class="text-8xl font-bold">Mood Tracker</h1>
+      </div>
+    </header>
+    <main class="container mx-auto px-4 py-8">
+      <form>
+        <div class="mb-4">
+          <label class="block text-gray-700 font-bold mb-2" for="mood">
+            How are you feeling today?<i class="fa-solid fa-face-smile"></i>
+          </label>
+          <select class="border border-gray-400 p-2 rounded w-full" id="mood">
+            <option value="">Select mood...</option>
+            <option value="happy">Happy</option>
+            <option value="sad">Sad</option>
+            <option value="anxious">Anxious</option>
+            <option value="angry">Angry</option>
+            <option value="stressed">Stressed</option>
+            <option value="tired">Tired</option>
+            <option value="excited">Excited</option>
+            <option value="content">Content</option>
+            <option value="other">Other</option>
+          </select>
+        </div>
+      </form>
+      <div class="mt-8" id="activity-suggestions"></div>
+    </main>
+    <script src="./app.js"></script>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2732483748309740"
+     crossorigin="anonymous"></script>
+  </body>
+</html>