Homework 3: Echo ChatBot

Due February 12th at 11:59 PM

Topics: HTML/CSS, DOM Manipulation

In this homework, we will use HTML, CSS, and JavaScript to build a very basic chatbot that repeats what you say! This is a prequel to next week's homework, where you will build a more advanced chatbot using AI. This homework is designed to get you familiar with building web applications using the DOM and event listeners, as well as getting you comfortable with HTML and CSS for structuring and styling web pages.

This is an semi-open ended homework. You are recommended to follow the instructions, but you are free to implement the chatbot in a different way. Make sure that you read the rubric items provided in the starter code to make sure you don't miss any of them.

Assignment Goals

  • Learn to build websites from scratch using knowledge of HTML and CSS
  • Understand how to manipulate the DOM using JavaScript
  • Get familiar with event listeners and handling user input in web applications

Introduction & Installation

Accept assignment on Github Classroom

Files

Upon accepting the assignment on GitHub Classroom and retrieving the starter files, make sure you have the following files:

  • script.js
  • index.html
  • style.css
  • package.json, the prettier/eslint configs, RUBRIC.md, and an README.md file

Installation

You can use either the Live Server extension in VS Code or a package called serve to serve up your website.

The serve package has been provided within the devDependencies of the provided package.json. You can install it by running:

npm install

Then, you can run the command below to serve up your website at http://localhost:3000 (provided you already compiled your script to js in to dist):

npx serve ./dist -p 3000

Instructions

HTML

You should begin by implementing the HTML structure of the chatbot. This includes the following items:

  • A header section with the title of the chatbot
  • A main chat area where messages will be displayed
  • An input field for the user to type their messages
  • A send button to submit the user's message
  • A new chat button to reset the chat history and start a new conversation

Make sure to use semantic HTML elements where appropriate, and give your elements meaningful IDs or classes for styling and JavaScript manipulation.

CSS

Next, style your chatbot using CSS. You should aim to create a visually appealing and user-friendly interface. We will not be grading or looking for "pretty" designs, but designs that are clear and easy to use. Take inspiration from existing chat applications or websites you may have used, like ChatGPT or social media chats. Your CSS should cover the following aspects:

  • Makes use of at least one flexbox, if not more to properly layout elementse
  • Considering using a proper color scheme for your app, using built-in colors or hex/RGB codes
  • Make use of the box model with proper margins, padding, and borders where applicable
  • Make sure all interactable items, like buttons and inputs fields are visible and clickable. When the input field is empty, the send button should be disabled or visually indicated as such.
  • Consider basic UI/UX considerations, like responsive design. Make sure you app works on both large and small screens (test using Dev Tools).

Functionality

Finally, implement the JavaScript functionality of the chatbot. This includes the following features:

  • When the user types a message and clicks the send button (or presses Enter), the message should be added to the chat area as a user message.
  • The chatbot should then respond by echoing back the user's message, prefixed with "Echo:", and this response should also be added to the chat area. (This function has been provided in the starter code with a 500ms delay)
  • When the new chat button is clicked, the chat area should be cleared of all messages, allowing the user to start a new conversation.
  • Chats should be persisted in local storage so that they are not lost when the page is refreshed.
  • Your script will be in TypeScript, and will be compiled to JavaScript within the dist directory. There are some specific DOM types for TS that you may need to use, which you can review here.
    • Note: You will need to use type assertions (e.g., (document.getElementById("myInput") as HTMLInputElement)) to let TypeScript know the specific types of certain DOM elements.
  • Make sure to handle edge cases, such as empty input fields or excessively long messages.

What is Local Storage?

In lieu of using a proper storage solution for this assignment, we will instead be using your browser's local storage. This allows you to persist data in the browser even after the page is refreshed or closed.

Local storage is a simple key-value store that is available in all modern browsers. It is persistent across browser sessions and can be accessed via JavaScript. This store only persists on the same domain and protocol (e.g., http vs https).

You can read from and write to local storage using the localStorage object in JavaScript. Here are some basic operations:

  • localStorage.setItem(key, value): Stores a value under the specified key.
  • localStorage.getItem(key): Retrieves the value associated with the specified key.
  • localStorage.removeItem(key): Removes the key-value pair associated with the specified key.
  • localStorage.clear(): Clears all key-value pairs in local storage.

Note that local storage can only store strings, so you may need to use JSON.stringify() and JSON.parse() to store and retrieve more complex data structures like arrays or objects.

Submission

README

Answer the provided reflection questions within the starter code README file. In this reflection, you will also indicite whether or not you used AI, and also document your usage of AI as well. Please don't forget this step, as it is important feedback for the homework and the content of the course!

Submission

To submit, simply push your commits to the repository generated from GitHub classroom. Make sure your latest commit before the deadline includes all files you worked on during this homework and your README.md file. Make sure to include everything, including the contents of both src and dist directories. Make sure the submitted file structure within your GitHub repository is exactly or similar to the file structure you used to run and develop the project. Points will be taken off for malformed project structures in the final submission!

Before you submit, make sure you lint your code for style errors using the command npm run lint. More details on style can be found in the style guide. We will take -1 points for every style error remaining in the submission for the submitted files. Since this project requires you to make your own ESLint, we will use your linting rules instead of the standard rules we would apply, so make sure you pass your own set of style rules!

For this homework, we've provided a rubric file named RUBRIC.md in the starter code. Make sure to read through it carefully and ensure that your submission meets all the requirements outlined in the rubric. This will help you maximize your score and ensure that you've covered all necessary aspects of the assignment.