This JavaScript code snippet helps you to create a feedback widget. It defines a function addStatusMessage that creates and adds a new status message element to the HTML DOM based on the provided parameters such as type and message. The function also sets a lifespan (defaulted to 3000ms) for the message before removing it from the DOM using the removeStatusMessage function. The removeStatusMessage function fades out the element and removes it from the DOM. The code also includes jQuery event handlers that call the addStatusMessage function with different parameters to display status messages of different types (info, success, warning, and error) when the corresponding buttons are clicked.
How to Create JavaScript Feedback Widget
Create the HTML structure for the feedback widget as follows:
<!DOCTYPE html>
<html>
<head>
<title> Success message </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<body>
<div id="status-messages-container"></div>
<!-- START ONLY FOR CODEPEN -->
<input class="addMessageInput" id="addInfo" type="button" value="Add info message"/><br>
<input class="addMessageInput" id="addSuccess" type="button" value="Add success message"/><br>
<input class="addMessageInput" id="addWarning" type="button" value="Add warning message"/><br>
<input class="addMessageInput" id="addError" type="button" value="Add error message"/><br>
<footer>Made by <span id='anmabe'><a href="https://anmabe.es">anmabe<a><span></footer>
<!-- END ONLY FOR CODEPEN -->
</body>
</html>
Style the feedback widget using the following CSS styles:
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--transparent: rgba(0, 0, 0, 0);
--semi-transparent: rgba(0, 0, 0, 0.8);
}
#status-messages-container {
z-index: 999;
position: fixed;
bottom: 0;
right: 0;
}
.status-message {
padding: 0.5em;
padding-left: 1em;
padding-right: 1em;
font-size: 1.8em;
border-radius: 0.5em;
pointer-events: none;
margin: 1em;
}
.info-message {
background-color: #AFCBE1;
color: #094579;
}
.cd__main{
display: block !important;
}
.success-message {
background-color: #AFE1AF;
color: #097969;
}
.warning-message {
background-color: #DBE1AF;
color: #6F7909;
}
.error-message {
background-color: #E1AFAF;
color: #790909;
}
/* Only for CodePen */
body {
font-family: "Poppins", sans-serif;
min-height: 100vh;
background-color: #1d1e22;
}
.addMessageInput{
cursor: pointer;
padding: 0.5em;
padding-left: 1em;
padding-right: 1em;
border: 0.2em solid #007EEC;
background: #1d1e22;
color: white;
border-radius: 2em;
margin: 1em;
margin-bottom: 0.5em;
}
.addMessageInput:hover{
background: #007EEC;
color: #1d1e22;
}
/* ---- START FOOTER ---- */
footer {
position: fixed;
left: 0;
bottom: 0;
padding: 1em;
font-size: 1.5em;
color: #D6D5D5;
}
#anmabe{
background: linear-gradient(
-45deg,
#ee7752,
#e73c7e,
#23a6d5,
#23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#anmabe:hover{
text-decoration: underline;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* ---- END FOOTER ---- */
Load the following scripts before closing the body tag:
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
Add the following JavaScript function:
function addStatusMessage(type, message, lifespan=3000){
let statusMessagesContainer = document.getElementById("status-messages-container");
let divElement = document.createElement("div");
divElement.className = "status-message " + type + "-message";
let iElement = document.createElement("i");
iElement.className = "fa";
switch(type){
case "info":
iElement.className += " fa-info-circle";
break;
case "success":
iElement.className += " fa-check";
break;
case "warning":
iElement.className += " fa-warning";
break;
case "error":
iElement.className += " fa-times-circle";
break;
}
Finally, add the following JavaScript function to feedback widget:
let text = document.createTextNode(" " + message);
divElement.appendChild(iElement);
divElement.appendChild(text);
statusMessagesContainer.prepend(divElement);
$(divElement).fadeOut(0);
$(divElement).fadeIn("slow");
setTimeout(removeStatusMessage, lifespan, divElement);
}
function removeStatusMessage(divElement){
$(divElement).fadeOut("slow", function(){divElement.remove()});
}
/* Only for CodePen */
addStatusMessage("info", "Follow this info...");
addStatusMessage("success", "Everything went as planned");
addStatusMessage("warning", "This might not be correct...");
addStatusMessage("error", "Something went wrong");
$( "#addInfo" ).click(function(){addStatusMessage("info", "Follow this info...")});
$( "#addSuccess" ).click(function(){addStatusMessage("success", "Everything went as planned")});
$( "#addWarning" ).click(function(){addStatusMessage("warning", "This might not be correct...")});
$( "#addError" ).click(function(){addStatusMessage("error", "Something went wrong")});
That’s all! hopefully, you have successfully created a JavaScript feedback widget. If you have any questions or suggestions, feel free to comment below.
