Skip to content

Instantly share code, notes, and snippets.

@Azoraqua

Azoraqua/assignment-1.html

Created January 15, 2020 09:32
Show Gist options
  • Save Azoraqua/db77b23da32824b5f6724a643dede93d to your computer and use it in GitHub Desktop.
Save Azoraqua/db77b23da32824b5f6724a643dede93d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
assignment-1.html
<!DOCTYPE html>
<html>
<head>
<title>Assignment 1</title>
<style type="text/css">
.container {
width: 240px;
height: 120px;
position: relative;
}
.container * {
box-sizing: border-box;
}
#result {
border: 1px solid #333;
padding-right: 15px;
}
input[type="number"] {
width: 100%;
}
#result, input[type="number"] {
width: 250px;
height: 1.25em;
text-align: center;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<label>
<span>Result</span>
<div id="result"></div>
</label>
<label>
<span>Min</span>
<input type="number" name="min" placeholder="0" onkeyup="showMinValue()">
</label>
<label>
<span>Max</span>
<input type="number" name="max" placeholder="0" onkeyup="showMinValue()">
</label>
</div>
<script>
function showMinValue() {
let min = document.getElementsByName('min')[0].value;
let max = document.getElementsByName('max')[0].value;
document.getElementById('result').innerText = getMinValue(min, max);
}
function getMinValue(one, two) {
return one < two ? one : two;
}
</script>
</body>
</html>
Raw
assignment-2.html
<!DOCTYPE html>
<html>
<head>
<title>Assignment 2</title>
<style type="text/css">
.container {
width: 240px;
height: 120px;
position: relative;
}
.container * {
box-sizing: border-box;
}
#result {
border: 1px solid #333;
}
#result, input[type="text"] {
width: 600px;
height: 20px;
text-align: center;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div>
<div>Amount of <span id="character">???</span>'s</div>
<div id="result"></div>
</div>
<label>
<span>What to search?</span>
<input type="text" name="what_search" placeholder="DDC" onkeyup="countCharacter(null, null)">
</label>
<label>
<span>Where to search in?</span>
<input type="text" name="where_search" placeholder="DDC" onkeyup="countCharacter(null, null)">
</label>
</div>
<script>
// You want two parameters? Sure, there you go.
function countCharacter(where, what) {
where = document.getElementsByName('where_search')[0].value;
what = document.getElementsByName('what_search')[0].value;
document.getElementById('character').innerHTML = what;
document.getElementById('result').innerText = countCharacter0(where, what);
}
function countCharacter0(where, what) {
let count = 0;
for (let i = 0; i < where.length; i++) {
if (where[i] !== undefined && where[i] === what) {
count++;
}
}
return count;
}
</script>
</body>
</html>
Raw
assignment-3.html
<!DOCTYPE html>
<html>
<head>
<title>Assignment 3</title>
</head>
<body>
<script>
// TODO: Write some code.
</script>
</body>
</html>
Raw
assignment-4.html
<!DOCTYPE html>
<html>
<head>
<title>Assignment 4</title>
<style type="text/css">
html, body {
background: #3498db;
}
#board {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff;
padding: 25px;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div id="board"><div>
<script>
const ROWS = 8;
const COLS = 8;
let board = document.getElementById('board');
for (let i = 0; i < ROWS; i++) {
let row = document.createElement('span');
row.innerHTML = '<br>';
for (let j = 0; j < COLS; j++) {
let col = document.createElement('span');
col.innerHTML = '#' ;
row.appendChild(col);
}
board.appendChild(row);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment