Skip to content

Commit 06150a8

Browse files
AnishCoder2006AnishCoder2006
authored
Add files via upload
0 parents  commit 06150a8

3 files changed

Lines changed: 316 additions & 0 deletions

File tree

‎pro.css‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
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));
7+
}
8+
9+
img {
10+
max-width: 250px;
11+
height: 300px;
12+
border-radius: 15px;
13+
display: inline-block;
14+
}
15+
16+
.container {
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
gap: 100px;
21+
}
22+
23+
input {
24+
width: 200px;
25+
padding: 8px;
26+
margin-top: 5px;
27+
border: 2px solid #3498db;
28+
border-radius: 5px;
29+
font-size: 16px;
30+
transition: all 0.3s ease;
31+
}
32+
33+
input:focus {
34+
outline: none;
35+
border-color: #2ecc71;
36+
box-shadow: 0 0 5px rgba(46, 204, 113, 0.5);
37+
}
38+
39+
input[type="text"] {
40+
background-color: #f9f9f9;
41+
}
42+
43+
input[type="number"] {
44+
background-color: #fff;
45+
}
46+
47+
p {
48+
font-size: 18px;
49+
font-weight: bold;
50+
color: #0ed024;
51+
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));
53+
}
54+
55+
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;
63+
border: none;
64+
border-radius: 5px;
65+
cursor: pointer;
66+
transition: all 0.3s ease;
67+
}
68+
69+
button:hover {
70+
background-color: #2ecc71;
71+
}
72+
73+
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;
77+
border-radius: 15px;
78+
font-size:xx-large;
79+
font-family: 'Lucida Sans', Geneva, Verdana, sans-serif;
80+
}
81+
82+
input::placeholder {
83+
color: #333;
84+
font-style: italic;
85+
}
86+
87+
.heading {
88+
text-align: center;
89+
color: blue;
90+
}
91+
92+
textarea {
93+
width: 100%;
94+
height: 150px;
95+
padding: 10px;
96+
font-size: 16px;
97+
border: 2px solid #ccc;
98+
border-radius: 5px;
99+
resize: none;
100+
}
101+
102+
textarea:focus {
103+
border-color: #007bff;
104+
outline: none;
105+
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);
223+
}

‎pro.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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")
8+
9+
if (!data[category]) {
10+
data[category] = {};
11+
}
12+
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+
});
19+
20+
console.log("Submitted Data:", data); // Logs final data when submitted
21+
alert("Data submitted successfully! Check console for details.");
22+
}

‎shjs.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<html>
2+
<link rel="stylesheet" href="pro.css">
3+
<head></head>
4+
<body>
5+
6+
<div class="container">
7+
<h1 class="heading">
8+
List The Products
9+
</h1>
10+
<script src="pro.js"></script>
11+
<div class="tv">
12+
<h1>T.V.</h1>
13+
<img src="tv1.png" alt="">
14+
15+
<p>Enter Brand Name:
16+
<input type="text" placeholder="BrandName"><br>
17+
Enter Quantity:
18+
<input type="number">
19+
</p>
20+
</div>
21+
<div class="lap">
22+
<h1>Laptop</h1>
23+
<img src="lap1.png" alt="">
24+
<p>Enter Brand Name:
25+
<input type="text" placeholder="BrandName"><br>
26+
Enter Quantity:
27+
<input type="number">
28+
</p>
29+
</div>
30+
31+
<div class="mob">
32+
<h1>SmartPhone</h1>
33+
<img src="mob1.png" alt="">
34+
<p>Enter Brand Name:
35+
<input type="text" placeholder="BrandName"><br>
36+
Enter Quantity:
37+
<input type="number">
38+
</p>
39+
</div>
40+
<div class="Others">
41+
<h1>WashingMachine</h1>
42+
<img src="wash.png" alt="">
43+
<p>Enter Brand Name:
44+
<input type="text" placeholder="BrandName"><br>
45+
Enter Quantity:
46+
<input type="number">
47+
</p>
48+
</div>
49+
<div class="Others">
50+
<h1>Others</h1>
51+
<img src="others.png" alt="">
52+
<p>Enter Brand Name:
53+
<input type="text" placeholder="BrandName"><br>
54+
Enter Quantity:
55+
<input type="number">
56+
</p>
57+
</div>
58+
<br>
59+
<br>
60+
<br>
61+
<p> Description... </p>
62+
<textarea name="" id="" placeholder="Enter description">
63+
64+
</textarea>
65+
<br>
66+
<br>
67+
<br>
68+
<button onclick="submitForm()">Submit</button>
69+
</div>
70+
</body>
71+
</html>

0 commit comments

Comments
 (0)