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
- Create a project named "Word Counter" and choose "Basic Kanban"
- Move issue tickets into the project and work through them each
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.