Personal Branding
Posts
Activity #4 (Finals) Password form to open your blog
SIGN UP CODE <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Password form to open your blog </title> </head> <style> body { font-size: 16px; background: #AB2121; font-family: Arial; } * { box-sizing: border-box; } h2 { text-align: center; } input[type=text], input[type=password], input[type=confirm-password-input] { width: 100%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none; background: white; } input[type=text]:focus, input[type=password]:focus, input[type=confirm-password-input]:focus. { background-color: #AB2121; outline: none; } button { background-color: Black; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; opacity: 0.9; } button:hover { opacity:1; } form { width: 600px; background: #AB2121; border: 1px solid #ccc; margin: 1.5% auto auto auto; border-radius: 5px...
Activity #3 (Finals) Counting Drill Game
HTML CODE <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Counting Drill Game </title> <style> body { max-width: 200px; min-width: 580px; } fieldset { background-color: white; margin: auto; align-content: center; padding: 60px; width: 100px; height: 600px; } buon { background-color: black; color: white; border-radius: 10px; width: 100px; height: 50px; } .demo{ background-color:red; color:yellow; font-size: 20px; } html { font-family: arial; margin-left: 4%; background-color: maroon; } </style> </head> <body> <h1> Counting Drill Game</h1> <p> Count how many square on the screen! </p> <fieldset> <canvas id="myCanvas" width="900" height="200" style="border:none;"> </canvas> <p id="demo" class="demo"> </p> <label> How man...
Activity #2 (Finals) CANVAS DRAWING
MANILING - ACTIVITY 2 (FINALS) HTML CODE: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Drawing in Canvas</title> </head> <body> <canvas id="myCanvas" width="668" height="470" style="border:10px solid #000000;"> </canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.globalAlpha = 0.8 ctx.fillStyle = "black"; ctx.fillRect(390,385,140,5); ctx.fillStyle = "black"; ctx.fillRect(90,385,150,5); ctx.beginPath(); ctx.fillStyle="#F8E266" ctx.arc(300, 200, 100, 0, 2* Math.PI); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.fillStyle="black" ctx.arc(250, 180, 10, 0, 2* Math.PI); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.fillStyle="black" ctx.arc(300, 110, 50, 3, 2* Math.PI); ctx.fill();...
Activity #1 (Finals) Change Button Properties on Change Event
MANILING - ACTIVITY 1 (FINALS) Youtube link: https://youtu.be/6EnkCpqy9cY HTML CODE: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Change Button Properties Onchange Events</title> <link rel="stylesheet" href="csscode.css"> </head> <body> <fieldset> <h1 style="font-family:'Arial'"> Change Button Properties Onchange Events </h1> <h3 style="font-family:'Arial'"> Enter Color: </h3> <input type="text" id="input1"/> <br> <h3 style="font-family:'Arial'"> Enter Number: </h3> <input type="number" id="input2" onchange="onchangeevent()"/> <br> <br> <br> <input class="btn" type="button" id="display1"> <input class="btn...