Skip to content

m1.lesson8_Lodash flights server #16

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
CodeByChaim wants to merge 1 commit into
base: master
Choose a base branch
from
Open

m1.lesson8_Lodash flights server #16

Show file tree
Hide file tree
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
115 changes: 80 additions & 35 deletions m1.lesson5_6.flights-server-stage1/public/file2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,87 @@
<head>
<meta charset="UTF-8">
<title>Demo File 2</title>
<link rel="stylesheet" type="text/css" href="file1.css">
<script src="file2.js"></script>
<link rel="stylesheet" type="text/css" href="file1.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
<!-- script src="file2.js"></script -->
</head>
<body>
<section>
<h1>Demo File 2</h1>
<button>click to fetch flights JSON</button>
</section>


<section>
<table id="flight-table">
<caption>flights</caption>
<thead>
<tr>
<th>No.</th>
<th>From</th>
<th>To</th>
<th>Departure</th>
<th>Arrival</th>
<th>By</th>
</tr>
</thead>
<tbody></tbody>
</table>
</section>

<script>
const outputTable = document.querySelector('#flight-table tbody');

document.querySelector('button').onclick = function() {
fetch('flights.json')
.then(res => res.json())
.then(data => renderTable(data, outputTable));
}

</script>
<section>
<h1>Demo File 2</h1>
<button id="get">click to fetch flights JSON</button>
<button id="sort">click to sort flights JSON</button>
</section>


<section>
<table id="flight-table">
<caption>flights</caption>
<thead>
<tr>
<th>No.</th>
<th>From</th>
<th>To</th>
<th>Departure</th>
<th>Arrival</th>
<th>By</th>
</tr>
</thead>
<tbody></tbody>
</table>
</section>

<script id='multi-entry-template1' type='text/x-handlebars-template'>
{{#each entries}}
<tr>
<td>{{id}}</td>
<td>{{from}}</td>
<td>{{to}}</td>
<td>{{departure}}</td>
<td>{{arrival}}</td>
<td>{{by}}</td>
</tr>
{{/each}}
</script>


<script>
let data = '';
const outputTable = document.querySelector('#flight-table tbody');
const multiArticleTmpl1 = Handlebars.compile(document.getElementById('multi-entry-template1').innerHTML);

document.querySelector('#get').onclick = function () {
getFlights()
renderTable(data, outputTable);
};

document.querySelector('#sort').onclick = function () {
getFlights()
renderTable(_.sortBy(data, ['id']), outputTable);
};

function renderTable(data, target) {
target.innerHTML = multiArticleTmpl1({entries: data});
}



function getFlights() {
fetch('flights.json')
.then(function (resp) {
return resp.json();
})
.then(function (json) {
data = json;
})
.catch(function (err) {
console.log('Error catch: - ', err);
});
}



</script>

</body>
</html>
154 changes: 154 additions & 0 deletions m1.lesson7.jQuery.wack-a-mole-by-Chaim/wackAmole.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Memory</title>
<!-- link rel="stylesheet" type="text/css" href="./css/style.css" -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.container {
background: rgb(243, 242, 200);
display: flex;
flex-direction: row;
}

.cards {

line-height: 10px;
border: 1px solid gray;
}

div {
padding: 5px;
}

p {
text-align: center;
width: 80px;
height: 80px;
border: 2px black solid;
margin: 1px;
display: inline-block;
color: white;
background-color: blue;
visibility: visible;
}

input {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
}

.inputs {
line-height: 25px;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
text-align: center;
border: 1px solid gray;
}

.inputs button {
width: 50px;
height: 50px;
}
</style>


<script>
let beenClicked = new Set();
let stopWatch = null;

const count = document.getElementById('count');
const match = document.getElementById('match');
let counter = 0;
let matched = 0;
$(document).ready(function () {


// onclick="renderBoard(document.querySelector('.cards'),document.getElementsByName('select'))"
$("#size").on('click', function (target, select) {

console.log( $("input[name=select]:checked").val());


let size = 1;
while (target.hasChildNodes()) {
target.removeChild(target.firstChild);
}
select.forEach(entry => {
if (entry.checked) {
size = parseInt(entry.value);
}
});

for (let i = 1; i < size + 1; i++) {
const div = document.createElement('div');
for (let j = 1; j < size + 1; j++) {
const elmt = document.createElement('p');
elmt.innerHTML = 'Click me';
div.appendChild(elmt);
}
target.appendChild(div);
$("p").dblclick(function () {
$(this).css("background-color", "red");
});
}
// counter = 0;
// count.value = counter;
// matched = 0;
// match.value = matched;
if (stopWatch !== null) {
clearInterval(stopWatch);
stopWatch = null;
}
beenClicked.clear();
});

});

</script>
</head>

<body>
<div class=inputs>
<input type="radio" name="select" value=4><label>4 x 4</label>
<br>
<input type="radio" name="select" value=6 checked><label>6 x 6</label>
<br>
<input type="radio" name="select" value=8><label>8 x 8</label>
<br>
<button id="size">Size</button>
</div>
<div class="container">

<!-- the game board is inserted here into cards <div> -->
<div class="cards"></div>

</div>
<div class="info">
<h2>Instruction</h2>
<ol>
<li>Select the board size.</li>
<li>Match any two cards with the same icon, by clicking on them.</li>
<li>If you find a matched pair, these cards will stay open.</li>
<li>TThe game is finished when you matched the all available pairs.</li>
</ol>

</div>

<section>
<label>Number of Tries: </label>
<input id="count" type="text" value="0" size="4" disabled></input>
<label>Number of Sucsses: </label>
<input id="match" type="text" value="0" size="4" disabled></input>
<label>Time elapsed: </label>
<input id="timer" type="text" value="0" size="10" disabled></input>

</section>
</body>

</html>
10 changes: 10 additions & 0 deletions m1.lesson8_Lodash-flights-server-by-chaim/privateFile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Private File</title>
</head>
<body>
<h1>Private File - should not have access from client</h1>
</body>
</html>
10 changes: 10 additions & 0 deletions m1.lesson8_Lodash-flights-server-by-chaim/public/file1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo File</title>
</head>
<body>
<h1>Demo File 1</h1>
</body>
</html>
86 changes: 86 additions & 0 deletions m1.lesson8_Lodash-flights-server-by-chaim/public/file2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo File 2</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
</head>
<body>
<section>
<h1>Demo File 2</h1>
<button id="get">click to fetch flights JSON</button>
<button id="sort">click to sort flights JSON</button>
</section>


<section>
<table id="flight-table">
<caption>flights</caption>
<thead>
<tr>
<th>No.</th>
<th>From</th>
<th>To</th>
<th>Departure</th>
<th>Arrival</th>
<th>By</th>
</tr>
</thead>
<tbody></tbody>
</table>
</section>

<script id='multi-entry-template1' type='text/x-handlebars-template'>
{{#each entries}}
<tr>
<td>{{id}}</td>
<td>{{from}}</td>
<td>{{to}}</td>
<td>{{departure}}</td>
<td>{{arrival}}</td>
<td>{{by}}</td>
</tr>
{{/each}}
</script>


<script>
let data = '';
const outputTable = document.querySelector('#flight-table tbody');
const multiArticleTmpl1 = Handlebars.compile(document.getElementById('multi-entry-template1').innerHTML);

document.querySelector('#get').onclick = function () {
getFlights()
renderTable(data, outputTable);
};

document.querySelector('#sort').onclick = function () {
getFlights()
renderTable(_.sortBy(data, ['id']), outputTable);
};

function renderTable(data, target) {
target.innerHTML = multiArticleTmpl1({entries: data});
}


function getFlights() {
fetch('flights.json')
.then(function (resp) {
return resp.json();
})
.then(function (json) {
data = json;
})
.catch(function (err) {
console.log('Error catch: - ', err);
});
}


</script>

</body>
</html>
Loading