Skip to content

Commit 5207fb8

Browse files
AnishCoder2006AnishCoder2006
authored
Add files via upload
1 parent 06150a8 commit 5207fb8

File tree

6 files changed

+341
-227
lines changed

6 files changed

+341
-227
lines changed

‎pro.css‎

Lines changed: 58 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,32 @@
1-
* {
2-
padding: 0;
1+
/* Responsive Adjustments */
2+
@media (max-width: 768px) {
3+
.container {
4+
gap: 3rem;
5+
}
6+
7+
img {
8+
max-width: 200px;
9+
height: 250px;
10+
}
11+
12+
h1 {
13+
font-size: x-large;
14+
}
15+
}
16+
17+
body {
18+
background: linear-gradient(135deg,#153677,#4e085f);
19+
font-family: Poppins, sans-serif;
320
margin: 0;
21+
padding: 0;
22+
}
23+
24+
* {
425
box-sizing: border-box;
5-
font-family: Verdana, Geneva, Tahoma, sans-serif;
6-
background: linear-gradient(45deg, rgba(8, 61, 114, 1), rgba(151, 2, 151, 0.2), rgba(82, 12, 147, 0.5));
726
}
827

928
img {
10-
max-width: 250px;
29+
width: 250px;
1130
height: 300px;
1231
border-radius: 15px;
1332
display: inline-block;
@@ -24,10 +43,12 @@ input {
2443
width: 200px;
2544
padding: 8px;
2645
margin-top: 5px;
27-
border: 2px solid #3498db;
46+
border: 2px solid grey;
2847
border-radius: 5px;
2948
font-size: 16px;
3049
transition: all 0.3s ease;
50+
display: inline-block;
51+
font-family: Poppins, sans-serif;
3152
}
3253

3354
input:focus {
@@ -47,46 +68,58 @@ input[type="number"] {
4768
p {
4869
font-size: 18px;
4970
font-weight: bold;
50-
color: #0ed024;
71+
color: #ff5945;
5172
margin-bottom: 8px;
52-
background: linear-gradient(45deg, rgba(8, 61, 114, 1), rgba(151, 2, 151, 0.2), rgba(82, 12, 147, 0.5));
5373
}
5474

5575
button {
56-
display: block;
57-
margin: 20px auto;
58-
padding: 10px 20px;
59-
font-size: 18px;
60-
font-weight: bold;
61-
background: linear-gradient(to right, rgb(37, 6, 123) 2%, rgb(183, 11, 186));
62-
color: white;
6376
border: none;
64-
border-radius: 5px;
77+
outline: none;
78+
padding: 16px 50px;
79+
background: #ff5945;
80+
color: #fff;
81+
font-size: 16px;
6582
cursor: pointer;
66-
transition: all 0.3s ease;
83+
border-radius: 40px;
6784
}
6885

6986
button:hover {
7087
background-color: #2ecc71;
7188
}
7289

7390
h1 {
74-
background: linear-gradient(to right, rgba(6, 73, 14, 0.2) 2%, rgba(50, 11, 155, 1), rgba(14, 216, 226, 0.7));
75-
max-width: fit-content;
76-
color: saddlebrown;
91+
background: linear-gradient(to right, rebeccapurple, rebeccapurple, rebeccapurple);
92+
max-width: max-content;
93+
color: gold;
7794
border-radius: 15px;
78-
font-size:xx-large;
79-
font-family: 'Lucida Sans', Geneva, Verdana, sans-serif;
95+
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
96+
border-color: gold;
97+
position: relative;
98+
}
99+
100+
h1::after {
101+
content: '';
102+
position: absolute;
103+
width: 0px;
104+
height: 2px;
105+
bottom: -5px;
106+
left: 0px;
107+
background: gold;
108+
transition: width 0.3s ease;
109+
}
110+
111+
h1:hover::after {
112+
width: 100%;
80113
}
81114

82115
input::placeholder {
83-
color: #333;
116+
color: #333333;
84117
font-style: italic;
85118
}
86119

87120
.heading {
88121
text-align: center;
89-
color: blue;
122+
color: #ff5945;
90123
}
91124

92125
textarea {
@@ -97,127 +130,11 @@ textarea {
97130
border: 2px solid #ccc;
98131
border-radius: 5px;
99132
resize: none;
133+
font-family: Poppins, sans-serif;
100134
}
101135

102136
textarea:focus {
103137
border-color: #007bff;
104138
outline: none;
105139
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
106-
}
107-
.heading{
108-
font-size: 50px;
109-
color: blue;
110-
}
111-
/*
112-
*{
113-
padding: 0px;
114-
margin: 0px;
115-
box-sizing: border-box;
116-
font-family:Verdana, Geneva, Tahoma, sans-serif;
117-
background:linear-gradient(45deg,rgba(8, 61, 114,1) ,rgba(151, 2, 151,0.2),rgba(82, 12, 147,0.5));
118-
}
119-
img{
120-
width:250px;
121-
height:300px;
122-
width: max-content;
123-
border-radius: 15px;
124-
display:inline-block;
125-
align-items: center;
126-
justify-content: center;
127-
justify-items: center;
128-
}
129-
}
130-
.container{
131-
display: flex;
132-
flex-direction:column;
133-
align-items: center;
134-
gap: 100px;
135-
justify-items: center;
136-
}
137-
input {
138-
width: 200px;
139-
padding: 8px;
140-
max-width: fit-content;
141-
margin-top: 5px;
142-
border: 2px solid #3498db;
143-
border-radius: 5px;
144-
font-size: 16px;
145-
transition: all 0.3s ease;
146-
display: inline-block;
147-
}
148-
149-
input:focus {
150-
outline: none;
151-
border-color: #2ecc71;
152-
box-shadow: 0 0 5px rgba(46, 204, 113, 0.5);
153-
}
154-
155-
input[type="text"] {
156-
background-color: #f9f9f9;
157-
display: inline-block;
158-
}
159-
160-
input[type="number"] {
161-
background-color: #fff;
162-
}
163-
p{
164-
font-size: 18px;
165-
font-weight: bold;
166-
color: #0ed024;
167-
margin-bottom: 8px;
168-
background:linear-gradient(45deg,rgba(8, 61, 114,1) ,rgba(151, 2, 151,0.2),rgba(82, 12, 147,0.5));
169-
}
170-
171-
button{
172-
173-
display: block;
174-
margin: 20px auto;
175-
padding: 10px 20px;
176-
font-size: 18px;
177-
font-weight: bold;
178-
background-color: #3498db;
179-
color: white;
180-
border: none;
181-
border-radius: 5px;
182-
cursor: pointer;
183-
transition: all 0.3s ease;
184-
185-
background: linear-gradient(to right,rgb(37, 6, 123) 2%,rgb(183, 11, 186));
186-
color:linear-gradient(to left,rgb(226, 20, 161),rgb(109, 194, 13));
187-
}
188-
button:hover {
189-
background-color: #2ecc71;
190-
}
191-
h1{
192-
background: linear-gradient(to right,rgba(6, 73, 14,0.2) 2%,rgba(50, 11, 155,1) ,rgb(14, 216, 226,0.7));
193-
max-width: max-content;
194-
color:saddlebrown;
195-
border-radius: 15px;
196-
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
197-
}
198-
input::placeholder{
199-
color:#333333;
200-
font-style: italic;
201-
}
202-
.heading{
203-
text-align: center;
204-
display:inline-block;
205-
align-items: center;
206-
justify-items: center;
207-
justify-content: center;
208-
color: blue;
209-
}
210-
textarea {
211-
width: 100%;
212-
height: 150px;
213-
padding: 10px;
214-
font-size: 16px;
215-
border: 2px solid #ccc;
216-
border-radius: 5px;
217-
resize: none;
218-
}
219-
textarea:focus {
220-
border-color: #007bff;
221-
outline: none;
222-
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
223140
}

‎pro.js‎

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,37 @@
1-
function submitForm() {
2-
const inputs = document.querySelectorAll(".tv input, .lap input, .others input, .mob input");
3-
const data = {};
4-
5-
inputs.forEach(input => {
6-
const parentDiv = input.closest("div");
7-
const category = parentDiv.classList[0]; // Gets category name (e.g., "tv", "lap")
81

9-
if (!data[category]) {
10-
data[category] = {};
11-
}
2+
function submitForm() {
3+
const data = {
4+
tv: {
5+
brand: document.querySelector('input[name="tvBrand"]').value,
6+
quantity: document.querySelector('input[name="tvQty"]').value
7+
},
8+
laptop: {
9+
brand: document.querySelector('input[name="laptopBrand"]').value,
10+
quantity: document.querySelector('input[name="laptopQty"]').value
11+
},
12+
mobile: {
13+
brand: document.querySelector('input[name="mobileBrand"]').value,
14+
quantity: document.querySelector('input[name="mobileQty"]').value
15+
},
16+
washingMachine: {
17+
brand: document.querySelector('input[name="washBrand"]').value,
18+
quantity: document.querySelector('input[name="washQty"]').value
19+
},
20+
others: {
21+
brand: document.querySelector('input[name="otherBrand"]').value,
22+
quantity: document.querySelector('input[name="otherQty"]').value
23+
},
24+
description: document.getElementById("description").value
25+
};
1226

13-
if (input.type === "text") {
14-
data[category].brand = input.value;
15-
} else if (input.type === "number") {
16-
data[category].quantity = input.value;
17-
}
18-
});
27+
fetch("http://localhost:3000/store-data", {
28+
method: "POST",
29+
headers: { "Content-Type": "application/json" },
30+
body: JSON.stringify(data)
31+
})
32+
.then(res => res.json())
33+
.then(res => alert(res.message || "Data submitted successfully!"))
34+
.catch(err => alert("Error submitting data!"));
1935

20-
console.log("Submitted Data:", data); // Logs final data when submitted
21-
alert("Data submitted successfully! Check console for details.");
22-
}
36+
console.log("Submitted Data:", data);
37+
}

0 commit comments

Comments
 (0)