Shopping List Example

Developer
Matt Shull
Size
1,951 Kb
Views
34,408
  1. Shopping List Example Previews
  2. Shopping List Example HTML Codes
  3. Shopping List Example CSS Codes
  4. Shopping List Example JS Codes

How do I make an shopping list example?

What is a shopping list example? How do you make a shopping list example? This script and codes were developed by Matt Shull on 28 September 2022, Wednesday.

Shopping List Example Previews
IQ Test

Shopping List Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shopping List Example</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input id="item"><button id="submit">Submit</button>
<br><br>
<button id="clear">Clear</button>
<br><br>
<ul id="list"> <li>Item 1 <button class="remove">Remove</button></li> <li>Item 2 <button class="remove">Remove</button></li> <li>Item 3 <button class="remove">Remove</button></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Shopping List Example - Script Codes CSS Codes

#list { list-style:none; padding:0;
}
#list > li { cursor:pointer; text-align:center; font-size:18px; padding:5px 0px;
}
.checked { background-color:gray; color:white;
}

Shopping List Example - Script Codes JS Codes

$("#submit").on("click", function() { var item = $("#item").val(); $("#list").prepend("<li>"+item+" <button class='remove'>Remove</button></li>");
});
$("#list").on("click", "li", function() { $(this).toggleClass("checked");
});
$("#list").on("click", ".remove", function() { $(this).closest("li").remove();
});
$("#clear").on("click", function() { $(".checked").remove();
});
$("#item").keydown(function(e) { if (e.which == 13) { var item = $("#item").val();	$("#list").prepend("<li>"+item+" <button class='remove'>Remove</button></li>"); }
});
Shopping List Example - Script Codes
Shopping List Example - Script Codes
Home Page Home
Developer Matt Shull
Username derekshull
Uploaded September 28, 2022
Rating 3
Size 1,951 Kb
Views 34,408
Do you need developer help for Shopping List Example?

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!

Matt Shull (derekshull) Script Codes
Name
SPP Mainpage
About Me Page
Tri-Cities Interior Wireframe
Angular Responsive Select Box
Inline vs Inline Block vs Block
CSS Only Modal
List Animation
AngularJS Dropdown Menu
Shopping List App
CSS Only Dropdown Menus
Create amazing SEO content 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!