Diferencia entre revisiones de «Usuario:Neel.arunabh/Taller»
Contenido eliminado Contenido añadido
Sin resumen de edición Etiquetas: Revertido Edición visual: cambiado |
Sin resumen de edición Etiquetas: Revertido Edición visual: cambiado |
||
Línea 2:
<!-- Puedes empezar a añadir texto a continuación de este mensaje; si quieres trasladar el taller a la enciclopedia, recuerda borrar antes este mensaje y la línea superior {{Taller de usuario}}. -->
<!DOCTYPE html>
<html lang = "en">
<head>
<link href = "index.css" rel = "stylesheet" type = "text/css">
<script src="https://
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Permanent+Marker&family=Roboto&display=swap"
rel="stylesheet">
<style>
/* Basic Css */
body{ background-color: #
h1{font-size: 48px; text-transform: uppercase; letter-spacing: 2px; text-align: center;}
Línea 13 ⟶ 20:
/* The sidebar menu */
.sidenav {height: 100%; width: 200px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #
overflow-x: hidden; padding-top: 20px;}
.sidenav h2 {padding: 6px 8px 6px 16px; text-decoration: none; font-size: 25px; color: #edf5e1; display: block;}
Línea 57 ⟶ 64:
.about {text-align: center; margin: 300px; margin-top: 0;}
}▼
</style>
</head>
<body>
<div class="sidenav">
<h2 id="home">Home</h2>
<h2 id="que1">Query 1: Median Lot Size by Zip</h2>
<h2 id="que2">Query 2: Percentage of Total Sales by Zip</h2>
<h2 id="que3">Query 3: Tax Exemption Exploitation</h2>
<h2 id="que4">Query 4: Sinkholes and Sales Price</h2>
<h2 id="que5">Query 5: House Value Over Time</h2>
<h2 id="que6">Query 6: Avg Price Sold by Zip </h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<h1>Query Results</h1>▼
<div class="middle-message">
<h1>Pasco Properties</h1>
<canvas id="myChart"></canvas>▼
<h2 id="query-description"> </h2>
<h4 id = "small-desc">One of the most important factors for many home buyers is lot size, which is the amount
of land a house is built on. A larger lot size, usually accompanied by a larger yard makes a house more valuable, visually appealing, and is often sought by home buyers with young families. Sources claim that there is some correlation between large yards and older houses presumably because those houses were built when land was less expensive. (McGill)
With this query, we are interested in finding whether this is the case when measuring the lot size of older homes.
</h4>
<h3 id= "query-prompt"></h3>
<form id="userInput"></form>
▲ <canvas id = "myChart"></canvas>
</div>
▲<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// ------------for navigation:
▲ }]
document.getElementById('myChart'),▼
document.getElementById("home").onclick = (e) => {
location.search = '';
Línea 121 ⟶ 115:
location.search = 'query=6';
}
document.getElementById("query-description").innerHTML= "What was median lot size by year built in a given zip code?";
document.getElementById("query-prompt").innerHTML="Enter a zip code, start year, and end year:"
// create form for user input
const qform = document.getElementById("userInput");
const in1 = document.createElement("input");
in1.type = "number";
in1.id= "zipcode";
const in2 = document.createElement("input");
in2.type = "number";
in2.id="year_x";
const in3 = document.createElement("input");
in3.type = "number";
in3.id="year_y";
const sub = document.createElement("input");
sub.type = "submit";
const temp = qform.replaceChildren(in1, in2, in3, sub);
// set up submit button
qform.addEventListener("submit", (e) => {
e.preventDefault();
const yx = document.getElementById("year_x").value;
const yy = document.getElementById("year_y").value;
location.search += '&zip=' + z + '&year_x=' + yx + '&year_y=' + yy;
</script>
</body>
</html>
| |||