Permalink
Browse files
Merge branch 'master' of https://github.uconn.edu/alm17008/dmd-3475
- Loading branch information
Showing
with
259 additions
and 0 deletions.
- BIN .vscode/._settings.json
- 0 .vscode/settings.json
- 0 README.md
- 0 dom-playground-master/.gitignore
- 0 dom-playground-master/README.md
- 0 dom-playground-master/css/style.css
- 0 dom-playground-master/css/style.orig.css
- BIN dom-playground-master/images/archives.gif
- BIN dom-playground-master/images/menu.gif
- BIN dom-playground-master/images/resources.gif
- BIN dom-playground-master/images/select.gif
- BIN dom-playground-master/images/tag.gif
- BIN dom-playground-master/images/trees.jpg
- 0 dom-playground-master/index.html
- 0 dom-playground-master/index.orig.html
- 0 dom-playground-master/js/fix-the-page.js
- 0 mocking-sponge/.gitignore
- 0 mocking-sponge/README.md
- BIN mocking-sponge/img/spongebob.jpg
- 0 mocking-sponge/index.html
- 0 mocking-sponge/js/main.js
- 0 tip-calculator-master/.gitignore
- 0 tip-calculator-master/README.md
- 0 tip-calculator-master/css/main.css
- BIN tip-calculator-master/images/brooke-lark-pGM4sjt_BdQ-unsplash.jpg
- BIN tip-calculator-master/images/camila-melim-yHQfZ9TuZn4-unsplash.jpg
- BIN tip-calculator-master/images/claudia-crespo-ewOrvEa87j4-unsplash.jpg
- 0 tip-calculator-master/index.html
- 0 tip-calculator-master/js/script.js
- 0 week-1/index.html
- 0 week-3/index.html
- 0 week-3/js/main.js
- 0 week-4/css/style.css
- 0 week-4/index.html
- 0 week-4/js/main.js
- 0 week-5/bean.js
- 0 week-5/index.html
- 0 week-5/minimum.js
- 0 week-5/recursion.js
- 0 week-6/index.html
- 0 week-6/js/main.js
- 0 week-6/js/reverse.js
- 0 week-6/js/sum.js
- 0 week-6/reverse.html
- 0 week-6/sum.html
- +47 −0 week-8/events1.html
- +83 −0 week-8/events2.html
- +54 −0 week-8/events3.html
- +33 −0 week-8/index.html
- +42 −0 week-8/js/form.js
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
No changes.
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(); | ||
} | ||
} |