Skip to content

buttons #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

buttons #5

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
276 changes: 183 additions & 93 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,107 +2,197 @@
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lab 9</title>

<style>
button {
margin: 3px;
}

button:hover {
cursor: pointer;
}

#first-num,
#second-num {
width: 60px;
}

output {
border: 1px solid gray;
display: block;
height: 18px;
margin-top: 5px;
padding: 5px;
width: 240px;
}

main {
width: 800px;
}

#error-btns {
column-gap: 5px;
display: flex;
flex-wrap: wrap;
margin-top: 30px;
row-gap: 5px;
}

#error-btns>* {
padding: 8px 2px;
width: 122px;
}
</style>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lab 9</title>

<style>
button {
margin: 3px;
}
button:hover {
cursor: pointer;
}
#first-num,
#second-num {
width: 60px;
}
output {
border: 1px solid gray;
display: block;
height: 18px;
margin-top: 5px;
padding: 5px;
width: 240px;
}
main {
width: 800px;
}
#error-btns {
column-gap: 5px;
display: flex;
flex-wrap: wrap;
margin-top: 30px;
row-gap: 5px;
}
#error-btns>* {
padding: 8px 2px;
width: 122px;
}
</style>
</head>

<body>
<main>
<form>
<fieldset>
<legend>Error Calculator</legend>
<input name="first-num" id="first-num" />
<select name="operator" id="operator">
<main>
<form>
<fieldset>
<legend>Error Calculator</legend>
<input name="first-num" id="first-num" />
<select name="operator" id="operator">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input name="second-num" id="second-num" />
<button id="calculate">Calculate</button>
<br />
<output></output>
</fieldset>
</form>

<section id="error-btns">
<button>Console Log</button>
<button>Console Error</button>
<button>Console Count</button>
<button>Console Warn</button>
<button>Console Assert</button>
<button>Console Clear</button>
<button>Console Dir</button>
<button>Console dirxml</button>
<button>Console Group Start</button>
<button>Console Group End</button>
<button>Console Table</button>
<button>Start Timer</button>
<button>End Timer</button>
<button>Console Trace</button>
<button>Trigger a Global Error</button>
</section>
</main>

<script>
let form = document.querySelector('form');
form.addEventListener('submit', e => {
e.preventDefault();
let output = document.querySelector('output');
let firstNum = document.querySelector('#first-num').value;
let secondNum = document.querySelector('#second-num').value;
let operator = document.querySelector('#operator').value;
output.innerHTML = eval(`${firstNum} ${operator} ${secondNum}`);
});

let errorBtns = Array.from(document.querySelectorAll('#error-btns > button'));

// Start your code here
// You may move this JS to another file if you wish
</script>
<input name="second-num" id="second-num" />
<button id="calculate">Calculate</button>
<br />
<output></output>
</fieldset>
</form>

<section id="error-btns">
<button>Console Log</button>
<button>Console Error</button>
<button>Console Count</button>
<button>Console Warn</button>
<button>Console Assert</button>
<button>Console Clear</button>
<button>Console Dir</button>
<button>Console dirxml</button>
<button>Console Group Start</button>
<button>Console Group End</button>
<button>Console Table</button>
<button>Start Timer</button>
<button>End Timer</button>
<button>Console Trace</button>
<button>Trigger a Global Error</button>
</section>
</main>

<script>
let form = document.querySelector('form');
form.addEventListener('submit', e => {
e.preventDefault();
let output = document.querySelector('output');
let firstNum = document.querySelector('#first-num').value;
let secondNum = document.querySelector('#second-num').value;
let operator = document.querySelector('#operator').value;
output.innerHTML = eval(`${firstNum} ${operator} ${secondNum}`);
});

let errorBtns = Array.from(document.querySelectorAll('#error-btns > button'));

// Start your code here

class ValidationError extends Error {
constructor(message) {
super(message);
this.name = "ValidationError";
}
}

errorBtns[0].addEventListener('click', () => {
return console.log('Console Log Demo');
});
errorBtns[1].addEventListener('click', () => {
console.error('Console Error Demo');
});
errorBtns[2].addEventListener('click', () => {
console.count('Count Button');
});
errorBtns[3].addEventListener('click', () => {
console.warn('Console Warn Button');
});
errorBtns[4].addEventListener('click', () => {

let message = 'The number does not equal';
let number = 'number';
let equal = 3;
for (let i = 0; i < 5; i++) {
console.assert(i == 3, {
i,
message,
equal
});
}
});
errorBtns[5].addEventListener('click', () => {
console.clear();
});
errorBtns[6].addEventListener('click', () => {
console.dir(errorBtns[6]);
});
errorBtns[7].addEventListener('click', () => {
console.dirxml(errorBtns[7]);
});
errorBtns[8].addEventListener('click', () => {
console.group();
});
errorBtns[9].addEventListener('click', () => {
console.groupEnd();
});
errorBtns[10].addEventListener('click', () => {

function newClass(name, num) {
this.name = name;
this.num = num
}

const classes = {};

classes[0] = new newClass("software Engineering", "110");
classes[1] = new newClass("Data Structures", "100");
classes[2] = new newClass("Theory", "105");

console.table(classes);
});
errorBtns[11].addEventListener('click', () => {
console.log('Timer Button:');
console.time();
});
errorBtns[12].addEventListener('click', () => {
console.timeEnd();
});
errorBtns[13].addEventListener('click', () => {

const deep = () => {
deeper();
};
const deeper = () => {
deepest();
};

const deepest = () => {
console.trace();
};
deep();

});
errorBtns[14].addEventListener('click', () => {
throw new Error('Sadly an error happened my friend')
})
window.addEventListener('Error', () => {
console.log('It is found.');
})
</script>
</body>

</html>