Frontend Lesson Plan
All our code and explanations
<!DOCTYPE html>
<html>
<head>
<title>UC Schools Scoreboard</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
font-size: 48px;
margin-bottom: 40px;
}
h2 {
text-align: center;
font-size: 36px;
margin-bottom: 30px;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 60px;
border: 3px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
p {
margin-top: 0;
font-size: 28px;
}
button {
display: block;
width: 100%;
padding: 40px;
margin-bottom: 30px;
font-size: 36px;
border: none;
background-color: #0a23c5;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #12a6eb;
}
select {
width: 100%;
padding: 40px;
font-size: 36px;
border-radius: 10px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 60px;
}
th, td {
padding: 30px;
text-align: center;
border: 3px solid black;
font-size: 32px;
}
th {
background-color: #0a23c5;
color: white;
font-size: 40px; /* Updated: Increase the font size for the table headers */
}
td:first-child {
font-weight: bold;
}
/* Updated styles for the table */
#scoreTable {
display: table;
width: 100%;
border-collapse: collapse;
margin-top: 60px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#scoreTable th, #scoreTable td {
padding: 30px;
text-align: center;
border: 3px solid black;
font-size: 40px; /* Updated: Increase the font size for the table cells */
vertical-align: middle; /* Updated: Center the text vertically */
}
#scoreTable th {
background-color: #0a23c5;
color: white;
}
#scoreTable td:first-child {
font-weight: bold;
}
#scoreTable tr:nth-child(even) {
background-color: #f2f2f2;
}
#scoreTable tr:hover {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="container" data-aos="fade-middle">
<h1>College Finder</h1>
<div id="question1">
<h2>How big do you want your school to be?</h2>
<button onclick="increaseScore([4, 7, 9]); showNextQuestion('question2')">Small (less than 20,000 students)</button>
<button onclick="increaseScore([3, 5, 8]); showNextQuestion('question2')">Medium (20,000-30,000 students)</button>
<button onclick="increaseScore([0, 2, 3, 6]); showNextQuestion('question2')">Large (more than 30,000 students)</button>
</div>
<div id="question2" style="display: none">
<h2>Which location do you prefer?</h2>
<button onclick="increaseScore([0, 3, 6, 7]); showNextQuestion('question3')">Urban</button>
<button onclick="increaseScore([1, 2, 5, 8, 9]); showNextQuestion('question3')">Suburban</button>
<button onclick="increaseScore([4]); showNextQuestion('question3')">Rural</button>
</div>
<div id="question3" style="display: none">
<h2>How prestigious do you want your school to be?</h2>
<button onclick="increaseScore([4, 5, 7]); showNextQuestion('question4')">Not very prestigious</button>
<button onclick="increaseScore([1, 6, 9]); showNextQuestion('question4')">Semi-prestigious</button>
<button onclick="increaseScore([0, 2, 3, 8]); showNextQuestion('question4')">Very prestigious</button>
</div>
<div id="question4" style="display: none">
<h2>What do you prefer?</h2>
<button onclick="increaseScore([6, 8, 3]); showNextQuestion('question5')">The beach</button>
<button onclick="increaseScore([9, 5]); showNextQuestion('question5')">The forest</button>
<button onclick="increaseScore([0, 1, 4, 2, 7]); showNextQuestion('question5')">The mountains</button>
</div>
<div id="question5" style="display: none">
<h2>How good do you want the sports to be?</h2>
<button onclick="increaseScore([0, 3, 8, 6]); showNextQuestion('question6')">Very good (high D1)</button>
<button onclick="increaseScore([1, 2, 5]); showNextQuestion('question6')">Good (Low D1-D2)</button>
<button onclick="increaseScore([7, 9, 4]); showNextQuestion('question6')">Sports do not matter to me much (D3)</button>
</div>
<div id="question6" style="display: none">
<h2>What do you want to study?</h2>
<select id="major">
<option value="accounting">Accounting</option>
<option value="architecture">Architecture</option>
<option value="biology">Biology</option>
<option value="business-administration">Business Administration</option>
<option value="chemistry">Chemistry</option>
<option value="civil-engineering">Civil Engineering</option>
<option value="communication-studies">Communication Studies</option>
<option value="computer-science">Computer Science</option>
<option value="economics">Economics</option>
<option value="education">Education</option>
<option value="electrical-engineering">Electrical Engineering</option>
<option value="english">English</option>
<option value="finance">Finance</option>
<option value="graphic-design">Graphic Design</option>
<option value="history">History</option>
<option value="information-technology">Information Technology</option>
<option value="international-relations">International Relations</option>
<option value="journalism">Journalism</option>
<option value="marketing">Marketing</option>
<option value="mathematics">Mathematics</option>
<option value="mechanical-engineering">Mechanical Engineering</option>
<option value="music">Music</option>
<option value="nursing">Nursing</option>
<option value="philosophy">Philosophy</option>
<option value="physics">Physics</option>
<option value="political-science">Political Science</option>
<option value="psychology">Psychology</option>
<option value="sociology">Sociology</option>
<option value="theater">Theater</option>
<option value="visual-arts">Visual Arts</option>
</select>
<br>
<button onclick="increaseScore([]); showNextQuestion('question7')">Submit</button>
</div>
<div id="question7" style="display: none">
<h2>Do you want to live in a college town?</h2>
<button onclick="increaseScore([1]); showNextQuestion('question8')">Yes</button>
<button onclick="increaseScore([]); showNextQuestion('question8')">No</button>
<button onclick="increaseScore([]); showNextQuestion('question8')">Doesn't matter</button>
</div>
<div id="question8" style="display: none">
<h2>Do you want on-campus housing?</h2>
<button onclick="increaseScore([8, 6, 1]); showNextQuestion('question9')">Yes</button>
<button onclick="increaseScore([0, 2, 9, 3]); showNextQuestion('question9')">No</button>
<button onclick="increaseScore([5, 7, 4]); showNextQuestion('question9')">I don't have a preference</button>
</div>
<div id="question9" style="display: none">
<h2>Do you want to engage in Greek Life?</h2>
<button onclick="increaseScore([0, 1, 8, 3]); showNextQuestion('question10')">Yes</button>
<button onclick="increaseScore([5, 4, 7]); showNextQuestion('question10')">No</button>
<button onclick="increaseScore([6, 9, 2]); showNextQuestion('question10')">Maybe</button>
</div>
<div id="question10" style="display: none">
<h2>How much money are you willing to pay?</h2>
<button onclick="increaseScore([3, 0, 6, 8]); showNextQuestion('question11')">Money is not an issue</button>
<button onclick="increaseScore([1, 2, 9]); showNextQuestion('question11')">I am willing to pay quite a bit </button>
<button onclick="increaseScore([5, 4, 7]); showNextQuestion('question11')">Cheapest possible </button>
</div>
<div id="question11" style="display: none">
<button id="submitBtn" onclick="submitScores()">Submit</button>
</div>
</div>
<table id="scoreTable" style="display: none;">
<thead>
<tr>
<th id="rankHeader">Rank</th>
</tr>
</thead>
<tbody>
<tr id="school1">
<td>UC Berkeley</td>
<td id="rank1"></td>
<td id="score1">0</td>
</tr>
<tr id="school2">
<td>UC Davis</td>
<td id="rank2"></td>
<td id="score2">0</td>
</tr>
<tr id="school3">
<td>UC Irvine</td>
<td id="rank3"></td>
<td id="score3">0</td>
</tr>
<tr id="school4">
<td>UC Los Angeles</td>
<td id="rank4"></td>
<td id="score4">0</td>
</tr>
<tr id="school5">
<td>UC Merced</td>
<td id="rank5"></td>
<td id="score5">0</td>
</tr>
<tr id="school6">
<td>UC Riverside</td>
<td id="rank6"></td>
<td id="score6">0</td>
</tr>
<tr id="school7">
<td>UC San Diego</td>
<td id="rank7"></td>
<td id="score7">0</td>
</tr>
<tr id="school8">
<td>UC San Francisco</td>
<td id="rank8"></td>
<td id="score8">0</td>
</tr>
<tr id="school9">
<td>UC Santa Barbara</td>
<td id="rank9"></td>
<td id="score9">0</td>
</tr>
<tr id="school10">
<td>UC Santa Cruz</td>
<td id="rank10"></td>
<td id="score10">0</td>
</tr>
</tbody>
</table>
<script>
// Array of UC Schools
var ucSchools = [
{ name: "UC Berkeley", score: 0 },
{ name: "UC Davis", score: 0 },
{ name: "UC Irvine", score: 0 },
{ name: "UC Los Angeles", score: 0 },
{ name: "UC Merced", score: 0 },
{ name: "UC Riverside", score: 0 },
{ name: "UC San Diego", score: 0 },
{ name: "UC San Francisco", score: 0 },
{ name: "UC Santa Barbara", score: 0 },
{ name: "UC Santa Cruz", score: 0 }
];
var currentQuestionIndex = 1;
function showNextQuestion(nextQuestionId) {
document.getElementById("question" + currentQuestionIndex).style.display = "none";
document.getElementById(nextQuestionId).style.display = "block";
currentQuestionIndex++;
}
// Function to increase the score of the specified UC Schools
function increaseScore(indices) {
for (let i = 0; i < indices.length; i++) {
const index = indices[i];
ucSchools[index].score++;
document.getElementById("score" + (index + 1)).textContent = ucSchools[index].score;
}
}
// Function to submit the scores and update the table
function submitScores() {
ucSchools.sort((a, b) => b.score - a.score); // Sort UC Schools by score in descending order
for (let i = 0; i < ucSchools.length; i++) {
document.getElementById("score" + (i + 1)).textContent = ucSchools[i].score;
document.getElementById("school" + (i + 1)).textContent = ucSchools[i].name; // Update school names
}
document.getElementById("rankHeader").textContent = "Rank"; // Show the first column header as "Rank"
document.getElementById("submitBtn").disabled = true; // Disable the submit button after scores are submitted
document.getElementById("scoreTable").style.display = "table"; // Display the table with updated rankings
}
</script>
</body>
</html>
College Stats
- This college stats table contains all the information a user will need in order to decide on their future college
- The sorting feature involves two aspects
- First, the table is able to sort through whatever is searched in the top right. The input that is typed in will limit the options that show up on the table.
- Second, there is also a way to sort each column from lowest to highest or vise versa, or alphabetically and vise versa.
- This fronted pulls from the api that is from our deployed backend page
<html>
<head>
<title>College Search</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
table {
width: 100%;
border-collapse: collapse;
color: #2d3bd8;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #2d3bd8;
}
thead th {
background-color: #f2f2f2;
}
tbody tr:hover {
background-color: #f5f5f5;
}
#searchInput, #searchButton {
padding: 6px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
}
#searchButton {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#searchButton:hover {
background-color: #45a049;
}
</style>
<head>
<!-- load jQuery and DataTables syle and scripts -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>var define = null;</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>
<table id="flaskTable" class="table" style="width:100%">
<thead id="flaskHead">
<tr>
<th>ID</th>
<th>College</th>
<th>City</th>
<th>Acceptance Rate</th>
<th>Area</th>
<th>Student to Faculty Ratio</th>
<th>Top Majors</th>
</tr>
</thead>
<tbody id="flaskBody"></tbody>
</table>
<script>
$(document).ready(function() {
fetch('https://atlasnow.duckdns.org/api/colleges/', { mode: 'cors' })
.then(response => {
if (!response.ok) {
throw new Error('API response failed');
}
return response.json();
})
.then(data => {
for (const row of data) {
// BUG warning/resolution - DataTable requires row to be single append
$('#flaskBody').append('<tr><td>' +
row.id + '</td><td>' +
row.college + '</td><td>' +
row.city + '</td><td>' +
row.rate + '</td><td>' +
row.area + '</td><td>' +
row.stufac + '</td><td>' +
row.majors + '</td></tr>');
}
// BUG warning - Jupyter does not show Datatable controls, works on deployed GitHub pages
$("#flaskTable").DataTable();
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
<head>
<!-- load jQuery and DataTables styles and scripts -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>var define = null;</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
text-align: center;
}
h2 {
color: rgb(24, 93, 195);
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
color: blue;
}
th, td {
border: 1px solid blue;
padding: 8px;
text-align: left;
}
tbody tr:nth-child(even) {
background-color: #F2F2F2;
}
/* DataTables search bar styling */
.dataTables_wrapper .dataTables_filter input {
border: 1px solid blue;
padding: 5px;
border-radius: 4px;
}
/* Font styling */
.dataTables_wrapper {
font-family: Arial, sans-serif;
font-size: 14px;
}
</style>
</head>
<body>
<h1>UCReviews Sorted</h1>
<h2>Sort through the reviews with key words, phrases, or prefered order.</h2>
<table id="flaskTable" class="table">
<thead id="flaskHead">
<tr>
<th>Number</th>
<th>School</th>
<th>Review</th>
<th>Score</th>
</tr>
</thead>
<tbody id="flaskBody"></tbody>
</table>
<script>
$(document).ready(function () {
fetch('https://atlasnow.duckdns.org/api/reviews/', { mode: 'cors' })
.then(response => {
if (!response.ok) {
throw new Error('API response failed');
}
return response.json();
})
.then(data => {
for (const row of data) {
// BUG warning/resolution - DataTable requires row to be single append
$('#flaskBody').append('<tr><td>' +
row.id + '</td><td>' +
row.school + '</td><td>' +
row.review + '</td><td>' +
row.score + '</td></tr>');
}
// BUG warning - Jupyter does not show DataTable controls, works on deployed GitHub pages
$("#flaskTable").DataTable({
"language": {
"search": "",
"searchPlaceholder": "Search"
}
});
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
</body>
</html>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
label {
font-weight: bold;
}
select,
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
background-color: #151397;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #4d7bcf;
}
table {
width: 100%;
margin-top: 30px;
border-collapse: collapse;
}
th,
td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #534caf;
color: #fff;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
<h1>ATLAS Reviews</h1>
<form action="javascript:create_review()">
<p>
<label>
School:
<select name="school" id="school" required>
<option value="">Select a UC school</option>
<option value="UC Berkeley">UC Berkeley</option>
<option value="UC Davis">UC Davis</option>
<option value="UC Irvine">UC Irvine</option>
<option value="UC Los Angeles">UC Los Angeles</option>
<option value="UC Merced">UC Merced</option>
<option value="UC Riverside">UC Riverside</option>
<option value="UC San Diego">UC San Diego</option>
<option value="UC Santa Barbara">UC Santa Barbara</option>
<option value="UC Santa Cruz">UC Santa Cruz</option>
</select>
</label>
</p>
Review:
<input type="text" name="review" id="review" required>
<p>
<p>
<label>
Score:
<select name="score" id="score" required>
<option value="">Score 1-10</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</label>
</p>
<button>❊ Add ❊</button>
</p>
</form>
<!-- creates table with 3 columns titled Number, School, and Review -->
<table>
<thead>
<tr>
<th>School</th>
<th>Review</th>
<th>Score</th>
</tr>
</thead>
<tbody id="result1">
<!-- javascript generated data -->
</tbody>
</table>
<script>
const resultContainer = document.getElementById("result1");
// const url = "http://172.27.138.205:8086/api/reviews/";
const url = "https://atlasnow.duckdns.org/api/reviews";
const create_fetch = url + '/create';
const read_fetch = url + '/';
const del_fetch = url + '/delete';
// Load reviews on page entry
read_reviews();
// Display review table, data is fetched from Backend Database
function read_reviews() {
// prepare fetch options
const read_options = {
method: 'GET',
mode: 'cors',
cache: 'default',
credentials: 'omit',
headers: {
'Content-Type': 'application/json'
},
};
// fetch the data from API
fetch(read_fetch, read_options)
.then(response => {
// check for response errors
if (response.status !== 200) {
const errorMsg = 'Database read error: ' + response.status;
console.log(errorMsg);
const tr = document.createElement("tr");
const td = document.createElement("td");
td.innerHTML = errorMsg;
tr.appendChild(td);
resultContainer.appendChild(tr);
return;
}
// valid response will have JSON data
response.json().then(data => {
console.log(data);
for (let row in data) {
console.log(data[row]);
add_row(data[row]);
}
});
})
// catch fetch errors (i.e., access to server blocked)
.catch(err => {
console.error(err);
const tr = document.createElement("tr");
const td = document.createElement("td");
td.innerHTML = err;
tr.appendChild(td);
resultContainer.appendChild(tr);
});
}
function create_review() {
// Creates review with inputted data
const body = {
school: document.getElementById("school").value,
review: document.getElementById("review").value,
score: document.getElementById("score").value,
};
const requestOptions = {
method: 'POST',
body: JSON.stringify(body),
headers: {
"content-type": "application/json",
'Authorization': 'Bearer my-token',
},
};
// URL for Create API
// Fetch API call to the database to create a new review
fetch(create_fetch, requestOptions)
.then(response => {
// trap error response from Web API
if (response.status !== 200) {
const errorMsg = 'Database create error: ' + response.status;
console.log(errorMsg);
const tr = document.createElement("tr");
const td = document.createElement("td");
td.innerHTML = errorMsg;
tr.appendChild(td);
resultContainer.appendChild(tr);
return;
}
// response contains valid result
response.json().then(data => {
console.log(data);
const errorMsg = 'created successfully';
// add a table row for the newly created review
add_row(data);
});
});
}
function add_row(data) {
const tr = document.createElement("tr");
const school = document.createElement("td");
const review = document.createElement("td");
const score = document.createElement("td");
// obtain data that is specific to the API
school.innerHTML = data.school;
review.innerHTML = data.review;
score.innerHTML = data.score;
// add HTML to container
tr.appendChild(school);
tr.appendChild(review);
tr.appendChild(score);
resultContainer.appendChild(tr);
}
// delete method
function delete_record() {
const delOptions = {
method: 'DELETE',
headers: {
"content-type": "application/json",
'Authorization': 'Bearer my-token',
},
};
// delete URL
// do a fetch call to delete API
fetch(del_fetch, delOptions)
.then(response => {
// trap error response from web API
if (response.status !== 200) { // 200 --> success
console.log(response.status);
return;
}
// response has valid result
response.json().then(data => {
console.log(data);
alert("All records have been DELETED, refresh the page for the most updated version."); // once delete works, the user is prompted to refresh the screen
window.location.reload();
});
});
}
</script>
<script>
function confirmDelete() {
if (confirm("Are you sure you want to delete all records?")) {
delete_record();
}
}
</script>
<div>
<form action="javascript:confirmDelete()">
<button>Delete Records</button>
</form>
</div>
---
layout: base
permalink: /facts/
title: UCFacts
---
<html>
<head>
<title>UC Facts</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
table {
width: 100%;
border-collapse: collapse;
color: #2d3bd8;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #2d3bd8;
}
thead th {
background-color: #f2f2f2;
}
tbody tr:hover {
background-color: #f5f5f5;
}
#searchInput, #searchButton {
padding: 6px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
}
#searchButton {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#searchButton:hover {
background-color: #45a049;
}
</style>
<head>
<!-- load jQuery and DataTables syle and scripts -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>var define = null;</script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>
<table id="flaskTable" class="table" style="width:100%">
<thead id="flaskHead">
<tr>
<th>ID</th>
<th>School</th>
<th>Fact</th>
</tr>
</thead>
<tbody id="flaskBody"></tbody>
</table>
<script>
$(document).ready(function() {
fetch('https://atlasnow.duckdns.org/api/facts/', { mode: 'cors' })
.then(response => {
if (!response.ok) {
throw new Error('API response failed');
}
return response.json();
})
.then(data => {
for (const row of data) {
// BUG warning/resolution - DataTable requires row to be single append
$('#flaskBody').append('<tr><td>' +
row.id + '</td><td>' +
row.school + '</td><td>' +
row.fact + '</td></tr>');
}
// BUG warning - Jupyter does not show Datatable controls, works on deployed GitHub pages
$("#flaskTable").DataTable();
})
.catch(error => {
console.error('Error:', error);
});
});
</script>