Skip to content

Instantly share code, notes, and snippets.

@ianfabs

ianfabs/index.html

Created August 27, 2018 17:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ianfabs/43fcdf674b71122b8ae1d7c73fb2ca1b to your computer and use it in GitHub Desktop.
Save ianfabs/43fcdf674b71122b8ae1d7c73fb2ca1b to your computer and use it in GitHub Desktop.
Download ZIP
AJAX
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Practical</title>
<script src="https://cdn.rawgit.com/ianfabs/25d6655e92578cfb8c1ce91ff4ba0a22/raw/a2a087352a42e5732c341c3e0a41b279189d8c4a/esquery.js"></script>
<link rel="stylesheet" href="./main.css">
<script src="./main.js" defer></script>
</head>
<body>
<div id="main-content">
<section id="database-analyst-area">
<h2>Database Analyst</h2>
<h3>First Name:<span class="fn"></span></h3>
<div class="first"></div>
<h3>Last Name:</h3>
<div class="last"></div>
<h3>Highest Paid Salary</h3>
<div class="highest"></div>
<h3>Highest Average Paid Salery</h3>
<h3 class="average"></h3>
</section>
<section id="web-developer-area">
<h2>Web Developer</h2>
<h3>First Name:</h3>
<div class="first"></div>
<h3>Last Name:</h3>
<div class="last"></div>
<h3>Highest Paid Salary</h3>
<div class="highest"></div>
<h3>Highest Average Paid Salery</h3>
<h3 class="average"></h3>
</section>
<section id="software-engineer-area">
<h2>Software Engineer</h2>
<h3>First Name:</h3>
<div class="first"></div>
<h3>Last Name:</h3>
<div class="last"></div>
<h3>Highest Paid Salary</h3>
<div class="highest"></div>
<h3>Highest Average Paid Salery</h3>
<h3 class="average"></h3>
</section>
</div>
<section id="search-area">
<form id="search">
<input type="text" placeholder="Enter A Name" >
<input type="button" id="search-submit" value="search">
</form>
<section id="search-output">
<h2>Search Output</h2>
<div class="output">
<!--Output search info to here.-->
<column> Name </column>
<column> Salary </column>
<column> Job Title </column>
</div>
</section>
</section>
<section id="list-area">
<section>
<input type="button" value="List Database Analysts" id="list-database-analyst" data-param="Database Analyst">
<input type="button" value="List Web Developers" id="list-web-developer" data-param="Web Developer">
<input type="button" value="List Software Engineers" id="list-software-engineer" data-param="Software Developer">
</section>
<section id="list-output">
<h2>List Output</h2>
<div class="output">
<!--Output list info to here.-->
</div>
</section>
</section>
</body>
</html>
Raw
main.css
#main-content{
display: flex;
flex-direction: row;
justify-content: space-around;
}
#search-area{
margin-top: 2vh;
display: flex;
flex-direction: column;
}
#search-area section:last-child{
border: 1px solid #000;
margin: 1vh 0;
}
#list-area{
margin-top: 4vh;
display: flex;
flex-direction: column;
}
#list-area section:last-child{
border: 1px solid #000;
margin: 1vh 0;
}
.output{
display: grid;
/* grid-template-columns: 40px 50px 40px 50px 40px; */
grid-template-columns: repeat(3, 1fr);
}
column{
border: 1px solid black;
padding: 1vh 1vw;
}
Raw
main.js
const target = "http://ict.neit.edu/evanrense/salaries.php";
f(target, {
method: "GET",
})
.then(res => res.json())
.then(people => {
let dbas = people.filter(prsn => prsn.jobTitle == "Database Analyst");
let wds = people.filter(prsn => prsn.jobTitle == "Web Developer");
let swds = people.filter(prsn => prsn.jobTitle == "Software Developer");
let highest = {};
let reducer = (accumulator, currentVal) => accumulator + currentVal;
for (let i = 0; i < dbas.length - 1; i++) {
let dba = dbas[i];
if (Number(dba.salary) < Number(dbas[i + 1].salary)) {
highest.dba = dbas[i + 1];
} else {
highest.dba = dba;
}
}
highest.dba.average = Math.ceil(dbas.map(el => Number(el.salary)).reduce(reducer) / dbas.length);
for (let i = 0; i < wds.length - 1; i++) {
let wd = wds[i];
if (Number(wd.salary) < Number(wds[i + 1].salary)) {
highest.wd = wds[i + 1];
} else {
highest.wd = wd;
}
}
highest.wd.average = Math.ceil(wds.map(el => Number(el.salary)).reduce(reducer) / wds.length);
for (let i = 0; i < swds.length - 1; i++) {
let swd = swds[i];
if (Number(swd.salary) < Number(swds[i + 1].salary)) {
highest.swd = swds[i + 1];
} else {
highest.swd = swd;
}
}
highest.swd.average = Math.ceil(swds.map(el => Number(el.salary)).reduce(reducer) / swds.length);
let jobs = ["dba", "wd", "swd"];
let $jobs = qs("#main-content").children;
for (i in $jobs) {
if (i <= $jobs.length - 1) with ($jobs[i]) {
qs(".first").innerHTML = highest[jobs[i]].name.first;
qs(".last").innerHTML = highest[jobs[i]].name.last;
qs(".highest").innerHTML = `\$${highest[jobs[i]].salary}`;
qs(".average").innerHTML = `\$${highest[jobs[i]].average}`;
}
}
});
Array.prototype.forEach.call(qs("#search").children, element => {
element.oninput = (e) => {
f(target, {
method: "GET"
}).then(res => res.json())
.then(res => {
let results = res.filter(person => person.name["first"].match(e.target.value) || person.name["last"].match(e.target.value))
//console.log(results)
while (qs("#search").nextElementSibling.qs(".output").firstChild) {
qs("#search").nextElementSibling.qs(".output").removeChild(qs("#search").nextElementSibling.qs(".output").firstChild)
}
results.forEach((row) => {
for (i in row) {
var column = ce("column");
if(i=="name"){ column.ac( ctn(`${row[i].first} ${row[i].last}`) ) }
else column.ac( ctn(row[i]) );
qs("#search").nextElementSibling.qs(".output").ac( column );
}
});
});
}
})
let buttons = qs("#list-area").firstElementChild.children;
for(i in buttons){
element = buttons[i];
element.onclick = (e) => {
f(target, {
method: "GET"
}).then(res => res.json())
.then(res => {
let results = res.filter(person => person["jobTitle"].match(e.target.getAttribute("data-param")) );
console.log(results)
while (qs("#list-area").qs(".output").firstChild) {
qs("#list-area").qs(".output").removeChild(qs("#list-area").qs(".output").firstChild)
}
results.forEach((row) => {
for (i in row) {
var column = ce("column");
if(i=="name"){ column.ac( ctn(`${row[i].first} ${row[i].last}`) ) }
else column.ac( ctn(row[i]) );
qs("#list-area").qs(".output").ac( column );
}
});
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment