HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
#app
// Variables
//
$color-primary: #009688;
$color-primary-50: #E0F2F1;
$color-secondary: #00BFA5;
$color-white: #fff;
$color-warning: #F44336;
$color-font: #333;
$border-width: 5px;
$breakpoint-md: 768px;
$font-stack: "roboto", "Helvetica Neue", Helvetica, Arial;
// Reset
//
* {
box-sizing: border-box;
transition: all .1s ease-in;
}
//Typography
//
body{
font: 16px $font-stack;
color: $color-font;
}
h1, h2, h3 {
font-weight: 400;
}
ol {
padding-left: 1rem;
}
li {
margin-bottom: 1rem;
}
// Buttons
//
button,
input[type=submit] {
border: none;
border-radius: 2px;
display: inline-block;
height: 36px;
line-height: 36px;
margin-right: .5rem;
outline: 0;
padding: 0 2rem;
text-transform: uppercase;
vertical-align: middle;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
will-change: opacity, transform;
transition: all .3s ease-out;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
background: $color-secondary;
&:hover {
background: lighten($color-secondary, 5%)
}
}
.btn-icon {
margin-right: .5rem;
}
.btn-primary {
color: $color-white;
background: $color-primary;
&:hover {
background: lighten($color-primary, 5% );
}
}
.btn-warning {
color: $color-white;
background: $color-warning;
&:hover {
background: lighten($color-warning, 5%)
}
}
// Forms
//
input[type=text],
textarea {
font: 1rem $font-stack;
background-color: $color-white;
border: none;
border-bottom: 1px solid #9e9e9e;
border-radius: 0;
outline: none;
height: 3rem;
width: 100%;
margin: 0 0 15px 0;
padding: 0;
box-shadow: none;
box-sizing: content-box;
transition: all 0.3s;
&:focus {
border-bottom: 1px solid $color-primary;
box-shadow: 0 1px 0 0 #26a69a;
}
}
textarea {
margin-top: .7rem;
height: 8rem;
}
label {
color: #9e9e9e;
font-size: .8rem;
}
.form-bg {
position: absolute;
width: 100%;
background: #fff;
left: 0;
/* box 10
* form-bg 15
*/
z-index: 15;
border-bottom: $border-width solid $color-primary;
}
.form-bg-overlay {
left: 0;
position: fixed;
width: 100%;
height: 100%;
overflow-y: auto;
top: 0;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAHklEQVQ4T2NkYGCoZ6AAMI4awDAaBgyjYcAwLMIAAClPCAHRrlQFAAAAAElFTkSuQmCC);
background: rgba(0, 0, 0, 0.5);
/* box 10
* form-bg 15
*/
z-index: 15;
}
.form {
margin: 0 auto;
max-width: 800px;
padding: 2em;
width: 100%;
color: $color-font;
}
.form__title {
color: $color-font;
margin-top: 0;
}
// Page
//
.page__header {
background: $color-primary;
color: $color-white;
padding: 1em;
margin-bottom: 1em;
}
.page__footer {
@extend .page__header;
margin-bottom: 0;
}
// Tile
//
.tile-container {
display: flex;
flex-flow: row wrap;
}
.tile {
cursor: pointer;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
border-radius: 2px;
width: 100%;
margin-bottom: 1rem;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
&:hover {
box-shadow: 0 4px 5px 0 rgba(0,0,0,0.16),0 4px 10px 0 rgba(0,0,0,0.12);
}
}
@media (min-width: $breakpoint-md){
.tile {
float: left;
margin-left: 5%;
width: 29.99999%;
&:nth-of-type(3n + 1){
margin-left: 0;
}
}
}
.tile__header {
@extend .page__header
}
.tile__title {
margin: 0;
}
.tile__footer {
border-top: 1px solid rgba(160,160,160,0.2);
padding: .5rem;
}
.tile__hero {
// important added to override styles set inline
background-size: 100% auto!important;
background-position: center center!important;
background-color: $color-primary;
height: 150px;
}
// Box
//
.box-bg-overlay {
position: fixed;
width: 100%;
height: 100%;
overflow-y: auto;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAHklEQVQ4T2NkYGCoZ6AAMI4awDAaBgyjYcAwLMIAAClPCAHRrlQFAAAAAElFTkSuQmCC);
background: rgba(0, 0, 0, 0.5);
/* box 10
* form-bg 15
*/
z-index: 10;
}
.box {
max-width: 800px;
width: 100%;
margin: 0 auto;
background: $color-white;
/* box 10
* form-bg 15
*/
z-index: 10;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.box__instructions,
.box__ingredients,
.box__title {
padding: .5rem;
border: $border-width solid transparent;
&[contenteditable=true] {
background: $color-primary-50;
color: $color-font;
&:focus,
&:active {
border-color: $color-primary;
outline: none;
}
}
}
.box__title {
display: inline-block;
margin: 0;
}
.box__header {
@extend .page__header
}
.box__main {
padding: 1em;
}
.box__img {
width: 100%;
height: auto;
}
.box__footer {
@extend .page__header;
margin-bottom: 0;
}
.box__subheading {
margin-top: 0;
}
.zmdi-close {
cursor: pointer;
}
// Connect
//
.connect-list {
padding: 0;
}
.connect-list__item {
display: inline-block;
margin-right: 1rem;
}
.connect-list__link {
color: $color-white;
&:hover {
color: $color-warning;
}
}
// Grid
//
$container-width: 1200px;
$grid-breakpoint: 800px;
$grid-margin: 4%;
$grid-number: 12;
.row:before,
.row:after,
.clearfix:after {
content: " ";
display: table;
}
.row,
.container {
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.container {
max-width: $container-width;
margin: 0 auto;
}
.column,
.column-mobile {
width: 100%;
float: left;
box-sizing: border-box;
}
@media (min-width: 560px) {
.container {
width: 95%;
}
}
@media (min-width: $grid-breakpoint) {
.column {
margin-left: $grid-margin;
}
.column:first-of-type {
margin-left: 0;
}
$column-width: ( 100 - ( $grid-margin * $grid-number - 1 ) ) / $grid-number ;
$column-numbers: (one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve);
@each $column-number in $column-numbers {
$i: index($column-numbers, $column-number);
.#{$column-number} {
width: $column-width + ( ($column-width + $grid-margin) * ( $i - 1 ) )
}
}
}
// Utilities
//
.flex-container {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
.pull-right {
float: right;
}
.text-color-warning{
color: $color-warning;
}
class Layout extends React.Component {
constructor() {
super();
this.state = {
data: []
};
}
render() {
return (
<BoxesContainer />
);
}
}
class Footer extends React.Component {
render() {
return (
<footer className="page__footer">
<div className="container">
<div className="column four">
<h2>Connect</h2>
<ul className="connect-list">
<li className="connect-list__item">
<a
className="connect-list__link"
href="https://uk.linkedin.com/in/edd-yerburgh-74aa5768"
target="newwindow"
>
<i className="zmdi zmdi-linkedin zmdi-hc-5x" />
</a>
</li>
<li className="connect-list__item">
<a
className="connect-list__link"
href="https://github.com/eddyerburgh"
target="newwindow"
>
<i className="zmdi zmdi-github-alt zmdi-hc-5x" />
</a>
</li>
<li className="connect-list__item">
<a
className="connect-list__link"
href="https://codepen.io/eddyerburgh/"
target="newwindow"
>
<i className="zmdi zmdi-codepen zmdi-hc-5x" />
</a>
</li>
</ul>
</div>
</div>
</footer>
);
}
}
class BoxesContainer extends React.Component {
constructor() {
super();
const storedRecipe = localStorage.getItem('recipesFCC');
var data;
if ( storedRecipe ) {
data = JSON.parse(storedRecipe);
} else {
data = [
{
key: 0,
title: "Salsa verde",
ingredients: "small pack tarragon\n\n2 small packs flat-leaf parsley\n\n30g wild garlic (or 2 garlic cloves)\n\n 3 tsp Dijon mustard\n\n 40g small capers, drained, rinsed and roughly chopped\n\n 200ml extra virgin olive oil\n\n 2 tbsp sherry vinegar",
instructions: "1. Chop the herbs and garlic with 1 tsp sea salt until very fine. Add the mustard and capers , and combine.\n2. Transfer the mixture to a bowl and stir in the olive oil. Add the vinegar, little by little, stirring and tasting as you go – trust your palate!",
img: "http://www.bbcgoodfood.com/sites/default/files/styles/recipe/public/recipe/recipe-image/2016/04/salsa-verde-2.jpg?itok=R9-68UMh"
},
{
key: 1,
title: "Maple-mustard pulled pork",
ingredients: "200g sea salt\n\n300g light muscovado sugar\n\n2kg/4lb 8oz piece pork shoulder\n\n100ml maple syrup\n\n100g wholegrain mustard\n\n2 tbsp English mustard powder\n\n",
instructions:"1. Mix the sea salt and 200g of the sugar in a large food bag, add the pork and coat it well. (If you don’t have a bag, rub over the pork in a dish and cover with cling film.) Leave in the fridge overnight.\n\n2. The next day, remove the pork and wipe down the meat with kitchen paper. Heat oven to 140C/120C fan/gas 1. Mix the remaining sugar, the maple syrup, mustards and some ground pepper. Rub half the mixture over the pork and sit it on a rack in a roasting tin. Roast for 6 hrs.\n\n3. Spoon the remaining maple mixture over the pork and roast for 1 hr more.\n\n4. Rest the meat for 30 mins on a plate loosely covered with foil. To serve, tear the pork into big fat chunks and, after skimming the surface, spoon over any juices from the tin.",
img:"http://www.bbcgoodfood.com/sites/default/files/styles/recipe/public/user-collections/my-colelction-image/2015/12/recipe-image-legacy-id--1119469_10.jpg?itok=2GIQyKfz"
},
{
key: 2,
title: "Salmon & spinach with tartare cream",
ingredients: "1 tsp sunflower or vegetable oil\n\n 2 skinless salmon fillet\n\n 250g bag spinach\n\n 2 tbsp reduced-fat crème fraîche\n\njuice ½ lemon\n\n 1 tsp caper, \n\n 2 tbsp flat-leaf parsley, chopped\n\nlemon wedges, to serve",
instructions: "1. Heat the oil in a pan, season the salmon on both sides, then fry for 4 mins each side until golden and the flesh flakes easily. Leave to rest on a plate while you cook the spinach.\n\n2. Tip the leaves into the hot pan, season well, then cover and leave to wilt for 1 min, stirring once or twice. Spoon the spinach onto plates, then top with the salmon. Gently heat the crème fraîche in the pan with a squeeze of the lemon juice, the capers and parsley, then season to taste. Be careful not to let it boil. Spoon the sauce over the fish, then serve with lemon wedges.",
img: "http://www.bbcgoodfood.com/sites/default/files/styles/recipe/public/user-collections/my-colelction-image/2015/12/recipe-image-legacy-id--52867_12.jpg?itok=pnLXWqFK"
},
{
key: 3,
title: "Spicy black bean tacos",
ingredients: "1 tbsp vegetable oil\n\n3 garlic cloves, chopped\n\n3 x 400g cans black beans, drained and rinsed\n\n3 tbsp cider vinegar\n\n1 ½ tbsp honey\n\n1 ½ tbsp smoked paprika\n\n1 ½ tbsp ground cumin\n\n1 small garlic clove\n\n2 tbsp roughly chopped coriander\n\n1 green chilli, sliced\n\n2 avocados, halved and stoned\n\njuice 1 lime\n\n110g pack pomegranate seeds\n\n1 green chilli, finely diced\n\n1 small white onion, finely diced\n\nsmall handful fresh coriander, chopped",
instructions: "1. In a large frying pan, heat the oil and add the garlic. Fry until golden, then add the beans. Pour in the cider vinegar, honey and spices along with 1 tsp or more of salt, to taste. Cook until warmed through, crushing gently with the back of your wooden spoon, then set aside.\n\n2. The best way to make the guacamole is with a large stone pestle and mortar, but you can use a medium bowl and a flat-ended rolling pin instead. Crush the garlic, coriander and chilli into a rough paste. Scoop in the avocado with a little salt and crush roughly – you want it chunky, not smooth. Squeeze in the lime juice and set aside.\n\n3. Mix the salsa ingredients in a small bowl. Heat a griddle pan or steamer and quickly griddle the tortillas or steam a stack of them to warm up. Reheat the bean mixture.\n\n4. To serve, put 1-2 heaped tbsp of beans on a tortilla. Top with a big spoonful of guacamole and some salsa, hot sauce and a dollop of soured cream or yogurt.",
img: "http://www.bbcgoodfood.com/sites/default/files/styles/recipe/public/recipe/recipe-image/2016/05/spicy-black-bean-tacos.jpg?itok=RTBXRL7L"
}
]
}
this.state = {
data,
counter: 4,
// The index of which recipe to populate box with
currIndex: 0,
showBox: false
};
}
/* Function adds new recipe
* @params [String] title : new recipe title
* @return [String] ingredients : new recipe ingredients
*/
addRecipe(title, ingredients, instructions, img) {
const data = this.state.data,
newCounter = this.state.counter + 1;
this.setState({counter: newCounter});
const newRecipe = {
key: this.state.counter,
title: title,
ingredients: ingredients,
instructions: instructions,
}
if ( img ) {
newRecipe.img = img;
}
this.state.data.push(newRecipe);
this.forceUpdate();
}
/* Function returns index ofobject in array using key
* @params [Number] key : the key of object
* @return [Number] index : the index of object in state data
* array
*/
getIndex(key) {
var i = this.state.data.findIndex((element)=>{
if (element.key === key) { return true} })
return i;
}
/* Function updates data in this.state and re renders components
* @params [Number] key : the key of object
* [String] title : title data
* [String] ingredients : ingredients data
* @return [Number] index : the index of object in state data
* array
*/
updateRecipe(key, title, ingredients, instructions, img) {
const data = this.state.data;
var i = this.getIndex(key);
this.state.data[i].title = title;
this.state.data[i].ingredients = ingredients;
this.state.data[i].instructions = instructions;
this.state.data[i].img = img;
this.forceUpdate();
this.saveToLocal();
}
deleteRecipe(key){
var i = this.getIndex(key);
this.state.data.splice(i, 1);
this.forceUpdate();
this.closeBox();
this.saveToLocal();
}
saveToLocal() {
localStorage.setItem('recipesFCC', JSON.stringify(this.state.data));
}
closeBox() {
this.setState({showBox:false})
}
showBox(key) {
const index = this.getIndex(key);
this.setState({
showBox: true,
currIndex: index
});
}
render() {
var box;
if (this.state.showBox) {
box = <Box
data={this.state.data[this.state.currIndex]}
update={this.updateRecipe.bind(this)}
delete={this.deleteRecipe.bind(this)}
close={this.closeBox.bind(this)}
/>
}
return (
<div>
{box}
<HeaderHeader
add={this.addRecipe.bind(this)}
/>
<Index
data={this.state.data}
show={this.showBox.bind(this)}
/>
<Footer />
</div>
);
}
}
class Tile extends React.Component {
handleClick() {
console.log(this.props.data.key)
this.props.show(this.props.data.key);
}
render() {
return (
<div
className="tile"
onClick={this.handleClick.bind(this)}
>
<TileMain
title = {this.props.data.title}
img = {this.props.data.img}
/>
<TileFooter
/>
</div>
);
}
}
class TileMain extends React.Component {
render() {
var heroDiv;
if (this.props.img) {
heroDiv = <div
className="tile__hero"
style={{
background: "url(" + this.props.img + ")",
backgroundSize: "100% auto",
backgroundPosition: "center center"
}}
/>
} else {
heroDiv = <div
className="tile__hero"
/>
}
return (
<main
className="tile__main"
>
{heroDiv}
<header className="tile__header">
<h2 className="tile__title"> {this.props.title} </h2>
</header>
</main>
);
}
}
class Index extends React.Component {
render() {
const data = this.props.data,
tileNodes = data.map( (data) => {
return (
<Tile
show={this.props.show}
data={data}
/>
);
});
return (
<div className="container">
<main className="tile-container">
{tileNodes}
</main>
</div>
);
}
}
class TileHeader extends React.Component {
render() {
return (
<header
className="tile__header"
>
{this.props.title}
</header>
);
}
}
class TileFooter extends React.Component {
render() {
return (
<footer className="tile__footer">
<button className="btn-primary">
<i className="zmdi zmdi-open-in-new zmdi-hc-lg btn-icon" /> open recipe
</button>
</footer>
);
}
}
class HeaderHeader extends React.Component {
constructor() {
super();
this.state = {
isHidden: true
};
}
toggleHidden() {
if ( this.state.isHidden ) {
this.setState({isHidden: false})
} else {
this.setState({isHidden: true})
}
}
render() {
return (
<header className="page__header">
<div className="container flex-container">
<h1>Recipe Box</h1>
<AddButton
toggleHidden={this.toggleHidden.bind(this)}
/>
</div>
{!this.state.isHidden && <AddRecipe add={this.props.add} toggleHidden={this.toggleHidden.bind(this)}/>}
</header>
);
}
}
class AddRecipe extends React.Component {
constructor() {
super();
this.state = {
error: false
}
}
handleTitleChange(e) {
this.setState({title: e.target.value})
}
handleImageChange(e) {
this.setState({img: e.target.value})
}
handleIngredientsChange(e) {
this.setState({ingredients: e.target.value})
}
handleInstructionsChange(e) {
this.setState({instructions: e.target.value})
}
handleSubmit(e) {
e.preventDefault();
if ( !this.state.title || !this.state.ingredients || !this.state.instructions ) {
this.error();
return;
}
this.props.add(
this.state.title,
this.state.ingredients,
this.state.instructions,
this.state.img
)
this.props.toggleHidden();
}
error(){
this.setState({error: true});
}
/* closes form when overlay is clicked
*/
handleClick(e) {
const formBg = document.querySelector(".form-bg");
const isClickInside = formBg.contains(e.target);
if (!isClickInside) {
//the click was outside the specifiedElement, do something
this.props.toggleHidden();
}
}
render() {
var error;
if ( this.state.error ) {
error = <span className="text-color-warning">
You must complete all fields marked as required
</span>
}
return (
<div
className="form-bg-overlay"
onClick={this.handleClick.bind(this)}
>
<div className="form-bg">
<form
className="form"
onSubmit={this.handleSubmit.bind(this)}
>
<i
className = "zmdi zmdi-close zmdi-hc-2x pull-right"
onClick = {this.props.toggleHidden}
/>
<h2 className="form__title">Add Recipe</h2>
<label for="recipeName">Recipe name *</label>
<input
id = "recipeName"
type="text"
onChange={this.handleTitleChange.bind(this)}
/>
<label for="recipeName">Ingredients *</label>
<textarea
id = "ingredients"
onChange={this.handleIngredientsChange.bind(this)}
/>
<label for="ingredients">Instructions *</label>
<textarea
onChange={this.handleInstructionsChange.bind(this)}
/>
<label for="imageUrl">Image URL (optional)</label>
<input
id = "imageUrl"
type="text"
onChange={this.handleImageChange.bind(this)}
/>
<input
type="submit"
value="add recipe"
className="btn-primary"
/>
{error}
</form>
</div>
</div>
);
}
}
class AddButton extends React.Component {
render() {
return (
<button
className="action pull-right"
onClick={this.props.toggleHidden}
>
Add recipe
</button>
);
}
}
class Main extends React.Component {
handleChangeImg(e) {
this.props.update({img: e.target.value});
}
handleChangeInstructions(e) {
// Change ingredients to html of editable elements
const re = /(?:\r\n|\r|\n)/g;
const str = (toMarkdown(e.target.innerHTML));
this.props.update({instructions: str});
}
handleChangeIngredients(e) {
// Change ingredients to html of editable elements
const re = /(?:\r\n|\r|\n)/g;
const str = e.target.innerText.replace(re, '\n\n');
this.props.update({ingredients: str});
}
rawMarkup(text) {
var rawMarkup = marked(text);
return {__html: rawMarkup };
}
render() {
const editable = this.props.editable;
const editImg = <input
type="text"
onChange={this.handleChangeImg.bind(this)}
value={this.props.img}
/>
return (
<main
className="box__main"
>
<div className="row">
<div className="column six">
<h3 className="box__subheading">Ingredients</h3>
<p
className="box__ingredients"
contentEditable={editable ? true : false}
onBlur={this.handleChangeIngredients.bind(this)}
dangerouslySetInnerHTML={this.rawMarkup(this.props.ingredients)}
/>
</div>
<div className="column six">
<img
src={this.props.img}
className="box__img"
/>
{editable && editImg}
</div>
</div>
<h3>Instructions</h3>
<p
className="box__instructions"
contentEditable={editable ? true : false}
onBlur={this.handleChangeInstructions.bind(this)}
dangerouslySetInnerHTML={this.rawMarkup(this.props.instructions)}
/>
</main>
);
}
}
class Header extends React.Component {
handleChange(e) {
// Change title to html of editable elements
this.props.update({title: e.target.innerText});
console.log(this.props.title)
}
render() {
return (
<header
className="box__header"
>
<h2
className="box__title"
contentEditable = {this.props.editable ? true : false}
onKeyPress = {this.handleChange.bind(this)}
>
{this.props.title}
</h2>
<i
className = "zmdi zmdi-close zmdi-hc-2x pull-right"
onClick = {this.props.close}
/>
</header>
);
}
}
class BoxFooter extends React.Component {
render() {
return (
<footer className="box__footer">
<button
className="btn-warning"
onClick={this.props.delete}
>
<i className="zmdi zmdi-delete zmdi-hc-lg btn-icon"/> Delete
</button>
<button
onClick={this.props.toggleEdit}
>
<i className="zmdi zmdi-edit zmdi-hc-lg btn-icon"/> Edit
</button>
</footer>
);
}
}
class Box extends React.Component {
constructor() {
super();
this.state = {
index: true,
editable: false,
}
}
deleteRecipe() {
console.log(this.props)
this.props.delete(this.props.data.key)
}
/* closes form when overlay is clicked
*/
handleClick(e) {
const formBg = document.querySelector(".box");
const isClickInside = formBg.contains(e.target);
if (!isClickInside) {
//the click was outside the specifiedElement, do something
this.props.close();
}
}
updateRecipe({
key = this.props.data.key,
title = this.props.data.title,
ingredients = this.props.data.ingredients,
instructions = this.props.data.instructions,
img = this.props.data.img
}) {
this.props.update(key, title, ingredients, instructions, img);
}
toggleEdit() {
console.log("thi")
this.setState({editable: this.state.editable ? false : true});
}
/* Returns box content. Uses if statements to decide if just the title should be shown
* passes editable state to children. If this is true, children become editable
*/
render() {
return (
<div
className="box-bg-overlay"
onClick={this.handleClick.bind(this)}
>
<div className="box">
<Header
title = {this.props.data.title}
editable = {this.state.editable}
update= {this.updateRecipe.bind(this)}
close = {this.props.close}
/>
<Main
ingredients = {this.props.data.ingredients}
instructions = {this.props.data.instructions}
img = {this.props.data.img}
editable = {this.state.editable}
update= {this.updateRecipe.bind(this)}
/>
<BoxFooter
delete = {this.deleteRecipe.bind(this)}
toggleEdit = {this.toggleEdit.bind(this)}
/>
</div>
</div>
);
}
}
class MyApp extends React.Component {
render() {
return (
<Layout />
);
}
}
const app = document.getElementById('app');
ReactDOM.render(<MyApp />, app);
Also see: Tab Triggers