Iter/refactor mvp

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5502
+}

README.md

@@ -1,51 +1,47 @@
-# 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!
+# Self-Care Center
 
-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.
+### Abstract:
+
+Welcome to the Self Care app, a digital sanctuary dedicated to making your day a better one. Step into a world of positivity and mindfulness, where you can embrace the power of affirmations and mantras to nurture your mind, body, and soul. The Self Care app is designed to uplift and inspire, providing you with a collection of thoughtful messages tailored to your needs. Whether you seek a moment of tranquility amidst life's chaos or a burst of motivation to conquer challenges, the carefully curated content will guide you on a journey of self-discovery and personal growth. Embrace the essence of self-care, and let our app be your daily companion on the path to a brighter, more fulfilling life.
 
-The spec for this project can be found [here](https://frontend.turing.io/projects/module-1/self-care-center.html). 
+### Installation Instructions:
 
-## Learning Goals
+1. Fork this repository.
+2. Copy the SSH key and clone it to your local directory.
+3. Cd into the repository
+4. Run open index.html to open the site via the default browser.
+
+### Preview of App:
+
+![](https://github.com/AHochworter/self-care-center/blob/iter/readme/Self-Care%20GIF.gif)
+
+### Context:
+
+The "Self Care Center" was an individual project assigned during the third week of Module 1 at Turing School of Software and Design. With a five-day timeline, the primary objective was to gain practical experience in developing an application using HTML, CSS, and JavaScript. Notably, this was our first "blank slate" assignment, where only the essential "boilerplate" code was provided in the HTML file. Accompanied by images of a comp for reference, the project aimed to challenge us to recreate the interface. The app we built enables users to select between affirmations and mantras, providing them with positive messages tailored to their preference and fostering a sense of self-care and mindfulness.
+
+### Contributors:
+
+- [Ann Hochworter](https://github.com/AHochworter)
+
+### 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.  
-______________________________________________________  
+Tech used: Terminal, VS Code, Dev Tools, Github, HTML, Javascript, CSS, MDN Docs.
 
-# 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?)
+### Wins + Challenges:
 
-### Installation Instructions:
-[//]: <> (What steps does a person have to take to get your app cloned down and running?)
+Wins:
 
-### Preview of App:
-[//]: <> (Provide ONE gif or screenshot of your application - choose the "coolest" piece of functionality to show off.)
+- Creating my first HTML and CSS files brought me a wonderful sense of accomplishment, representing a crucial milestone in my journey towards becoming a proficient software developer.
 
-### 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?)
+- Connecting JavaScript and HTML to create the DOM also marked a significant moment in my progress. I felt like this concept started to solidify as I worked on this project.
 
-### Contributors:
-[//]: <> (Who worked on this application? Link to their GitHubs.)
+Challenges:
 
-### Learning Goals:
-[//]: <> (What were the learning goals of this project? What tech did you work with?)
+- One of the most significant challenges I faced during this project was conquering the initial obstacle of getting started. Grappling with the "empty" page syndrome is always the first hurdle for me.
 
-### 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?)
+- CSS proved to be a particularly challenging aspect for me.

data.js

@@ -0,0 +1,33 @@
+var affirmations = [
+  'I forgive myselft 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 peacful.',
+  '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

@@ -1,11 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <link rel="stylesheet" href="styles.css">
-    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+    <title>Self Care Center</title>
   </head>
   <body>
-
+    <h1>✨Self Care Center✨</h1>
+    <h2>Which type of message?</h2>
+    <div class="message-options-box">
+      <div class="radio-button-options">
+        <label>
+          <!--use of the label tag is considered best practice for accesibility-->
+          <!-- radio button for affirmation -->
+          <input
+            type="radio"
+            name="messageType"
+            value="affirmation"
+            class="affirmation-option"
+          />
+          affirmation
+        </label>
+        <label>
+          <!-- radio button for mantra -->
+          <input
+            type="radio"
+            name="messageType"
+            value="mantra"
+            class="mantra-option"
+          />
+          mantra
+        </label>
+      </div>
+      <div class="recieve-message-button">
+        <!-- button - Receive Message -->
+        <button id="receiveButton">Receive Message</button>
+      </div>
+    </div>
+    <!-- Box that shows icon or message -->
+    <div class="message-area">
+      <div class="mediation-icon" id="mediationIcon"></div>
+      <img src="assets/meditate.svg" class="img" />
+      <div class="message-content hidden" id="messageContent">
+        <p id="messageText">Message text goes here.</p>
+      </div>
+      <div class="reset-form-button hidden">
+        <!-- button - reset-form -->
+        <button id="resetFormButton">Clear Message</button>
+      </div>
+    </div>
+    <script type="text/javascript" src="data.js"></script>
     <script type="text/javascript" src="main.js"></script>
   </body>
-</html>
+</html>

main.js

@@ -0,0 +1,79 @@
+//Create variables targeting the relevant DOM elements here👇
+
+//BUTTONS:👇
+var affirmationBtn = document.querySelector('.affirmation-option');
+var mantraBtn = document.querySelector('.mantra-option');
+var receiveMessageBtn = document.querySelector('#receiveButton');
+var bellIcon = document.querySelector('img');
+var resetFormBtn = document.querySelector('.reset-form-button');
+
+//MESSAGE BOX:👇
+var messageContent = document.querySelector('.message-content');
+var messageText = document.querySelector('#messageText');
+
+//variable to catch radio button selected
+var selectedSelfCareOption;
+
+//Add your event listeners here 👇
+affirmationBtn.addEventListener('click', function (event) {
+  selectedSelfCareOption = 'affirmation';
+});
+mantraBtn.addEventListener('click', function (event) {
+  selectedSelfCareOption = 'mantra';
+});
+receiveMessageBtn.addEventListener('click', generateMessage);
+resetFormBtn.addEventListener('click', resetForm);
+
+//Create your event handlers and other functions here👇
+function generateMessage(event) {
+  event.preventDefault();
+  if (atLeastOneRadio()) {
+    hideBell();
+
+    var messageArray = '';
+
+    if (selectedSelfCareOption === 'affirmation') {
+      messageArray = affirmations;
+    } else {
+      messageArray = mantras;
+    }
+
+    var randomIndex = getRandomIndex(messageArray);
+    var randomMessage = messageArray[randomIndex];
+
+    messageText.textContent = randomMessage;
+  }
+}
+//Helper Functions
+//Random index function
+function getRandomIndex(array) {
+  return Math.floor(Math.random() * array.length);
+}
+//toggle 'hidden' classList function
+function toggleClass(elements) {
+  for (var i = 0; i < elements.length; i++) {
+    elements[i].classList.toggle('hidden');
+  }
+}
+
+var msgAreaElements = [bellIcon, messageContent, resetFormBtn];
+
+function hideBell() {
+  toggleClass(msgAreaElements);
+}
+
+function resetForm() {
+  toggleClass(msgAreaElements);
+
+  //clear the radio buttons
+  radioButtons = document.querySelectorAll('input[type="radio"]');
+  for (var i = 0; i < radioButtons.length; i++) {
+    radioButtons[i].checked = false;
+  }
+}
+
+//be sure a radio button is selected
+function atLeastOneRadio() {
+  var selectedRadios = document.querySelectorAll('input[type=radio]:checked');
+  return selectedRadios.length > 0;
+}

styles.css

@@ -5,4 +5,103 @@ light-blue - #78a7c6;
 dark-blue - #134d71;
 white - #ffffff;
 black - #000000;
-*/
+*/
+/* * {
+  border: solid 1px green;
+} */
+
+body {
+  font-family: 'Quicksand', sans-serif;
+  font-size: 1em;
+  height: 100vh;
+  background: #ffffff;
+  background-image: linear-gradient(#134d71, #f7e4bf);
+}
+h1 {
+  font-family: 'Quicksand', sans-serif;
+  font-size: 2.35em;
+  color: #ffffff;
+  text-align: center;
+  padding: 40px;
+  margin: 50px;
+}
+h2 {
+  font-family: 'Quicksand', sans-serif;
+  font-size: 1.2em;
+  color: #ffffff;
+  text-align: center;
+  padding: 5px;
+  margin: 5px;
+}
+p {
+  font-family: 'Quicksand', sans-serif;
+  font-size: 1.25em;
+  color: black;
+  /* text-align: center; */
+}
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+.hidden {
+  display: none;
+}
+
+.message-options-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #ffffff;
+  margin: auto;
+  border-radius: 8px;
+  width: 35%;
+  height: 45px;
+  padding: 25px;
+  font-family: 'Quicksand', sans-serif;
+  text-align: center;
+}
+.radio-button-options {
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+  padding: 7px;
+}
+#receiveButton,
+#resetFormButton {
+  display: block;
+  width: 175px;
+  height: 25px;
+  border-radius: 5px;
+  background-color: #134d71;
+  color: #ffffff;
+  padding: 5px;
+  margin: auto;
+  align-items: center;
+}
+
+.message-area {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  border-radius: 8px;
+  width: 55%;
+  height: 100px;
+  padding: 20px;
+  font-family: 'Quicksand', sans-serif;
+  text-align: center;
+  background-color: #ffffff;
+  margin-top: 100px;
+}
+#message-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+img {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 80px;
+  width: 80px;
+}