Skip to content

Commit 004d980

Browse files
committed
Project Complete - Optimisation needed
1 parent cbac836 commit 004d980

File tree

3 files changed

+103
-44
lines changed

3 files changed

+103
-44
lines changed

html/posts/css/post.css

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ body {
99
-moz-background-size: cover;
1010
-o-background-size: cover;
1111
}
12+
button {
13+
cursor: pointer;
14+
}
15+
[contenteditable] {
16+
outline: 0px solid transparent;
17+
}
1218

1319
/* The Modal (background) */
1420
.modal {
@@ -162,9 +168,9 @@ body {
162168
color: white;
163169
border: none;
164170
margin-top: 10px;
165-
padding: 10px;
171+
padding: 10px 20px;
166172
align-self: flex-start;
167-
width: 10%;
173+
width: auto;
168174
margin-bottom: 10px;
169175
border-radius: 3px;
170176
box-shadow: 0px 10px 12px 1px #f0b3c3;
@@ -180,11 +186,13 @@ body {
180186
font-family: "Slabo 27px";
181187
text-align: justify;
182188
font-size: large;
189+
overflow: auto;
183190
text-justify: inter-word;
184191
}
185192

186193
#like_counter {
187194
font-family: monospace;
195+
margin-top: 8px;
188196
margin-bottom: 30px;
189197
}
190198

@@ -204,3 +212,11 @@ body {
204212
margin-bottom: 10px;
205213
padding: 15px 8px;
206214
}
215+
216+
.editing_post_heading {
217+
border: 2px solid #f2bfcb !important;
218+
}
219+
.editing_post_body {
220+
border: 1px solid blue;
221+
padding: 10px;
222+
}

html/posts/js/post.js

Lines changed: 54 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,62 @@ window.onclick = function (event) {
4343
signUpModal.style.display = "none";
4444
signInModal.style.display = "none";
4545

46-
const likesCount = 0;
46+
// post_heading editing_post_heading
47+
// post_body editing_post_body
48+
var postHeaderDiv = document.getElementById("post_heading");
49+
var postContentDiv = document.getElementById("post_body");
50+
var editing = false;
51+
var editButton = document.getElementById("btn_edit_post");
52+
53+
const editDocument = () => {
54+
editing = !editing;
55+
if (editing) {
56+
postHeaderDiv.setAttribute("class", "editing_post_heading");
57+
postHeaderDiv.contentEditable = true;
58+
59+
postContentDiv.contentEditable = true;
60+
postContentDiv.setAttribute("class", "editing_post_body");
61+
const saveIcon = document.createElement("i");
62+
saveIcon.setAttribute("class", "fas fa-save");
63+
editButton.innerText = "Save ";
64+
editButton.append(saveIcon);
65+
} else {
66+
const editIcon = document.createElement("i");
67+
editIcon.setAttribute("class", "fas fa-edit");
68+
editButton.innerText = "Edit ";
69+
editButton.append(editIcon);
70+
71+
postHeaderDiv.removeAttribute("class");
72+
postHeaderDiv.contentEditable = false;
73+
74+
postContentDiv.removeAttribute("class");
75+
postContentDiv.contentEditable = false;
76+
}
77+
};
78+
editButton.addEventListener("click", editDocument);
79+
80+
var likesCount = 0;
4781
const describeLikes = () => {
4882
const likeTag = document.getElementById("like_counter");
49-
likesCount === 0
50-
? (likeTag.innerText = "Be the first one to like this!")
51-
: "";
83+
likeTag.innerText =
84+
likesCount === 0
85+
? "Be the first one to like this!"
86+
: likesCount === 1
87+
? "1 person likes this!"
88+
: `${likesCount} people have liked this!`;
5289
likesCount += 1;
5390
};
5491
describeLikes();
92+
93+
const addComment = () => {
94+
const commentTextArea = document.getElementById("comment_composer");
95+
if (commentTextArea.value.trim().length === 0) {
96+
window.alert("Comment cannot be empty");
97+
} else {
98+
const commentsList = document.getElementById("post_comments");
99+
const comment = document.createElement("li");
100+
comment.setAttribute("class", "comment");
101+
comment.innerText = commentTextArea.value;
102+
commentsList.prepend(comment);
103+
}
104+
};

html/posts/post.html

Lines changed: 31 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ <h2>Welcome Back!</h2>
156156
</div>
157157

158158
<div id="post_container">
159-
<div id="post_heading">
159+
<div id="post_heading" contenteditable="true">
160160
<h1>The legacy of Jimi Hendrix</h1>
161161
</div>
162162
<div id="author_edit_post">
@@ -167,40 +167,32 @@ <h1>The legacy of Jimi Hendrix</h1>
167167
</button>
168168
</div>
169169
<div id="post_body">
170-
<p>
171-
On September 18, 1970, American musician Jimi Hendrix died
172-
in London at the age of 27. One of the 1960s' most
173-
influential guitarists, he was described by the Rock and
174-
Roll Hall of Fame as "arguably the greatest instrumentalist
175-
in the history of rock music."[1]
176-
</p>
177-
<p>
178-
For some days prior to his death, Hendrix had been in poor
179-
health, in part from fatigue caused by overwork, a chronic
180-
lack of sleep, and an assumed influenza-related illness.
181-
Insecurities about his personal relationships, as well as
182-
disillusionment with the music industry, had also
183-
contributed to his frustration. Although the details of his
184-
final hours and death are disputed, Hendrix spent much of
185-
his last day alive with Monika Dannemann. In the morning
186-
hours of September 18, Dannemann found Hendrix unresponsive
187-
in her apartment at the Samarkand Hotel, 22 Lansdowne
188-
Crescent, Notting Hill. She called for an ambulance at 11:18
189-
a.m., and Hendrix was taken to St Mary Abbot's Hospital,
190-
where an attempt was made to resuscitate him. He was
191-
pronounced dead at 12:45 p.m.
192-
</p>
193-
<p>
194-
The post-mortem examination concluded that Hendrix aspirated
195-
on his own vomit and died of asphyxia while intoxicated with
196-
barbiturates. At the inquest, the coroner, finding no
197-
evidence of suicide, and lacking sufficient evidence of the
198-
circumstances, recorded an open verdict. Dannemann stated
199-
that Hendrix had taken nine of her prescribed Vesparax
200-
sleeping tablets, 18 times the recommended dosage.
201-
</p>
170+
On September 18, 1970, American musician Jimi Hendrix died in
171+
London at the age of 27. One of the 1960s' most influential
172+
guitarists, he was described by the Rock and Roll Hall of Fame
173+
as "arguably the greatest instrumentalist in the history of rock
174+
music."[1] For some days prior to his death, Hendrix had been in
175+
poor health, in part from fatigue caused by overwork, a chronic
176+
lack of sleep, and an assumed influenza-related illness.
177+
Insecurities about his personal relationships, as well as
178+
disillusionment with the music industry, had also contributed to
179+
his frustration. Although the details of his final hours and
180+
death are disputed, Hendrix spent much of his last day alive
181+
with Monika Dannemann. In the morning hours of September 18,
182+
Dannemann found Hendrix unresponsive in her apartment at the
183+
Samarkand Hotel, 22 Lansdowne Crescent, Notting Hill. She called
184+
for an ambulance at 11:18 a.m., and Hendrix was taken to St Mary
185+
Abbot's Hospital, where an attempt was made to resuscitate him.
186+
He was pronounced dead at 12:45 p.m. The post-mortem examination
187+
concluded that Hendrix aspirated on his own vomit and died of
188+
asphyxia while intoxicated with barbiturates. At the inquest,
189+
the coroner, finding no evidence of suicide, and lacking
190+
sufficient evidence of the circumstances, recorded an open
191+
verdict. Dannemann stated that Hendrix had taken nine of her
192+
prescribed Vesparax sleeping tablets, 18 times the recommended
193+
dosage.
202194
</div>
203-
<button id="btn_like" class="btn_to_left">
195+
<button id="btn_like" class="btn_to_left" onclick="describeLikes()">
204196
<i class="fas fa-thumbs-up"></i> Like
205197
</button>
206198
<div id="like_counter"></div>
@@ -211,14 +203,15 @@ <h1>The legacy of Jimi Hendrix</h1>
211203
rows="10"
212204
placeholder="Leave a comment..."
213205
></textarea>
214-
<button id="btn_comment" class="btn_to_left">Comment</button>
206+
<button id="btn_comment" class="btn_to_left" onclick="addComment()">
207+
Comment
208+
</button>
215209

216210
<div id="comments_container">
217211
<h3>All Comments</h3>
218212
<ul id="post_comments">
219-
<li class="comment">Sample Text 1</li>
220-
<li class="comment">Sample Text 2</li>
221-
<li class="comment">Sample Text 3</li>
213+
<li class="comment">Second Comment</li>
214+
<li class="comment">First Comment</li>
222215
</ul>
223216
</div>
224217
</div>

0 commit comments

Comments
 (0)