List Maker

Developer
Charlie Volpe
Size
2,535 Kb
Views
14,168
  1. List Maker Previews
  2. List Maker HTML Codes
  3. List Maker CSS Codes
  4. List Maker JS Codes

How do I make an list maker?

This is simple list maker. It isn't saved anywhere currently it is just temporary. This is just getting the front-end functionality of the list maker working.. What is a list maker? How do you make a list maker? This script and codes were developed by Charlie Volpe on 08 November 2022, Tuesday.

List Maker Previews
IQ Test

List Maker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>List Maker</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="top"> <div class="title">List Maker</div> <div class="clearfix"> <input id="add" type="text" placeholder="Press 'Return' to add the item to the list..."/> </div>
</div>
<div class="top-placeholder"></div>
<div class="container"> <div id="list-area"></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>

List Maker - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800);
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
* { box-sizing: border-box;
}
body { font-family: 'Open Sans', sans-serif;
}
.top { position: fixed; background: white; margin-left: 2.5%; height: 5rem; width: 95%;
}
.top-placeholder { width: 100%; height: 5rem;
}
.container { padding: 1rem;
}
.title { height: 2.25rem; line-height: 2.25rem; font-size: 1.5rem; text-align: center;
}
input[type="text"] { float: left; width: 100%; height: 2.25rem; border: 1px solid #d7d7d7; outline: none; margin-bottom: .5rem; padding-left: .5rem; padding-right: .5rem;
}
input[type="text"]:focus { border: 1px solid #a7a7a7; box-shadow: 0 1px 2px #c7c7c7;
}
.clear { float: left; background: white; width: 2rem; height: 2.25rem; line-height: 2.25rem; padding-left: .6rem; border: 1px solid #d7d7d7; outline: none; margin-right: .5rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.line-text { line-height: 2.5rem;
}

List Maker - Script Codes JS Codes

$('#add').keyup(function(e) { if(e.keyCode == '13') { addItem($('#add').val()); }
});
$(function() { $(document).on('click', '.clear', function() { $(this).parent().remove(); });
});
function addItem(str) { var item = '<div class="line"><div class="clear">X</div><div class="line-text">'; item = item.concat(str); item = item.concat('</div></div>'); $('#list-area').append(item); $('#add').val('');
}
List Maker - Script Codes
List Maker - Script Codes
Home Page Home
Developer Charlie Volpe
Username charlie-volpe
Uploaded November 08, 2022
Rating 3
Size 2,535 Kb
Views 14,168
Do you need developer help for List Maker?

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!

Charlie Volpe (charlie-volpe) Script Codes
Name
Draggable Node Based VPL Test
Podshare
Modal Window Test Animations
Responsive Flat Sublime Text Visualization
Simple Blackjack Game
Bouncing Ball
Galaxy S3 CSS Template
IPad CSS Template
Switch with Indicator Light
Grided Canvas Side-Scroller Game Engine
Create amazing Facebook ads 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!