Skip to content

Commit d59a2a1

Browse files
gantavyamalviyagantavyamalviya
authored
Merge pull request #35 from shekhar10feb/branch1
Added a program called Edit Name and Bio
2 parents 0f9b282 + d96e07d commit d59a2a1

3 files changed

Lines changed: 253 additions & 0 deletions

File tree

‎Edit Name and Bio/behave.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
const container = document.querySelector('.container');
2+
const btn = document.querySelector('#editBtn');
3+
4+
btn.addEventListener('click', () => {
5+
const page = document.createElement('div');
6+
page.classList.add('page');
7+
page.innerHTML = `
8+
<div class='closeBtn'>
9+
<button id='close'>X</button>
10+
</div>
11+
<div class='inputDiv'>
12+
<input type='text' id='inputName' placeholder='Enter your name'>
13+
<textarea name="" id="inputBio" placeholder='Enter your bio'></textarea>
14+
</div>
15+
<div class='saveDiv'>
16+
<button type='button' id='saveBtn'>Save</button>
17+
</div>
18+
`;
19+
20+
container.appendChild(page);
21+
22+
const closeBtn = document.querySelector('#close');
23+
24+
closeBtn.onclick = function closeFunc() {
25+
26+
this.parentNode.parentNode.remove();
27+
28+
// We return 'false' to prevent the default action.
29+
return false;
30+
};
31+
32+
// To get the value for Name and Bio
33+
const saveBtn = document.querySelector('#saveBtn');
34+
const name = document.querySelector('#inputName');
35+
const bio = document.querySelector('#inputBio');
36+
37+
saveBtn.onclick = function saveFunc() {
38+
document.querySelector('.name').innerHTML = name.value;
39+
document.querySelector('.bio').innerHTML = bio.value;
40+
41+
this.parentNode.parentNode.remove();
42+
43+
// We return 'false' to prevent the default action.
44+
return false;
45+
}
46+
47+
});
48+

‎Edit Name and Bio/css/style.css‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
width: 100%;
9+
min-height: 100vh;
10+
display: grid;
11+
place-items: center;
12+
align-content: center;
13+
background-color: rgba(0, 0, 0, 0.9);
14+
font-family: Arial, Helvetica, sans-serif;
15+
}
16+
17+
h1 {
18+
color: #fff;
19+
margin-bottom: 2rem;
20+
}
21+
22+
.container {
23+
width: 20rem;
24+
position: relative;
25+
background-color: #fff;
26+
border-radius: 5px;
27+
border: 1px solid gray;
28+
}
29+
30+
.nameDiv {
31+
display: flex;
32+
justify-content: flex-start;
33+
align-items: center;
34+
background-color: #fff;
35+
font-size: 1rem;
36+
padding: 0.3rem;
37+
margin: 1rem;
38+
border-radius: 5px;
39+
border: 1px solid gray;
40+
}
41+
42+
.nameDiv .name, .bioDiv .bio {
43+
width: 100%;
44+
color: #000;
45+
font-size: 1rem;
46+
min-height: 1.5rem;
47+
padding-left: 0.5rem;
48+
}
49+
50+
.name {
51+
display: flex;
52+
justify-content: flex-start;
53+
align-items: center;
54+
}
55+
56+
.bioDiv {
57+
display: flex;
58+
justify-content: flex-start;
59+
align-items: flex-start;
60+
background-color: #fff;
61+
font-size: 1rem;
62+
padding: 0.3rem;
63+
margin: 1rem;
64+
border-radius: 5px;
65+
border: 1px solid gray;
66+
}
67+
68+
.bioDiv .bio {
69+
min-height: 4rem;
70+
font-size: 1rem;
71+
}
72+
73+
#editBtn {
74+
width: 20%;
75+
font-size: 1rem;
76+
background-color: #fff;
77+
border: 0;
78+
outline: 0;
79+
padding: 0.3rem;
80+
margin: 1rem;
81+
margin-top: 0;
82+
border-radius: 5px;
83+
cursor: pointer;
84+
border-radius: 5px;
85+
border: 1px solid gray;
86+
}
87+
88+
#editBtn:hover {
89+
color: #fff;
90+
background-color: royalblue;
91+
border: 1px solid royalblue;
92+
}
93+
94+
.page {
95+
width: 100%;
96+
min-height: 100%;
97+
background-color: gray;
98+
display: flex;
99+
justify-content: space-between;
100+
align-items: flex-end;
101+
flex-direction: column;
102+
position: absolute;
103+
top: 0;
104+
padding: 0.6rem 1rem;
105+
border-radius: 5px;
106+
}
107+
108+
.closeBtn, .inputDiv, .saveDiv {
109+
width: 100%;
110+
}
111+
112+
.closeBtn {
113+
display: flex;
114+
justify-content: flex-end;
115+
align-items: center;
116+
}
117+
118+
#saveBtn, #inputName, #inputBio {
119+
font-size: 1rem;
120+
font-family: sans-serif;
121+
border-radius: 5px;
122+
padding: 0.4rem 0.5rem;
123+
border: none;
124+
outline: none;
125+
}
126+
127+
#inputName {
128+
margin-bottom: 0.4rem;
129+
}
130+
131+
#inputBio {
132+
margin-top: 0.4rem;
133+
}
134+
135+
#saveBtn {
136+
background-color: #fff;
137+
margin-top: 0;
138+
border: 1px solid gray;
139+
cursor: pointer;
140+
}
141+
142+
#saveBtn:hover {
143+
color: #fff;
144+
background-color: royalblue;
145+
border: 1px solid royalblue;
146+
}
147+
148+
#close {
149+
width: 12%;
150+
color: #fff;
151+
background-color: transparent;
152+
cursor: pointer;
153+
border: none;
154+
outline: none;
155+
transition: transform 0.1s ease-in;
156+
}
157+
158+
#close:hover {
159+
transition: transform 0.2s ease-in;
160+
transform: scale(1.1);
161+
background-color: #595959;
162+
border-radius: 5px;
163+
}
164+
165+
.inputDiv {
166+
width: 100%;
167+
min-height: 4rem;
168+
display: flex;
169+
justify-content: space-around;
170+
align-content: center;
171+
flex-direction: column;
172+
text-align: center;
173+
}
174+
175+
@media screen and (max-width: 420px) {
176+
.container {
177+
width: 90%;
178+
}
179+
}
180+

‎Edit Name and Bio/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Edit Name and Bio</title>
8+
<link rel="stylesheet" href="./css/style.css">
9+
</head>
10+
<body>
11+
<h1>Edit Name and Bio</h1>
12+
<div class="container">
13+
<div class='nameDiv'>
14+
<label>Name:</label>
15+
<p class="name"></p>
16+
</div>
17+
<div class='bioDiv'>
18+
<label>Bio:</label>
19+
<p class="bio"></p>
20+
</div>
21+
<button type='button' id='editBtn'>Edit</button>
22+
</div>
23+
<script src="./behave.js"></script>
24+
</body>
25+
</html>

0 commit comments

Comments
 (0)