In html create a Watchlist page in which a user can create as many watchlist as...

In html create a Watchlist page in which a user can create as many watchlist as they wish. This page will contain the list of
watchlist, allow the user to create a new watchlist, and delete an existing one.
You have to implement the following:
a) A list of all the watchlist that a user has created. For now, you can randomly
create few.
b) An option to create a new watchlist. Make sure you ask the user what the new
watchlist should be named.
c) An option to delete a particular watchlist.

Expert Solution

We have to use JavaScript for this because you cant perform these actions using HTML only. For that we have to prepare a HTML Layout wich contains the following:

A <div> for watchlists that have created.
A <button> to add new watchlist.
A <input> to take name of new watchlist.

<!DOCTYPE html>
<html>
<head>
  <title>Watchlists</title>
</head>
<body>
  <UL id="watchlist_list">
    <LI>Watchlish 1  <button onclick="delete_watchlist(this)">x</button></LI>
    <LI>Watchlish 2 <button onclick="delete_watchlist(this)">x</button></LI>
    <LI>Watchlish 3 <button onclick="delete_watchlist(this)">x</button></LI>
    <LI>Watchlish 4 <button onclick="delete_watchlist(this)">x</button></LI>
    <LI>Watchlish 5 <button onclick="delete_watchlist(this)">x</button></LI>
  </UL>
  <input type="text" name="watchlist_name" id="watchlist_name"/>
  <button id="create" onclick="add_watchlist()">Create watchlist</button>
</body>
</html>

As you can see I have called delete_watchlist() and add_watchlist() for functionalities. below is the implementation of that two functions in Javascript you can add those fuctions using script tag or keep them saperated using an external javascript file.

Function for add and delete watchlist:

var element_div = document.getElementById('watchlist_list');
function add_watchlist() {
  var watchlist_name = document.getElementById('watchlist_name').value;
  element_div.innerHTML += "<LI>"+watchlist_name
  + ' <button onclick="delete_watchlist(this)">x</button></LI>';
  document.getElementById('watchlist_name').value = "";
}

function delete_watchlist(event)
{
  event.parentNode.parentNode.removeChild(event.parentNode);
}

venereology answered 4 months ago

Create following webpage in HTML : 1. Login Page This is the first page the user...

Create following webpage in HTML : 1. Login Page This is the first page the user should see. The user can login, signup, or continue as a guest. Your task is to implement the following features: a) Signup form This form should collect the information required for creating a new account on your movie database website. At the least, it should collect an email address, username, avatar image/graphic, first name, last name, and a password. You can ask for more...

Create 1 HTML page and 1 CSS file for all the styles. Your html page will...

Create 1 HTML page and 1 CSS file for all the styles. Your html page will be a small gallery of images using the Polaroid style. The page should have at least 1 row of 3 images. You can choose any theme of images. Don't pick random images, make them all have a theme. Add an h1 tag for the header of your page. Style the h1 tag with a color, size, and font family. Include a paragraph tag under...

The code to create a Search/Filter Data with Javascript or html from html page.

HTML Create a page of texts that uses inline elements. The page should contain a citation,...

HTML Create a page of texts that uses inline elements. The page should contain a citation, a term definition, a subscript, a superscript and some highlighted texts.

Please provide HTML code for the following: - Create a page that lists a set of...

Please provide HTML code for the following: - Create a page that lists a set of audio files and shows their duration - Create a page that lists a set of video files and plays a different video when you click on the play icon

(a) Create a HTML page for a single faceted search selector. It will include the name...

(a) Create a HTML page for a single faceted search selector. It will include the name of the facet and a list of radio buttons or tick boxes for each category. (b) Add a button called filter. When the button is clicked the radio button or tick boxes will be read to determine if a selection has been made. The selection will be written to a div element located under the filterbutton. If no selection was made, then an appropriate...

Using brackets you will need to create the HTML page and CSS style sheet for the...

Using brackets you will need to create the HTML page and CSS style sheet for the given Form example. Form 1: create an HTML page with a form that contains a text input field. The label for the text field should be “City”. Beneath it should be a submit button “Lookup”. Place a horizontal line beneath the Lookup button and add three radio buttons labeled “Beginner”, “Intermediate”, and “Advanced”. Your page should have a title and a header in the...

1. Create a PHP page with standard HTML tags. Remember to save the file with the...

1. Create a PHP page with standard HTML tags. Remember to save the file with the .php extension. Inside the <body> tag, create a PHP section that will show the text "Hello World!" 2. For this exercise, echo the phrase "Twinkle, Twinkle little star." Create two variables, one for the word "Twinkle" and one for the word "star". Echo the statement tothe browser. 3. PHP includes all the standard arithmetic operators. For this PHP exercise, you will use them along...

Create a HTML file that prompts the user to enter the number of dice (1-5) to...

Create a HTML file that prompts the user to enter the number of dice (1-5) to play with and display exactly as shown below (example run on Chrome). If the user enters a number less than 1, then set the number to 1. If the user enters a number greater than 5, then set it to 5. Center align elements and use height:200px for dice images. rollDice.html: When user enters a number less than 1 When user enters a number...

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...

Question