Docs/readme

README.md

@@ -1,51 +1,36 @@
-# Self Care Center
-## Overview
-How can I care for myself? One way is with affirmations and mantras!
-Affirmations are thoughts of positive self-empowerment, meant to assert your self-worth.
-Mantras are repetive phrases that are repeated again and again during mindfulness practices. Your challenge is to build an app that helps users remind themselves of their inherent value!
-
-This Solo Challenge gives students and instructors the opportunity to get a pulse on where you are with the foundational concepts of Module 1 curriculum. Students should use this as an opportunity to challenge themselves and work completely independently. Google can (and probably should!) be used, but any other code base should not be referenced. Instructors will be able to use your work, both completion of functionality and code quality, to determine where you stand and if you are behind for this point in the module, provide supports to intervene.
-
-The spec for this project can be found [here](https://frontend.turing.io/projects/module-1/self-care-center.html). 
-
-## Learning Goals
-
-- Gain experience building an application that utilizes HTML, CSS and JavaScript
-- Write HTML and CSS to match a provided comp
-- Understand how to listen to and respond to user events
-- Individualize your programming skill set
-
-## Setup
-
-- Fork this project to your own Github account
-- Clone the repository to your local machine
-- `cd` into the project
-- Read this README thoroughly, then begin working!
-
-______________________________________________________  
-# README Template  
-Before turning this project in, erase this line and everything above it and fill in the info below.  
-______________________________________________________  
-
-# Self-Care Center 
+ # Self-Care Center 
 
 ### Abstract:
 [//]: <> (Briefly describe what you built and its features. What problem is the app solving? How does this application solve that problem?)
+A website was built to provide users with motivational messages to help with ones mental health. Everyone has different needs, for some, a little inspirational message can be all they need to make their day better. The user can cycle through two different motivational messages, mantras and affirmations. The message will be displayed on the screen where the user then has the option to favourite that message and any other they want. The favourited messages can be viewed on their own page allowing the user to refer to the messages throughout the day when they need a little inspiration boost. The user can also delete some favourited messages so that they display only the ones which provide them what they need for the day. If the user refreshes the page their favourite results will persist on the page. 
 
 ### Installation Instructions:
 [//]: <> (What steps does a person have to take to get your app cloned down and running?)
+1. fork this repository https://github.com/jalbe0076/m1-self-care-center
+2. Clone down your new, forked repo using the generated SSH link in the terminal
+3. cd into the repository
+4. Open it in your text editor
+5. View app in the browser by running open index.html in your terminal
 
 ### Preview of App:
 [//]: <> (Provide ONE gif or screenshot of your application - choose the "coolest" piece of functionality to show off.)
+![SelfCare SR ](https://user-images.githubusercontent.com/123283073/230784493-d7f52d3f-b318-4332-b029-2b2a35b70081.gif)
 
 ### Context:
 [//]: <> (Give some context for the project here. How long did you have to work on it? How far into the Turing program are you?)
+The project was assigned on 2023.04.04, all selected features was completed by 2023.04.07, the project worked and responded as intended. The CSS was refactored on 2023.04.08 to use the CSS flexbox layout, a concept that was learned after the styling was complete. The project was issued in the 3rd week of Turing's Mod1. 
 
 ### Contributors:
 [//]: <> (Who worked on this application? Link to their GitHubs.)
+[Jason Alberto](https://github.com/jalbe0076) worked on this application. 
 
 ### Learning Goals:
 [//]: <> (What were the learning goals of this project? What tech did you work with?)
+The learning goals of the project was to gain experience using HTML, CSS and JavaScript.  Some files were provided with the links already written in the HTML skeleton. The styling specifications were commented out in the CSS sheet. The HTML and CSS were written in a way to have JavaScript manipulate it through the DOM to display and respond to user events. VS code was the text editor used to write the HTML, CSS and JavaScript. GitHub was used to store as a hosting platform, although this project was solo, commits were pushed to branches to mimic best practices. Merges into main were completed with clean code, meaning no broken or dead code was merged into the main branch. A feature to have the data persist on a page load was added, localStorage method was used to have the data persist.  
 
 ### Wins + Challenges:
 [//]: <> (What are 2-3 wins you have from this project? What were some challenges you faced - and how did you get over them?)
+Win#1: Having a better understanding of how `event.target.parentNode` operates and finding out about a concept called bubbling. 
+Win#2: Playing around with different CSS properties really helped better understand how elements can be manipulated on the page.
+The biggest challenge on the project was using the `innerHTML` method to manipulate the HTML on the DOM. Using this method was removing the event listeners that were written. The user event would work as intended the first time, but because `innerHTML` was being used to display the HTML, the event listeners would stop working. This was a frustrating challenge to overcome, I originally did not know what to google because I was not aware that `innerHTML` removed event listeners. Once my searches did not help with a solution I tried collaborating with peers, the first few troubleshooting sessions did not provide any information, but after about the 3rd pairing, I was sent an article titled [DOM Manipulation and the Dangers of ‘innerHTML](https://betterprogramming.pub/dom-manipulation-the-dangers-of-innerhtml-602f4119d905). This article lists some issues with using `innerHTML` and one of them was that it removes event listeners. With this I was able to refine my search and come up with a solution. 
+As an added challenge and for self development, the feature to have the page persist on a page load as local storage was researched and added before turning in the project. This additional feature was added in before the deadline to turn in the project. 

data.js

@@ -0,0 +1,33 @@
+var affirmations = [
+    'I forgive myself and set myself free.',
+    'I believe I can be all that I want to be.',
+    'I am in the process of becoming the best version of myself.',
+    'I have the freedom & power to create the life I desire.',
+    'I choose to be kind to myself and love myself unconditionally.',
+    'My possibilities are endless.',
+    'I am worthy of my dreams.',
+    'I am enough.',
+    'I deserve to be healthy and feel good.',
+    'I am full of energy and vitality and my mind is calm and peaceful.',
+    'Every day I am getting healthier and stronger.',
+    'I honor my body by trusting the signals that it sends me.',
+    'I manifest perfect health by making smart choices.'
+];
+
+var mantras = [
+    'Breathing in, I send myself love. Breathing out, I send love to someone else who needs it.',
+    'Don’t let yesterday take up too much of today.',
+    'Every day is a second chance.',
+    'Tell the truth and love everyone.',
+    'I am free from sadness.',
+    'I am enough.',
+    'In the beginning it is you, in the middle it is you and in the end it is you.',
+    'I love myself.',
+    'I am present now.',
+    'Inhale the future, exhale the past.',
+    'This too shall pass.',
+    'Yesterday is not today.',
+    'The only constant is change.',
+    'Onward and upward.',
+    'I am the sky, the rest is weather.'
+];

index.html

@@ -5,7 +5,36 @@
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap" rel="stylesheet">
   </head>
   <body>
-
+    <header>
+      <h1>✨Self Care Center✨</h1>
+
+      <h3 class="sub-title">Which type of message?</h3>
+      <button class="hidden top view-favourite">View Favourites</button>
+      <button class="home hidden top">Home</button>
+    </header>
+    <div class="message-section">
+      <section class="mantra-select">
+        <div class="radio-container">
+          <div>
+            <input class="affirmation-message" type="radio" name="message">
+            <label>affirmation</label>
+          </div>
+          <div>
+            <input class="mantra-message" type="radio" name="message">
+            <label>mantra</label>
+          </div>
+        </div>
+        <button class="create-message">Receive Message</button>
+      </section>
+      <div class="hidden favourite-box"></div>
+      <div class="receive-messages">
+        <section class="display-message-container">
+          <div class="display-message"><img class="img-buddha" src="./assets/meditate.svg" alt="enlightened buddha"><p class="hidden message"></p></div>
+          <button class="hidden save-message">Favourite</button>
+        </section>
+      </div>
+    </div>
     <script type="text/javascript" src="main.js"></script>
+    <script type="text/javascript" src="data.js"></script>
   </body>
-</html>
+</html>    

main.js

@@ -0,0 +1,160 @@
+var affirmationRadio = document.querySelector('.affirmation-message');
+var mantraRadio = document.querySelector('.mantra-message');
+var createMessageButton = document.querySelector('.create-message');
+var favouriteMessageButton = document.querySelector('.save-message');
+var viewFavouriteButton = document.querySelector('.view-favourite');
+var viewHomeButton = document.querySelector('.home');
+var mantraSelectBox = document.querySelector('.mantra-select');
+var messageContainer = document.querySelector('.receive-messages');
+var subTitle = document.querySelector('.sub-title');
+var favouriteBox = document.querySelector('.favourite-box');
+var messageHtmlParagraph = document.querySelector('.message');
+var imgBuddha = document.querySelector('.img-buddha');
+var displayMessage = document.querySelector('.display-message-container')
+var createMessageBox = document.querySelector('.display-message');
+
+var currentMessage;
+var localMessage;
+
+if (Object.keys(localStorage).length) {
+    viewFavouriteButton.classList.remove('hidden');
+}
+
+// EVENT LISTENERS
+
+createMessageButton.addEventListener('click', selectMessage);
+
+favouriteMessageButton.addEventListener('click', function() {
+    favouriteMessage();
+    if (Object.keys(localStorage).length) {
+        viewFavouriteButton.classList.remove('hidden');
+    }
+});
+
+viewFavouriteButton.addEventListener('click', function() {
+    affirmationRadio.checked = false;
+    mantraRadio.checked = false
+    toggleHiddenButton(mantraSelectBox);
+    toggleHiddenButton(viewHomeButton);
+    toggleHiddenButton(viewFavouriteButton);
+    toggleHiddenButton(messageContainer);
+    toggleHiddenButton(favouriteBox);
+    toggleHiddenButton(displayMessage);
+    viewFavouriteMessages();
+    swapSubTitle();
+
+    if (!messageHtmlParagraph.classList.contains('hidden')) {
+        toggleHiddenButton(imgBuddha);
+        toggleHiddenButton(messageHtmlParagraph);
+        toggleHiddenButton(favouriteMessageButton);
+    }
+});
+
+viewHomeButton.addEventListener('click', function() {
+    toggleHiddenButton(mantraSelectBox);
+    toggleHiddenButton(viewHomeButton);
+    toggleHiddenButton(messageContainer);
+    toggleHiddenButton(favouriteBox);
+    toggleHiddenButton(displayMessage); 
+    swapSubTitle();
+
+    if (Object.keys(localStorage).length && viewHomeButton.classList.contains('hidden')) {
+        viewFavouriteButton.classList.remove('hidden');
+    } else if (!Object.keys(localStorage).length) {
+        viewFavouriteButton.classList.add('hidden');
+    }
+});
+
+favouriteBox.addEventListener('click', deleteFavourite);
+
+// FUNCTIONS
+
+function selectMessage() {
+    createMessageBox = document.querySelector('.display-message');
+
+    if (affirmationRadio.checked) {
+        if (!imgBuddha.classList.contains('hidden')) {
+            toggleHiddenButton(imgBuddha);
+            toggleHiddenButton(messageHtmlParagraph);
+            toggleHiddenButton(favouriteMessageButton);
+        }
+
+        messageHtmlParagraph.innerText = createMessage(affirmations);
+
+    } else if (mantraRadio.checked) {
+        if (!imgBuddha.classList.contains('hidden')) {
+            toggleHiddenButton(imgBuddha);
+            toggleHiddenButton(messageHtmlParagraph);
+            toggleHiddenButton(favouriteMessageButton);
+        }
+
+        messageHtmlParagraph.innerText = createMessage(mantras);
+    }
+}
+
+function createMessage(messageType) {
+    currentMessage = {
+        message: messageType[getRandomMessage(messageType)],
+        id: Date.now()
+    };
+    return currentMessage.message;
+}
+
+function getRandomMessage(messageType) {
+    return Math.floor(Math.random() * messageType.length);
+}
+
+function toggleHiddenButton(button) {
+    button.classList.toggle('hidden');
+}
+
+function favouriteMessage() {
+    var valueCheck = [];
+
+    if (!Object.keys(localStorage).length) {
+        valueCheck.push(currentMessage.message);        
+        localStorage.setItem(currentMessage.id, currentMessage.message);
+    } else {
+        for (var i = 0; i < Object.keys(localStorage).length; i++) {
+            var item = localStorage.getItem(localStorage.key(i));
+            valueCheck.push(item);
+        }
+        if (!valueCheck.includes(currentMessage.message)) {
+            localStorage.setItem(currentMessage.id, currentMessage.message);
+        }
+    }
+}
+
+function viewFavouriteMessages() {
+    favouriteBox.innerHTML = '';
+
+    for (var i = 0; i < Object.keys(localStorage).length; i++) {
+        favouriteBox.innerHTML += `
+            <section class="message-container" id="${localStorage.key(i)}">
+                <p>${localStorage.getItem(localStorage.key(i))}</p>
+                <button class="delete-message">Delete</button>
+            </section>`;
+    }
+}
+
+function swapSubTitle() {
+    if (messageContainer.classList.contains('hidden')) {
+        subTitle.innerText = 'Saved messages';
+    } else {
+        subTitle.innerText = 'Which type of message?'
+    }
+}
+
+function deleteFavourite(event) {
+    for (var i = 0; i < Object.keys(localStorage).length; i++) {
+        if (localStorage.key(i) === event.target.parentNode.id) {
+            localStorage.removeItem(localStorage.key(i));
+        }
+    }
+
+    viewFavouriteMessages();
+
+    if (!Object.keys(localStorage).length) {
+        subTitle.innerText = "All messages deleted";
+    }
+}