Camping Checklist

Developer
Tim Normington
Size
2,671 Kb
Views
8,096
  1. Camping Checklist Previews
  2. Camping Checklist HTML Codes
  3. Camping Checklist CSS Codes
  4. Camping Checklist JS Codes

How do I make an camping checklist?

What is a camping checklist? How do you make a camping checklist? This script and codes were developed by Tim Normington on 05 December 2022, Monday.

Camping Checklist Previews
IQ Test

Camping Checklist - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Camping Checklist</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Arimo|Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 id="title">Camping Checklist</h1>
<div class=container> <div class="equipment list"> <h1>Equipment</h1> <ul> <li>Tent<i class="fa fa-times-circle"></i></li> <li>Chairs<i class="fa fa-times-circle"></i></li> <li>Hammock<i class="fa fa-times-circle"></i></li> <li>Bikes<i class="fa fa-times-circle"></i></li> <li>Blankets<i class="fa fa-times-circle"></i></li> <li>Pillows<i class="fa fa-times-circle"></i></li> <input type="text" placeholder="Add More" class="add-more"> </input> <div class="press-enter"> <p>Press enter to add</p> </div> </ul> </div> <div class="kitchen list"> <h1>Kitchen</h1> <ul> <li>Omelet Pan</li> <li>Utensils</li> <li>Stove</li> <li>Trash Bags</li> <li>Paper Towels</li> <li>Toilet Paper</li> <input type="text" placeholder="Add More" class="add-more"> </input> <div class="press-enter"> <p>Press enter to add</p> </div> </ul> </div> <div class="food list"> <h1>Food</h1> <ul> <li>Smores</li> <li>Eggs</li> <li>Water</li> <input type="text" placeholder="Add More" class="add-more"> </input> <div class="press-enter"> <p>Press enter to add</p> </div> </ul> </div> <div class="clothes list"> <h1>Clothing</h1> <ul> <li>Swimsuit</li> <li>Socks</li> <li>Towel</li> <li>Underwear</li> <input type="text" placeholder="Add More" class="add-more"> </input> <div class="press-enter"> <p>Press enter to add</p> </div> </ul> </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>

Camping Checklist - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
#title { text-align: center; font-family: 'Lobster', cursive; font-size: 56px; padding-top: 20px;
}
.container { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px;
}
.list { width: 175px;
}
.list h1 { font-family: 'Lobster', cursive; margin-bottom: 10px; text-align: center;
}
.list ul { font-family: 'Arimo', sans-serif;
}
.list ul li { list-style-type: none; padding: 0 5px 0 0;
}
.list ul li i { float: right; color: #c0392b; visibility: hidden; cursor: pointer;
}
input[type="text"] { font-size: 16px; font-family: 'Arimo', sans-serif; max-width: 170px;
}
input::-webkit-input-placeholder { color: #bdc3c7;
}
.press-enter { font-size: 12px; text-align: center; padding: 3px 0px; border-radius: 0px 0px 5px 5px; background-color: rgba(142, 251, 147, 0.58); visibility: hidden;
}

Camping Checklist - Script Codes JS Codes

$(document).ready(function() { $('.list ul li').hover(function() { $(this).find('i').css('visibility', 'visible') }, function() { $(this).find('i').css('visibility', 'hidden') }); $('i').click(function() { $(this).parent().remove() }); $('.add-more').focus(function() { $(this).next().css('visibility', 'visible') $('.add-more').bind("enterKey",function(e){ var value = $('.add-more').val() $(this).parent().append('<li>' + value + '<i class="fa fa-times-circle"></i>' + '</li>') }); $('.add-more').keyup(function(e){ if(e.keyCode == 13) { $(this).trigger("enterKey"); } }); }); $('.add-more').focusout(function() { $(this).next().css('visibility', 'hidden') });
});
Camping Checklist - Script Codes
Camping Checklist - Script Codes
Home Page Home
Developer Tim Normington
Username tnormington
Uploaded December 05, 2022
Rating 3
Size 2,671 Kb
Views 8,096
Do you need developer help for Camping Checklist?

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!

Tim Normington (tnormington) Script Codes
Name
Mobile Dropdown Top Nav
Social Media Sidebar
JQuery Social Media Ribbon Links
Modular Sassy Flex Navigation
Tri-column slanted hero with hover effect
Online Banking Interface
Color Picker
Twitch Notification Concept
Diagonal Mega Menu
Loading Animation
Create amazing video scripts 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!