Digital Paradise: June 2021

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>