Skip to content

Commit

Permalink
Merge pull request #69 from software-students-spring2024/edit-card-te…
Browse files Browse the repository at this point in the history 
…mplate

Edit card template
  • Loading branch information
@shriyakalakata
shriyakalakata authored Mar 2, 2024
2 parents b349fc8 + 1edd119 commit 41fce26
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 10 deletions.
9 changes: 5 additions & 4 deletions app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ def displayDeck(username, deckTitle):
cardList = currentDeck['cards']
# shuffle deck
random.shuffle(cardList)
return render_template('card.html', deckTitle=deckTitle, username=username, cardList=cardList)
return render_template('card.html', deckTitle=deckTitle, username=username, cardList=cardList, isAuth=False)
else:
# authenticate user
if (not current_user.is_authenticated or current_user.id != username):
Expand All @@ -68,7 +68,7 @@ def displayDeck(username, deckTitle):
cardList = currentDeck['cards']
# shuffle deck
random.shuffle(cardList)
return render_template('card.html', deckTitle=deckTitle, username=username, cardList=cardList)
return render_template('card.html', deckTitle=deckTitle, username=username, cardList=cardList, isAuth=True)

# TODO: change createDeck to addDeck for naming consistency
@app.route("/<username>/create", methods=["POST"])
Expand All @@ -83,8 +83,9 @@ def createDeck(username):
# TODO: is there a way to not have to refresh the page and add the new deck
return redirect(url_for('allDecks', username=username))

@app.route("/<username>/<deckTitle>/add", methods=["POST"])
def addCard(username, deckTitle):
# since shuffled, maybe should be cardQuestion instead of cardIndex?
@app.route("/<username>/<deckTitle>/<cardIndex>/add", methods=["POST"])
def addCard(username, deckTitle, cardIndex):
# authenticate user
if (not current_user.is_authenticated or current_user.id != username):
return redirect(url_for('login'))
Expand Down
33 changes: 33 additions & 0 deletions static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,17 @@ h3 {
font-size: 55px;
}

p {
color: #e1948d;
text-align: center;
font-size: 25px;
}

p a{
color: inherit; /* blue colors for links too */
text-decoration: inherit; /* no underline */
}

.box {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -254,4 +265,26 @@ h3 {
justify-content: center;
align-items: center;
margin: auto;
}

#close-icon {
position: absolute;
top: 35%;
left: 13%;
transform: translate(-50%, -50%);
}

#card-form textarea {
font-family: sans-serif;
color: #e1948d;
text-align: center;
font-size: 55px;
text-transform: uppercase;
padding-top: 7rem;
padding-bottom: 7rem;
width: 40rem;
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
}
5 changes: 5 additions & 0 deletions templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,10 @@ <h1>DIVE DEEPER</h1>
</a>
</div>

<p>Made by GAS2.</p>
<p>
<a target="_blank" href="https://icons8.com/icon/7703/cancel">Close</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a>
</p>

</body>
</html>
78 changes: 72 additions & 6 deletions templates/card.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,29 @@ <h3 id="next-question"> START </h3>
<button id="nextButton" class="card-button">&#8250;</button>
</div>

<a href="{{ url_for('addCard', username=username, deckTitle=deckTitle) }}" style="text-decoration:none">
<button class="button2" >Add Card</button>
</a>
<a href="{{ url_for('editCard', username=username, deckTitle=deckTitle, cardIndex=cardIndex ) }}" style="text-decoration:none">
<button class="button2">Edit</button>
</a>

{% if isAuth %}

<button id="add-card-button" class="button2" >Add Card</button>
<button id="edit-card-button" class="button2" style="display: none">Edit</button>

<form method="post" id="card-form" style="display: none">
<svg id="close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="120px" height="120px">
<circle fill="#63514F" cx="15" cy="15" r="10" />
<path fill="#D9D9D9" d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16.414,15 c0,0,3.139,3.139,3.293,3.293c0.391,0.391,0.391,1.024,0,1.414c-0.391,0.391-1.024,0.391-1.414,0C18.139,19.554,15,16.414,15,16.414 s-3.139,3.139-3.293,3.293c-0.391,0.391-1.024,0.391-1.414,0c-0.391-0.391-0.391-1.024,0-1.414C10.446,18.139,13.586,15,13.586,15 s-3.139-3.139-3.293-3.293c-0.391-0.391-0.391-1.024,0-1.414c0.391-0.391,1.024-0.391,1.414,0C11.861,10.446,15,13.586,15,13.586 s3.139-3.139,3.293-3.293c0.391-0.391,1.024-0.391,1.414,0c0.391,0.391,0.391,1.024,0,1.414C19.554,11.861,16.414,15,16.414,15z"/>
</svg>
<textarea name="question" required></textarea>
<button class="button2">Done</button>
</form>

{% endif %}

<script>
const nextQuestion = document.querySelector("#next-question");
const card = document.querySelector("#card");
const prev = document.querySelector("#prevButton");
const next = document.querySelector("#nextButton");
const isAuth = ("{{ isAuth }}" == "True")

var cardIndex = -1;
var questions = '{{ cardList }}'
Expand All @@ -41,24 +52,79 @@ <h3 id="next-question"> START </h3>
if (cardIndex > 0) {
cardIndex -= 1;
nextQuestion.textContent = cardList[cardIndex];
if (isAuth) {
document.querySelector("#add-card-button").style.display="initial"
document.querySelector("#edit-card-button").style.display="initial"
}
} else {
nextQuestion.textContent = "START";
if (isAuth) {
document.querySelector("#add-card-button").style.display="initial"
document.querySelector("#edit-card-button").style.display="none"
}
}
}

prev.addEventListener("click", prevCard);

// event listener for both card click and next button click
function nextCard() {
if (isAuth && cardIndex == -1) {
document.querySelector("#add-card-button").style.display="initial"
document.querySelector("#edit-card-button").style.display="initial"
}
if (cardIndex < cardList.length-1) {
cardIndex += 1;
nextQuestion.textContent = cardList[cardIndex];
if (isAuth && cardIndex == cardList.length-1) {
document.querySelector("#add-card-button").style.display="none"
document.querySelector("#edit-card-button").style.display="none"
}
}
}

card.addEventListener("click", nextCard);
next.addEventListener("click", nextCard);

if (isAuth) {
const username = "{{ username }}"
const deckTitle = "{{ deckTitle }}"

const addButton = document.querySelector("#add-card-button")
if (addButton) {
addButton.addEventListener("click", async function() {
document.querySelector("#next-question").style.display="none"
document.querySelector("#add-card-button").style.display="none"
document.querySelector("#edit-card-button").style.display="none"
document.querySelector("#card-form").style.display="initial"

document.querySelector("#card-form").action="/" + username + "/" + deckTitle + "/" + cardIndex + "/add"
})
}

const editButton = document.querySelector("#edit-card-button")
if (editButton){
editButton.addEventListener("click", function() {
document.querySelector("#next-question").style.display="none"
document.querySelector("#add-card-button").style.display="none"
document.querySelector("#edit-card-button").style.display="none"
document.querySelector("#card-form").style.display="initial"
document.querySelector("#card-form textarea").textContent = cardList[cardIndex-1]

document.querySelector("#card-form").action="/" + username + "/" + deckTitle + "/" + (cardIndex-1) + "/edit"
})
}

const closeIcon = document.querySelector("#close-icon")
if (closeIcon) {
closeIcon.addEventListener("click", function() {
document.querySelector("#next-question").style.display="initial"
document.querySelector("#add-card-button").style.display="initial"
document.querySelector("#edit-card-button").style.display="initial"
document.querySelector("#card-form").style.display="none"
})
}
}
</script>

{% endblock %}
Expand Down

0 comments on commit 41fce26

Please sign in to comment.