Skip to content

Instantly share code, notes, and snippets.

@Tazaf

Tazaf/script.js Secret

Last active May 4, 2023 14:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Tazaf/1eb7e4d4b2bd6a5508b6e2c88f6739c0 to your computer and use it in GitHub Desktop.
Save Tazaf/1eb7e4d4b2bd6a5508b6e2c88f6739c0 to your computer and use it in GitHub Desktop.
MAS-RAD : Final JS code for the jQuery DOM course.
/* DOM REFERENCES */
const $alignButtons = $("#align-btns");
const $message = $("#message");
/* EVENT HANDLERS */
// Feature 1 - Switch List Item
$("a.list-group-item").click(switchListItem);
// Feature 2 - Change Alignment
$("button", $alignButtons).click(changeAlignment);
// Feature 3 - Create New Message
$("#send-btn").click(createNewMessage);
// Feature 4 : "Remove message"
$("#dialog").on("click", "button", removeMessage)
/* BUSINESS FUNCTIONS */
function switchListItem(event) {
const $target = $(event.currentTarget);
// Change the active state to the clicked item
$("a.list-group-item.active").removeClass("active");
$target.addClass('active');
// Clear the unread notification for the clicked item
$('span.badge', $target).text("");
}
function changeAlignment(event) {
const $target = $(event.currentTarget);
// Change the active state when a button is clicked
$("button.active", $alignButtons).removeClass("active");
$target.addClass("active");
// Check what button has been clicked
const btnId = $target.attr("id");
if (btnId === "align-left-btn") {
$("#message").removeClass("text-end text-center").addClass("text-start")
} else if (btnId === "align-center-btn") {
$("#message").removeClass("text-end text-start").addClass("text-center");
} else if (btnId === "align-right-btn") {
$("#message").removeClass("text-start text-center").addClass("text-end");
}
}
function createNewMessage(event) {
const msgValue = $message.val();
if (msgValue === "") {
$message.addClass('is-invalid');
} else {
const alignment = getTextareaAlignment($message);
const templateHtml = $("#new-message").html();
const $newMessageTemplate = $(templateHtml);
$("div.msg-content", $newMessageTemplate).text(msgValue);
$("small.text-primary", $newMessageTemplate).text(getCurrentTime());
$newMessageTemplate.addClass(alignment);
$("#dialog").find("div.row").append($newMessageTemplate);
$message.val("");
}
event.preventDefault()
}
function getTextareaAlignment($textarea) {
if ($textarea.hasClass("text-start")) {
return "text-class";
} else if ($textarea.hasClass("text-center")) {
return "text-center";
} else {
return "text-end";
}
}
function getCurrentTime() {
const date = new Date();
return date.toLocaleTimeString("fr-CH", {
hour: "2-digit",
minute: "2-digit"
});
}
function removeMessage(event) {
$(event.currentTarget).closest("div.col-8").remove()
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment