Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat favorite messages #312

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Feat favorite messages #312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3d61f9a
Initial commit
Oct 26, 2023
34dcb70
feat: mvp working
Oct 26, 2023
95cd355
Feat: added error handling and clear message button
Oct 28, 2023
fa49bab
Feat: added styling to buttons
Oct 28, 2023
2c97acd
Merge pull request #1 from rickytrandev/feat-error-handling
rickytrandev Oct 28, 2023
153c986
Feat: added favorites feature
Oct 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
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 favMessages = [];
34 changes: 33 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,39 @@
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>

<header>✨ Self Care Center ✨</header>

<h2 class="main-h2" >Which type of message?</h2>
<section class="main">
<div class="message-select">
<label for="html">
<input id="affirmation" class="radio-button" type="radio" name="radioGroup" value="affirmation">
affirmation</label>
<label for="html">
<input id="mantra" class="radio-button" type="radio" name="radioGroup" value="mantra">mantra</label>
</div>
<div class="receive-btn">
<button id="receive-btn" type="button">Receive Message</button>
</div>
</section>

<section class="message-board">
<p class="message"><img src="/assets/meditate.svg" alt="meditation emoji"></p>

<div class="btn-container">
<button class="clear-btn hidden button-hover">Clear Message</button>
<button class="favorite-btn hidden button-hovergit ">Favorite Message</button>
</div>
</section>
<button class="fav-view-btn button-hover">View Favorites</button>

<section class="fav-section">
</section>
<button class="home-btn hidden button-hover">Home</button>
<button class="delete-btn hidden button-hover">Remove from Favorites</button>


<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="data.js"></script>
</body>
</html>
133 changes: 133 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
// Event Listener
var recieveMsgBtn = document.querySelector('#receive-btn')
var affirmationBtn = document.querySelector("#affirmation")
var mantraBtn = document.querySelector("#mantra")
var clearBtn = document.querySelector('.clear-btn')
var favBtn = document.querySelector('.favorite-btn')
var viewFavsBtn = document.querySelector('.fav-view-btn')
var mainH2 = document.querySelector('.main-h2')
var mainSection = document.querySelector('.main')
var msgBoard = document.querySelector('.message-board')
var homeBtn = document.querySelector('.home-btn')
var deleteBtn = document.querySelector('.delete-btn')
var favContainer = document.querySelector('.fav-container')
var favSection = document.querySelector('.fav-section')
var favMsg = document.querySelector('.fav-msg')


// Event Handler
recieveMsgBtn.addEventListener('click', createMessage);
affirmationBtn.addEventListener('click', handleRadioClick)
mantraBtn.addEventListener('click', handleRadioClick)
clearBtn.addEventListener('click', clearMessage)
favBtn.addEventListener('click', addToFavs)
viewFavsBtn.addEventListener('click', showFavsView)
homeBtn.addEventListener('click', showHome)
deleteBtn.addEventListener('click', deleteMessage)


// Functions
var radioID;
var msgID;

function getRandomIndex(array) {
randomIndex = Math.floor(Math.random() * array.length)
return randomIndex
}

function handleRadioClick(event) {
radioID = event.target.id;
recieveMsgBtn.classList.add('button-hover')
}

function handleMsgClick(event) {
msgID = event.target.id;
}

function createMessage() {

switch (radioID) {
case "affirmation":
var randomIndex = getRandomIndex(affirmations)
document.querySelector('.message').innerText = affirmations[randomIndex];
document.querySelector('.message').classList.add("message-style");
show(clearBtn);
show(favBtn)
break;
case "mantra":
var randomIndex = getRandomIndex(mantras)
document.querySelector('.message').innerText = mantras[randomIndex];
document.querySelector('.message').classList.add("message-style");
show(clearBtn);
show(favBtn);
break;
default:
alert('Please select an affirmation or a mantra.')
break;
}
}

function clearMessage() {
document.querySelector('.message').innerHTML = '<img src="/assets/meditate.svg" alt="meditation emoji">'
document.querySelector('.message').classList.remove("message-style");
hide(clearBtn)
hide(favBtn)
}

function addToFavs() {
var currentMessage = document.querySelector('.message').innerText
favMessages.push(currentMessage)
}

function showFavsView() {

hide(mainH2);
hide(mainSection)
hide(msgBoard)
hide(viewFavsBtn)
show(favSection)
show(homeBtn)

favSection.innerHTML = '';

for (var i = 0; i < favMessages.length; i++) {
var p = document.createElement('p')
p.innerText = favMessages[i]
p.id = [i]
p.classList.add('fav-msg')
p.addEventListener('click', handleMsgClick)
favSection.appendChild(p)
}

if (p) {
show(deleteBtn)
} else {
hide(deleteBtn)
}
}


function showHome() {
hide(favSection)
hide(homeBtn)
hide(deleteBtn)
hide(favSection)
show(mainH2)
show(mainSection)
show(msgBoard)
show(viewFavsBtn)
}

function deleteMessage() {
var index = msgID
favMessages.splice(index, 1)
showFavsView()
}

function show(element) {
element.classList.remove('hidden');
}

function hide(element) {
element.classList.add('hidden');
}
125 changes: 125 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,128 @@
body {
background-image: linear-gradient(#134d71, #78a7c6, #f7e4bf, #ffffff);
background-attachment: fixed;
font-family: 'Quicksand', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}

header {
text-align: center;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 2rem;
font-weight: bold;
margin: 50px;
}

.main {
margin: auto;
width: 50%;
height: 100px;
padding: 10px;
text-align: center;
background-color: white;
border-radius: 10px;
}

h2 {
color:#ffffff;
text-align: center;
}

.message-select {
display: flex;
justify-content: space-around;
align-items: end;
padding: 20px;
}

.radio-button {
cursor: pointer;
}

button {
font-family: 'Quicksand', sans-serif;
background-color: #134d71;
padding: 5px;
margin-top: 10px;
width: 30%;
color: white;
font-size: 1rem;
border-radius: 10px;
border-style: inset;
cursor: pointer;
}

.button-hover:hover {
color: #000000;
border-style: outset;
}

.message-board {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: auto;
width: 80%;
margin-top: 80px;
background-color: #ffffff;
border-radius: 10px;
height: 150px;
}

.message-style {
padding: 25px;
}

img {
margin-top: 10px;
width: 100px;
}

.btn-container {
width: 100%;
display: flex;
justify-content: space-evenly;
}

.clear-btn {
width: 20%;
}

.favorite-btn {
width: 20%;
}

.fav-section {
width: 80%;
background-color: #ffffff;
border-radius: 10px;
text-align: center;
}

.fav-container {
background-color: #ffffff;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
}

.hidden {
display: none;
}

.fav-msg {
cursor: pointer;
}
/* .border{
border: #134d71 solid;
} */


/* font-family: 'Quicksand', sans-serif;
COLORS
light-yellow - #f7e4bf;
Expand Down