Digital Paradise

Tuesday, June 15, 2021

Compilation and Animation Tutorial Finals Project

The following video is a Tutorial for Animating in HTML made by yours truly.

And the following is the compilation using a previous exercise which is using iFrames in HTML.

The code is will be provided here:

<!DOCTYPE html>

<html>

<head>

<style>

iframe:focus {

outline: none;

}

iframe[seamless] {

display: block;

}

.navbar {

overflow: hidden;

background-color: #333;

}

.navbar a {

float: left;

font-size: 16px;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

.dropdown {

float: left;

overflow: hidden;

}

.dropdown .dropbtn {

font-size: 16px;

border: none;

outline: none;

color: white;

padding: 14px 16px;

background-color: inherit;

font-family: inherit;

margin: 0;

}

.navbar a:hover, .dropdown:hover .dropbtn {

background-color: red;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

.dropdown-content a {

float: none;

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

}

.dropdown-content a:hover {

background-color:dark-red;

}

.dropdown:hover .dropdown-content {

display: block;

}

</style>

</head>

<body>

<a href="https://www.facebook.com/media/set/?set=a.1840113652672222&type=3 target">Gallery</a>

<button class="dropbtn">Web Programming

</button>

<a href="https://startingdigitally.blogspot.com/2021/04/web-programming-css-color-palette.html" target="iframe1">Exercise 6</a>

<a href="https://startingdigitally.blogspot.com/2021/04/web-programming-exercise-7.html" target="iframe1">Exercise 7</a>

<a href="https://startingdigitally.blogspot.com/2021/04/web-programming-exercise-8-css-sidebar.html" target="iframe1">Exercise 8 </a>

<a href="https://startingdigitally.blogspot.com/2021/05/web-programming-exercise-9.html" target="iframe1">Exercise 9</a>

<a href="https://startingdigitally.blogspot.com/2021/05/web-programming-exercise-10.html" target="iframe1">Exercise 10 </a>

<a href="https://startingdigitally.blogspot.com/2021/05/web-programming-exercise-11.html" target="iframe1">Exercise 11 </a>

</div>

<button class="dropbtn">Interactive Media Design

</button>

<a href="https://startingdigitally.blogspot.com/2021/04/interactive-media-design-switch-case.html" target="iframe1">Exercise 6 </a>

<a href="https://startingdigitally.blogspot.com/2021/04/interactive-media-design-exercise-7.html" target="iframe1">Exercise 7</a>

<a href="https://startingdigitally.blogspot.com/2021/05/interactive-media-design-exercise-8.html" target="iframe1">Exercise 8 </a>

<a href="https://startingdigitally.blogspot.com/2021/05/interactive-media-design-exercise-10.html" target="iframe1">Exercise 9</a>

<a href="https://startingdigitally.blogspot.com/2021/06/interactive-media-design-exercise-10.html" target="iframe1">Exercise 10 </a>

<a href="https://startingdigitally.blogspot.com/2021/06/interactive-media-design-exercise-11.html" target="iframe1">Exercise 11 </a>

<a href="https://startingdigitally.blogspot.com/2021/06/interactive-media-design-exercise-12.html" target="iframe1">Exercise 12 </a>

</div>

<h2 id="home"> Compilation of Activities Finals Project</h2>

</iframe>

</iframe>

</div>

</body>

</html>

Interactive Media Design Exercise 12

The following is a video showcasing the Exercise 12 for the subject Interactive Media Design which is about a log in and sign up form.

If you would like to view the links then click here so you may download them and view them at your leisure.

Additionally, it has also been put into a previous exercise for compilation purposes.

Monday, June 14, 2021

Interactive Media Design Exercise 11

The following is a picture of the output for the subject Interactive Media Design Exercise 11 which features a chat box.

Exercise 11

If you would like to view the file and use it for yourself then click here.

Additionally, it has also been put into a previous activity for compilation purposes.

Sunday, June 13, 2021

Interactive Media Design Exercise 10

The following is the output for the subject Interactive Media Design Exercise 10.

Exercise 10

If you wish to download the file for yourself then click here.

Additionally, it has been added to a previous webpage for compilation purposes.

The code will also be pasted here for your convenience.

<!DOCTYPE html>

<html>

<head>

<title> Counting Game </title>

<style>

html {

margin-left: 10px;

background-color: #525252;

}

body {

max-width: 500px;

min-width: 480px;

}

fieldset {

background-color: white;

}

button {

background-color: #5c5c5c;

color: black;

border-radius: 10px;

width: 100px;

height: 50px;

}

</style>

</head>

<body>

</canvas>

<label> Count the boxes </label>

<button id="compare" onclick="compare();eraser()" > Answer </button>

<p> <b> Correct answers: </b> </p> <div id="myScore"> 0 </div>

</fieldset>

var score=0;

function colors()

{

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

x=Math.round(Math.random()*10+1);

for(f=1; f<=x;f++)

{

switch(f)

{

case 1: c="#000000"; break

case 2: c="#000000";break

case 3: c="#000000"; break

case 4: c="#000000";break

case 5: c="#000000"; break

case 6: c="#000000"; break

case 7: c="#000000"; break

case 8: c="#000000"; break

case 9: c="#000000"; break

case 10: c="0000000"; break

}

ctx.font = "20px Calibri";

ctx.fillStyle=c;

ctx.fillRect(10+f*100,100, 50, 50);

}

function eraser()

{

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.clearRect(0,0,1200,300);

colors();

}

colors()

function compare()

{

ans=document.getElementById("answer").value

if (ans==x) {

score += 1;

document.getElementById("myScore").innerHTML=score.toString()

document.getElementById("demo").innerHTML="Correct"

}

else {

document.getElementById("demo").innerHTML="Incorrect"

}

</script>

</body>

</html>

Friday, May 28, 2021

Interactive Media Design Exercise 9

The following screenshot is an activity made for Interactive Media Design.

A flower made in HTML

If you would like to view the file for yourself, click here.

The code will also be pasted here for your convenience.

<html>

<head>

<title> Javascript Code : Draw on HTML Canvas using Javascript - Circle, Arc, Rectangle, Square , Lines , Shapes , BUtton Controlled Drawing </title>

</head>

<body>

Your browser does not support the HTML canvas tag.</canvas> <br />

<button id="clouds" onclick="Clouds()"> Cloud </button>

<button id="flower" onclick="Flower()"> Flower </button>

<button id="clear" onclick="Erase()"> Clear </button>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

function Flower()

{

ctx.fillStyle = "#ebf283";

ctx.fillRect(490,250,20,530);

ctx.fillStyle = "#fc9fe8";

ctx.beginPath();

ctx.arc(500, 150,50, 0, 2 * Math.PI);

ctx.fill();

ctx.fillStyle = "#fc9fe8";

ctx.beginPath();

ctx.arc(575, 200,50, 0, 2 * Math.PI);

ctx.fill();

ctx.fillStyle = "#fc9fe8";

ctx.beginPath();

ctx.arc(425, 200,50, 0, 2 * Math.PI);

ctx.fill();

ctx.fillStyle = "#fc9fe8";

ctx.beginPath();

ctx.arc(455, 280,50, 0, 2 * Math.PI);

ctx.fill();

ctx.fillStyle = "#fc9fe8";

ctx.beginPath();

ctx.arc(545, 280,50, 0, 2 * Math.PI);

ctx.fill();

ctx.fillStyle = "#ebf283";

ctx.beginPath();

ctx.arc(500, 225, 60, 0, 2 * Math.PI);

ctx.fill();

}

function Sky()

{

ctx.fillStyle = "#a1f9ff";

ctx.fillRect(0,0,1000,1000);

}

function Clouds()

{

ctx.fillStyle = "#ffffff";

ctx.beginPath();

ctx.arc(200, 100, 60, 0, 2 * Math.PI);

ctx.fill();

ctx.fillStyle = "#ffffff";

ctx.beginPath();

ctx.arc(245, 125, 60, 0, 2 * Math.PI);

ctx.fill();

ctx.fillStyle = "#ffffff";

ctx.beginPath();

ctx.arc(340, 125, 70, 0, 2 * Math.PI);

ctx.fill();

ctx.fillStyle = "#ffffff";

ctx.beginPath();

ctx.arc(180, 175, 70, 0, 2 * Math.PI);

ctx.fill();

ctx.fillStyle = "#ffffff";

ctx.beginPath();

ctx.arc(400, 185, 60, 0, 2 * Math.PI);

ctx.fill();

ctx.fillStyle = "#ffffff";

ctx.fillRect(180,155,220,90);

}

function Erase()

{

ctx.clearRect(0,0,1000,500);

}

</script>

</body>

</html>

Web Programming Exercise 11

The following is a screenshot of the Web Programming Exercise 11 which is about embedding videos onto an html file.

Web Programming Exercise 11

If you would like to access the file and tweak it for yourself, click here.

Now the following screenshot is where this exercise is integrated into a previous exercise.

Audio Video in iFrame Exercise

The file can be accessed in the previous link given.

Monday, May 17, 2021

Web Programming Exercise 10

The following is the output for the Web Programming Activity 10 where it features animation made entirely in HTML.

If you would like to view the raw file of the animation and its HTML file, click here to download them.

Additionally, it's also needed to put it in a past activity, and I will show it here.