Must be car Themed My first JS-DOM color:red; text node!'); //creates 'This is a text node!'...

Question

Question

One of JavaScripts powers is to be able to interact with the DOM directly. Youve seen this when using commands such as docu

Must be car Themed

My first JS-DOM

color:red;

text node!'); //creates 'This is a text node!'

color:blue; font-family: arial;

Clicker Counter: 0

Interface should look something like this, but does not have to be one for one like this picture

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

Note that the image you are referring to is not visible.But from the Notes you have given. I have inferred the following:

Save the file with extension.html and run it on browser.

Source Code:

<html>
<head>
   <title>My first JS-DOM</title>
   <style>
       #finished{
           color:blue;
           float:right;
       }
       #myUL{
           color:red;
       }
       h1{
           text-align: center;
       }
   </style>
</head>
<body>
   <h1>My First JS DOM TODO List</h1>
   <p id="finished">Finished Tasks : <span id="count">0</span></p>
   <button class = "add" onclick="addTask()">Add a task</button>
   <ul id="myUL">

   </ul>
</body>
<script>
   function addTask(){
       var txt = window.prompt("What to add to the list?","");
       //creating the checkbox
       var x = document.createElement("INPUT");
       x.setAttribute("type", "checkbox");
       x.addEventListener( 'change', function() {
       if(this.checked) {
   var c = document.getElementById("count").innerHTML;
   var incr = parseInt(c)+1;
   document.getElementById("count").innerHTML=incr;

       } else {
   var c = document.getElementById("count").innerHTML;
   var incr = parseInt(c)-1;
   document.getElementById("count").innerHTML=incr;
   }
       });
       //creating the list
       var li = document.createElement("li");
        var t = document.createTextNode(txt);
        li.appendChild(x);
        li.appendChild(t);
        if (txt === '') {
       alert("You must write something!");
       } else {
       document.getElementById("myUL").appendChild(li);
       }
   }

</script> <head> <title>My first JS-DOM</title> <style> #finished color:blue; float:right; } #myUL{ color:red; hi{ text-align: center;

OUTPUT:

Add a comment

Answer 2

Must be car Themed My first JS-DOM color:red; text node!'); //creates 'This is a text node!'...

Homework Answers

Add Answer to:
Must be car Themed My first JS-DOM color:red; text node!'); //creates 'This is a text node!'...

Post as a guest

Earn Coins

NEED HELP DIRECTIONS: Notice that there is one input area and two buttons There is a...

In this problem, you will create a selectable “To Do” List. To add a task to...

Javascript to edit a HTML file. Where to begin? <!doctype html> <html> <head> <meta charset="utf-8"> <title>TODO:...

WEB230 - JavaScript 1 Assignment 6a Use Events and DOM manipulation to create a playable Tic...

Hello! I am to create a .js file that allows the paragraph on the bottom of...

can you do this js and html question. ill give you the html and js and...

This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...

i need help with this homework webpage and code too: The webpage must include: Global Structure...

Modify an application that lets users add tasks to a list so the tasks can also...

Design a program using Python and using from flask Import flask that generates a lottery number...

Must be car Themed My first JS-DOM color:red; text node!'); //creates 'This is a text node!'...

Homework Answers

Add Answer to: Must be car Themed My first JS-DOM color:red; text node!'); //creates 'This is a text node!'...

Post as a guest

Earn Coins

Add Answer to:
Must be car Themed My first JS-DOM color:red; text node!'); //creates 'This is a text node!'...