this is my HTML which is basically just a form with two inputs and h2, whatever i write in the input and submit will be shown under the h2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Basics</title>
</head>
<body>
<form id="tweeting" action="/idk">
<label for="username">Username</label>
<input type="text" name="username" id="username" placeholder="username" />
<label for="comment">Comment</label>
<input style="padding-bottom: 30px" type="text" name="comment" id="comment" placeholder="Whats happening?" />
<button>Tweet Out</button>
</form>
<h2>TimeLine</h2>
<ul id="tweets"></ul>
<script src="app.js "></script>
</body>
</html>
this is my javascript which should take the inputs and bold them and append all stuff to a list which is like a temp timeline that will disappear after I refresh but thats not the issue:
//selecting the form
const tweeting = document.querySelector('#tweeting');
// selecting the ul which will be as a timeline
const timeLine = document.querySelector('#tweets');
//this function will just capture the inputs from the form after submitting it, we will save to a variable and call the function that will add our tweet to the ul (timeline)
tweeting.addEventListener('submit', function(e) {
e.preventDefault();
// saving the username
const usernameInput = tweeting.elements.username;
//saving the tweet
const tweetInput = tweeting.elements.comment;
//calling the function
addTweet(usernameInput.input, tweetInput.input)
usernameInput.value = '';
tweetInput.value = '';
})
const addTweet = (username, tweet) => {
// creating a new item that will be added to the timeline at the end
const newTweet = document.createElement("li");
//we wanted to make the username in bold so the next two lines is to do that
const bTag = document.createElement('b');
bTag.append(username);
// appended the username in bold
newTweet.append(bTag);
// appended the tweet
newTweet.append(`- ${tweet}`);
// added to the timeline
timeLine.append(newTweet);
}
I dont know why it show me undefined -undefined