KimiEatsCode
9/29/2015 - 12:16 AM
Gratitude list - In Progress
Gratitude list - In Progress
<html lang="en">
<head>
<meta charset="UTF-8">
<!--facebook meta-->
<meta property="og:url" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="I am grateful for..." />
<meta property="og:description" content="a few of my grateful things" />
<meta property="og:image" content="" />
<title>Gradtitude List</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="js/custom.js"></script>
</head>
<body>
<div class="page-header">
<h1>Gratitude List<br><small>Share the love</small></h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="left-side-form column col-md-6">
<form action="">
<!--itemInput is the field user inputs item to list-->
<input id="itemInput" class="form-control" type="text" placeholder="I'm Thankful for...">
<!-- <button class=" btn btn-default btn-warning submitBtn"> Thank You</button>-->
</form>
</div>
<!--form div-->
<div class="right-side-list column col-sm-2 col-md-6">
<ul id="itemList">
</ul>
<div>
<!--end right side-->
</div>
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="link"></div>
</div>
<!--container div-->
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>$(document).ready(function() {
//user to be able to input text and save it
$('form').submit(function(event) {
event.preventDefault(); //prevent default action of submit which submits data, we want to keep data
//user text should not be empty
var newItem = $('#itemInput').val().trim();
if (newItem != "") {
$('#itemInput').val() === 0;
//if newItem is NOT blank, then user text should be added to list with delete button
$('#itemList').append('<li class="deleteButton glyphicon glyphicon-heart"> ' + newItem + ' <span class="glyphicon glyphicon-remove-sign font-1x"></span></li>')
} else {
alert('Your empty');
}
});
//delete button should remove item
$('#itemList').on('click', '.deleteButton', function() {
$(this).closest('li').remove();
});
//dbl click should toggle check off item
$('#itemList').on('dblclick', 'li', function() {
$(this).toggleClass('checked');
});
//on submit not need to reset form just make #iitemInput which is an input text field
$('form').submit(function() {
$('#itemInput').val('');
});
$(".reset").click(function() {
$(this).closest('form').find("input[type=text], textarea").val("");
});
});<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
.container-fluid {
padding: 0 10%;
}
.form-control {
padding: 24px 12px!important;
font-size:1.3em;
}
.font-1x{font-size: 1.2em;}
.font-2x{font-size: 2em;}
.font-3x{font-size: 3em;}
.page-header {
text-align: center;
}
#itemList {
min-width:200px;
width:500px;
}
.right-side-list {
border-left: 2px solid #ccc;
min-height: 200px;
}
li.glyphicon-heart {
float: left;
clear: both;
line-height: 2em;
font-size: 1.2em;
}
li.deleteButton.glyphicon.glyphicon-heart {
min-width: 70%;
}
span.glyphicon-remove-sign{
float: right;
}
@media screen and (max-width:900px) {
.right-column-list {
text-align:center;
}
li.glyphicon-heart {
text-align:center;
}
.right-side-list {
border:none;
}
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />