diff --git a/README.md b/README.md index f5aa547..f21e392 100644 --- 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 + +## 📗 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 + +**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 + +### Tech Stack + +
+ Client + +
+ +### Key Features + +- **Responsive Design.** +- **Single page app.** +- **Intaractive app.** + +

(back to top)

+ +## 🚀 Live Demo + +- You can find the website [here](https://ochiengsteven.github.io/code_your_feels/) + +

(back to top)

+ +## 💻 Getting Started + +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 + +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)". + +

(back to top)

+ +## 👤 Author + +👤 **Ochieng steven** + +- GitHub: [@Ochiengsteven](https://github.com/Ochiengsteven) +- LinkedIn: [steven ochieng](https://www.linkedin.com/in/steven-ochieng-a43125179/) + +

(back to top)

+ +## 🔭 Future Features + +- [ ] **add web responsive app** +- [ ] **Add more pages.** +- [ ] **Add animations.** + +

(back to top)

+ +## 🤝 Contributing + +Contributions, issues, and feature requests are welcome! + +Feel free to check the [issues page](../../issues/). + +

(back to top)

+ +## ⭐️ Show your support + + +Give a ⭐️ if you like this project and how I managed to build it! + +

(back to top)

+ +## 🙏 Acknowledgments + +- Project for [Power learn project](https://powerlearnproject.org/) Mental Health Awareness. +- Thanks to the Power learn project team for the great support. + +

(back to top)

+ +## ❓ FAQ + +- **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. + +

(back to top)

+ + +

(back to top)

diff --git a/app.js b/app.js new file mode 100644 index 0000000..6e4914e --- /dev/null +++ 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 = ''; + +const activitySuggestions = document.getElementById('activity-suggestions'); +activitySuggestions.innerHTML = `

Activities Suggestion:

${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 new file mode 100644 index 0000000..5aecd15 Binary files /dev/null and b/fonts/Guisol.otf differ diff --git a/fonts/Guisol.ttf b/fonts/Guisol.ttf new file mode 100644 index 0000000..169238c Binary files /dev/null and b/fonts/Guisol.ttf differ diff --git a/fonts/Guisol.woff b/fonts/Guisol.woff new file mode 100644 index 0000000..199f06d Binary files /dev/null and b/fonts/Guisol.woff differ diff --git a/fonts/Guisol.woff2 b/fonts/Guisol.woff2 new file mode 100644 index 0000000..17e6ca3 Binary files /dev/null and b/fonts/Guisol.woff2 differ diff --git a/fonts/Reikna.ttf b/fonts/Reikna.ttf new file mode 100644 index 0000000..96fb3e5 Binary files /dev/null and b/fonts/Reikna.ttf differ diff --git a/fonts/readme.txt b/fonts/readme.txt new file mode 100644 index 0000000..e855e41 --- /dev/null +++ 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: kulokalestudio@gmail.com + +Regards, +Kulokale Studio \ No newline at end of file diff --git a/fonts/reikna.zip b/fonts/reikna.zip new file mode 100644 index 0000000..61cae12 Binary files /dev/null and b/fonts/reikna.zip differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..bbad542 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + Mood Tracker + + + + + +
+
+

Mood Tracker

+
+
+
+
+
+ + +
+
+
+
+ + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..c5f8441 --- /dev/null +++ b/style.css @@ -0,0 +1,89 @@ +@font-face { + font-family: 'Reikna'; + src: url('fonts/Reikna.ttf') format('truetype'); + + } + +body{ + background: linear-gradient(to bottom right, #7ee8fa, #eec0c6); + background-size: cover; + background-repeat: no-repeat; + min-height: 100vh; +} +/* Header */ +header { + background:transparent; + color: #191b64; +} + +header h1 { + font-size: 5rem; + font-weight: 500; + font-family: 'Reikna', sans-serif; +} + +/* Form */ +form { + max-width: 600px; + margin: 0 auto; +} + +form label { + font-weight: bold; + margin-bottom: 0.5rem; +} + +form select { + border: 1px solid #cbd5e0; + padding: 0.5; + border-radius: 0.25rem; + width: 100%; + margin-bottom: 1rem; +} + +li { + font-size: 1.3rem; + margin: 1rem; + padding: 1.2rem; + border-radius: 2.5rem; + word-wrap: break-word; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); + list-style: none; + text-align: center; +} + +li:nth-child(3n+1) { + background: #5f7adb; +} + +li:nth-child(3n+2) { + background: #a2b2ee; +} + +li:nth-child(3n+3) { + background: #580ef6; +} + +/* Suggestion List Animation */ +li, code { + opacity: 0; + transform: scale(0.5); + animation: fadeInAndScale 0.5s ease-in-out forwards; +} + +@keyframes fadeInAndScale { + from { + opacity: 0; + transform: scale(0.5); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* Activity Suggestions */ +#activity-suggestions { + max-width: 600px; + margin: 0 auto; +}