
Your Turn!
What to accomplish:- Download the source code from the github repository above.
- Delete the contents of the
app.js
file. - Implement the JavaScript code in your own
app.js file.
- Add a link to your finished project below!
- After you enter text into the input box, upon pressing the “Enter” key, your message should show up in the “Last Message Delivered” Section.
- After the “Enter” key is pressed, the text box value should return to an empty text box.
- If no input is submitted, an alert should show (using the ‘show' class in the CSS file) in the “Last Message Delivered” section and then disappear after 2 second.
Need to see the video solution for this project?
Get John's JavaScript Tutorial and Projects Course now!
thanks for sharing this wonderful js ideas
No problem! I hope you like them.
Hi Bro whats up hope you are doing well first of all thank you for this wonderful ideas you have shared with us and secondly I would like to ask may I write down my solution in comment section or can share with you so to get critic on it and get reviewed coz I don’t want to check the tutorial as well as solution because I have done javascript so it would be great to do its completely by my own but at the end of course expert review would be very helpful for my own solution.
I will be really thankful to you friend.
Sure, but it’s best if you upload your solution to github and just provide the link.
Check this out
https://message-sender-app.vercel.app/
www i love it !!!. how log have you been learning JavaScript
I LIKED THIS SOLUTIONS BEST FOR BEGINNER DEVELOPERS
Thanks for the beginner projects. Is there a way to download the entire package to practice offline?
Unfortunately, not that I know of.
Made some modifications… 🤗🤗
what is ‘show’ here in line 15 of app.js? Is it a bootstrap property or what?
const form = document.querySelector(“#message-form”);
form.addEventListener(“submit”, function (e) {
e.preventDefault();
const h5 = document.querySelector(“h5”);
const userInput = document.querySelector(“#message”);
const messageContent = document.querySelector(“.message-content”);
//Relaying back the input
if (userInput.value === “”) {
h5.classList.add(“show”);
setTimeout(function () {
h5.classList.remove(“show”);
}, 3000);
} else {
messageContent.textContent = userInput.value;
}
userInput.value = “”;
});
I didn’t realize how important the Event.preventDefault() method is, the form ketp resetting without it. I also tried adding in the setTimeout function since I’ve never done that before.