Twitter Todo List

Developer
Kenny Mark
Size
2,792 Kb
Views
18,216
  1. Twitter Todo List Previews
  2. Twitter Todo List HTML Codes
  3. Twitter Todo List CSS Codes
  4. Twitter Todo List JS Codes

How do I make an twitter todo list?

A simple pen for new jquery/javascript developers to understand some basic functionalty of Javascript. This includes some methods, datatypes, call back functions and events.. What is a twitter todo list? How do you make a twitter todo list? This script and codes were developed by Kenny Mark on 28 September 2022, Wednesday.

Twitter Todo List Previews
IQ Test

Twitter Todo List - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twitter Todo List</title> <link href='https://fonts.googleapis.com/css?family=Cabin:300,400,500,600' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Simple Todo List</h1>
<div class="dobox"> <input type="text"> </input> <button>Post</button> <p class="counter">140</p> <div class="listbox"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Twitter Todo List - Script Codes CSS Codes

*{ margin: 0; padding: 0;
}
body{ background:#2FC5CC; overflow-x: hidden; //background-image: url(https://images.unsplash.com/photo-1441323263989-281bc2f5b68c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=922d87b5063595a594e2e7a73fc46f54); background-size: cover; background-position: center; display:flex; align-items:center; justify-content:center; font-family: 'Cabin', sans-serif; flex-direction: column;
}
h1{ color:white; margin-top: 30px; font-weight: 300;
}
.dobox{ width:400px; height:400px; border:1px solid white; border-radius:5%; box-shadow:0px 0px 2px 1px #; margin-top: 20px; display:flex; align-items: center; justify-content: center; flex-direction: column;
}
input{ text-align: center; border:0; height: 40px; width: 280px; font-family: inherit; font-size: 15px; font-weight: 300; color: #333; border-radius:15px; outline:0; padding:0 10px;
}
.listbox{ margin:35px auto 0px ; width: 300px; height: 250px; border:1px solid white; border-radius:5%
}
.listbox p{ margin-left: 20px; margin-top: 7px; height: 20px; color:white; width:inherit
}
button{ display:inline-block; border:0; padding: 1;
}
p.counter{ position: absolute; left:56z0px; margin-top: 5px; color: #fff; font-size: 17px; font-weight: 600;
}
button{ position: absolute; top:131px; left:570px; padding: 7px 12px; cursor:pointer; background: #F64662; color: #fff; border-radius:11px; font-family: inherit; font-size: 15px; outline:0; transition: all .2s ease-out;
}
.inactive{ background: grey; transition: all .5s ease-in;
}

Twitter Todo List - Script Codes JS Codes

$('input').keypress(function(e){ if( e.which === 13 ) { $('button').click(); };
});
$('button').click(function(event){ var todo = $('input').val(); var pEl = $('.listbox p'); var d = new Date(); var counter = 140; $('.listbox') .append("<p>"+todo+'<br/>'+"</p>"); $('input') .effect('bounce') .val(''); if (pEl.length === 8){ $('input') .prop('disabled','true'); };
});
$('input').keydown(function(){ var charLength = 140; var cEl = $('.counter'); var todo = $('input').val(); var textcount = $('input'). val().length; var x = parseInt(charLength - textcount) -1; cEl.text(x); if (todo.length >=140){ $('button').prop('disabled','true') .addClass('inactive'); } else{ $('button').prop('disabled','false') .removeClass('inactive'); } });
Twitter Todo List - Script Codes
Twitter Todo List - Script Codes
Home Page Home
Developer Kenny Mark
Username kennymark
Uploaded September 28, 2022
Rating 3
Size 2,792 Kb
Views 18,216
Do you need developer help for Twitter Todo List?

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!

Kenny Mark (kennymark) Script Codes
Name
Contact page 2.0
E-Commerce
Brick Tennis
A Pen by Kenny Mark
Invitation Card
Modern Welcome Page
Background Randomizer
Time Teller
FSE Homepage
FseRec
Create amazing art & images 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!