Skip to content

Commit 29db5e3

Browse files
Nikhil-81Nikhil-81
committedJun 10, 2022
first commit
0 parents  commit 29db5e3

File tree

9 files changed

+380
-0
lines changed

9 files changed

+380
-0
lines changed
 

‎components/nav.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
function navbar() {
2+
return `
3+
<div class="sec1">
4+
<ul>
5+
<li>
6+
<a href="sherch.html">Search</a>
7+
<!-- <span></span> -->
8+
</li>
9+
<li>
10+
<a href="login.html">Login</a>
11+
<!-- <span></span> -->
12+
</li>
13+
<li>
14+
<a href="singin.html">Singup</a>
15+
<!-- <span></span> -->
16+
</li>
17+
</ul>
18+
</div>
19+
<div class="sec2">
20+
<ul>
21+
<li>
22+
<a href="rday.html">Recipe Of The Day</a>
23+
<!-- <span></span> -->
24+
</li>
25+
<li>
26+
<a href="recipes.html">Recipies</a>
27+
<!-- <span></span> -->
28+
</li>
29+
</ul>
30+
</div>
31+
`;
32+
}
33+
export default navbar;

‎login.html

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="nav.css" />
8+
<title>home</title>
9+
</head>
10+
<body>
11+
<div id="nav"></div>
12+
<form>
13+
<input type="text" required="" placeholder="EMAIL" id="useremail" />
14+
<input
15+
type="password"
16+
required=""
17+
placeholder="PASSWORD"
18+
id="userpassword"
19+
/>
20+
<input type="submit" />
21+
</form>
22+
</body>
23+
</html>
24+
25+
<script type="module">
26+
let navcount = document.querySelector("#nav");
27+
import navbar from "./components/nav.js";
28+
navcount.innerHTML = navbar();
29+
</script>
30+
<script>
31+
let logindata = JSON.parse(localStorage.getItem("userCredential")) || [];
32+
33+
let form = document.querySelector("form");
34+
form.addEventListener("submit", checkcredntial);
35+
function checkcredntial(event) {
36+
event.preventDefault();
37+
let inputname = form.useremail.value;
38+
let inputpass = form.userpassword.value;
39+
check(inputname, inputpass);
40+
if (check) {
41+
let arr = [];
42+
arr.push(inputname);
43+
console.log(arr);
44+
localStorage.setItem("recentuser", JSON.stringify(arr));
45+
window.location.href = "sherch.html";
46+
} else {
47+
alert("incorrect credentials");
48+
form.useremail.value = "";
49+
form.userpassword.value = "";
50+
}
51+
}
52+
53+
function check(inputname, inputpass) {
54+
logindata.forEach(function (el) {
55+
if (el.mail == inputname && el.password == inputpass) {
56+
return true;
57+
} else {
58+
return false;
59+
}
60+
});
61+
}
62+
</script>

‎nav.css

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
#nav {
2+
display: flex;
3+
justify-content: space-between;
4+
align-items: center;
5+
background-color: darkgray;
6+
}
7+
.sec2 > ul {
8+
display: flex;
9+
}
10+
ul {
11+
list-style: none;
12+
}
13+
.sec2 > ul > li {
14+
margin-right: 70px;
15+
}
16+
a {
17+
text-decoration: none;
18+
color: gold;
19+
font-size: 20px;
20+
letter-spacing: 1px;
21+
}
22+
.sec1 > ul {
23+
display: flex;
24+
}
25+
.sec1 > ul > li {
26+
margin-left: 70px;
27+
}

‎rday.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="nav.css" />
8+
9+
<title>Document</title>
10+
</head>
11+
<body>
12+
<div id="nav"></div>
13+
<div class="cont"></div>
14+
</body>
15+
</html>
16+
<script type="module">
17+
let navcount = document.querySelector("#nav");
18+
import navbar from "./components/nav.js";
19+
navcount.innerHTML = navbar();
20+
</script>
21+
<script type="module">
22+
import { fetdata, display } from "./script/fet_display.js";
23+
const url = "https://www.themealdb.com/api/json/v1/1/random.php";
24+
let data = fetdata(url);
25+
let cont = document.querySelector(".cont");
26+
display(await data, cont);
27+
</script>

‎recipes.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="nav.css" />
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
<div id="nav"></div>
12+
<div class="cont"></div>
13+
</body>
14+
</html>
15+
<script type="module">
16+
let navcount = document.querySelector("#nav");
17+
import navbar from "./components/nav.js";
18+
navcount.innerHTML = navbar();
19+
</script>
20+
<script></script>

‎script/fet_display.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
let fetdata = async (url) => {
2+
let res = await fetch(url);
3+
let raw = await res.json();
4+
return raw.meals;
5+
};
6+
let display = (data, cont) => {
7+
data.forEach((el) => {
8+
let card = document.createElement("div");
9+
card.setAttribute("class", "card");
10+
11+
let img = document.createElement("img");
12+
img.setAttribute("src", el.strMealThumb);
13+
img.setAttribute("class", "resimage");
14+
15+
let name = document.createElement("h2");
16+
name.innerText = el.strMeal;
17+
18+
let type = document.createElement("p");
19+
type.innerText = el.strCategory;
20+
console.log(card);
21+
card.append(img, name, type);
22+
cont.append(card);
23+
});
24+
};
25+
26+
export { fetdata, display };
27+
// git config --global user.email "nikhilwalwatkar81@gmail.com"
28+
// git config --global user.name "Nikhil-81"

‎script/search.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// let navcont = document.querySelector("#nav");
2+
// import navbar from "./components/nav.js";
3+
// console.log(navbar);
4+
// navcont.innerHTML = navbar();

‎sherch.html

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link
8+
rel="stylesheet"
9+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
10+
/>
11+
<link rel="stylesheet" href="nav.css" />
12+
13+
<title>Document</title>
14+
<style>
15+
.cont {
16+
overflow-y: scroll;
17+
height: 250px;
18+
overflow-y: scroll;
19+
height: 250px;
20+
width: 40%;
21+
margin: auto;
22+
}
23+
input#querry {
24+
/* margin: auto; */
25+
display: block;
26+
width: 50%;
27+
28+
height: 40px;
29+
30+
border-radius: 12px;
31+
position: relative;
32+
}
33+
.section_search {
34+
margin-top: 70px;
35+
}
36+
37+
.resname {
38+
font-size: revert;
39+
cursor: pointer;
40+
}
41+
.ipicon {
42+
display: flex;
43+
align-items: center;
44+
justify-content: center;
45+
}
46+
span.material-symbols-outlined {
47+
position: absolute;
48+
right: 26%;
49+
}
50+
</style>
51+
</head>
52+
<body>
53+
<div class>
54+
<p class="uname"></p>
55+
</div>
56+
<div id="nav"></div>
57+
<div class="section_search">
58+
<!-- <input oninput="debounce(main,2000)" class="input" /> -->
59+
<div class="ipicon">
60+
<input oninput="debouncefunction(main, 1000)" type="text" id="querry" />
61+
<span class="material-symbols-outlined"> search </span>
62+
</div>
63+
<div class="cont"></div>
64+
<div class="box"></div>
65+
</div>
66+
</body>
67+
</html>
68+
<script type="module">
69+
let navcount = document.querySelector("#nav");
70+
import navbar from "./components/nav.js";
71+
navcount.innerHTML = navbar();
72+
</script>
73+
74+
<script>
75+
let user = JSON.parse(localStorage.getItem("recentuser"));
76+
let u = user[0];
77+
let uname = document.querySelector(".uname");
78+
uname.innerText = u;
79+
let box = document.querySelector(".box");
80+
let cont = document.querySelector(".cont");
81+
let id;
82+
let debouncefunction = (main, delay) => {
83+
if (id) {
84+
clearInterval(id);
85+
}
86+
id = setTimeout(function () {
87+
main();
88+
}, delay);
89+
};
90+
let main = () => {
91+
let q = document.querySelector("#querry").value;
92+
getdata(q);
93+
};
94+
let getdata = (q) => {
95+
const url = `https://www.themealdb.com/api/json/v1/1/search.php?s=${q}`;
96+
let fetdata = async () => {
97+
let res = await fetch(url);
98+
let raw = await res.json();
99+
let x = raw.meals;
100+
display(raw.meals);
101+
};
102+
fetdata();
103+
};
104+
let display = (data) => {
105+
let c = document.querySelector("#querry").value;
106+
if (c == "") {
107+
cont.innerHTML = [];
108+
console.log("empty");
109+
document.querySelector(".cont").style.overflow = "hidden";
110+
} else {
111+
cont.innerHTML = [];
112+
data.forEach((el) => {
113+
let p = document.createElement("p");
114+
p.setAttribute("class", "resname");
115+
p.innerText = el.strMeal;
116+
cont.append(p);
117+
});
118+
}
119+
};
120+
</script>

‎singin.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="nav.css" />
8+
9+
<title>home</title>
10+
</head>
11+
<body>
12+
<div id="nav"></div>
13+
14+
<form>
15+
<input type="text" required="" placeholder="FULL NAME" id="username" />
16+
<input
17+
type="number"
18+
required=""
19+
placeholder="PHONE NUMBER"
20+
id="userphone"
21+
/>
22+
<input type="text" required="" placeholder="EMAIL" id="useremail" />
23+
<input
24+
type="password"
25+
required=""
26+
placeholder="PASSWORD"
27+
id="userpassword"
28+
/>
29+
<input type="submit" id="submitForm" />
30+
</form>
31+
</body>
32+
</html>
33+
<script type="module">
34+
let navcount = document.querySelector("#nav");
35+
import navbar from "./components/nav.js";
36+
navcount.innerHTML = navbar();
37+
</script>
38+
<script>
39+
let form = document.querySelector("form");
40+
form.addEventListener("submit", storuserdata);
41+
let dataArr = JSON.parse(localStorage.getItem("userCredential")) || [];
42+
43+
function storuserdata(event) {
44+
event.preventDefault();
45+
let name = form.username.value;
46+
let phone = form.userphone.value;
47+
let mail = form.useremail.value;
48+
let password = form.userpassword.value;
49+
function useerCridOBj(name, phone, mail, password) {
50+
this.name = name;
51+
this.phone = phone;
52+
this.mail = mail;
53+
this.password = password;
54+
}
55+
let credentials = new useerCridOBj(name, phone, mail, password);
56+
dataArr.push(credentials);
57+
localStorage.setItem("userCredential", JSON.stringify(dataArr));
58+
}
59+
</script>

0 commit comments

Comments
 (0)
Please sign in to comment.