Commits (3)
# Practical 1
Create a web structure including at least:
- 1 html file
- linked CSS file
- linked js file
Your HTML file will make use of five HTML5 tags. Research online what new tags were added to HTML when version 5 came out and use them appropriately in your page. For example, you could use the `<nav>` tag to make a small menu, the `<aside>` tag for a side bar, etc.
Style each of the five HTML5 tags with CSS giving them unique visual attributes. Try to create web page that looks good, avoid clashing colours and jarring design choices.
//console.log("hello from script");
function validateForm() {
var x = document.forms["helloForm"]["name"].value;
if (x == "") {
alert("I need to know your name so I can say Hello");
return false;
}
else{
alert("Hello there " + document.forms["helloForm"]["name"].value);
//more advanced pt2: make a system that changes the webpage based on the inputted name
addName();
}
}
function addName() {
var y = document.getElementById("main-header");
var queryString = document.location.search;
console.log(queryString);
var name = queryString.split("=")[1];
console.log(name);
if (name == undefined){
console.log("no name in URL query string")
}
else{
y.innerHTML = "Hello " + name;
}
}
addName();
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<h1 id="main-header">Hello</h1>
<form name="helloForm" method="get" action="gameplay.html" onsubmit="validateForm()">
My Name: <input type="text" name="name">
<input type="submit" value="Submit">
</form>
<script type="text/javascript" src="assets/js/script.js"></script>
</body>
</html>
\ No newline at end of file
# Web forms and data handeling in JS
## Task 1:
* Create a web page that contains a form. The form will ask the page visitor to input a name.
* Created a response to the user input with an alert, thanking them for their input
* Update the web page to include their name.
This is a type of validation feedback that informs the user that the form has been submitted successfully.
## Task 2:
* Add two other fields to the form, other types of information you might ask about a web user, handle the submitted data using JS and programmatically update the web page for it to include the submitted data.
## Deliverable:
Create a gitlab.com repo that contains all your code, in the ui-programming-21-22 group, then submit a link to the repository in the CA submissions spreadsheet.
## Going beyond the practical
* try experimenting with the `required` attribute that can be added to `<input>` declarations.
* identify the different between `<input type="radio">` and `<input type="checkbox">`
* use a checkbox input and make sure you can extract and isolate the values that matter:
```
<form action="/">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
```
# JS canvas
## Task 1
Build a web page that uses a ´canvas´ element. Use Javascript to draw the following items in the canvas itself:
* 4 filled blue squares in each corner of the canvas
* 5 other complex shapes, either as outlines or as filled shapes
* three text elements using 3 different fonts
### Reminder
![this is how the canvas system works](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes/canvas_default_grid.png)
[Here is a link to a cheat-sheet that recaps most of the things you'll need when using the canvas.](https://simon.html5.org/dump/html5-canvas-cheat-sheet.html)
## Task 2
Study the folder ´04-canvas/responsive-canvas´ and compare the differences between the two canvases specifically regarding the 'mobile responsiveness'. Before delivering your practical, port over the code that you need to make your canvas full of shapes and text responsive.
\ No newline at end of file
section.wrapper{
text-align: center;
}
canvas {
display: inline;
outline: 1px solid black;
max-height: 70vh;
max-width: 100vw;
}
button{
position: absolute;
left: 50%;
background-color: green;
border: none;
color: white;
padding: 20px;
font-size: 18px;
text-decoration: none;
border-radius: 8%;
margin-top: 20px;
}
\ No newline at end of file
console.log("hello from script");
function pageLoaded() {
const canvas = document.getElementById("the_canvas");
const context = canvas.getContext("2d");
let newImg = new Image();
newImg.src = "assets/img/tesse.gif"
// remeber: you don't have to wait for an .onload event if you create the HTML Image object over in your .html doc,
// we only have to create this function because we are creating the new Image() here in js.
newImg.onload = function () {
//simple draw
context.drawImage(newImg, 0, 0, 50, 50);
//transform skew
context.drawImage(newImg, 250, 10, 200, 56);
//show a part of the image
//context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
// img Specifies the image, canvas, or video element to use
// sx (Optional.) The x coordinate where to start clipping
// sy (Optional.) The y coordinate where to start clipping
// swidth (Optional.) The width of the clipped image
// sheight (Optional.) The height of the clipped image
// x The x coordinate where to place the image on the canvas
// x The x coordinate where to place the image on the canvas
// y The y coordinate where to place the image on the canvas
// width (Optional.) The width of the image to use (stretch or reduce the image)
// height (Optional.) The height of the image to use (stretch or reduce the image)
// check references here https://www.w3schools.com/tags/canvas_drawimage.asp
context.drawImage(newImg, 10, 25, 60, 55, 520, 80, 120, 110);
//translate the origin
context.translate(50, 50);
//now draw the same image as before, same coordinates, but it is translated because of the previous line
context.drawImage(newImg, 10, 25, 60, 55, 520, 80, 120, 110);
context.rotate(Math.PI / 6);
context.drawImage(newImg, 350, 10, 200, 56);
context.scale(1, 1);
context.rotate(-Math.PI / 3);
}
}
let btn = document.querySelector(".btn");
console.log(btn);
function playAudio(){
let bounce = new Audio('assets/media/bounce.mp3');
// In certain browsers (Edge, Chrome) you might get an `Uncaught (in promise) DOMException: play() failed` error.
// setting a short timeout should solve the error
bounce.play();
}
btn.onclick = playAudio;
pageLoaded();
\ No newline at end of file
const ctx = document.getElementById('the_canvas').getContext('2d');
// canvas width = 1100
// canvas height = 500
// middle width = 1100/2 = 550
// middle height = 500/2 = 250
ctx.translate(550,250);
for (let loop=1; loop <= 28; loop++){
ctx.strokeStyle = "#FF0000";
ctx.strokeRect(50, (loop*4), 100, (loop*2));
ctx.rotate(loop * Math.PI / 180);
}
\ No newline at end of file
......@@ -6,9 +6,16 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>UI Programming 21 22</title>
<link rel="stylesheet" href="assets/css/screen.css">
<script type="text/javascript" src="assets/js/script.js"></script>
</head>
<body>
<section class="wrapper">
<h1>Hello canvas</h1>
<canvas id="the_canvas" width="1100" height="500">
Oops! looks like your browser does not support canvas tag
</canvas>
</section>
<button class="btn">Press me</button>
<script type="text/javascript" src="assets/js/script.js"></script>
</body>
</html>
\ No newline at end of file
console.log("hello from script");
function changeColour() {
const rectBox = document.querySelector("#rect");
let randomColor = Math.floor(Math.random()*16777215).toString(16);
randomColor = "#" + randomColor;
rectBox.style.backgroundColor = randomColor;
let extraText = document.querySelector(".colourCode");
extraText.innerHTML = randomColor;
}
const clickBox = document.querySelector(".clickBox");
clickBox.addEventListener("click", function(ev){
console.log(ev);
let innerClickBox = document.querySelector(".innerClickBox");
innerClickBox.innerHTML = "click x: " + ev.x + "<br>" + "click y: " + ev.y + "<br>" + "alt key held: " + ev.altKey + "<br>" + "ctrl key held: " + ev.ctrlKey;
})
let character = document.querySelector(".character");
character.style.position = "relative";
character.style.left = "200px";
character.style.top = "200px";
document.addEventListener('keydown', input);
function input(event){
if (event.type === "keydown"){
switch (event.keyCode){
case 37: // left arrow
console.log("left arrow pressed");
moveLeft();
break;
case 38: // up arrow
console.log("up arrow pressed");
moveUp();
break;
case 39: // right arrow
console.log("right arrow pressed");
moveRight();
break;
case 40: // down arrow
console.log("down arrow pressed");
moveDown();
break;
default:
console.log("no input detected");
}
}
}
function moveLeft(){
character.style.left = parseInt(character.style.left) - 5 + "px";
}
function moveUp(){
character.style.top = parseInt(character.style.top) - 5 + "px";
}
function moveRight(){
character.style.left = parseInt(character.style.left) + 5 + "px";
}
function moveDown(){
character.style.top = parseInt(character.style.top) + 5 + "px";
}
\ No newline at end of file
// console.log("hello from Tuesday script");
function changeColour() {
const rectBox = document.querySelector('#rect');
let randomColor = Math.floor(Math.random()*16777215).toString(16);
randomColor = "#"+randomColor;
rectBox.style.backgroundColor = randomColor;
const extraText = document.querySelector(".colourCode");
extraText.innerHTML = randomColor;
}
let clickBox = document.querySelector(".clickBox");
// Method 2.1
clickBox.addEventListener("click", function(event){
console.log(event);
let innerClickBox = document.querySelector(".innerClickBox");
let contentInner = "click x: " + event.x + '<br>' + "click y: " + event.y + '<br>' + "AltKey: " + event.altKey + '<br>' + "CtrlKey: " + event.ctrlKey;
innerClickBox.innerHTML = contentInner;
})
// method 2.2
clickBox.addEventListener("onmouseover", clickResponse2());
function clickResponse2(){
console.log("that is correct Colm");
}
// method 3
//clickBox.onclick = clickResponse2
let character = document.querySelector(".character");
character.style.position = "relative";
character.style.left = "200px";
character.style.top = "200px";
window.addEventListener('keydown', input);
function input(event) {
if (event.type === "keydown"){
switch (event.keyCode){
case 37: //left Arrow
console.log("left arrow pressed");
moveLeft();
break;
case 38: // Up arrow
console.log("Up arrow pressed");
moveUp();
break;
case 39: //right arrow
console.log("right arrow pressed");
moveRight();
break;
case 40: // down arrow
console.log("down arrow pressed");
moveDown();
break;
default:
console.log("key input detected, but not connected to an action yet")
}
}
}
function moveLeft(){
character.style.left = parseInt(character.style.left) - 50 + "px"
}
function moveUp(){
character.style.top = parseInt(character.style.top) - 50 + "px"
}
function moveRight(){
character.style.left = parseInt(character.style.left) + 50 + "px"
}
function moveDown(){
character.style.top = parseInt(character.style.top) + 50 + "px"
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>UI Programming 21 22</title>
<link rel="stylesheet" href="assets/css/screen.css">
</head>
<body>
<!-- method one: inline events -->
<div id="rect" onclick=changeColour()>
<!-- alternatives : onmouseover="alert('You hovered')" onclick="alert('You clicked')" -->
<p>Click here: random color generator</p>
<span class="colourCode"></span>
</div>
<div class="clickBox">
<h4>click inside this box</h4>
<p class="innerClickBox"></p>
</div>
<div class="character">
</div>
<script type="text/javascript" src="assets/js/script.js"></script>
<script type="text/javascript" src="assets/js/keyMvmt.js"></script>
</body>
</html>
\ No newline at end of file
# animations and gameloops
### In this practical are required to:
* make use of the ´Date()´ object in Javascript, by making a timer in the corner of a html page that displays the current date, day of the week, month, year, hour, minute and second.
* style the clock in CSS by making it genuinely usable from a UI point of view: don't make the clock take over 100% of the screen, maybe positioning it in a corner of the screen would make more sense.
* use the GameLoop demonstrated in this chapter, by adding characters (images) to your canvas (using the configured method, or an augmented one created by you)
* configure 3 more key-based eventListeners with keys other than the keyboard arrows and make one of your canvas characters react based on the input.
### during your practical demo you must demonstrate your ability to:
* use the `requestAnimationFrame()` method and explain your understanding of it
* use the gameloop and detail its functionality, including any updates / changes you might have made to it
section.wrapper{
text-align: center;
}
canvas {
display: inline;
outline: 1px solid black;
max-height: 70vh;
max-width: 100vw;
}
\ No newline at end of file