Skip to content

Instantly share code, notes, and snippets.

@kevsersrca

kevsersrca/gist:209c74f40b07529e600ac48dc4020259

Created May 15, 2016 15:49
Show Gist options
  • Save kevsersrca/209c74f40b07529e600ac48dc4020259 to your computer and use it in GitHub Desktop.
Save kevsersrca/209c74f40b07529e600ac48dc4020259 to your computer and use it in GitHub Desktop.
Download ZIP
Gist11
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/yeti/bootstrap.min.css">
<style>
.panel-body
{
display: none;
}
</style>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search">
</div>
</form>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-2" >
<div class="content show-tooltip">
<div class="pull-right">
<a href="javascript:;" id="close">X</a>
</div>
<label>"Language"</label>
<hr>
<div class="content show-tooltip">
<a href="">Php</a>
</div>
<div class="content show-tooltip">
<a href="">C#</a>
</div>
<div class="content show-tooltip">
<a href="">Javascript</a>
</div>
</div>
<hr>
<div class="content show-tooltip">
<label>Title</label>
<hr>
<div class="content show-tooltip">
<a href="">Title1</a>
</div>
<div class="content show-tooltip">
<a href="">Title2</a>
</div>
<div class="content show-tooltip">
<a href="">Title3</a>
</div>
</div>
<hr>
<div class="content show-tooltip">
<label>Tag</label>
<hr>
<div class="content show-tooltip">
<a href="">echo</a>
</div>
<div class="content show-tooltip">
<a href="">php</a>
</div>
<div class="content show-tooltip">
<a href="">Javascript</a>
</div>
</div>
</div>
<div class="col-md-10">
<div class="panel-group content">
<div class="panel panel-default">
<div class="panel-heading">
<h1>Title</h1>
</div>
<div class="panel-body">
<p><b>Short Explanation:</b> Explanation</p>
<p><b>Code:</b>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti totam porro, incidunt dolore itaque soluta voluptates sunt delectus beatae, enim eaque ea hic magni odit necessitatibus consequatur, qui sed reiciendis.</p>
<p><b></b></p>
<p><b>optional explanation:</b>All it does post a '1234' to screen</p>
<p><b>language:</b>Php</p>
<p><b>tags:</b>echo,php</p>
</div>
</div>
</div>
</div>
<div class="pull-right" >
<button type="button" class="btn btn-default" id="add-form-open"><i class="glyphicon glyphicon-plus"></i>Add</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
var data=[
{
"title":"Post #1",
"pre_explanation":"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quo rem optio excepturi deleniti porro voluptatem asperiores alias in aliquid velit omnis, ratione, eligendi. Ab doloribus, cumque et nam ipsam.",
"code":"<?php echo 1234; ?>",
"optional_explanation":"All it does post a '1234' to screen ",
"language":"php",
"tags":["echo","php"]
},
{
"title":"Post #1",
"pre_explanation":"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quo rem optio excepturi deleniti porro voluptatem asperiores alias in aliquid velit omnis, ratione, eligendi. Ab doloribus, cumque et nam ipsam.",
"code":"<?php echo 1234; ?>",
"optional_explanation":"All it does post a '1234' to screen ",
"language":"php",
"tags":["echo","php"]
}, {
"title":"Post #1",
"pre_explanation":"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quo rem optio excepturi deleniti porro voluptatem asperiores alias in aliquid velit omnis, ratione, eligendi. Ab doloribus, cumque et nam ipsam.",
"code":"<?php echo 1234; ?>",
"optional_explanation":"All it does post a '1234' to screen ",
"language":"php",
"tags":["echo","php"]
},
{
"title":"Post #1",
"pre_explanation":"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quo rem optio excepturi deleniti porro voluptatem asperiores alias in aliquid velit omnis, ratione, eligendi. Ab doloribus, cumque et nam ipsam.",
"code":"<?php echo 1234; ?>",
"optional_explanation":"All it does post a '1234' to screen ",
"language":"php",
"tags":["echo","php"]
},
{
"title":"Post #1",
"pre_explanation":"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quo rem optio excepturi deleniti porro voluptatem asperiores alias in aliquid velit omnis, ratione, eligendi. Ab doloribus, cumque et nam ipsam.",
"code":"<?php echo 1234; ?>",
"optional_explanation":"All it does post a '1234' to screen ",
"language":"php",
"tags":["echo","php"]
},
{
"title":"Post #1",
"pre_explanation":"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quo rem optio excepturi deleniti porro voluptatem asperiores alias in aliquid velit omnis, ratione, eligendi. Ab doloribus, cumque et nam ipsam.",
"code":"<?php echo 1234; ?>",
"optional_explanation":"All it does post a '1234' to screen ",
"language":"php",
"tags":["echo","php"]
}
]
var data = JSON.parse(localStorage.getItem('data'));
if(data == undefined)
{
data = [];
}
//alert(data);
$('.content').html('');
alert(data);
$.each(data, function(index, val) {
$('.content').append($('<div class="panel panel-default">'+
'<div class="panel-heading">'+
'<h3 class="panel-title">'+val.title+'</h3>'+
'</div>'+
'<div class="panel-body">'+
'<p><b>Short Explanation:</b>'+ val.shortexp + '</p>' +
'<p><b>Code:</b><pre>'+ val.code + '</pre></p>'+
'<p><b>Optional Explanation:</b><pre>'+ val.optional + '</pre></p>' +
'<p><b>Language:</b><pre>'+ val.language + '</pre></p>' +
'<h3>Comments</h3>'+
'<div class="form-group"><label for="">New Comment</label><textarea name="" id="" cols="30" rows="10" class="form-control"></textarea></div>'+
'<div class="form-group"><button class="btn btn-primary cta_add_comment">Add Comment</button></div>'+
'</div>'+
'</div>'));
});
$(document).ready(function(){
$(".col-md-2").hide();
$(".col-md-10").addClass("col-md-12");
$("#search").click(function(){
$(".col-md-2").show();
$(".col-md-12").addClass("col-md-10");
})
$("#close").click(function(){
$(".col-md-2").hide();
$(".col-md-10").addClass("col-md-12");
})
});
$(document).ready(function(){
$(".content").on('click','.panel-heading',function(){
$(".panel-body").slideUp("slow");
var el = $(this).parent(".panel-default").children(".panel-body");
el.css('display') == 'block' ? el.slideUp('slow') : el.slideDown('slow')
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment