Hosted Project
https://github.com/JS-Beginners/pass-the-message-project
Github Source Files
https://github.com/JS-Beginners/pass-the-message-project
Project Description/Summary:
This project challenges you to select the input element's value from the DOM. When you click on the “Submit” button you'll see the message inputted in the box in the “Last Message Delivered” Section. For me this project was fairly easy.
New things learned or refreshed:
Just like in previous projects, I followed John's starting technique of wrapping my entire solution inside of an IIFE. Other than that, it was nice to revisit the SetTimeout function to see the different ways it can be used.
Time to code:
This took about 10 minutes to code.
Biggest take away(s):
None this project.
Your Turn!
What to accomplish:- Download the source code from the github repository above.
- Delete the contents of the
app.jsfile. - 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.