Question

In: Computer Science

This should be done in JavaScript. The HTML file should only contain an empty main tag....

This should be done in JavaScript. The HTML file should only contain an empty main tag. All other HTML on the page should be created with JavaScript. The JavaScript file should be a separate file.  

  • Make an empty HTML file, put an empty main tag inside the body.
  • In your JavaScript, use querySelector to get a reference to the main tag and save it in a variable named main.
  • Look up three good jokes and store them as separate variables in your JavaScript.
  • Define an HTML template with a template string. Make a heading for your template that says "My Jokes" and make a list of your three jokes, inserting the variables as items in the list.
  • Put the template inside the main tag.
  • Make a paragraph tag with the document.createElement method and save it to a variable.
  • Add the text "That's all folks!" as text content to the newly created paragraph tag.
  • Append the paragraph tag to the body tag of your HTML page.

Solutions

Expert Solution

temp.htm

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <main></main>

    <script src="./temp.js"></script>

</body>

</html>

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

temp.js

const main = document.querySelector('main');

//jokes

const joke1 = `What do you call a crying sister? A crisis`;

const joke2 = `I have a joke on black hole but it sucks`;

const joke3 = `What do we call a bee born in United States? A USB`;

//template html string

const template = `<h3>My Jokes</h3>

<ul>

<li>${joke1}</li>

<li>${joke2}</li>

<li>${joke3}</li>

</ul>`;

//set main to template

main.innerHTML = template;

//create paragraph and text node

const para = document.createElement('p');

const text = document.createTextNode("That's all folks!");

para.appendChild(text);

document.body.appendChild(para);


Related Solutions

Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration"...
Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial value 0 A <button> tag labeled "Start" Script: When the user presses the button (1b), a function will begin that does the following: Reads the value from the input field (1a) Removes the <input> and <button> tags (1a & 1b) Creates a new <p> tag, initialized to show the input value Starts a timer that ticks down to zero. For every...
This needs to be written in JavaScript with two files. One HTML file and a JavaScript...
This needs to be written in JavaScript with two files. One HTML file and a JavaScript file. Make an empty HTML file, put three buttons inside the body and an empty main tag below the buttons. The text of the buttons should be "Foo", "Bar", and "FooBar" respectively. Don't put the " in the buttons that's just for clarification in these instructions. Add unique IDs to each button In your JavaScript, get 3 separate references to the buttons using the...
Write, test, and debug (if necessary) HTML file with the Javascript codes in an external file...
Write, test, and debug (if necessary) HTML file with the Javascript codes in an external file for the following problem: Input: a number, n, using prompt, which is the number of the factorial numbers to be displayed. Output: a bordered table of numbers with proper caption and headings in which the first column displays the numbers from 1 to n and the second column displays the first n factorial numbers. For example, if a user enters 10 to be the...
Create a footer for web page using HTML,CSS,Javascript. The footer should contain 1.Back to top button...
Create a footer for web page using HTML,CSS,Javascript. The footer should contain 1.Back to top button 2.Random logo 3.Copyright content
Using HTML and JAVASCRIPT Create a Content area on the main entry page will include inputs...
Using HTML and JAVASCRIPT Create a Content area on the main entry page will include inputs for customer entry for the following: Entry field (with labeling) for the Customer's name Entry field (with labeling) for the Customer's email address Entry field (with labeling) for which room the customer is planning on painting Entry field (with labeling) for the width of the room Entry field (with labeling) for the length of the room Entry field (with labeling) using a colour box...
use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file...
use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file that uses createElement and appendChild to dynamically insert three paragraphs when a button is clicked. (b) Create a HTML file that includes JavaScript that is similar to: let recs = [“my item …1”,”my item…2”, …] i.e. an array that contains several CSV item records. When the user clicks a button, each array element will be rendered as a list element. Use a HTML list....
Create an ASP.NET Core MVC solution, edit the main view to contain an HTML form that...
Create an ASP.NET Core MVC solution, edit the main view to contain an HTML form that asks for first name, last name, and email address. The form should also have a submit button, though the submit button doesn't have to do anything yet. looking for an HTML mockup inside an ASP.NET Core MVC Solution.
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Please no JavaScript...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Please no JavaScript or Bootstrap. Website theme can be anything you want: a country, a town, a place, a hobby, people (yourself, your family...), pets, flowers, food, or anything that you find interesting or useful. It may be about real people/places/things or fictitious. Part 1: Content (HTML) After you decide the theme of your website, create HTML pages with the content you want to present. Remember to...
HTML document containing a form. The title bar should display “Voting Form”. The form should contain...
HTML document containing a form. The title bar should display “Voting Form”. The form should contain the following: Text boxes to accept the person’s name and e-mail address At least five radio buttons the user can use to vote for a candidate for some office. (You make up some names) Text box for write-in alternative Checkboxes with name and value attributes for these options: oThis is the first time I have voted online. o I have periodically voted online. o...
Write a log-in log-out session using PHP, CSS, and HTML only. NO MYSQL and JavaScript allowed....
Write a log-in log-out session using PHP, CSS, and HTML only. NO MYSQL and JavaScript allowed. 1. Need an HTML form and a login form; separate file. 2. need a CSS file to make it look good 3. Must store visitors' info in a .txt file and validate from there if the user exists before granting access to the dashboard. If the user does not exist, render the form to signup. If the user exists take them to their dashboard....
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT