turingschool-examples · JWill06 · Feb 15, 2024 · Feb 15, 2024 · Feb 16, 2024 · Feb 16, 2024
diff --git a/README.md b/README.md
@@ -1,51 +1,25 @@
-# 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.edu/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 
 
 ### Abstract:
-[//]: <> (Briefly describe what you built and its features. What problem is the app solving? How does this application solve that problem?)
+This app allows the user to get a different type of message wether it be an Affirmation or Mantras. The app is solving a problem of helping mental health in people. The application solves that problem by sending a random message to the user (dependent on their message choice selection)
 
 ### Installation Instructions:
-[//]: <> (What steps does a person have to take to get your app cloned down and running?)
+1. Fork and copy the repo. 
+2. Paste and clone the repo in your local machine(terminal).
+3. Input open index.html to see the live application. 
 
 ### Preview of App:
-[//]: <> (Provide ONE gif or screenshot of your application - choose the "coolest" piece of functionality to show off.)
+ https://postimg.cc/p977tR9T
 
 ### 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?)
+In total this project took me roughly 10 hours of sit down time to complete it. This is the end of our third week in Mod1. 
 
 ### Contributors:
-[//]: <> (Who worked on this application? Link to their GitHubs.)
+Myself: Jordan Williamson. https://github.com/JWill06
 
 ### Learning Goals:
-[//]: <> (What were the learning goals of this project? What tech did you work with?)
+My learning goals were to create the desired end goal using HTML, CSS, and JavaScript. I also feel more comfortable using javaScript in this project. 
 
 ### 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?)
+Wins: Understanding JavaScript better and figuring out things based off of the paired project. Also not relying on other people to help me out as much. 
+Challenges: Figuring out how to get the image back in the message box after deleting the messages. 
diff --git a/index.html b/index.html
@@ -5,7 +5,32 @@
     <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap" rel="stylesheet">
   </head>
   <body>
-
-    <script type="text/javascript" src="main.js"></script>
+    <header>
+    <h1 class="SelfCare">✨Self Care Center✨</h1>
+     </header> 
+     <h2>Which type of message?</h2>
+     <section class="section">
+      <div>
+      <section class="radio1">
+        <div>
+        <input type="radio" class="button1" id="One"> affirmation </input>
+        </div>
+        <div>
+        <input type="radio" class="button2" id="Two"> mantra </input>
+        </div>
+      </section> 
+      <div>
+    <button class="button3">Receive Message</button>
+      </div>
+    </section>
+     <section id="yourMessage" class="get_message" >
+      <div id="messageImage" style="display: block">
+        <img id="meditationImage" src="assets/meditate.svg" class="svg" alt="Image">
+     </div>     
+    </section>
+    <section class="trash">
+    <button class="remove">Remove Message  🚮</button>
+    </section>
+     <script type="text/javascript" src="main.js"></script>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -0,0 +1,95 @@
+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."];
+
+var affirmationButton = document.querySelector('.button1');
+var mantraButton = document.querySelector('.button2');
+var messageButton = document.querySelector('.button3');
+var message = document.querySelector('#yourMessage');
+var messageImage = document.querySelector('#meditationImage');
+var removeButton = document.querySelector('.remove');
+
+affirmationButton.addEventListener('click', function(){
+    mantraButton.checked = false;
+});
+
+mantraButton.addEventListener('click', function(){
+    affirmationButton.checked = false;
+});
+
+messageButton.addEventListener('click', function(){
+    if (!affirmationButton.checked && !mantraButton.checked) {
+         alert('A button must be clicked before receiving your message!🙂');
+    } else {
+        randomMessage();
+        }
+    });
+
+removeButton.addEventListener('click', function(){
+    if(!message.innerText.trim()){
+        alert('There must be a message in order to delete it!🗑️');
+    } else {
+        removeMessage();
+    }
+});
+
+function randomMessage(){
+    var randomAffirmation = getRandomAffirmation(affirmations);
+    var randomMantra = getRandomMantra(mantras);
+
+    if(affirmationButton.checked){
+        getMessage(randomAffirmation);
+    } else if(mantraButton.checked){
+        getMessage(randomMantra);
+    }
+}
+
+function getMessage(text) {
+    message.innerHTML = '';
+    message.innerText += text;
+}
+
+function getRandomAffirmation(affirmations){
+    var randomIndex = Math.floor(Math.random() * affirmations.length);
+    return affirmations[randomIndex];
+}
+
+function getRandomMantra(mantras){
+    var randomIndex = Math.floor(Math.random() * mantras.length);
+    return mantras[randomIndex];
+}
+
+function removeMessage(){
+    messageImage.src = 'assets/meditate.svg'; 
+    messageImage.style.display = 'none'; 
+    message.innerHTML = `<div id="messageImage" style="display: block">
+    <img id="meditationImage" src="assets/meditate.svg" class="svg" alt="Image">
+ </div>`;
+
+}
diff --git a/styles.css b/styles.css
@@ -1,8 +1,116 @@
-/* font-family: 'Quicksand', sans-serif;
-COLORS
-light-yellow - #f7e4bf;
-light-blue - #78a7c6;
-dark-blue - #134d71;
-white - #ffffff;
-black - #000000;
-*/
+body {
+    background: linear-gradient(#134d71, #78a7c6, #f7e4bf, #fff);
+    min-height: 100vh;
+    display: flex;
+    justify-content: space-evenly;
+    flex-direction: column;
+}
+
+ h1 {
+    font-family: 'Quicksand', sans-serif;
+    color: white;
+    text-align: center;
+    margin: 15;
+    font-size: 30px;
+ }
+
+ h2 {
+    font-family: 'Quicksand', sans-serif;
+    color: white;
+    text-align: center;
+    position: relative;
+    margin-top: 75px;
+    margin-bottom: 25px;
+ }
+ /* Section 1 */
+.section {
+     margin: 15px auto auto auto;
+     background-color: white;
+     height: 150px;
+     width: 500px;
+     border-radius: 25px;
+     text-align: center;
+     align-items: center;
+     font-size: 20px;
+     justify-content: space-around;
+     display: flex;
+}
+
+.radio1 {
+    display: flex;
+}
+
+.button1 {
+    flex-wrap: wrap;
+    margin-left: 5px;
+}
+
+.button2 {
+    flex-wrap: wrap;
+    margin-left: 85px;
+}
+
+
+/* recieve message button */
+.button3 {
+    font-family: 'Quicksand', sans-serif;
+    background-color: rgba(5,89,130,1);
+    color: white;
+    width: 200px;
+    height: 40px;
+    margin: 55px auto auto auto;
+    border-radius: 15px;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 15px;
+}
+/* Section 2 */
+.get_message {
+    font-family: 'Quicksand', sans-serif;
+    margin: 0 auto auto auto;
+    background-color: white;
+    height: 200px;
+    width: 700px;
+    border-radius: 25px;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.trash {
+    font-family: 'Quicksand', sans-serif;
+     text-align: center;
+     align-items: center;
+     font-size: 20px;
+     justify-content: space-around;
+     display: flex;
+}
+
+.remove {
+    font-family: 'Quicksand', sans-serif;
+    background-color: rgba(5,89,130,1);
+    color: white;
+    border-radius: 25px;
+    width: 220px;
+    height: 50px;
+    margin-bottom: 155px;
+    font-size: 15px;
+}
+
+ .svg {
+    height: 95px;
+    width: 50px;
+    margin: auto;
+ }
+
+ #meditationImage {
+    display: block;
+}
+
+
+
+
+