How to create Website appreciate thumbs button ?
SEO Help and Tips
How to create Website appreciate thumbs button ?
Here is the example code of appreciate button:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Appreciation Post</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.post {
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 20px;
}
.buttons {
display: flex;
align-items: center;
}
.thumbs {
font-size: 24px;
margin-right: 10px;
cursor: pointer;
}
.count {
font-size: 20px;
}
</style>
</head>
<body>
<div class="post">
<p>This is a sample post that you can appreciate or not appreciate.</p>
<div class="buttons">
<span class="thumbs thumbs-up" onclick="increaseCount('up')">👍</span>
<span class="count" id="thumbs-up-count">0</span>
</div>
<div class="buttons">
<span class="thumbs thumbs-down" onclick="increaseCount('down')">👎</span>
<span class="count" id="thumbs-down-count">0</span>
</div>
</div>
<script>
let thumbsUpCount = parseInt(localStorage.getItem('thumbsUpCount')) || 0;
let thumbsDownCount = parseInt(localStorage.getItem('thumbsDownCount')) || 0;
function updateCounts() {
document.getElementById('thumbs-up-count').textContent = thumbsUpCount;
document.getElementById('thumbs-down-count').textContent = thumbsDownCount;
}
function increaseCount(type) {
if (type === 'up') {
thumbsUpCount++;
} else if (type === 'down') {
thumbsDownCount++;
}
localStorage.setItem('thumbsUpCount', thumbsUpCount);
localStorage.setItem('thumbsDownCount', thumbsDownCount);
updateCounts();
}
updateCounts();
</script>
</body>
Python:
from flask import Flask, render_template, request
app = Flask(__name__)
# Initialize counts from localStorage or use default value 0
thumbsUpCount = int(request.cookies.get('thumbsUpCount', 0))
thumbsDownCount = int(request.cookies.get('thumbsDownCount', 0))
@app.route('/')
def index():
return render_template('appreciation.html', thumbsUpCount=thumbsUpCount, thumbsDownCount=thumbsDownCount)
@app.route('/increase/<type>')
def increase_count(type):
global thumbsUpCount, thumbsDownCount
if type == 'up':
thumbsUpCount += 1
elif type == 'down':
thumbsDownCount += 1
# Set updated counts as cookies
response = app.make_response(render_template('appreciation.html', thumbsUpCount=thumbsUpCount, thumbsDownCount=thumbsDownCount))
response.set_cookie('thumbsUpCount', str(thumbsUpCount))
response.set_cookie('thumbsDownCount', str(thumbsDownCount))
return response
if __name__ == '__main__':
app.run(debug=True)
Comments
Post a Comment
Thanks for your Comments.