-
-
Save Tazaf/1eb7e4d4b2bd6a5508b6e2c88f6739c0 to your computer and use it in GitHub Desktop.
MAS-RAD : Final JS code for the jQuery DOM course.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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