JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Timeline post task</title>
</head>
<body>
    <div class="widget">
        <div class="intro-area">
        <span> Simple Post Widget </span>
        </div>
        
        <div class="add-photo-video">
            <label for="upload-button" class="upload-button"> <i class="fas fa-photo-video"></i> Add Photo/Video </label>
            <input  type="file" id="upload-button" class="hidden-input" accept="image/*, video/*" multiple>
        </div>

        <div class="text-zone">
            <div class="text-img-zone">
                <textarea type="text" id="text-zone" name="textZone" class="text-zone" maxlength="500" placeholder="Write something..."></textarea>
                <div id="image-preview"></div>
            </div>
            <div id="char-num"> Characters remaining: 500 </div>
        </div>
        
        <div class="button-zone"></div>
            <input type="button" id="create-post" value="Post">
        </div>
  
    
    <div class="result-box"></div>
 
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/additional-methods.min.js"></script>
    <script async type="text/javascript" src="app.js"></script>
</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css?family=Acme|Saira+Semi+Condensed|Tomorrow&display=swap");
@import url('https://fonts.googleapis.com/css?family=Caladea&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #273c75;
}
.widget {
  position: relative;
  align-items: center;
  margin: 0 auto;
  background-color: #f5f6fa;
  width: 600px;
  border-radius: 20px;
  padding: 7px 7px;
  margin-top: 10px;
}
.intro-area {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 30px;
  color: #0097e6;
  font-size: 18px;
  font-family: "Tomorrow", sans-serif;
}
/* button file */
.add-photo-video {
  text-align: center;
  margin-bottom: 30px;
}
.upload-button {
  background-color: #00a8ff;
  color: #fff;
  padding: 11px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-family: "Saira Semi Condensed", sans-serif;
  font-size: 13px;
  transition: background-color 0.5s;
}
.upload-button:hover {
  background-color: #0170ac;
}
.hidden-input {
  display: none;
}
/* text-area */
.text-zone {
  text-align: center;
}
.text-img-zone {
  width: 501px;
  border: 1px solid rgb(29, 29, 29);
  outline: 1px;
  margin: 0 auto;
}
textarea[type="text"] {
  text-align: left;
  resize: none;
  transition: height 0.35s ease-in-out;
  width: 499px;
  height: 65px;
  outline: none;
  border: none;
  padding: 5px 7px;
}
#image-preview{
  text-align: left;
  margin: 5px;
  display: flex;
  width: 500px;
  flex-wrap: wrap;  
}
.img-gallery {
  width: 85px;
  height: 80px;
  margin: 5px;
  position: relative;
  display: flex;
}
.img-gallery img {
  width: 100%;
  object-fit: contain;
  border: 2px solid #2c3e50;
  border-radius: 20px;
  vertical-align: middle;
  text-align: center;
}
.img-gallery video {
  width: 100%;
  object-fit: contain;
  border: 2px solid #2c3e50;
  border-radius: 20px;
  vertical-align: middle;
  text-align: center;
}
.remove-img {
  cursor: pointer;
  position: absolute;
  top: -10%;
  right: -5px;
  font-size:...

JavaScript

$(function () {
  let postButton = $("#create-post");
  let imgPreview = $("#image-preview");

  $(postButton).prop("disabled", true).addClass("create-post-off");

  $("#text-zone").keyup(function() {
    if ($(this).val() != 0 || imgPreview.children().length > 0) { 
      $(postButton).prop("disabled", false).addClass("create-post-on");
    } else if ($("#text-zone").val() == 0 || imgPreview.children().length == 0 ) {
      $(postButton).removeClass("create-post-on");
      $(postButton).prop("disabled", true).addClass("create-post-off");
      $(this).height(65);
    }
  });

  $("#text-zone").focus(function() {
    $(this).height(130);
  });

  $("#text-zone").focusout(function() {
    if($(this).val() != 0) {
      $(this).height(130);
    } else {
      $(this).height(65);
    }
  });

  $("#text-zone").keyup(function() {
    if( $(this).val() != 0  || $(this).val() !=  "") {
      $(this).height(130);
    } else {
      $(this).height(65);
    }
  });

  $("#text-zone").keyup(function() {
    let max = 500;
    let textLenght = $(this).val().length;
    if (textLenght >= max) {
      $("#char-num").text("You have reached the limit!");
      } else {
      let char = max - textLenght;
      $("#char-num").text("Characters remaining: " + char);
    }
  });


  $("#upload-button").change(function (event) {
    let gallery = $("<div></div>").addClass("img-gallery");
    let file = event.target.files[0];
    let fileReader = new FileReader();
    if (file.type.match(/^image\//)) {
      ty = file.type;
      imgPreview.append(gallery);
      gallery.append($("<div>❌</div>").addClass("remove-img"));
      let img = document.createElement("img");
      fileReader.onload = function () {
        img.src = fileReader.result;
        gallery.append(img);
        $(postButton).prop("disabled", false).addClass("create-post-on");
      } 
    } else if (file.type.match('video')) {
      imgPreview.append(gallery);
     ...