<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="message--left">
<div class="message--left--header">FreeCodeCamp</div>
<div class="message--left--info">Thank You For An Amazing Year</div>
</div>
<div class="message--right">
<div class="message--right--header">Harvest Festival</div>
<div class="message--right--info">Event Zipline: Recipe Box</div>
</div>
<div class="box">
<input class="box__new--checkbox" type="checkbox" id="new"/>
<label class="box__new" for="new"></label>
<div class="box__selected">
<h1 class="box__selected--header">Recipe Name</h1>
<textarea class="box__selected--description" cols="45" disabled="disabled"> </textarea>
<div class="box__selected__options">
<div class="box__selected__options--back"> <a href="#" id="back">back</a></div>
<div class="box__selected__options--delete"> <a href="#" id="delete">delete</a></div>
</div>
</div>
<div class="box__select">
<h1 class="box__select--header">Recipe List</h1>
<input class="box__select__options--search" type="text" placeholder="Search Recipes"/>
<div class="box__select__options--empty">You haven't added any recipes yet!</div>
<ul class="box__select__options"></ul><a class="box__select--undelete" href="#">Undo Delete</a>
</div>
<div class="box__new__form">
<h1 class="box__new__form--header">New Recipe</h1>
<input class="box__new__form--name" id="recipe-name" type="text" placeholder="Recipe Name" maxlength="30"/>
<textarea class="box__new__form--directions" id="recipe-directions" rows="90" placeholder="Ingredients & Directions"></textarea>
<button class="box__new__form--save" id="save-recipe">Save</button>
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,800,300);
@import url(//fonts.googleapis.com/css?family=Fjalla+One);
/* Variables */
/* Functions */
/* Overrides */
body {
margin-top: 20px;
font-family: 'Open Sans', Arial, sans-serif;
background-color: #ffa726;
background-color: #f9b627;
background-image: -webkit-linear-gradient(-405deg, #f9b627 0%, #d06357 100%);
background-image: linear-gradient(135deg,#f9b627 0%, #d06357 100%);
background-repeat: no-repeat;
background-attachment: fixed;
}
/* Helpers */
.error {
border: 2px solid #c62828 !important;
}
/* Messages */
.message--left, .message--right {
opacity: 0;
position: absolute;
}
@media (min-width: 900px) {
.message--left, .message--right {
opacity: 1;
position: absolute;
top: 60px;
font-family: 'Fjalla One', Arial, sans-serif;
text-shadow: 0 -1px 0 #231000;
color: #893e00;
}
}
.message--left {
left: 15px;
}
.message--right {
right: 15px;
text-align: right;
}
.message--left--header, .message--right--header {
font-size: 4vw;
}
.message--left--info, .message--right--info {
font-size: 2vw;
}
/* Recipe box */
.box {
width: 400px;
height: 400px;
margin: 0 auto;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22), 0 14px 56px rgba(0, 0, 0, 0.25);
border-radius: 20px;
background-color: white;
position: relative;
}
.box__new--checkbox {
display: none;
}
.box__new {
width: 65px;
height: 65px;
border-radius: 50%;
position: absolute;
top: -15px;
left: -15px;
z-index: 9999;
background-color: #ef6c00;
font-size: 4em;
line-height: .9em;
text-align: center;
color: white;
-webkit-transition: -webkit-transform 0.5s, background-color 0.5s, box-shadow 0.5s;
-moz-transition: -moz-transform 0.5s, background-color 0.5s, box-shadow 0.5s;
transition: transform 0.5s, background-color 0.5s, box-shadow 0.5s;
}
.box__new:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
cursor: pointer;
}
.box__new:before {
content: '+';
position: relative;
}
.box__new--checkbox:checked + .box__new {
background-color: #c62828;
-webkit-transition: -webkit-transform 0.5s, background-color 0.5s, box-shadow 0.5s;
-moz-transition: -moz-transform 0.5s, background-color 0.5s, box-shadow 0.5s;
transition: transform 0.5s, background-color 0.5s, box-shadow 0.5s;
transform: rotate(45deg);
}
/* Select recipes */
.box__select {
text-align: center;
}
.box__select--header {
text-align: center;
padding-top: 10px;
font-size: 2em;
}
.box__select__options {
margin-top: -10px;
list-style: none;
text-align: left;
padding: 0;
box-sizing: border-box;
height: 240px;
overflow: auto;
}
.box__select__options--search {
width: 80%;
height: 30px;
padding: 2px 10px;
font-size: 1em;
border-radius: 10px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.box__select__options--search:focus {
outline: none;
border: 1px solid #ffa726;
}
.box__select__options--option {
line-height: 4em;
transition: background-color .2s;
padding-left: 30px;
padding-right: 30px;
}
.box__select__options--option:hover {
cursor: pointer;
background-color: #fff3e0;
}
.box__select__options--option:nth-child(n+2):before {
content: '';
display: block;
width: 100%;
height: 1px;
background-color: white;
background-image: -webkit-linear-gradient(left, white, #ffd08c, white);
background-image: linear-gradient(to right,white, #ffd08c, white);
}
.box__select--undelete {
position: absolute;
bottom: 10px;
right: 10px;
font-size: .7em;
color: black;
display: none;
}
/* New recipe */
.box__new--checkbox:not(:checked) ~ .box__new__form {
opacity: 0;
z-index: -1;
}
.box__new--checkbox:checked ~ .box__new__form {
opacity: 1;
z-index: 999;
}
.box__new__form {
padding: 0 40px;
transition: opacity .5s linear;
position: absolute;
background-color: white;
border-radius: 20px;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.box__new__form--header {
text-align: center;
font-size: 2em;
}
.box__new__form--name, .box__new__form--directions {
display: block;
width: 100%;
font-size: 1em;
padding: 10px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #ccc;
}
.box__new__form--name:focus, .box__new__form--directions:focus {
outline: none;
border: 1px solid #ffa726;
}
.box__new__form--name {
height: 30px;
}
.box__new__form--directions {
margin-top: 10px;
height: 200px;
resize: none;
}
.box__new__form--save {
display: block;
margin: 0 auto;
margin-top: 20px;
width: 200px;
height: 40px;
font-size: 1.4em;
background-color: #2c8e71;
color: white;
border: none;
border-radius: 10px;
-webkit-transition: box-shadow 0.5s;
-moz-transition: box-shadow 0.5s;
transition: box-shadow 0.5s;
}
.box__new__form--save:hover {
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
background-color: #32a180;
cursor: pointer;
}
.box__new__form--save:focus {
outline: none;
border: 4px solid #56caa8;
}
/* Selected recipe */
.box__selected {
box-sizing: border-box;
padding: 0;
position: absolute;
background-color: white;
border-radius: 20px;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
z-index: 20;
}
.box__selected--header {
font-size: 2em;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
}
.box__selected--description {
height: 60%;
overflow: auto;
display: block;
width: 100%;
font-size: 1em;
border: 0;
padding: 0;
resize: none;
background-color: white;
padding-left: 30px;
padding-right: 30px;
box-sizing: border-box;
}
.box__selected__options {
position: absolute;
bottom: 20px;
width: 100%;
box-sizing: border-box;
padding-left: 30px;
padding-right: 30px;
}
.box__selected__options--back, .box__selected__options--delete {
display: inline-block;
}
.box__selected__options--back a, .box__selected__options--back a:visited, .box__selected__options--delete a, .box__selected__options--delete a:visited {
color: black;
}
.box__selected__options--back {
float: left;
}
.box__selected__options--delete {
float: right;
}
(function() {
var recipes = {
selected: '',
deletedItem: {},
list: [],
load: function() {
var savedList = JSON.parse(localStorage.getItem('recipeList'));
if (savedList) {
this.list = savedList;
}
},
save: function(recipe) {
this.list.push(recipe);
localStorage.setItem('recipeList', JSON.stringify(this.list));
},
delete: function(date) {
this.list = this.list.filter(function(item) {
if (item.date === date) {
this.deletedItem = item;
}
return item.date !== date;
});
localStorage.setItem('recipeList', JSON.stringify(this.list));
populateList(this.list);
},
undelete: function() {
this.save(deletedItem);
this.deletedItem = {};
}
};
function saveRecipe() {
var name = $('#recipe-name').val().trim();
var directions = $('#recipe-directions').val().trim();
if (name === '' || directions === '') {
if (name === '') {
$('#recipe-name').addClass('error');
}
if (directions === '') {
$('#recipe-directions').addClass('error');
}
return false;
}
/* Remove error class is form was successfully submitted */
if ($('#recipe-name').hasClass('error')) {
$('#recipe-name').removeClass('error');
}
if ($('#recipe-directions').hasClass('error')) {
$('#recipe-directions').removeClass('error');
}
/* Remove helper text */
if($('.box__select__options--empty').length != 0) {
$('.box__select__options--empty').remove();
}
name = name.replace(/[^\w\s\-]/g, '');
var date = new Date().getTime();
var newRecipe = {
date: date,
name: name,
directions: directions
};
recipes.save(newRecipe);
$('#recipe-name').val('');
$('#recipe-directions').val('');
$('.box__new').click();
populateList(recipes.list);
}
function populateList(list) {
var li;
var listItems = [];
var ul = $('ul.box__select__options');
ul.empty();
list.forEach(function(recipe) {
li = '<li class="box__select__options--option">' + recipe.name + '</li>';
listItems.push(li);
});
ul.append(listItems.join(' '));
}
function showRecipe() {
// show the recipe
var idx = $(this).index();
var item = recipes.list[idx];
recipes.selected = item.date;
$('h1.box__selected--header').text(item.name);
$('.box__selected--description').text(item.directions);
$('.box__selected').css('visibility', 'visible');
}
function searchRecipes(query) {
// search by name
var results = [];
var query = $('.box__select__options--search').val().trim();
if (query === '') {
results = recipes.list;
} else {
var qRegEx = new RegExp(query, 'i');
results = recipes.list.filter(function(item) {
return qRegEx.test(item.name);
});
}
populateList(results);
}
function deleteItem() {
recipes.delete(recipes.selected);
$('.box__selected').css('visibility', 'hidden');
$('.box__select--undelete').css('display', 'inline');
}
function undeleteItem() {
recipes.undelete();
$('.box__select--undelete').css('display', 'none');
populateList(recipes.list);
}
function validate() {
if ($(this).hasClass('error')) {
$(this).removeClass('error');
}
}
$(document).ready(function() {
recipes.load();
if (recipes.list.length > 0) {
$('.box__select__options--empty').remove();
}
populateList(recipes.list);
$('#save-recipe').on('click', saveRecipe);
$('.box__select__options--search').on('input', searchRecipes);
$('#recipe-name, #recipe-directions').on('input', validate);
$('.box__selected__options--back').click(function() {
recipes.selected = '';
$('.box__selected').css('visibility', 'hidden');
});
$('ul.box__select__options').delegate('li', 'click', showRecipe);
$('#delete').click(deleteItem);
});
$('.box__select--undelete').click(undeleteItem);
})();
