threadly

In this example below you will see how to do a threadly with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0319AM, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0319AM ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>threadly</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  <link rel='stylesheet' href='style.css'/>
  </head>
  <body>

    <div class="header">
      <div class="container">
        <h1>threadly</h1>
      </div>
    </div>

    <div class="main">
      <div class="container">
        
        <form class="form">
          <input id="comment" type="text" placeholder="share your thoughts">
          <button type="submit" class="btn">post</button>
        </form>

        <ul class="comments">
          <li>Have you felt it?</li>
          <li>There has been an awakening.</li>
        </ul>
      </div>
    </div>

    <script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
    <script src='script.js'></script>
  </body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0319AM/threadly-jLNVyb */
html, body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  border-left: 2px solid #00f28f;
  font-size: 48px;
  font-weight: 400;
  margin: 0;
  padding-left: 20px;
}

.header {
  margin: 80px 0 100px 80px;
}

.main {
  margin: 0 0 0 80px;
  max-height: 1100px;
  overflow: hidden;
}

form {
  margin: 0 0 100px 0;
}

form input {
  background: #f0f0f0;
  border: none;
  border-left: 2px solid #fff;
  font-size: 36px;
  font-family: 'Montserrat', sans-serif;
  padding: 20px;
  transition: background 2s, border-left 2s;
  width: 600px;
}

form input:focus {
  background: #fff;
  border-left: 2px solid #000;
  box-shadow: none;
  outline: none;
  transition: background 2s, border-left 2s;
}

button.btn {
  background: transparent;
  border: none;
  color: #00f28f;
  cursor: pointer;
  font-size: 36px;
  padding: 20px 24px;
  transition: background 2s, color 1s;
}

button.btn:hover {
  background: #00f28f;
  color: #fff;
  transition: background 2s, color 1s;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  border-left: 2px solid #000;
  font-size: 36px;
  margin: 0 0 36px;
  opacity: 0;
  padding-left: 20px;
}

li:nth-child(1) {
  opacity: 1;
}
li:nth-child(2) {
  opacity: 0.9;
}
li:nth-child(3) {
  opacity: 0.8;
}
li:nth-child(4) {
  opacity: 0.7;
}
li:nth-child(5) {
  opacity: 0.6;
}
li:nth-child(6) {
  opacity: 0.5;
}
li:nth-child(7) {
  opacity: 0.4;
}
li:nth-child(8) {
  opacity: 0.3;
}
li:nth-child(9) {
  opacity: 0.2;
}
li:nth-child(10) {
  opacity: 0.1;
}
li:nth-child(11) {
  opacity: 0;
}

@media (max-width: 840px) {
  .header {
    margin: 40px 0 100px 40px;
  }
  
  .main {
    margin: 0 0 0 40px;
    max-height: 2000px;
  }
  form input {
    font-size: 24px;
    width: 50%;
  }
  li, button.btn {
    font-size: 24px;
  }
}

/*Downloaded from https://www.codeseek.co/0319AM/threadly-jLNVyb */
var main = function() {
  $('form').submit(function() {
    var comment = $('#comment').val();
    if(comment !== "") {
      var html = $('<li>').text(comment);
      $(html).prependTo('.comments');
      $("#comment").val("");
    } 

    return false;
  });
};

$(document).ready(main);

Comments