ideaBox/main.js at main · JWill06/ideaBox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
var savedCards = []
var saveButton = document.querySelector('.save-button');
var userTitle = document.querySelector('.user-title');
var userBody = document.querySelector('.user-body');
var savedCardSection = document.querySelector('.saved-cards');
var form = document.querySelector('.idea-box-form');
var parentWrapper = document.querySelector('.form-wrapper')
var showFavoriteButton = document.querySelector("#toggle-ideas")

saveButton.addEventListener('click', function() {
    savedCardSection.innerHTML = "";
    showFavoriteButton.classList.remove('hidden')
    saveCards();
    clearForm();
    toggleButton();
})

showFavoriteButton.addEventListener('click', function() {
    savedCardSection.innerHTML = "";
    if (showFavoriteButton.innerText === "Show All Ideas") {
        displayUserCards();
        showFavoriteButton.className = "show-starred-ideas"
        showFavoriteButton.innerText = 'Show Starred Ideas'
    }
    else {
    filterIdeas();
    }
})

savedCardSection.addEventListener('click', deleteCards);
parentWrapper.addEventListener('click', favoriteCards);
form.addEventListener('change', toggleButton)

function filterIdeas() {
    for (var i = 0; i < savedCards.length; i++) {
        if (savedCards[i].isFavorite === true) {
            savedCardSection.innerHTML += `
            <div class="saved-card">
                <div class="rectangle">
                    <img class="${savedCards[i].isFavorite}" src="${savedCards[i].src}" alt="star symbol" id=${i}>
                    <img class="delete" src="assets/delete.svg" alt="delete symbol">
                </div>
                <h4 class="saved-card-title">${savedCards[i].title}</h4>
                <p class="saved-card-info">${savedCards[i].body}</p>
            </div>`
        }
    }
    showFavoriteButton.innerText = "Show All Ideas"
    showFavoriteButton.className = "show-all"
}

function favoriteCards(e) {
    if (e.target.className === 'false') {
    savedCards[e.target.id]['isFavorite'] = true;
    savedCards[e.target.id]['src'] = "assets/star-active.svg"
    e.target.className = 'true'
    e.target.src ="assets/star-active.svg"
    }
    else if (e.target.className === 'true') {
    savedCards[e.target.id]['isFavorite'] = false;
    savedCards[e.target.id]['src'] = "assets/star.svg"
    e.target.className = 'false'
    e.target.src ="assets/star.svg"
    }
}

function displayUserCards() {
    for(var i = 0; i < savedCards.length; i++){
    savedCardSection.innerHTML += `
        <div class="saved-card">
            <div class="rectangle">
                <img class="${savedCards[i].isFavorite}" src="${savedCards[i].src}" alt="star symbol" id=${i}>
                <img class="delete" src="assets/delete.svg" alt="delete symbol">
            </div>
          <h4 class="saved-card-title">${savedCards[i].title}</h4>
          <p class="saved-card-info">${savedCards[i].body}</p>
        </div>`
    }
}

function saveCards(){
    if (userTitle.value.length < 15) {
        var cards = {
            id: Date.now(),
            title: userTitle.value,
            body: userBody.value,
            isFavorite: false,
            src: "assets/star.svg"
        }
        savedCards.push(cards);
    }
    else {
        alert('Your title is too long.')
    }
    displayUserCards();
}

function clearForm () {
    userTitle.value = '';
    userBody.value = '';
}

function toggleButton(){
    if (userTitle.value && userBody.value) {
        saveButton.disabled = false;
    }
    else {
        saveButton.disabled = true;
    }
}

function deleteCards(event){
    event.preventDefault();
    var index = event.target.parentElement.parentElement.id
    if (event.target.className === 'delete') {
        event.target.parentElement.parentElement.remove();
        savedCards.splice(index, 1);
    }
}