New Java Code

[!INDEX]

div color using css class

onclick + input type + value + confirm + alert

getElementById_change_div_color + onclick + classname

change_div_font_color using style.color

change_button_name using value

TODO_list

canvas

change_color_using_css_class

change_color_using_js_attribute

Add_Shapes_Text_Canvas

input_and_events

sliders

Upload_and_Display_an_Image

Convert_an_Image_to_Grayscale

image_Grayscale_Original

Green_Screen_Online

1. div color using css id

<!DOCTYPE html>
<html>
<head>
<title>01_htmlcss</title>
<link rel="stylesheet" type="text/css" href="stysle.css">
<style>
    #firstdiv{
        color:red;
        background-color:rgb(200,200,200);
        font-size:20px;
        Border:2px solid red;
        Padding : 20px ;
        Margin : 40px;
        width:600px;
    }
    #seconddiv{
        color:green;
        background-color:rgb(220,220,220);
        font-size:22px;
        Border:1px solid black;
        Padding : 10px ;
        Margin : 3px;
        width:800px;
    }
</style>
</head>

<body>
  <h1>this is header text</h1>
    <div id ="firstdiv">
        <p>this is FIRST div paragraph </p>
    </div>
    <div id ="seconddiv">
        <p>this is SECOND div paragraph</p>
    </div>
</body>
</html>

2. onclick + input type + value + confirm + alert

<!DOCTYPE html>
<html>
<head>
<title>02_onclick_functions</title>
<link rel="stylesheet" type="text/css" href="stysle.css">
<style>
</style>
</head>

<input  type = "button"
        value = "confirm"
        onclick= "confirmSomething('please clicked confirm or ok ')">

</br></br></br>
<input  type = "button"
        value = "click me"
        onclick= "doSomething()">
        <!-- onclick= "alert('button is clicked')" -->

<script>
function doSomething(){
    alert('button is clicked');
}

function confirmSomething(texxt){
    var x = confirm(texxt);
    if(x==true){
        alert('you clicked = OK');
    }else {
        alert('you clicked = CANCEL');
    }
}
</script>
</body>
</html>

3. getElementById_change_div_color + onclick + classname

<!DOCTYPE html>
<html>
<head>
<title>03_Changing_Pages_Interactively</title>
<link rel="stylesheet" type="text/css" href="stysle.css">
<style>

.blueback{
    background-color:red;
}

.yellowback{
    background-color:blue;
}

<!-- className is a property that allows you to get or set the value of the class attribute of an HTML element. -->
<!-- Purpose: It is primarily used to assign CSS classes to elements, which can control their styling, behavior, and layout -->

</style>
</head>

<div id = "d1">
<p>this is first paragraph </a>
</div>

<div id = "d2">
<p>this is second paragraph </a>
</div>

</br></br></br>
<input  type = "button"
        value = "change color "
        onclick= "changeColor()">
        <!-- onclick= "alert('button is clicked')" -->
<script>

function changeColor(){
    var one = document.getElementById("d1");
    var two = document.getElementById("d2");    
        one.className = "blueback";
        two.className = "yellowback";
}


</script>
</body>
</html>

4. change_div_font_color using style.color

<!DOCTYPE html>
<html>
<head>
<title>03_Changing_Pages_Interactively</title>
<link rel="stylesheet" type="text/css" href="stysle.css">
<style>

.blueback{
    background-color:red;
}

.yellowback{
    background-color:blue;
}

</style>
</head>

<div id = "d1">
<p>this is first paragraph </a>
</div>

<div id = "d2">
<p>this is second paragraph </a>
</div>

</br></br></br>
<input  type = "button"
        value = "change color "
        onclick= "changeColor()">
        <!-- onclick= "alert('button is clicked')" -->
<script>

function changeColor(){
    var one = document.getElementById("d1");
    var two = document.getElementById("d2");    
        one.style.color = "blue";
        two.style.color = "yellow";

}


</script>
</body>
</html>

5. change_button_name using value

<!DOCTYPE html>
<html>
<head>
<title>03_Changing_Pages_Interactively</title>
<link rel="stylesheet" type="text/css" href="stysle.css">
<style>

.blueback{
    background-color:red;
}

.yellowback{
    background-color:blue;
}


</style>
</head>

<div id = "d1">
<p>this is first paragraph </a>
</div>

<div id = "d2">
<p>this is second paragraph </a>
</div>

</br></br></br>
<input  type  = "button"
        value = "change color"
        id    = "mybutton"
        onclick= "changeColor()">
        <!-- onclick= "alert('button is clicked')" -->
<script>

function changeColor(){
    var one = document.getElementById("mybutton");
        one.value = "why u clicked me";
        }
</script>
</body>
</html>

6. TODO_list

<!DOCTYPE html>
<html>
<head>
<title>03_Changing_Pages_Interactively</title>
<link rel="stylesheet" type="text/css" href="stysle.css">
<style>

/* remove indentation of list items */

ul {
   padding-left: 0;
}

/* remove traditional bullet from front of list items */

/* Step 3 below here */

li {
   list-style-type: none;
   background-color: #eee;
   border: 1px solid #c3c3c3;
   padding: 10px 0px 10px 5px;
   font-size : 20px;
}


/* Step 5 below here */

.done {
    background-color:green; 
}
.remove {
    background-color:red; 
}
/* mark task as finished */
/* Step 6 below here */
li.finished {
    color:white();
    background-color:gray;
    text-decoration:line-through;
}
input[type="text"] {
   font-size: 18px;
   width: 94%;
   padding: 10px;
}
input[type="button"] {
   font-size: 1.2em;
   margin: -6px 4px 0px 0px;
}
#addButton {
   padding: 10px;
}
/* Step 10 below here */
.aboutcolor {
    background-color:yellow;
}
/* Step 12 below here */
#divabout {
    width:300px;
    font-size:20px;
    margin:10px;
}
.important {
    background-color:lightblue;
}
</style>
</head>
 <h1 id="myHeader">TO DO List</h1>

<!-- STEPs 1 and 2 below here  -->
  <input  type = "button" id = "addButton" value = "Add" onclick = "addTask()" >
  <input  type = "text" id = "input" placeholder = "Enter Task">
 <hr>
<ul id="tasks">
  <li>

    <input type="button" class="done" onclick="markDone(this.parentNode)" value="&#x2713;" />
    <input type="button" class="remove" onclick="remove(this.parentNode)" value="&#x2715;" />
    <input type="button" id ="important" onclick="important(this.parentNode)" value="!" />  
    make todo list
  </li>
 </ul>
<hr>
<!-- STEPs 8 and 9 below here  -->
    <div id="divabout"></div>
    <input type = "button" value = "About" onclick = "doAbout()" >
<!-- STEP 13 below here  -->
    <input type = "button" value = "Clear" onclick = "clearAbout()" >
<script>

function addTask () {
    var input = document.getElementById("input");
    // get current text from input field
    var newTask = input.value;
    // only add new item to list if some text was entered 
    if (newTask != "") {
        // create new HTML list item
        var item = document.createElement("li");
        // add HTML for buttons and new task text
        // Note, need to use '' because of "" in HTML
        item.innerHTML = '<input type="button" class="done" onclick="markDone(this.parentNode)"  value="&#x2713;" /> ' + '<input type="button" class="remove" onclick="remove(this.parentNode)" value="&#x2715;" /> ' + '<input type="button" id ="important" onclick="important(this.parentNode)" value="!" /> ' +newTask;

        // add new item as part of existing list
        document.getElementById("tasks").appendChild(item); 
        /* Step 4 below here */ 
         input.value = "";
         input.placeholder = "enter next task …";
    }
}

// change styling used for given item
function markDone (item) {
    item.className = 'finished';
}
/* Step 7 below here */
function remove (item) {
    // remove item completely from document
    item.remove();
}
/* Step 11 below here */
function doAbout() {
document.getElementById("divabout").innerHTML= " Author is Susan Rodger";
var g = document.getElementById("divabout");
    g.className = "aboutcolor";

}
/* Step 14 below here */
function clearAbout() {
    document.getElementById("divabout").innerHTML= "";
}
function important(item) {
var g = document.getElementById("important");
    item.className = "important";
}
</script>
</body>
</html>

7. canvas

<!DOCTYPE html>
<html>
<head>
<title>07_canvas</title>
<link rel="stylesheet" type="text/css" href="stysle.css">
<style>

canvas{
    width : 200px;
    height : 100px;
    border : 1px solid red;
}

</style>
</head>
<body>
</br>

<canvas id = "d1">
</canvas>


</br></br>
<input  type = "button"
        value = "lime-color"
        onclick= "dolime()">

<input  type = "button"
        value = "yellow "
        onclick= "doyellow()">

        <!-- onclick= "alert('button is clicked')" -->
<script>

function dolime(){
    var one = document.getElementById("d1");
        one.style.backgroundColor = "lime";
}
function doyellow(){
    var two = document.getElementById("d1");    
    two.style.backgroundColor = "white";    
    var ctx = two.getContext("2d"); // 2d = graphics
    ctx.fillStyle="yellow";
    ctx.fillRect(10,10,100,100);

    ctx.fillStyle="purple";
    ctx.fillRect(120,10,100,100);

    ctx.fillStyle="red";
    ctx.font="16px Arial";
    ctx.fillText(" hello", 10,120);
}

</script>
</body>
</html>

8. change_color_using_css_class

<!DOCTYPE html>
<html>
<head>
<title>08_change_color_using_css_class</title>
<link rel="stylesheet" type="text/css" href="stysle.css">
<style>

canvas{
    width : 200px;
    height : 100px;
    border : 1px solid red;
}

.fuchsiback{
    background-color:fuchsia;
}
.orangeback{
    background-color:orange;
}

</style>
</head>
<body>
</br>

<canvas id = "c1" class = "orangeback">
</canvas>

<canvas id = "c2" class = "fuchsiback">
</canvas>


</br></br>
<input  type = "button"
        value = "change color "
        onclick= "changeColor()">
<script>

function changeColor(){
    var get1 = document.getElementById("c1");   
    get1.className="fuchsiback";        

    var get2 = document.getElementById("c2");       
    get2.className="orangeback";        


}

</script>
</body>
</html>

9. change_color_using_js_attribute

<!DOCTYPE html>
<html>
<head>
<title>09_change_color_using_js_attribute</title>
<link rel="stylesheet" type="text/css" href="stysle.css">
<style>

canvas{
    width : 200px;
    height : 100px;
    border : 1px solid red;
}

.fuchsiback{
    background-color:fuchsia;
}
.orangeback{
    background-color:orange;
}

</style>
</head>
<body>
</br>

<canvas id = "c1" class = "orangeback">
</canvas>

<canvas id = "c2" class = "fuchsiback">
</canvas>


</br></br>

<input  type = "button"
        value = "change color "
        onclick= "doRed()">

<input  type = "button"
        value = "change color "
        onclick= "doBlue()">

<script>

function doRed(){
    var get1 = document.getElementById("c1");   
    get1.style.backgroundColor="red";       
}

function doBlue(){
    var get2 = document.getElementById("c2");       
    get2.style.backgroundColor="blue";      
}

</script>
</body>
</html>

10. Add_Shapes_Text_Canvas

<!DOCTYPE html>
<html>
<head>
<title>10_Add_Shapes_Text_Canvas</title>
<link rel="stylesheet" type="text/css" href="stysle.css">
<style>

canvas{
    width : 200px;
    height : 100px;
    border : 1px solid red;
}

.fuchsiback{
    background-color:fuchsia;
}
.orangeback{
    background-color:orange;
}

</style>
</head>
<body>
</br>
<canvas id = "c1" class = "orangeback">
</canvas>

<canvas id = "c2" class = "fuchsiback">
</canvas>

</br></br>

<input  type = "button"
        value = "change color "
        onclick= "doRed()">

<input  type = "button"
        value = "change color "
        onclick= "doBlue()">

<script>

function doRed(){
    var get1 = document.getElementById("c1");   
    var ctx1 = get1.getContext("2d");
    ctx1.fillStyle="pink";
    ctx1.fillRect(10,10,80,80);

    ctx1.fillStyle="black";
    ctx1.font="18px Arial";
    ctx1.fillText("Hello",20,50);

    ctx1.fillStyle="yellow";
    ctx1.fillRect(100,10,80,80);
}
function doBlue(){
    var get2 = document.getElementById("c2");       
    get2.style.backgroundColor="blue";  

    var get1 = document.getElementById("c1");   
    var ctx1 = get1.getContext("2d");
    ctx1.clearRect();
}

</script>
</body>
</html>

11. input_and_events

<!DOCTYPE html>
<html>
<head>
<title>11_input_and_events</title>

<style>

canvas{
    width : 200px;
    height : 100px;
    border : 1px solid red;
}

.fuchsiback{
    background-color:fuchsia;
}
.orangeback{
    background-color:orange;
}

</style>
</head>
<body>
</br>

<canvas id = "c1">
</canvas>

</br></br>

<input  type = "button"
        value = "change color "
        onclick= "doRed()">

<input  type = "color"
        id ="clr"
        onchange = "doChangeColor()"> // mst = onchange-onclick

<script>
function doRed(){
    var canvas = document.getElementById("c1"); 
    canvas.style.backgroundColor="red";
}

function doChangeColor(){
    var canvas = document.getElementById("c1");     
    var colorPicker  = document.getElementById("clr");  
    var chosenColor  = colorPicker.value; // mst value()
    canvas.style.backgroundColor = chosenColor ; 
}

</script>
</body>
</html>

12. sliders

<!DOCTYPE html>
<html>
<head>
<title>12_sliders</title>

<style>
    h1 {
      font-family: arial;
      color: dimgray;
    }
    body {
      margin: 20px;
    }
    canvas {
      width: 300pt;
      //height: 200pt;
      margin: 10px;
      border: 1px solid lightgray;
    }
    input {
      font-size: 20pt;
    }
    .orangeback {
      background-color: orange;
    }
</style>
</head>
    <body>
    </br>
    <h1>Slider practice</h1>
    <canvas id="can" class="orangeback">
    </canvas>   
    <p>
        <input type="color" value="#FF0000" id="clr" onchange="doColor()" >
        <input type="range" min="10" max="100" value="10" id="slr" oninput=doSquare()>
    </p>
<script>
    function doColor() {
      var canvas = document.getElementById("can");
      var colorinput = document.getElementById("clr");
      canvas.style.backgroundColor = colorinput.value;
    }

    function doSquare() {
      var sliderinput = document.getElementById("slr");
      var len = sliderinput.value;
      var canvas = document.getElementById("can");
      var context = canvas.getContext("2d");
      context.clearRect(0,0,canvas.width,canvas.height);
      context.fillStyle = "yellow";
      context.fillRect(10,10,len,len);
      context.fillRect(parseInt(len)+20,10,len,len);
      context.fillRect(len*3,10,len,len);
    }
</script>
    </body>
</html>

13. Upload_and_Display_an_Image

<!DOCTYPE html>
<html>
<head>
<title>13_Upload_and_Display_an_Image</title>

<style>
    h1 {
      font-family: arial;
      color: dimgray;
    }
    body {
      margin: 20px;
    }
    canvas {
      width: 300pt;
      margin: 10px;
      border: 1px solid lightgray;
    }
    input {
      font-size: 20pt;
    }
    .orangeback {
      background-color: orange;
    }
</style>
<script src = "https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js">
</script>
</head>
    <body>
    </br>
    <h1>13_Upload_and_Display_an_Image</h1>
    <canvas id="can" >
    </canvas>
    <p>
    <input type = "file" multiple = "false" accept = "image/* " id="fimage"  onchange="upload()" >
    </p>
<script>
    function upload() {
        var c1 = document.getElementById("can");
        var f1 = document.getElementById("fimage");
        var newimg = new SimpleImage(f1);
        newimg.drawTo(c1);      
    }
</script>
    </body>
</html>

14. Convert_an_Image_to_Grayscale

<!DOCTYPE html>
<html>
<head>
<title>14_Convert_an_Image_to_Grayscale</title>

<style>
    h1 {
      font-family: arial;
      color: dimgray;
    }
    body {
      margin: 20px;
    }
    canvas {
      width: 300pt;
      margin: 10px;
      border: 1px solid lightgray;
    }
    input {
      font-size: 20pt;
    }
    .orangeback {
      background-color: orange;
    }
</style>
<script src = "https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js">
</script>
</head>
<body>
</br>
<h1>14_Convert_an_Image_to_Grayscale</h1>
<canvas id="can" >
</canvas>

<p>
<input type = "file" multiple = "false" accept = "image/* " id="fimage"  onchange="upload()" >
<input type = "button" value = "Make it Gray" id="btn"  onclick="makegrascale()" >
</p>

<script>
var newimg;
var c1;
function makegrascale(){
    for( var pxl of newimg.values()){
        var rR = pxl.getRed();
        var gG = pxl.getGreen();
        var bB = pxl.getBlue();
        var newval = (rR+gG+bB)/3;
        pxl.setRed(newval);
        pxl.setGreen(newval);
        pxl.setBlue(newval);    
    }
    newimg.drawTo(c1);
}

function upload() {
    c1 = document.getElementById("can");
    var f1 = document.getElementById("fimage");
    newimg = new SimpleImage(f1);
    newimg.drawTo(c1);

}
</script>
</body>
</html>

15. image_Grayscale_Original

<!DOCTYPE html>
<html>
<head>
<title>15_image_Grayscale_Original</title>

<style>
    h1 {
      font-family: arial;
      color: dimgray;
    }
    body {
      margin: 20px;
    }
    canvas {
      width: 300pt;
      margin: 10px;
      border: 1px solid lightgray;
    }
    input {
      font-size: 20pt;
    }
    .orangeback {
      background-color: orange;
    }
</style>
<script src = "https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js">


</script>
</head>
<body>
</br>
    <h1>15_image_Grayscale_Original</h1>
    <p>
    <canvas id="can1" ></canvas>
    <canvas id="can2" ></canvas>
    </p>
    <p>
    <input type = "file" multiple = "false" accept = "image/* " id="fimage"  onchange="upload()" >
    <input type = "button" value = "Make it Gray" id="btn"  onclick="makegrascale()" >
    </p>

<script>

var newimg;
var c1, c2;
function makegrascale(){
    c2 = document.getElementById("can2");
    for( var pxl of newimg.values()){
        var rR = pxl.getRed();
        var gG = pxl.getGreen();
        var bB = pxl.getBlue();     
        var newval = (rR+gG+bB)/3;
        pxl.setRed(newval);
        pxl.setGreen(newval);
        pxl.setBlue(newval);    
    }
    newimg.drawTo(c2);
}
function upload() {
    c1 = document.getElementById("can1");
    var f1 = document.getElementById("fimage");
    newimg = new SimpleImage(f1);
    newimg.drawTo(c1);  
}
</script>
</body>
</html>

16. Green_Screen_Online

<!DOCTYPE html>
<html>
  <head>
    <title>16_Green_Screen_Online</title>
    <style>
      h1 {
        font-family: arial;
        color: dimgray;
      }

      body {
        margin: 20px;
      }

      canvas {
        width: 300pt;
        margin: 10px;
        border: 1px solid lightgray;
      }

      input {
        font-size: 20pt;
      }

      .orangeback {
        background-color: orange;
      }
    </style>
    <script src="https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"></script>
  </head>
  <body>
    </br>
    <h1>Green Screen Web Page</h1>
    <canvas id="fgcan"></canvas>
    <canvas id="bgcan"></canvas>
    <p> Foreground: <input type="file" multiple="false" accept="image/*" id="fgfile" onchange="loadForegroundImage()">
    </p>
    <p> Background: <input type="file" multiple="false" accept="image/*" id="bgfile" onchange="loadBackgroundImage()">
    </p>
    <p>
      <input type="button" value="Create Composite" onclick="doGreenScreen()">
      <input type="button" value="Clear Canvases" onclick="clearCanvas()">
    </p>
    <br>
    <br>
    <script>
      var fgImage = null;
      var bgImage = null;
      var fgCanvas;
      var bgCanvas;

      function loadForegroundImage() {
        var file = document.getElementById("fgfile");
        fgImage = new SimpleImage(file);
        fgCanvas = document.getElementById("fgcan");
        fgImage.drawTo(fgCanvas);
      }

      function loadBackgroundImage() {
        var file = document.getElementById("bgfile");
        bgImage = new SimpleImage(file);
        bgCanvas = document.getElementById("bgcan");
        bgImage.drawTo(bgCanvas);
      }

      function createComposite() {
        // this function creates a new image with the dimensions of the foreground image and returns the composite green screen image
        var output = new SimpleImage(fgImage.getWidth(), fgImage.getHeight());
        var greenThreshold = 240;
        for (var pixel of fgImage.values()) {
          var x = pixel.getX();
          var y = pixel.getY();
          if (pixel.getGreen() > greenThreshold) {
            //pixel is green, use background
            var bgPixel = bgImage.getPixel(x, y);
            output.setPixel(x, y, bgPixel);
          } else {
            //pixel is not green, use foreground
            output.setPixel(x, y, pixel);
          }
        }
        return output;
      }

      function doGreenScreen() {
        //check that images are loaded
        if (fgImage == null || !fgImage.complete()) {
          alert("Foreground image not loaded");
        }
        if (bgImage == null || !bgImage.complete()) {
          alert("Background image not loaded");
        }
        // clear canvases
        clearCanvas();
        // call createComposite, which does green screen algorithm and returns a composite image
        var finalImage = createComposite();
        finalImage.drawTo(fgCanvas);
      }

      function clearCanvas() {
        doClear(fgCanvas);
        doClear(bgCanvas);
      }

      function doClear(canvas) {
        var context = canvas.getContext("2d");
        context.clearRect(0, 0, canvas.width, canvas.height);
      }
    </script>
  </body>
</html>

Code Sections

1. div color using css id

2. onclick + input type + value + confirm + alert

3. getElementById_change_div_color + onclick + classname

4. change_div_font_color using style.color

5. change_button_name using value

6. TODO_list

7. canvas

8. change_color_using_css_class

9. change_color_using_js_attribute

10. Add_Shapes_Text_Canvas

11. input_and_events

12. sliders

13. Upload_and_Display_an_Image

14. Convert_an_Image_to_Grayscale

15. image_Grayscale_Original

16. Green_Screen_Online