Skip to content

Commit 53698dc

Browse files
c0d0erc0d0er
committed
first commit
0 parents  commit 53698dc

File tree

4 files changed

+583
-0
lines changed

4 files changed

+583
-0
lines changed

‎index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style></style>
5+
<meta charset="UTF-8">
6+
<title>Recipe Box</title>
7+
<link href=".\load\bootstrap.min.css" rel="stylesheet">
8+
<link href="rstyle.css" rel="stylesheet">
9+
</head>
10+
<body>
11+
<div id='app'></div>
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
14+
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
16+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
17+
<script src="rscript.js" type="text/babel"></script>
18+
</body>
19+
</html>

‎rscript.js

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
2+
//console.log(localStorage['_c0d0er_recipes'])
3+
let data = (localStorage['_c0d0er_recipes']) ? JSON.parse(localStorage['_c0d0er_recipes']) : [
4+
{title: "Pumpkin Pie", ingredients: ["Pumpkin Puree", "Sweetened Condensed Milk", "Eggs", "Pumpkin Pie Spice", "Pie Crust"]},
5+
{title: "Spaghetti", ingredients: ["Noodles", "Tomato Sauce", "(Optional) Meatballs"]},
6+
{title: "Onion Pie", ingredients: ["Onion", "Pie Crust", "Sounds Yummy right?"]}
7+
];
8+
9+
const localdata = () => {
10+
localStorage.setItem('_c0d0er_recipes', JSON.stringify(data));
11+
return JSON.parse(localStorage['_c0d0er_recipes']);
12+
}
13+
14+
let ti = '';//edit title area value;
15+
let te = '';//edit ingredients area value;
16+
let addTit =''; //title textarea value under add;
17+
let addIng = '';// ingredients textarea value under add;
18+
19+
const Footer = (props) => {
20+
return (
21+
<footer>
22+
<p>Coded by <a className='bill' href='http://codepen.io/c0d0er/'>Bill</a></p>
23+
</footer>
24+
);
25+
};
26+
27+
const List = (props) => {
28+
29+
let lnodes = props.name.map((val, ind) => {
30+
return (
31+
<h4 className='list'>{val}</h4>
32+
);
33+
})
34+
return (
35+
<div className='ing ing1'>
36+
{lnodes}
37+
<button type='button' id='delBtn' className='btn btn-danger' onClick={props.onClickD}>Delete</button>
38+
<button type='button' id="myBtn" className='btn btn-info' onClick={props.onClickE}>Edit</button>
39+
40+
41+
</div>);
42+
};
43+
44+
const Edit = (props) => {
45+
return (
46+
<div className='editarea modal1' id="myModal1">
47+
<div className="modal-content1">
48+
<div className="modal-header1">
49+
<span className="close1" onClick={props.close}>&times;</span>
50+
<h3>Edit Recipe</h3>
51+
</div>
52+
<div className="modal-body1">
53+
<h5>Recipe</h5>
54+
<textarea className='tetitle' rows='2' onChange={props.changeTit}>{props.title}</textarea>
55+
<h5>Ingredients</h5>
56+
<textarea className='teingredients' rows='2' onChange={props.changeIng}>{props.data}</textarea>
57+
<br/>
58+
</div>
59+
<div className="modal-footer1">
60+
<button type='button' className='btn btn-primary editsave' onClick={props.save}>Save</button>
61+
<button type='button' className='btn btn-default editclose' onClick={props.close}>Close</button>
62+
</div>
63+
</div>
64+
</div>
65+
);
66+
};
67+
68+
const Add = (props) => {
69+
return (
70+
<div className='addButtonArea'>
71+
<button type="button" className="btn btn-info" data-toggle="modal" data-target="#myModal" onClick={props.add}>Add Recipe</button>
72+
<div className="modal fade addarea" id="myModal" role="dialog">
73+
<div className="modal-dialog">
74+
<div className="modal-content">
75+
<div className="modal-header">
76+
<button type="button" className="close" data-dismiss="modal" onClick={props.addclose}>&times;</button>
77+
<h3 className='addrecipe'>Add a Recipe</h3>
78+
</div>
79+
<div className="modal-body">
80+
<h4 className='recip'>Recipe</h4>
81+
<textarea id='texttitid' className='tetitle' rows='1' cols='50' placeholder="Recipe Name" onChange={props.addtit}></textarea>
82+
<h5 className='ingre'>Ingredients</h5>
83+
<textarea id='textingid' className='teingredients' rows='2' cols='50' placeholder="Enter Ingredients,Separated,By Commas"
84+
onChange={props.adding}></textarea>
85+
<br/>
86+
</div>
87+
<div className="modal-footer">
88+
<button type='button' className='btn btn-info' data-dismiss="modal" onClick={props.addsave}>Save</button>
89+
<button type='button' className='btn btn-default' data-dismiss="modal" onClick={props.addclose}>Close</button>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
)
96+
}
97+
98+
class Box extends React.Component {
99+
constructor (props) {
100+
super(props);
101+
this.state = {
102+
recipes: localdata()
103+
};
104+
}
105+
106+
handleClick = (e) => {// click on the recipe title to toggle show and hide;
107+
let x = e.target.nextSibling;
108+
//let x = $(e.target).parent().children().eq(1);
109+
//let i = 10+$(e.target).attr('id');
110+
//console.log(i)
111+
//$(e.target).next().attr('id', i);
112+
$(x).toggleClass('ing');
113+
//$(e.target).parent().toggleClass('del')
114+
};
115+
116+
handleClickD = (e) => {//click delete button;
117+
let h3title = $(e.target).parent().prev().text();//get h3 text;
118+
/*data = data.filter((val, ind)=>{
119+
return val.title!== h3title;
120+
})*/
121+
/* let c=[];
122+
let d=5;
123+
data.forEach((val, ind)=>{
124+
c.push(val.title);
125+
d=c.indexOf(h3title);//get first index of same h3titles if 2 recipe titles are same;
126+
});
127+
data.splice(d, 1);*/
128+
let i = $(e.target).parent().prev().attr('id');
129+
//console.log(i)
130+
//$('.del').remove();
131+
data.splice(i, 1);
132+
this.setState({recipes: localdata()})
133+
$('.ing1').addClass('ing');
134+
};
135+
136+
handleClickE = (e) => {//click edit button;
137+
let z = $(e.target).parent().next();
138+
$(z).css('display', 'block');
139+
140+
};
141+
142+
handleTextTitle = (e) => {//get textarea title value under edit;
143+
ti = e.target.value;
144+
145+
};
146+
147+
handleTextIng = (e) => {//get textarea ingredients value under edit;
148+
te = e.target.value;
149+
150+
};
151+
152+
handleSave = (e) => {//click save button under edit;
153+
/* if(!ti&&!te){//user doesnt change anything and click save;
154+
ti=$(e.target).parent().parent().children().eq(0).text();//h3 text;
155+
te=$(e.target).parent().children().eq(4).text();//ingredients text area text;
156+
}
157+
else if(!te&&ti){te=$(e.target).parent().children().eq(4).text();}//user only changes title and save; ingredients text area text;
158+
else if(!ti&&te){ti=$(e.target).parent().parent().children().eq(0).text();}//user only changes ingredients and save;//h3 text;
159+
160+
let s = $(e.target).parent().parent().children().eq(0).text();//show title text; user changes both title and ingredients;//h3 text;*/
161+
if(!ti&&!te){//user doesnt change anything and click save;
162+
ti=$(e.target).parent().parent().parent().parent().children().eq(0).text();//h3 text;
163+
te=$(e.target).parent().prev().children().eq(3).text();//ingredients text area text;
164+
}
165+
else if(!te&&ti){te=$(e.target).parent().prev().children().eq(3).text();}//user only changes title and save; ingredients text area text;
166+
else if(!ti&&te){ti=$(e.target).parent().parent().parent().parent().children().eq(0).text();}//user only changes ingredients and save;//h3 text;
167+
168+
let s = $(e.target).parent().parent().parent().parent().children().eq(0).text();//show title text; user changes both title and ingredients;//h3 text;
169+
let tearr=te.split(',')//ingredients array;
170+
let i=5;// title text index;
171+
172+
data.forEach((val, ind)=>{
173+
if(val.title===s){i=ind}
174+
})
175+
176+
data[i].title=ti;
177+
data[i].ingredients=tearr;
178+
//$(e.target).parent().css('display', 'none')
179+
$('.editarea').css('display', 'none')
180+
this.setState({recipes: localdata()})
181+
182+
};
183+
184+
handleClose = (e) => {//click close button under edit;
185+
//let c = $(e.target).parent().parent().children().eq(0).text();//get title text from h3 tag;
186+
let c = $(e.target).parent().parent().parent().parent().children().eq(0).text();//get title text from h3 tag;
187+
let i =5;
188+
data.forEach((val, ind)=>{
189+
if(val.title===c){i=ind}
190+
})
191+
192+
$(e.target).parent().prev().children().eq(1).val(data[i].title);//change textarea title text;
193+
$(e.target).parent().prev().children().eq(3).val(data[i].ingredients.join(', '));//change textarea ingredients text;
194+
ti=data[i].title;
195+
te=data[i].ingredients.join(',');
196+
//$(e.target).parent().css('display', 'none');
197+
$('.editarea').css('display', 'none')
198+
};
199+
200+
handleAdd = (e) =>{//click add button;
201+
$('.addarea').css('display', 'block')
202+
};
203+
204+
handleAddTitle = (e) =>{//get textarea title text under add button;
205+
addTit = e.target.value;
206+
};
207+
208+
handleAddIng = (e) =>{//get textarea title text under add button;
209+
addIng = e.target.value;
210+
};
211+
212+
handleAddSave = (e) =>{//click save button under add;
213+
//if(!addTit&&addIng){addTit='Untitled'}
214+
if(!addTit){addTit='Untitled'}
215+
let addIngArr = addIng.split(',')
216+
let addObj = {title: addTit, ingredients: addIngArr};
217+
data.push(addObj);
218+
this.setState({recipes: localdata()});
219+
$('.addarea').css('display', 'none');
220+
$('#textingid').val('');
221+
$('#texttitid').val('');
222+
addIng=''; addTit='';
223+
};
224+
225+
handleAddClose = (e) =>{
226+
$('#textingid').val('');
227+
$('#texttitid').val('');
228+
addIng=''; addTit='';
229+
$('.addarea').css('display', 'none');
230+
};
231+
232+
render () {
233+
let nodes = this.state.recipes.map((val, ind)=>{
234+
235+
return (
236+
<div className='area'>
237+
<h3 className='title' id={ind} onClick={this.handleClick}>
238+
{val.title}
239+
</h3>
240+
<List
241+
name={val.ingredients}
242+
onClickD={this.handleClickD}
243+
onClickE={this.handleClickE}/>
244+
<Edit title={val.title}
245+
data={val.ingredients.join(', ')}
246+
changeTit={this.handleTextTitle}
247+
changeIng={this.handleTextIng}
248+
save={this.handleSave}
249+
close={this.handleClose}/>
250+
</div>
251+
);
252+
});
253+
254+
return (
255+
<div>
256+
<div className='head'>
257+
<div className='maintitle'>Recipe Box</div>
258+
<Add add={this.handleAdd}
259+
addtit={this.handleAddTitle}
260+
adding={this.handleAddIng}
261+
addsave={this.handleAddSave}
262+
addclose={this.handleAddClose}/>
263+
</div>
264+
{nodes}
265+
</div>
266+
);
267+
}
268+
}
269+
270+
ReactDOM.render(<Box />,
271+
document.getElementById('app'));
272+

0 commit comments

Comments
 (0)