Skip to content

Commit 47b46a5

Browse files
SuRu190SuRu190
authored
Add files via upload
1 parent 4c5b31c commit 47b46a5

3 files changed

Lines changed: 142 additions & 0 deletions

File tree

‎task17-personalized-greeting-card/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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+
<title>Personalized Greeting Card</title>
7+
<link rel="stylesheet" href="style.css
8+
">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>Personalized Greeting Card</h1>
13+
14+
<input type="text" id="inputTask" placeholder="Enter your name!">
15+
<button id="click">Show Greeting</button>
16+
17+
<p id="greeting" class="hidden"></p>
18+
</div>
19+
20+
<script src="script.js"></script>
21+
</body>
22+
</html>

‎task17-personalized-greeting-card/script.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const input = document.getElementById("inputTask");
2+
const button = document.getElementById("click");
3+
const greeting = document.getElementById("greeting");
4+
5+
button.addEventListener("click", () => {
6+
const name = input.value.trim();
7+
8+
if (name) {
9+
greeting.textContent = `Hello, ${name}! Welcome 🎉`;
10+
greeting.classList.toggle("hidden");
11+
}
12+
else {
13+
alert("Please enter your name first!");
14+
}
15+
16+
input.value = "";
17+
});

‎task17-personalized-greeting-card/style.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
8+
padding: 100px;
9+
text-align: center;
10+
background: linear-gradient(to right, lightgreen, lightblue);
11+
}
12+
13+
.container {
14+
background: white;
15+
padding: 30px;
16+
border: none;
17+
border-radius: 40px;
18+
width: 90%;
19+
max-width: 400px;
20+
margin: auto;
21+
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
22+
}
23+
24+
input {
25+
padding: 10px;
26+
width: 80%;
27+
border: 3px solid grey;
28+
border-radius: 10px;
29+
margin-bottom: 10px;
30+
margin-top: 20px;
31+
}
32+
33+
button {
34+
padding: 10px 20px;
35+
border: none;
36+
border-radius: 10px;
37+
background-color: cornflowerblue;
38+
color: white;
39+
cursor: pointer;
40+
font-size: 15px;
41+
font-weight: 600;
42+
transition: transform 0.4s ease-in;
43+
}
44+
45+
button:active {
46+
transform: scale(1.8);
47+
}
48+
49+
p {
50+
margin-top: 15px;
51+
font-size: 20px;
52+
color: #333;
53+
font-weight: 600;
54+
}
55+
56+
@media (max-width: 410px) {
57+
body {
58+
padding: 40px 10px;
59+
}
60+
61+
.container {
62+
padding: 15px;
63+
border-radius: 20px;
64+
}
65+
66+
input {
67+
width: 100%;
68+
font-size: 14px;
69+
padding: 8px;
70+
box-sizing: border-box;
71+
}
72+
73+
button {
74+
width: 100%;
75+
font-size: 14px;
76+
padding: 8px;
77+
}
78+
}
79+
80+
@media (max-width: 240px) {
81+
body {
82+
padding: 20px 10px;
83+
}
84+
85+
.container {
86+
padding: 10px;
87+
border-radius: 10px;
88+
}
89+
90+
h1 {
91+
font-size: 25px;
92+
}
93+
94+
input {
95+
width: 100%;
96+
font-size: 12px;
97+
}
98+
99+
button {
100+
width: 100%;
101+
font-size: 12px;
102+
}
103+
}

0 commit comments

Comments
 (0)