Responsive Text Area with timer, counter and history

Developer
Mariam Massadeh
Size
4,527 Kb
Views
28,336
  1. Responsive Text Area with timer, counter and history Previews
  2. Responsive Text Area with timer, counter and history HTML Codes
  3. Responsive Text Area with timer, counter and history CSS Codes
  4. Responsive Text Area with timer, counter and history JS Codes

How do I make an responsive text area with timer, counter and history?

What is a responsive text area with timer, counter and history? How do you make a responsive text area with timer, counter and history? This script and codes were developed by Mariam Massadeh on 22 September 2022, Thursday.

Responsive Text Area with timer, counter and history Previews
IQ Test

Responsive Text Area with timer, counter and history - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Text Area with timer, counter and history</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Mix of the following pens -->
<!--https://codepen.io/davidchase/pen/ALxDy-->
<!--https://codepen.io/jiffy/pen/uAEkH-->
<!-- ****************************** -->
<div class="containerDetails"> <fieldset class="inputs"> <textarea type="text" name="post" id="text-box" placeholder="Your Notes..."></textarea> </fieldset> <fieldset class="actions"> <button id="submit">Post</button> </fieldset> <div id="post-container"> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Text Area with timer, counter and history - Script Codes CSS Codes

html {	width: auto;	height: 100%;	}	body { height: auto;	background: rgb(56,133,236); /* Old browsers */	background: -moz-linear-gradient(top, rgba(56,133,236,1) 0%, rgba(0,89,206,1) 100%); /* FF3.6+ */	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(56,133,236,1)), color-stop(100%,rgba(0,89,206,1))); /* Chrome,Safari4+ */	background: -webkit-linear-gradient(top, rgba(56,133,236,1) 0%,rgba(0,89,206,1) 100%); /* Chrome10+,Safari5.1+ */	background: -o-linear-gradient(top, rgba(56,133,236,1) 0%,rgba(0,89,206,1) 100%); /* Opera 11.10+ */	background: -ms-linear-gradient(top, rgba(56,133,236,1) 0%,rgba(0,89,206,1) 100%); /* IE10+ */	background: linear-gradient(to bottom, rgba(56,133,236,1) 0%,rgba(0,89,206,1) 100%); /* W3C */	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3885ec', endColorstr='#0059ce',GradientType=0 ); /* IE6-9 */ background-attachment: fixed;	text-align: center;	}	.containerDetails { position: relative;	margin-top: 0px;	margin-left: auto;	margin-right: auto;	width:100%;/*Media*/ height: auto;	background:url(http://jotform.us/images/big-back.png) repeat-x rgb(241, 241, 241);	color:black !important;	font-family:'Verdana';	font-size:18px;	padding-top: 20px; padding-bottom: 25px;	-moz-box-shadow: 0px 5px 10px 0px #333, 0px -3px 10px 0px #333;	-webkit-box-shadow: 0px 5px 10px 0px #333, 0px -3px 10px 0px #333;	box-shadow: 0px 5px 10px 0px #333, 0px -3px 10px 0px #333;	-moz-border-radius:.5em;	-webkit-border-radius:.5em;	border-radius:.5em;	}
#submit:hover { -moz-transition-property: background;	-moz-transition-timing-function: ease-in-out;	-moz-transition-duration: 0.3s;	-webkit-transition-property: background;	-webkit-transition-timing-function: ease-in-out;	-webkit-transition-duration: 0.3s;	transition-property: background;	transition-timing-function: ease-in-out; transition-duration: 0.3s; color: #ffffff !important;	border:1px solid #3d4f8b !important;	background: #4668af; /* old browsers */	background: -moz-linear-gradient(top, #6f93e1 0%, #4668af 100%); /* firefox */	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6f93e1), color-stop(100%,#4668af)); /* webkit */	background: linear-gradient(top, #6f93e1 0%, #4668af 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6f93e1', endColorstr='#4668af', GradientType=0 ); /* ie */
}
#submit:active {
color: #ffffff !important;	border:1px solid #3d4f8b !important;	background: #4668af; /* old browsers */	background: -moz-linear-gradient(top, #4668af 0%, #6f93e1 100%); /* firefox */	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4668af), color-stop(100%,#6f93e1)); /* webkit */	background: linear-gradient(top, #4668af 0%, #6f93e1 100%); /* W3C */	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4668af', endColorstr='#6f93e1', GradientType=0 ); /* ie */	-moz-box-shadow:inset 0px 0px 0px 1px rgba(147, 187, 255, 0.30), 0px 1px 1px 0px rgba(0, 0, 0, 0.30);	-webkit-box-shadow:inset 0px 0px 0px 1px rgba(147, 187, 255, 0.30), 0px 1px 1px 0px rgba(0, 0, 0, 0.30);	box-shadow:inset 0px 0px 0px 1px rgba(147, 187, 255, 0.30), 0px 1px 1px 0px rgba(0, 0, 0, 0.30);
}
#text-box { float:none; clear:both; background: #f1f1f1; padding: 6px; margin-top: 0px;/**/ margin-bottom: 0px;/**/ width: 95%;/*Media*/ height: 100px; font-family: 'Merriweather Sans', sans-serif; font-size: 14px; border: 1px solid #82aee8; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 1px #82aee8 inset; -webkit-box-shadow: 0 1px 1px #82aee8 inset; box-shadow: 0 1px 1px #82aee8 inset;
}
#text-box:focus { background-color: #fff; border-color: #82aee8; outline: none; -moz-box-shadow: 0 0 0 1px #82aee8 inset; -webkit-box-shadow: 0 0 0 1px #82aee8 inset; box-shadow: 0 0 0 1px #82aee8 inset;
}
#submit { float: right;	cursor: pointer; margin-right: 8px; margin-bottom: -20px;	-moz-border-radius:.2em;	-webkit-border-radius:.2em;	border-radius:.2em;	padding:8px 25px;	color: #ffffff;	font-family: 'Merriweather Sans', sans-serif;	font-size: 13px;	font-weight: bold;	text-shadow:0px -1px 0px #142353;	border:1px solid #3d4f8b;	-moz-box-shadow:inset 0px 0px 0px 1px rgba(147, 187, 255, 0.30), 0px 2px 2px 0px rgba(0, 0, 0, 0.30);	-webkit-box-shadow:inset 0px 0px 0px 1px rgba(147, 187, 255, 0.30), 0px 2px 2px 0px rgba(0, 0, 0, 0.30);	box-shadow:inset 0px 0px 0px 1px rgba(147, 187, 255, 0.30), 0px 2px 2px 0px rgba(0, 0, 0, 0.30);	background: #305096; /* old browsers */	background: -moz-linear-gradient(top, #5277c8 0%, #305096 100%); /* firefox */	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5277c8), color-stop(100%,#305096)); /* webkit */	background: linear-gradient(top, #5277c8 0%, #305096 100%); /* W3C */	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5277c8', endColorstr='#305096', GradientType=0 ); /* ie */
}
fieldset { border: 0;
}
#post-container { background: #CCC; text-align: left; margin-left: 10px; margin-right: 10px; width: auto; height: auto; border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
.posted { margin-top: 30px; padding: 5px;
}
.post { position: relative; border-top: 2px dotted #333; font-family: 'Merriweather Sans', sans-serif; margin-top: 20px;
}
.post h4{ font-size: 0.9em; font-weight: normal; line-height: 1.5em; text-transform: uppercase; margin-top: -0.75em; text-align: center;
}
.post h4 span { background: #CCC; padding: 0 5px;
}
.pcontent { position: relative; padding: 20px;
}
#TimeSub { position: relative; margin-left: 1em; font-size: .6em;
}
.inputs span.counter { float: right; color: #000; font-size:10px; padding:10px;
}
.inputs p.info { font-size: 11px; color: #000; float:left; padding:5px;
}
.inputs p.info > span { color: #a50505;
}

Responsive Text Area with timer, counter and history - Script Codes JS Codes

$(document).ready(function() { //timer //please dont change any thing her without my permission / mar!am var myVar = setInterval(function () { myTimer() }, 1000); function myTimer() { var Temp = new Date(); //start get day var weekdays = new Array(7); weekdays[0] = "Sun"; weekdays[1] = "Mon"; weekdays[2] = "Tue"; weekdays[3] = "Wed"; weekdays[4] = "Thu"; weekdays[5] = "Fri"; weekdays[6] = "Sat"; var current_date = new Date(); weekday_value = current_date.getDay(); //end get day //get day as number var d = Temp.getDate(); //start get month var month = new Array(); month[0] = "Jan"; month[1] = "Feb"; month[2] = "Mar"; month[3] = "Apr"; month[4] = "May"; month[5] = "Jun"; month[6] = "Jul"; month[7] = "Aug"; month[8] = "Sep"; month[9] = "Oct"; month[10] = "Nov"; month[11] = "Dec"; var m = month[Temp.getMonth()]; //end get month //start get year var y = Temp.getFullYear(); //end get year //start get time var t = Temp.getHours()+':'+Temp.getMinutes()+":"+Temp.getUTCDate(); //end get time document.getElementById("TimeSpan").innerHTML = weekdays[weekday_value] + ' - ' + d + ' ' + m + ' ' + y; document.getElementById("TimeSub").innerHTML = t; } //just do this once to prevent the form from looking weird without any posts $('#submit').one('click', function() { $('#post-container').addClass("posted"); }); $('#submit').click(function() { $('#submit').hide('slow'); var post = $('#text-box').val(); var wrap = '<div class="post"><h4><span id="TimeSpan"></span></h4><div class="pcontent">' + post + '<sub id="TimeSub"></sub></div></div>'; $('#post-container').prepend(wrap); $('#text-box').val(""); });
});
//
$(document).ready(function () { var comment = $('#text-box'), counter = '', counterValue = 140, //change this to set the max character count minCommentLength = 5, //set minimum comment length $commentValue = comment.val(), $commentLength = $commentValue.length, submitButton = $('#submit').hide(); $('.inputs').prepend('<span class="counter"></span>').append('<p class="info">Min length: <span></span></p>'); counter = $('span.counter'); counter.html(counterValue); //display your set max length comment.attr('maxlength', counterValue); //apply max length to textarea $('.inputs').find('p.info > span').html(minCommentLength); // everytime a key is pressed inside the textarea, update counter comment.keyup(function () { var $this = $(this); $commentLength = $this.val().length; //get number of characters counter.html(counterValue - $commentLength); //update counter if ($commentLength > minCommentLength - 1) { submitButton.fadeIn(200); } else { submitButton.fadeOut(200); } }); });
Responsive Text Area with timer, counter and history - Script Codes
Responsive Text Area with timer, counter and history - Script Codes
Home Page Home
Developer Mariam Massadeh
Username MariamMassadeh
Uploaded September 22, 2022
Rating 3
Size 4,527 Kb
Views 28,336
Do you need developer help for Responsive Text Area with timer, counter and history?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mariam Massadeh (MariamMassadeh) Script Codes
Name
Receipt with result
Notepad pen
Responsive Menu with sub menu- CSS3 animation, simple jquery
Emploee Tree
Time Line
Simple Chat Conversation
Animated Progress Bar
Simple blog container, tool tip, simple animation on hover
A Pen by Mariam Massadeh
Css3-image-slider-with-stylized-thumbnails
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!