Skip to content

Instantly share code, notes, and snippets.

@randyburden

randyburden/SentimentPicker.html

Created May 24, 2022 22:46
Show Gist options
  • Save randyburden/41f184f95914779e4d447222cfc48f62 to your computer and use it in GitHub Desktop.
Save randyburden/41f184f95914779e4d447222cfc48f62 to your computer and use it in GitHub Desktop.
Download ZIP
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
Raw
SentimentPicker.html
<!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