Posting Statuses

Developer
Corbin
Size
2,512 Kb
Views
18,216
  1. Posting Statuses Previews
  2. Posting Statuses HTML Codes
  3. Posting Statuses CSS Codes
  4. Posting Statuses JS Codes

How do I make an posting statuses?

Post a status like on Facebook and Twitter. What is a posting statuses? How do you make a posting statuses? This script and codes were developed by Corbin on 26 September 2022, Monday.

Posting Statuses Previews
IQ Test

Posting Statuses - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Posting Statuses</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!doctype html>
<html> <head> <link href="https://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <link href="style.css" rel="stylesheet"> </head> <body> <div class="container"> <form> <div class="form-group"> <textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea> </div> </form> <div class="button-group pull-right"> <p class="counter">140</p> <a href="#" class="btn btn-primary">Post</a> </div> <ul class="posts"> </ul> </div> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Posting Statuses - Script Codes CSS Codes

html,
body { font-family: 'Roboto', sans-serif; color: #404040; background-color: #eee;
}
.container { width: 520px; margin-top: 20px;
}
.form-group { margin-top: 5%;
}
.button-group { margin-bottom: 20px;
}
.counter { display: inline; margin-top: 0; margin-bottom: 0; margin-right: 10px;
}
.posts { clear: both; list-style: none; padding-left: 0; width: 100%;
}
.posts li { background-color: #fff; border: 1px solid #d8d8d8; padding-top: 10px; padding-left: 20px; padding-right: 20px; padding-bottom: 10px; margin-bottom: 10px; word-wrap: break-word; min-height: 42px;
}
.selected { background-color: gray;
}

Posting Statuses - Script Codes JS Codes

var main = function() { $('.btn').click(function(){ var post = $('.status-box').val(); $('<li>').text(post).prependTo('.posts'); //Clear value in the status box once posted $('.status-box').val(''); //return .counter to 140 when status posts $('.counter').text('140'); //make .btn disabled once status is posts $('.btn').addClass('disabled'); }); //count down the 140 characters $('.status-box').keyup(function(){ var postLength = $(this).val().length; var charactersLeft = 140 - postLength; $('.counter').text(charactersLeft); //check to see if characters in post are elidgible to post if(charactersLeft < 0) { //make button disabled if charcters are < 0 $('.btn').addClass('disabled'); } else if (charactersLeft === 140) { //make button disabled if charcters are 140 $('.btn').addClass('disabled'); } else { //make button disabled if charcters anything else $('.btn').removeClass('disabled'); } }); $('.btn').addClass('disabled');
};
$(document).ready(main);
Posting Statuses - Script Codes
Posting Statuses - Script Codes
Home Page Home
Developer Corbin
Username corbinmj16
Uploaded September 26, 2022
Rating 3
Size 2,512 Kb
Views 18,216
Do you need developer help for Posting Statuses?

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!

Corbin (corbinmj16) Script Codes
Name
Simple Parallax Scroll
JS Arrays
Javascript Ternary Operator
Diabetes Calculator
Drawing App with Canvas
JS Find total and using textContent
Slider with arrows and dots
Tab area
Vue.js To-do List
Red Box Move on Mouse Coordiantes
Create amazing sales emails 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!