Skip to content
Permalink
Browse files

Merge branch 'master' of https://github.uconn.edu/alm17008/dmd-3475

  • Loading branch information
Alex Mueller
Alex Mueller committed Mar 28, 2020
2 parents 902eaa1 + 7cf6faf commit 0b139d7318fe981b014e04d5d70eb5b688fe3d17
Showing with 259 additions and 0 deletions.
  1. BIN .vscode/._settings.json
  2. 0 .vscode/settings.json
  3. 0 README.md
  4. 0 dom-playground-master/.gitignore
  5. 0 dom-playground-master/README.md
  6. 0 dom-playground-master/css/style.css
  7. 0 dom-playground-master/css/style.orig.css
  8. BIN dom-playground-master/images/archives.gif
  9. BIN dom-playground-master/images/menu.gif
  10. BIN dom-playground-master/images/resources.gif
  11. BIN dom-playground-master/images/select.gif
  12. BIN dom-playground-master/images/tag.gif
  13. BIN dom-playground-master/images/trees.jpg
  14. 0 dom-playground-master/index.html
  15. 0 dom-playground-master/index.orig.html
  16. 0 dom-playground-master/js/fix-the-page.js
  17. 0 mocking-sponge/.gitignore
  18. 0 mocking-sponge/README.md
  19. BIN mocking-sponge/img/spongebob.jpg
  20. 0 mocking-sponge/index.html
  21. 0 mocking-sponge/js/main.js
  22. 0 tip-calculator-master/.gitignore
  23. 0 tip-calculator-master/README.md
  24. 0 tip-calculator-master/css/main.css
  25. BIN tip-calculator-master/images/brooke-lark-pGM4sjt_BdQ-unsplash.jpg
  26. BIN tip-calculator-master/images/camila-melim-yHQfZ9TuZn4-unsplash.jpg
  27. BIN tip-calculator-master/images/claudia-crespo-ewOrvEa87j4-unsplash.jpg
  28. 0 tip-calculator-master/index.html
  29. 0 tip-calculator-master/js/script.js
  30. 0 week-1/index.html
  31. 0 week-3/index.html
  32. 0 week-3/js/main.js
  33. 0 week-4/css/style.css
  34. 0 week-4/index.html
  35. 0 week-4/js/main.js
  36. 0 week-5/bean.js
  37. 0 week-5/index.html
  38. 0 week-5/minimum.js
  39. 0 week-5/recursion.js
  40. 0 week-6/index.html
  41. 0 week-6/js/main.js
  42. 0 week-6/js/reverse.js
  43. 0 week-6/js/sum.js
  44. 0 week-6/reverse.html
  45. 0 week-6/sum.html
  46. +47 −0 week-8/events1.html
  47. +83 −0 week-8/events2.html
  48. +54 −0 week-8/events3.html
  49. +33 −0 week-8/index.html
  50. +42 −0 week-8/js/form.js
0 .vscode/._settings.json 100755 → 100644
No changes.
0 .vscode/settings.json 100755 → 100644
No changes.
0 README.md 100755 → 100644
No changes.
0 dom-playground-master/.gitignore 100755 → 100644
No changes.
0 dom-playground-master/README.md 100755 → 100644
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
0 dom-playground-master/index.html 100755 → 100644
No changes.
No changes.
No changes.
0 mocking-sponge/.gitignore 100755 → 100644
No changes.
0 mocking-sponge/README.md 100755 → 100644
No changes.
0 mocking-sponge/img/spongebob.jpg 100755 → 100644
No changes.
0 mocking-sponge/index.html 100755 → 100644
No changes.
0 mocking-sponge/js/main.js 100755 → 100644
No changes.
0 tip-calculator-master/.gitignore 100755 → 100644
No changes.
0 tip-calculator-master/README.md 100755 → 100644
No changes.
No changes.
No changes.
No changes.
No changes.
0 tip-calculator-master/index.html 100755 → 100644
No changes.
No changes.
0 week-1/index.html 100755 → 100644
No changes.
0 week-3/index.html 100755 → 100644
No changes.
0 week-3/js/main.js 100755 → 100644
No changes.
0 week-4/css/style.css 100755 → 100644
No changes.
0 week-4/index.html 100755 → 100644
No changes.
0 week-4/js/main.js 100755 → 100644
No changes.
0 week-5/bean.js 100755 → 100644
No changes.
0 week-5/index.html 100755 → 100644
No changes.
0 week-5/minimum.js 100755 → 100644
No changes.
0 week-5/recursion.js 100755 → 100644
No changes.
0 week-6/index.html 100755 → 100644
No changes.
0 week-6/js/main.js 100755 → 100644
No changes.
0 week-6/js/reverse.js 100755 → 100644
No changes.
0 week-6/js/sum.js 100755 → 100644
No changes.
0 week-6/reverse.html 100755 → 100644
No changes.
0 week-6/sum.html 100755 → 100644
No changes.
@@ -0,0 +1,47 @@
<!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', updateButton)
let off = true;
function updateButton() {
if (off) {
btn.innerHTML = 'Machine is on';
off = false;
} else {
btn.innerHTML = 'Machine is off'
off = true;
}
}
</script>

</html>
@@ -0,0 +1,83 @@
<!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
document.addEventListener('keypress', moveCircle);
function moveCircle(e) {
let keyPressed = e.key.toLowerCase()
console.log(keyPressed);
switch (keyPressed) {
case 'w':
y -= 10
drawCircle(x, y, size)
break;
case 's':
y += 10
drawCircle(x, y, size)
break;
case 'a':
x -= 10
drawCircle(x, y, size)
break;
case 'd':
x += 10
drawCircle(x, y, size)
break;
default:
break;
}
}
</script>

</html>
@@ -0,0 +1,54 @@
<!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
buttonBar.addEventListener('click', changeColor)
function changeColor(e) {
let color = e.target.dataset.color
buttonBar.style.background = color
}
</script>

</html>
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Form</title>
</head>
<body>
<h1>Contact Me!</h1>
<form id="myform">
<input type="text" name="name" id="name" placeholder="Name">
<span id="name-error"></span>
<input type="email" name="email" id="email" placeholder="Email">
<span id="email-error"></span>
<input type="text" name="subject" id="subject" placeholder="Subject">
<span id="subject-error"></span>
<textarea name="message" id="message" cols="30" rows="10" form="myform" placeholder="Message"></textarea>
<span id="message-error"></span>
<button type="submit">Submit</button>
</form>
<style>
form {
display: flex;
flex-direction: column;
align-items: flex-start;
}
textarea {
margin: 0;
}
</style>
<script src="js/form.js"></script>
</body>
</html>
@@ -0,0 +1,42 @@
let form = document.querySelector('#myform');
form.addEventListener('submit', validate);

let name = document.querySelector('#name');
let email = document.querySelector('#email');
let subject = document.querySelector('#subject');
let message = document.querySelector('#message');
let inputList = [name, email, subject, message];



inputList.forEach(input => {
input.addEventListener('blur', findInputError)
});

function findInputError(e) {
let input = e.currentTarget.id
let errorMessage = document.querySelector(`#${input}-error`)
console.log(input)
if (e.currentTarget.value) {
errorMessage.innerHTML = ''
} else {
errorMessage.innerHTML = `${input} must be filled out.`
}
}

function validate(e) {
if (name.value && email.value && subject.value && message.value) {
console.log("hooray");
} else {
inputList.forEach(input => {
let inputName = input.id;
let errorMessage = document.querySelector(`#${inputName}-error`);
if (input.value) {
errorMessage.innerHTML = '';
} else {
errorMessage.innerHTML = `${inputName} must be filled out.`;
}
});
e.preventDefault();
}
}

0 comments on commit 0b139d7

Please sign in to comment.
You can’t perform that action at this time.