Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sentiment Picker (Negative, Neutral, Positive) written using Bootstrap, jQuery, and toastr. It allows the user to select a sentiment or ranking. Demo: https://codepen.io/randyburden/pen/Yzerbqv
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sentiment Picker</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css'>
<style>
.sentiment-picker .btn {
color: #fff;
background-color: #545b62;
}
.negative-sentiment:hover,
.negative-sentiment.active {
background-color: red;
}
.neutral-sentiment:hover,
.neutral-sentiment.active {
background-color: orange;
}
.positive-sentiment:hover,
.positive-sentiment.active {
background-color: green;
}
</style>
</head>
<body>
<h3 class="m-3">Bootstrap Sentiment Picker</h3>
<div class="btn-group btn-group-toggle m-3 sentiment-picker" data-toggle="buttons">
<label class="btn negative-sentiment">
<input type="radio" name="sentiment-picker-options" data-sentiment="negative" autocomplete="off">
😠<br />Negative
</label>
<label class="btn neutral-sentiment">
<input type="radio" name="sentiment-picker-options" data-sentiment="neutral" autocomplete="off">
😐<br />Neutral
</label>
<label class="btn positive-sentiment">
<input type="radio" name="sentiment-picker-options" data-sentiment="positive" autocomplete="off">
😀<br />Positive
</label>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js'></script>
<script>
$(document).ready(function() {
$("input[type=radio][name=sentiment-picker-options]").change(function() {
var item = $(this);
var sentiment = item.data('sentiment');
console.log(sentiment);
switch(sentiment) {
case 'negative':
toastr.error(sentiment);
break;
case 'neutral':
toastr.warning(sentiment);
break;
case 'positive':
toastr.success(sentiment);
break;
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment