Skip to content

Commit 301ffda

Browse files
Shaurya2k06Shaurya2k06
authored
Uploaded FIles
0 parents  commit 301ffda

File tree

4 files changed

+291
-0
lines changed

4 files changed

+291
-0
lines changed

‎Survey Form/Font.otf

52.5 KB
Binary file not shown.

‎Survey Form/index.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="styles.css">
7+
<title>Survey Form</title>
8+
</head>
9+
<body>
10+
<main>
11+
<h1>Survey Form</h1>
12+
<h4>Thank you for taking our survey. Please answer the following questions based on whether you liked our services.</h4>
13+
14+
<form id="survey-form">
15+
<div class="form-group">
16+
<label id="name-label" for="name">Name</label>
17+
<input type="text" id="name" class="form-control" placeholder="Enter your name" required>
18+
</div>
19+
<div class="Age">
20+
<h4>What is your age?</h4>
21+
<input type="number" id="age" class="form-control" min="13" max="120" required>
22+
23+
</div>
24+
<div class="email">
25+
<label id="email-label" for="email">Email</label>
26+
<input type="email" id="email" class="form-control" placeholder="Enter your email" required>
27+
</div>
28+
<h4>Would you recommend us to a friend?</h4>
29+
<div class="recommendation">
30+
<label for="recommend-yes">Yes</label>
31+
<input type="radio" id="recommend-yes" name="recommendation" value="yes" required>
32+
33+
<label for="recommend-no">No</label>
34+
<input type="radio" id="recommend-no" name="recommendation" value="no" required>
35+
36+
<label for="recommend-maybe">Maybe</label>
37+
<input type="radio" id="recommend-maybe" name="recommendation" value="maybe" required>
38+
</div>
39+
<p></p>
40+
<div class="source">
41+
<label for="source">How did you hear about us?</label>
42+
<select id="source" class="form-control" required>
43+
<option value="" disabled selected>Select your option</option>
44+
<option value="friend">Friend</option>
45+
<option value="social_media">Social Media</option>
46+
<option value="search_engine">Search Engine</option>
47+
<option value="advertisement">Advertisement</option>
48+
<option value="other">Other</option>
49+
</select>
50+
</div>
51+
<p></p>
52+
<div class="Submit">
53+
<input type="submit" value="Submit" class="submit-button">
54+
</div>
55+
</form>
56+
</main>
57+
</body>
58+
<script>
59+
document.getElementById('survey-form').addEventListener('submit', function(event) {
60+
event.preventDefault();
61+
62+
63+
const name = document.getElementById('name').value;
64+
const age = document.getElementById('age').value;
65+
const email = document.getElementById('email').value;
66+
const recommendation = document.querySelector('input[name="recommendation"]:checked').value;
67+
const source = document.getElementById('source').value;
68+
69+
70+
localStorage.setItem('name', name);
71+
localStorage.setItem('age', age);
72+
localStorage.setItem('email', email);
73+
localStorage.setItem('recommendation', recommendation);
74+
localStorage.setItem('source', source);
75+
76+
77+
window.location.href = 'success.html';
78+
});
79+
</script>
80+
</html>

‎Survey Form/styles.css

+179
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
@font-face {
2+
font-family: "Modernist";
3+
src: url("Font.otf") format("opentype");
4+
font-weight: normal;
5+
font-style: normal;
6+
}
7+
8+
body {
9+
font-family: "Modernist";
10+
display: flex;
11+
align-items: center;
12+
flex-direction: column;
13+
background-color: #0000003f;
14+
margin: 0;
15+
padding: 20px;
16+
color: white;
17+
}
18+
19+
@keyframes floatIn {
20+
0% {
21+
transform: translateY(100%);
22+
opacity: 0;
23+
}
24+
100% {
25+
transform: translateY(0);
26+
opacity: 1;
27+
}
28+
}
29+
30+
main {
31+
display: flex;
32+
flex-direction: column;
33+
background-color: white;
34+
align-items: center;
35+
width: max(35%, 300px);
36+
border-radius: 2rem;
37+
padding: 3rem;
38+
animation: floatIn 0.5s ease-out;
39+
overflow: visible;
40+
}
41+
42+
h1, h2, h3, h4, h5 {
43+
color: #ffcc00;
44+
margin-bottom: 10px;
45+
border-radius: 0rem;
46+
border-color: black;
47+
}
48+
49+
p {
50+
line-height: 1.6;
51+
margin-bottom: 15px;
52+
}
53+
54+
a {
55+
color: #00ccff;
56+
text-decoration: none;
57+
}
58+
59+
a:hover {
60+
text-decoration: underline;
61+
}
62+
63+
button {
64+
background-color: #ffcc00;
65+
color: black;
66+
border: none;
67+
padding: 10px 15px;
68+
cursor: pointer;
69+
border-radius: 5px;
70+
}
71+
72+
button:hover {
73+
background-color: #e6b800;
74+
}
75+
76+
77+
78+
.form-container {
79+
background-color: rgba(255, 255, 255, 0.9);
80+
border-radius: 10px;
81+
padding: 20px;
82+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
83+
max-width: 500px;
84+
margin: auto;
85+
}
86+
input[type="text"],
87+
input[type="email"],
88+
input[type="radio"],
89+
textarea,
90+
input[type="number"] {
91+
width: 100%;
92+
padding: 10px;
93+
margin-bottom: 15px;
94+
border: 1px solid #ccc;
95+
border-radius: 5px;
96+
font-size: 16px;
97+
transition: border-color 0.3s;
98+
}
99+
100+
101+
input[type="text"]:focus,
102+
input[type="email"]:focus,
103+
input[type="password"]:focus,
104+
textarea:focus,
105+
input[type="number"]:focus {
106+
border-color: #00ccff;
107+
outline: none;
108+
}
109+
input[type="submit"] {
110+
border: none;
111+
display: block;
112+
margin: 0 auto;
113+
background-color: #00000038;
114+
font-family: "Modernist";
115+
padding: 12px 20px;
116+
border-radius: 5px;
117+
color: white;
118+
font-size: 16px;
119+
cursor: pointer;
120+
transition: background-color 0.3s, transform 0.2s;
121+
}
122+
123+
input[type="submit"]:hover {
124+
background-color: #00ccff;
125+
transform: scale(1.05);
126+
}
127+
input[type="radio"] {
128+
display: none;
129+
}
130+
131+
label {
132+
display: inline-block;
133+
margin-right: 15px;
134+
padding: 10px 15px;
135+
background-color: rgba(255, 255, 255, 0.8);
136+
color: #333;
137+
border-radius: 5px;
138+
cursor: pointer;
139+
transition: background-color 0.3s, transform 0.2s;
140+
}
141+
142+
input[type="radio"]:checked + label {
143+
background-color: #86f380;
144+
color: white;
145+
}
146+
li {
147+
color:black;
148+
;}
149+
li:hover {
150+
color: #e6b800;
151+
border-color:#333;
152+
cursor: pointer;
153+
}
154+
155+
.source {
156+
margin: 20px 0;
157+
}
158+
159+
.source label {
160+
font-weight: bold;
161+
display: block;
162+
margin-bottom: 5px;
163+
color: #ffcc00;
164+
}
165+
166+
select {
167+
width: 100%;
168+
padding: 10px;
169+
margin-bottom: 15px;
170+
border: 1px solid #ccc;
171+
border-radius: 5px;
172+
font-size: 16px;
173+
background-color: rgba(255, 255, 255, 0.9);
174+
transition: border-color 0.3s;
175+
}
176+
177+
select:focus {
178+
border-color: #00ccff;
179+
}

‎Survey Form/success.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="styles.css">
7+
<title>Success</title>
8+
</head>
9+
<body>
10+
<main>
11+
<h1>Thank You for Your Submission!</h1>
12+
<h2>Your Responses:</h2>
13+
14+
<ul>
15+
<li><strong>Name:</strong> <span id="display-name"></span></li>
16+
<li><strong>Age:</strong> <span id="display-age"></span></li>
17+
<li><strong>Email:</strong> <span id="display-email"></span></li>
18+
<li><strong>Recommendation:</strong> <span id="display-recommendation"></span></li>
19+
<li><strong>Source:</strong> <span id="display-source"></span></li>
20+
</ul>
21+
22+
<script>
23+
document.getElementById('display-name').textContent = localStorage.getItem('name');
24+
document.getElementById('display-age').textContent = localStorage.getItem('age');
25+
document.getElementById('display-email').textContent = localStorage.getItem('email');
26+
document.getElementById('display-recommendation').textContent = localStorage.getItem('recommendation');
27+
document.getElementById('display-source').textContent = localStorage.getItem('source');
28+
29+
</script>
30+
</main>
31+
</body>
32+
</html>

0 commit comments

Comments
 (0)