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.

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

Docs/readme #284

Open
wants to merge 33 commits into
base: main
Choose a base branch
from
Open
Changes from 3 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
2afdee4
Add the html skeleton
jalbe0076 Apr 5, 2023
5761470
Group radio buttons
jalbe0076 Apr 5, 2023
8401195
Change classes and add images
jalbe0076 Apr 6, 2023
0eda846
Add specified styling to html index page
jalbe0076 Apr 6, 2023
af6912d
Create mantra and affirmation data file
jalbe0076 Apr 6, 2023
e69dbe8
Merge pull request #1 from jalbe0076/feature/message-data
jalbe0076 Apr 6, 2023
764efcf
Link the data javascript file in the html
jalbe0076 Apr 6, 2023
c7c6d35
Merge pull request #2 from jalbe0076/feature/html-homepage
jalbe0076 Apr 6, 2023
0246c31
create randomizing function and set up empty function to generate mes…
jalbe0076 Apr 6, 2023
733c799
Add function to randomize message depending on user input
jalbe0076 Apr 6, 2023
d5fdbaf
Display random message
jalbe0076 Apr 6, 2023
9c7cbf6
Merge pull request #3 from jalbe0076/feature/create-message
jalbe0076 Apr 6, 2023
3923f58
Refactor the create message feature
jalbe0076 Apr 6, 2023
104db92
Merge pull request #4 from jalbe0076/refactor/create-message
jalbe0076 Apr 6, 2023
71f1d39
Add save message button visibility
jalbe0076 Apr 6, 2023
65ba5da
Add save message button conditional toggle function
jalbe0076 Apr 6, 2023
d7f4f03
Save the message with button and show view saved message button
jalbe0076 Apr 6, 2023
ce87182
Add functionality to change to favourite and home pages
jalbe0076 Apr 7, 2023
b0a0f2c
Refactoring code to remove innerHTML to keep event listeners working …
jalbe0076 Apr 7, 2023
917559f
Add working delete function and button display toggles
jalbe0076 Apr 8, 2023
c139226
Merge pull request #5 from jalbe0076/feature/save-message
jalbe0076 Apr 8, 2023
e50ecd3
Add display flex box features to css
jalbe0076 Apr 8, 2023
e49e617
Merge pull request #6 from jalbe0076/refactor/css-flexbox
jalbe0076 Apr 8, 2023
2bb45d1
Update the README file to include contex, installation instructions a…
jalbe0076 Apr 9, 2023
1e66aed
Update README.md
jalbe0076 Apr 9, 2023
fe348dc
Merge pull request #7 from jalbe0076/docs/readme
jalbe0076 Apr 9, 2023
c43502f
Add preview gif to asset directory
jalbe0076 Apr 9, 2023
741571d
Refactor to remove unused query selector
jalbe0076 Apr 9, 2023
8103c50
Added local storage feature to have page persist on reload
jalbe0076 Apr 10, 2023
5900c2b
Fix merge conflicts
jalbe0076 Apr 10, 2023
1830856
Merge pull request #8 from jalbe0076/feature/page-persist
jalbe0076 Apr 10, 2023
31c8c50
Updated README to include information on the local storage feature
jalbe0076 Apr 10, 2023
163d66b
Merge branch 'main' of github.com:jalbe0076/m1-self-care-center into …
jalbe0076 Apr 10, 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
48 changes: 32 additions & 16 deletions main.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,20 @@ var imgBuddha = document.querySelector('.img-buddha');
var displayMessage = document.querySelector('.display-message-container')
var createMessageBox = document.querySelector('.display-message');

var savedMessages = [];
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 (savedMessages.length) {
if (Object.keys(localStorage).length) {
viewFavouriteButton.classList.remove('hidden');
}
});
Expand All @@ -49,14 +53,15 @@ viewFavouriteButton.addEventListener('click', function() {
viewHomeButton.addEventListener('click', function() {
toggleHiddenButton(mantraSelectBox);
toggleHiddenButton(viewHomeButton);
toggleHiddenButton(viewFavouriteButton);
toggleHiddenButton(messageContainer);
toggleHiddenButton(favouriteBox);
toggleHiddenButton(displayMessage);
swapSubTitle();

if (!savedMessages.length) {
toggleHiddenButton(viewFavouriteButton);
if (Object.keys(localStorage).length && viewHomeButton.classList.contains('hidden')) {
viewFavouriteButton.classList.remove('hidden');
} else if (!Object.keys(localStorage).length) {
viewFavouriteButton.classList.add('hidden');
}
});

Expand Down Expand Up @@ -104,41 +109,52 @@ function toggleHiddenButton(button) {
}

function favouriteMessage() {
if (!savedMessages.includes(currentMessage)) {
savedMessages.push(currentMessage)
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 < savedMessages.length; i++) {
for (var i = 0; i < Object.keys(localStorage).length; i++) {
favouriteBox.innerHTML += `
<section class="message-container" id="${savedMessages[i].id}">
<p>${savedMessages[i].message}</p>
<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 (viewFavouriteButton.classList.contains('hidden')) {
if (messageContainer.classList.contains('hidden')) {
subTitle.innerText = 'Saved messages';
} else {
subTitle.innerText = 'Which type of message?'
}
}

function deleteFavourite(event) {
for (var i = 0; i < savedMessages.length; i++) {
if (savedMessages[i].id === Number(event.target.parentNode.id)) {
savedMessages.splice(i, 1);
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 (!savedMessages.length) {
if (!Object.keys(localStorage).length) {
subTitle.innerText = "All messages deleted";
}
}
}