CS6251 Simple Note Taker

Overview

In this lab, you will implement the behavior of a simple note taker applicaon that allows the user to add and remove notes. You will use an array to maintain the notes.

The Starter Project

The starter project consists of

• An HTML file. The HTML file implements a page with three < div > elements.
  • The first < div > element is supposed to display the collecon of notes as an unordered list.
  • The second < div > element contains a form with an < input > element of type text and an add buon. If the add buon is clicked, the entered value in the input field should be added as a new note to the collecon of notes. Since the funconality is not yet implemented, nothing happens if you click the add buon in the starter project.
  • The third < div > element contains a form with a drop-down box that should be populated by the notes and with a delete buon. If the delete buon is clicked, the selected note should be deleted from the collecon of notes.
  • You should not make any changes to the HTML file unless you aempt the Bonus part.
• A style sheet. You should not make any changes to the style sheet unless you aempt the Bonus part.
• An empty JavaScript file. You will implement the behavior of the note taker applicaon in this file.

Instructions

All code should be implemented in file notetaker.js . For the oponal Part 4, you may make changes to the HTML and stylesheet.

Part 1: Updang page content

Declare a variable that is inialized to be an empty array. The variable will track a collecon of strings, each string represenng a note. In the following, the array is referred to array of notes.

Implement a funcon that updates the page content:

1. If the array of notes is empty, the < div > element with id display-notes and the < div > element with id delete-note are hidden on the web page.

2. If the array of notes is not empty:

• Ensure that the < div > element with id display-notes and the < div > element with id delete-note are shown on the web page.
• Iterate through the array elements in the order of the indices. For each array element:
  • Add an < li > element to the inner HTML of the unordered list with id notelist.
  • Add an < option > element to the inner HTML of the < select > element with id noteselection . The value aribute of the opon element should be set to the corresponding index of the array element.

Call the funcon that updates the page content.

Part 2: Adding notes

Implement a function that adds the note as entered in the < input > element with id newnote:

1. Add the value of the < input > element with id newnote to the end of the array of notes. You do not need to validate the value. That means, it is okay if a new note is an empty string.

2. Clear the input field, i.e., set the value of the < input > element with id newnote to an empty string.

3. Update the page content to reflect the changes to the notes.

Register the funcon that adds a note as event handler with the < button > element with id add for the click event.

Part 3: Deleting notes

Implement a funcon that deletes the note selected in the drop-down box with id noteselection:

1. Retrieve the value of the < select > element. Note that the value is an index represented as a string.

2. Remove the element of the array of notes at the retrieved index. Aer the remove operaon all notes should sll be stored consecuvely in the array, i.e., the array should not have an undefined value at that index. Hint: Check out the method splice of the Array class. Due to JavaScript's automac conversion between types, you may not need to explicitly convert the string with the index to a number.

3. Update the page content to reflect the changes to the notes.

Register the function that deletes a note as event handler with the < button > element with id delete for the click event.

Part 4: Validaon (Oponal)

Part 4 is oponal. You will receive extra credit if you complete this part correctly.

The current soluon allows empty notes to be added. Modify the code so that empty notes are not added. If the user aempts to add an empty note, an error message should be displayed. The error message should be hidden again as soon as a valid note is submied or as soon as an exisng note is deleted. Modify the HTML file and the stylesheet as necessary.

Starter Codes

notetaker.html

< !DOCTYPE html >
< html >

< head >
< title >Note Taker< /title >
< link rel="stylesheet" type="text/css" href="./notetaker.css" >
< /head >

< body >
< header >
< h1 >Note Taker< /h1 >
< /header >
< main >

< div id="display-notes" >
< h2 >Notes:< /h2 >
< ul id="notelist" >
< /ul >
< /div >

< div id="add-note" >
< h2 >Add Note:< /h2 >
< div id="errormessage" class="display-none error" >A note content is required.< /div >
< form >
< input type="text" id="newnote" >
< button type="button" id="add" >Add< /button >
< /form >
< /div >

< div id="delete-note" >
< h2 >Delete Note:< /h2 >
< form >
< select id="noteselection" >
< /select >
< button type="button" id="delete" >Delete< /button >
< /form >
< /div >
< /main >

< script src="./notetaker.js" >< /script >
< /body >

< /html >

notetaker.css

/* the styles for the HTML elements */
html {
background-color: rgb(192, 192, 192);
}
body {
font-family: Arial, Helvetica, sans-serif;
width: 760px;
margin: 0 auto;
padding: 0 2em;
background-color: white;
border: 1px solid black;
}
header {
border-bottom: 2px solid black;
margin: .5em 0 1em;
color: black;
}
h2 {
font-size: 120%;
margin: .25em 0 .5em;
color: rgb(208, 133, 4);
}
input, select {
box-sizing: border-box;
width: 17em;
}
.display-none {
display: none;
}
button {
width: 6em;
}
div {
margin-bottom: 2em;
}
.error {
color: red;
}