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

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...

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

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

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

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

<!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

Need help with creating this JavaScript file. I'm not sure where or how to begin. 1. You are working solely with the DOM object. Thus, you should be coding primarily in the js file. You must use...

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

(Below I have posted my full assignment so my question makes sense with context. The part...

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!'...