In this lab, you will be using your HTML, CSS and some basic JS skills to create and style a word counter.
- Navigate to your
~/workspace/foundations/inclassdirectory
$ git clone {YOUR REPO LINK}
$ cd LAB-word-counter- Create a
setupbranch
$ git checkout -b setup
- Create the following files:
- Create an
index.htmlfile - Create a
main.cssfile - Create a
main.jsfile
- Create an
- Connect the JS file and your CSS file to your HTML
- If you need help with this, do a google search for how to do it
$ git add -A
$ git commit -m "WRITE A DETAILED MESSAGE"
$ git push origin setup
- Create a Pull Request (PR) on Github
- Merge the PR into the main branch
- Go back to VS Code and checkout the main branch
git checkout main - Pull the updated code:
git pull origin main
- Create an
add-codebranch
$ git checkout -b add-code
Place the following code in the index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Counter</title>
</head>
<body>
<h1>Word Counter</h1>
<button id="bg-switch">Dark Mode</button>
<div id="error" class="error"></div>
<form>
<textarea placeholder="Place your words here..."></textarea>
<button type="submit">Submit</button>
<button type="reset">Clear</button>
</form>
<div id="word-count"></div>
</body>
</html>Place the following code in the main.js file
console.log("Connected!")
// YOU WILL MODIFY THIS FUNCTION TO GET THE PROGRAM TO WORK
const wordCounter = (value) => {
// Type into the input and press submit, you will see the value you entered in your console
console.log(value);
if (value) {
// COMPLETE THE LOGIC
wordCount.innerHTML = `Word Count: 0`;
} else {
// if the value is empty, set the error message value to "Please input text"
error.innerHTML = ""; // UPDATE THIS
}
}
// OPTIONAL CHALLENGE
const toggleMode = (btnText) => {
// complete the function
}
// ************************************************ //
// **** DO NOT MODIFY THE CODE BELOW THIS LINE **** //
// ************************************************ //
// These are query selectors. We will focus on them later in the course
const textarea = document.querySelector("textarea");
const form = document.querySelector("form");
const error = document.querySelector("#error");
const wordCount = document.querySelector("#word-count");
const toggleButton = document.querySelector("#bg-switch");
// These are event listeners. We will focus on them later in the course
form.addEventListener("submit", (event) => {
event.preventDefault(); // the default behavior of a form is to reload the page, we do not want that so we want to prevent that behavior
error.innerHTML = ""; // clear out the innerHTML on submit
wordCount.innerHTML = ""; // clear out the innerHTML on submit
const value = textarea.value; // grab the value of the text area on submit
wordCounter(value); // call the function and pass it the value
});
form.addEventListener("reset", () => {
error.innerHTML = ""; // on reset, clear the innderHTML
wordCount.innerHTML = ""; // on reset, clear the innderHTML
});
toggleButton.addEventListener("click", (event) => {
toggleMode(event.target.innerHTML);
});- Connect the JS file to the HTML file
- Connect the CSS file to the HTML file
- Start your server: run
hs -oorhttp-server -oto start your server. - Check your console. The message "Connected!" should be seen.
$ git add -A
$ git commit -m "WRITE A DETAILED MESSAGE"
$ git push origin add-code
- Create a Pull Request (PR) on Github
- Merge the PR into the main branch
- Go back to VS Code and checkout the main branch
git checkout main - Pull the updated code:
git pull origin main
- Go to your repo and click on the Issues Tab taking note of the things that need to be completed for the lab
Add Bootstrap to your HTML elements like buttons and the form.
NOTE: Do not remove the ID attributes from the HTML. When you copy over the Bootstrap component, make sure to add the attribute to it.