Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
events
  • Loading branch information
met18001 committed Mar 14, 2020
1 parent 71a16ad commit ef4cef9
Show file tree
Hide file tree
Showing 3 changed files with 181 additions and 0 deletions.
55 changes: 55 additions & 0 deletions week-8/event_3.html
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Events: Task 3</title>
<style>
p {
color: purple;
margin: 0.5em 0;
}

* {
box-sizing: border-box;
}

button {
display: block;
margin: 20px 0 20px 20px;
}

.button-bar {
padding: 20px 0;
}
</style>
<link rel="stylesheet" href="../styles.css" />
</head>

<body>

<section class="preview">
</section>

<div class="button-bar">
<button data-color="red">Red</button>
<button data-color="yellow">Yellow</button>
<button data-color="green">Green</button>
<button data-color="purple">Purple</button>
</div>

</body>
<script>

let buttonBar = document.querySelector('.button-bar');
let section = document.querySelector('section');

// Add your code here

function setColor(e) {
buttonBar.style.backgroundColor = e.target.getAttribute('data-color');
}

buttonBar.addEventListener('click', setColor);
</script>

</html>
50 changes: 50 additions & 0 deletions week-8/events_1.html
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Events: Task 1</title>
<style>
p {
color: purple;
margin: 0.5em 0;
}

* {
box-sizing: border-box;
}

button {
display: block;
margin: 20px 0 20px 20px;
}
</style>
<link rel="stylesheet" href="../styles.css" />
</head>

<body>

<section class="preview">
</section>

<button class="off">Machine is off</button>

</body>
<script>
let btn = document.querySelector('.off');

btn.addEventListener('click', () => {
if(btn.className === 'on') {
btn.textContent = 'Machine is off';
btn.className = "off";
} else {
btn.textContent = 'Machine is on';
btn.className = "on";
}
});

// Add your code here


</script>

</html>
76 changes: 76 additions & 0 deletions week-8/events_2.html
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Events: Task 2</title>
<style>
p {
color: purple;
margin: 0.5em 0;
}

* {
box-sizing: border-box;
}

canvas {
border: 1px solid black;
}
</style>
<link rel="stylesheet" href="../styles.css" />
</head>

<body>

<section class="preview">
</section>

<canvas width="480" height="320">

</canvas>


</body>
<script>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

function drawCircle(x, y, size) {
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
ctx.fillStyle = 'black';
ctx.arc(x, y, size, 0, 2 * Math.PI);
ctx.fill();
}

let x = 50;
let y = 50;
const size = 30;

drawCircle(x, y, size);

// Add your code here

window.addEventListener('keypress', (e) => {
switch(e.key) {
case 'a':
x -= 2;
break;
case 'd':
x += 2;
break;
case 'w':
y -= 2;
break;
case 's':
y += 2;
break;
}

drawCircle(x, y, size);
});
</script>

</html>

0 comments on commit ef4cef9

Please sign in to comment.