CPSDay4
<!-- FinalProject.html CPS 2023 phcode.dev is online version of Brackets -->
<html>
<head>
<style>
body{
color:crimson;
font-size: 24.0px;
font-weight: bold;
font-family: "courier new";
}
</style>
<script>
var hexDigits = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
function convertDectoHex(val)
{
var ans = ""
for( ;val/2 != 0 ; )
{
var remainder = val % 16;
ans = hexDigits[remainder] + ans;
val = Math.floor(val / 16);
}
document.getElementById("HexOutput").innerHTML = ans;
}
function print(str)
{
document.getElementById("output").innerHTML += str + "<br />";
}
</script>
</head>
<body>
<canvas id="cnv" width="200" height="200"></canvas>
<script>
var ctx = cnv.getContext("2d");
var data = ctx.createImageData(200,200);
var buf = new Uint32Array(data.data.buffer);
var bufColor = "FF0000FF"; // default color is red
</script>
<div id="t"></div>
<button onclick="setRGB(255,0,255);drawRectangle(0,0,50,70)"> Convert!</button>
<input type="text" id = "Heximal" />
<div id = "output"></div>
<script src="ICEGraphics2023.js"></script>
<br />
<input type="week" />
<input type="color" />
</body>
</html>
Converting HTML and Javascript Into a Working Wepage
Guess Game Using Functions and Lists
<input type='text' id="min" />
<input type='text' id="max" />
<input type="button" value="run"
onclick="program(eval(document.getElementById('min').value),
eval(document.getElementById('max').value) )" />
<div id="disp"></div>
// HTML ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Javascript vvvvvvvvvvvvvvvvvvvvvvv
// GUESS GAME
function print(str)
{
document.getElementById("disp").innerHTML += str + "<br />";
}
function sum(list)
{
var total = 0;
for (index = 0; index < list.length; index++)
{
total += list[index];
}
return total;
}
function displayPercentages(list)
{
print('index: percentage');
var total = sum(list);
var percentagesSum = 0;
for (index = 0; index < list.length; index++)
{
var percentage = list[index] / total;
print(index + " : " + percentage );
percentagesSum += percentage;
}
return percentagesSum;
}
function playGame(min, max)
{
var number = min + Math.trunc( (max-min+1)*Math.random() );
// print(number);
// var min = 0;
// var max = 100;
for (rep = 1; rep < 10; rep++)
{
var guess = Math.trunc( (min + max)/2 ); // only use quotient
// print("The guess is " + guess);
if (guess == number)
{
// print("The number is " + number + ", you are correct in " + rep + " guesse(s)!");
return rep;
}
else if (guess > number)
{
// print("The guess is too large");
max = guess - 1;
}
else
{
// print("The guess is too small");
min = guess + 1;
}
}
}
function program(min, max)
{
var list = [0,0,0,0,0,0,0,0,0,0];
document.getElementById("disp").innerHTML = "";
for (game = 1; game <= 1000000; game++)
{
list[ playGame(min, max) ]++;;
}
print(list);
var sumOfPercentages = displayPercentages(list);
print(sumOfPercentages);
}
Writing About Code
Enter in your journal responses to the following prompts:
What is the purpose of the program?
What input does the program use?
What output does the program generate?
What functions does the program use?
(Name each function purpose, parameters, and return values if applicable.)What lists does the program use?
(Mention the identifier used to name the list and include the purpose of the list.)How is iteration used in the program?
How is selection used in the program?
Creating a Video of the Program Running
https://screencast-o-matic.com/
Quicktime
Windows Movie Maker
Learn Keyboard Shortcuts for Screen Recording
<!-- Personal Page -->
Personal Page
<html>
<head>
<script>
function changePageColor(box)
{
if ( box.checked )
{
var boxContent = document.getElementById("pageColor").value;
if ( boxContent == "")
document.body.style.background = 'powderblue';
else
document.body.style.background = boxContent;
}
else
{
document.body.style.background = 'gold';
}
}
function respond(device)
{
document.getElementById("runner").innerHTML = device.value +
" is an excellent runner.";
}
function setInitials()
{
document.getElementById("initials").innerHTML =
document.getElementById("fname").value.substring(0,1) + ". " +
document.getElementById("lname").value.substring(0,1) + ".";
}
function evaluateTime(rad)
{
if (rad.value == "9")
{
document.getElementById("times").innerHTML = "Keep practicing."
}
else if (rad.value == "8")
{
document.getElementById("times").innerHTML = "Try for 7:59."
}
else if (rad.value == "7")
{
document.getElementById("times").innerHTML = "Try for 6:59."
}
else if (rad.value == "6")
{
document.getElementById("times").innerHTML = "Very respectable."
}
else if (rad.value == "5")
{
document.getElementById("times").innerHTML = "You are a competitor."
}
else if (rad.value == "4")
{
document.getElementById("times").innerHTML = "One of the very best."
}
else if (rad.value == "3")
{
document.getElementById("times").innerHTML = "Record Setter!!!"
}
}
function print(str)
{
document.getElementById("output").innerHTML += str + "<br />";
}
var boxes = [];
function examineLikes()
{
if (boxes.length == 0)
{
boxes.push( document.getElementById("box1") );
boxes.push( document.getElementById("box2") );
boxes.push( document.getElementById("box3") );
boxes.push( document.getElementById("box4") );
}
document.getElementById("output").innerHTML = "";
// print("length: " + boxes.length);
var count = 0;
for (var rep = 0; rep < boxes.length; rep++)
{
if (boxes[rep].checked)
{
count++;
}
}
if (count == 0)
{
print("You have no interest in running.");
}
else if (count <= 2)
{
print("Thank you for revealing your running interest.");
}
else
{
print("You are a true running enthusiast!");
}
}
function changePics(pic)
{
for (var rep = 0; rep < document.images.length; rep++)
{
document.images[rep].src = pic;
}
}
</script>
</head>
<body style="background-color:gold">
<input type="checkbox" onclick="changePageColor(this)" />
Change background color<br />
<input type="text" id="pageColor" onclick="changePageColor(this)" /> Color
<br /><br />
First name: <input type="text" id="fname" name="fname"><br />
Last name: <input type="text" id="lname" name="lname"><br />
<input type="button" value="Initials" onclick="setInitials()" />
<div id="initials"></div>
<h1> </h1>
<label for="Runners">Choose a runner to see their stats:</label>
<select id="runners" onChange="respond(this)">
<option value="runner">Runner</option>
<option value="Colin">Colin</option>
<option value="Aaron">Aaron</option>
<option value="Lex">Lex</option>
<option value="Leo">Leo</option>
<option value="Nico">Nico</option>
</select>
<div id="runner"></div>
<hr />
<p>Whats you mile time?</p>
<input type="radio" name="mileTime"
onChange=evaluateTime(this) value="9">9:00 or more<br />
<input type="radio" name="mileTime"
onChange=evaluateTime(this) value="8">8:00-8:59<br />
<input type="radio" name="mileTime"
onChange=evaluateTime(this) value="7">7:00-7:59<br />
<input type="radio" name="mileTime"
onChange=evaluateTime(this) value="6">6:00-6:59<br />
<input type="radio" name="mileTime"
onChange=evaluateTime(this) value="5">5:00-5:59<br />
<input type="radio" name="mileTime"
onChange=evaluateTime(this) value="4">4:00-4:59<br />
<input type="radio" name="mileTime"
onChange=evaluateTime(this) value="3">3:00-3:59<br />
<div id="times"></div>
<hr />
<p1>What do you like about running?</p1><br>
<input type="checkbox" id="box1" />
I just feel like running.<br />
<input type="checkbox" id="box2" />
The free water after the race is nice.<br />
<input type="checkbox" id="box3" />
It takes me places.<br />
<input type="checkbox" id="box4" />
I like to be tired when I go to bed at night<br />
<input type="button" value="Feedback" onclick="examineLikes()" />
<div id="output"></div>
<img src="cat.png" width="50" />
<img src="cat.png" width="50" />
<img src="cat.png" width="50" />
<img src="cat.png" width="50" /><br />
<input type="button" value="Feedback" onclick="changePics('smile.gif')" />
</body>
</html>