Skip to content

Commit 55f0048

Browse files
adityaks-ltsadityaks-lts
committed
added data into product.html linked product and index nav bar and footer and css file
1 parent 874b6ea commit 55f0048

File tree

9 files changed

+332
-162
lines changed

9 files changed

+332
-162
lines changed

‎Frontend/assets/feat1.png

817 Bytes
Loading

‎Frontend/assets/feat2.png

539 Bytes
Loading

‎Frontend/assets/feat3.png

840 Bytes
Loading

‎Frontend/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Document</title>
7-
<link rel="stylesheet" href="/Tapti-Recursion-010/Frontend/styles/index.css">
7+
<link rel="stylesheet" href="styles/index.css">
88
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
99
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
1010
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

‎Frontend/product.html

+79-15
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,90 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Document</title>
77
<link rel="stylesheet" href="styles/product.css" />
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
11+
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
12+
crossorigin="anonymous"
13+
referrerpolicy="no-referrer"
14+
/>
15+
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon" />
16+
<link
17+
href="https://fonts.googleapis.com/icon?family=Material+Icons"
18+
rel="stylesheet"
19+
/>
20+
<script
21+
src="https://kit.fontawesome.com/e408c805cc.js"
22+
crossorigin="anonymous"
23+
></script>
824
</head>
925
<body>
10-
<div class="container">
11-
<nav></nav>
12-
<div id="main-section">
13-
<div id="left-main">
14-
<div id="flat-title"></div>
15-
<div id="flat-images"></div>
16-
<div id="flat-details"></div>
17-
<div id="host"></div>
18-
<div id="features"></div>
19-
<div id="discription"></div>
20-
<div id="where-sleep"></div>
26+
<div id="container">
27+
<nav id="navbar"></nav>
28+
<div id="flat-title"></div>
29+
<div id="flat-images"></div>
30+
<div id="main-section">
31+
<div id="left-main">
32+
<div id="flat-details"></div>
33+
<div id="host"></div>
34+
<div id="features">
35+
<div class="feature">
36+
<div>
37+
<img src="assets/feat1.png" alt="" />
38+
<h3>Dedicated workspace</h3>
39+
</div>
40+
<div>A common area with wifi that’s well suited for working.</div>
2141
</div>
22-
<div id="right-main"></div>
42+
<div class="feature">
43+
<div>
44+
<img src="assets/feat2.png" alt="" />
45+
<h3>Self check-in</h3>
46+
</div>
47+
<div>You can check in with the building staff.</div>
48+
</div>
49+
<div class="feature">
50+
<div>
51+
<img src="assets/feat3.png" alt="" />
52+
<h3>Free cancellation for 48 hours</h3>
53+
</div>
54+
<div>Get a full refund if you change your mind.</div>
55+
</div>
56+
</div>
57+
<div id="discription">
58+
<h3>About this place</h3>
59+
<p id="disc-sect"></p>
60+
</div>
61+
<div id="place-offer">
62+
<h3>What this place offers</h3>
63+
<ul>
64+
<li>Lock on bedroom door</li>
65+
<li>Garden view</li>
66+
<li>Dedicated workspace</li>
67+
</ul>
68+
</div>
69+
</div>
70+
<div id="right-main">
71+
<div id="reserve">
72+
<div id="flat-price"></div>
73+
<div id="duration">
74+
<div id="check-in">
75+
<label for="check-in"> Check-in:</label>
76+
<input type="datetime-local" />
77+
</div>
78+
<div id="check-out">
79+
<label for="check-out">Check-out:</label>
80+
<input type="datetime-local" />
81+
</div>
82+
</div>
83+
<div id="guests"></div>
84+
<button>Reserve</button>
85+
</div>
2386
</div>
24-
<div></div>
25-
<footer></footer>
87+
</div>
88+
<div id="where-be"></div>
89+
<div id=""></div>
90+
<footer id="footer"></footer>
2691
</div>
27-
2892
</body>
2993
<script src="scripts/product.js"></script>
3094
</html>

‎Frontend/scripts/product.js

+89
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,93 @@
11
localStorage.setItem("currCard", "8450130");
22

33
let productID = localStorage.getItem("currCard");
4+
let baseURL = "https://tapti-recursion-010-v93f.onrender.com/data";
45

6+
console.log("script");
7+
async function getData(){
8+
try{
9+
let res = await fetch(baseURL);
10+
let data = await res.json();
11+
for(let elem of data){
12+
if(elem.id == productID){
13+
// console.log(elem);
14+
createdPage(elem);
15+
break;
16+
}
17+
}
18+
}
19+
catch(err){
20+
console.log(err);
21+
}
22+
}
23+
24+
getData();
25+
26+
function createdPage(obj){
27+
let flatTitle = document.getElementById("flat-title");
28+
let flatImages = document.getElementById("flat-images");
29+
let flatDetails = document.getElementById("flat-details");
30+
let host = document.getElementById("host");
31+
let description = document.getElementById("disc-sect");
32+
let flatPrice = document.getElementById("flat-price");
33+
34+
// flat name
35+
flatTitle.innerText = obj.name;
36+
37+
// flat images
38+
let img1 = document.createElement("img");
39+
let img2 = document.createElement("img");
40+
let img3 = document.createElement("img");
41+
let img4 = document.createElement("img");
42+
let img5 = document.createElement("img");
43+
img1.src = obj.images[0];
44+
img2.src = obj.images[1];
45+
img3.src = obj.images[2];
46+
img4.src = obj.images[3];
47+
img5.src = obj.images[4];
48+
flatImages.append(img1,img2, img3, img4, img5);
49+
50+
// flat location and review section
51+
let smartLocation = document.createElement("h3");
52+
let smallInfo = document.createElement("div");
53+
smallInfo.innerHTML = `<span>${obj.bedroom} bedroom </span>`;
54+
if(obj.bathrooms >0 ) smallInfo.innerHTML += '<ul><li> Private attached bathroom<li></ul>'
55+
let ratings = document.createElement("div");
56+
ratings.innerHTML = `<i class="fa-solid fa-star"></i> ${(obj.review_scores_rating*5*0.01).toFixed(1)} <span> ${obj.number_of_reviews} reviews </span>`
57+
smartLocation.innerText = obj.smart_location;
58+
flatDetails.append(smartLocation, smallInfo, ratings);
59+
60+
// Host section code
61+
let hostImg = document.createElement("img");
62+
hostImg.src = obj.host_picture_url;
63+
let hostDetails = document.createElement("div");
64+
let hostName = document.createElement("h3");
65+
hostName.innerText = `Hosted by ${obj.host_name}`;
66+
let timeHosting = document.createElement("p");
67+
timeHosting.innerText = "8 years of hosting"
68+
hostDetails.append(hostName,timeHosting);
69+
host.append(hostImg, hostDetails);
70+
71+
// description section
72+
description.innerText = obj.description;
73+
74+
// price section
75+
flatPrice.innerHTML = `<span>$ ${obj.price}</span> <sup>night</sup>`
76+
77+
}
78+
79+
80+
async function fetchIndexHTMl(){
81+
let res = await fetch("index.html");
82+
let data = await res.text();
83+
let indexHTML = new DOMParser().parseFromString(data, 'text/html');
84+
let navBar = indexHTML.getElementById("navbar");
85+
let footer = indexHTML.getElementById("footer");
86+
let productNavbar = document.getElementById("navbar");
87+
let productFooter = document.getElementById("footer");
88+
productNavbar.innerHTML = navBar.innerHTML;
89+
productFooter.innerHTML = footer.innerHTML;
90+
console.log("Index",navBar.innerHTML);
91+
}
92+
93+
fetchIndexHTMl();

‎Frontend/scripts/signup.js

+14-14
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,20 @@ submitSignup.addEventListener("click", sendUserData)
1414

1515

1616
async function verifyUserData(){
17-
if(userEmail.value && userPassword.value){
18-
try{
19-
let res = await fetch(userURL);
20-
let data = await res.json();
21-
for(let element of data){
22-
if(element.email == userEmail.value && element.password == userPassword.value){
23-
return true
24-
}
25-
26-
};
27-
}
28-
catch(err){
29-
console.log(err);
30-
}
17+
try{
18+
let res = await fetch(userURL);
19+
let data = await res.json();
20+
for(let element of data){
21+
if(element.email == userEmail.value){
22+
return true
23+
}
24+
25+
};
26+
}
27+
catch(err){
28+
console.log(err);
3129
}
30+
3231
return false;
3332

3433
}
@@ -54,6 +53,7 @@ async function sendUserData(){
5453
"email":userEmail.value,
5554
"password":userPassword.value,
5655
};
56+
5757
try{
5858
await fetch(userURL,{
5959
method: "POST",

0 commit comments

Comments
 (0)