244 lines
9.3 KiB
HTML
244 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script
|
|
type="text/javascript"
|
|
src="https://www.gstatic.com/charts/loader.js"
|
|
></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<!-- Font -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css"
|
|
/>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Kode+Mono&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<script type="text/javascript">
|
|
google.charts.load("current", { packages: ["corechart"] });
|
|
google.charts.setOnLoadCallback(drawChart);
|
|
|
|
async function drawChart() {
|
|
fetch("/", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
p: document.getElementById("p").value,
|
|
g: document.getElementById("g").value,
|
|
a: document.getElementById("a").value,
|
|
}),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((json) => {
|
|
title = json["title"];
|
|
data = json["data"];
|
|
console.log(data);
|
|
data = google.visualization.arrayToDataTable(data);
|
|
var options = {
|
|
title: title,
|
|
titleTextStyle: {
|
|
color: "#aaa",
|
|
},
|
|
animation: {
|
|
startup: true,
|
|
duration: 1000,
|
|
easing: "out",
|
|
},
|
|
backgroundColor: "#1c212c",
|
|
vAxis: {
|
|
minValue: 0,
|
|
gridlines: { color: "#666" },
|
|
minorGridlines: { color: "#1c212c" },
|
|
textStyle: { color: "#aaa" }
|
|
},
|
|
hAxis: {
|
|
gridlines: { color: "#666" },
|
|
minorGridlines: { color: "#1c212c" },
|
|
textStyle: { color: "#aaa" }
|
|
},
|
|
legend: { position: 'none'},
|
|
};
|
|
|
|
var chart = new google.visualization.BarChart(
|
|
document.getElementById("chart")
|
|
);
|
|
|
|
chart.draw(data, options);
|
|
});
|
|
}
|
|
</script>
|
|
<style>
|
|
html * {
|
|
font-family: "Quicksand", sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="container" style="text-align: center">
|
|
<header>
|
|
<h1>Adivinar nombres por edad y género</h1>
|
|
</header>
|
|
<div id="chart" style="width: 80vw; height: 50vh; margin: auto"></div>
|
|
<form
|
|
onSubmit="return false;"
|
|
style="margin: auto; margin-top: 2em; width: 80%"
|
|
>
|
|
<fieldset class="grid">
|
|
<input type="text" name="p" id="p" placeholder="Como empieza tu nombre?" />
|
|
<select name="a" id="a">
|
|
<option selected value="">Año?</option>
|
|
<option value="1922">1922</option>
|
|
<option value="1923">1923</option>
|
|
<option value="1924">1924</option>
|
|
<option value="1925">1925</option>
|
|
<option value="1926">1926</option>
|
|
<option value="1927">1927</option>
|
|
<option value="1928">1928</option>
|
|
<option value="1929">1929</option>
|
|
<option value="1930">1930</option>
|
|
<option value="1931">1931</option>
|
|
<option value="1932">1932</option>
|
|
<option value="1933">1933</option>
|
|
<option value="1934">1934</option>
|
|
<option value="1935">1935</option>
|
|
<option value="1936">1936</option>
|
|
<option value="1937">1937</option>
|
|
<option value="1938">1938</option>
|
|
<option value="1939">1939</option>
|
|
<option value="1940">1940</option>
|
|
<option value="1941">1941</option>
|
|
<option value="1942">1942</option>
|
|
<option value="1943">1943</option>
|
|
<option value="1944">1944</option>
|
|
<option value="1945">1945</option>
|
|
<option value="1946">1946</option>
|
|
<option value="1947">1947</option>
|
|
<option value="1948">1948</option>
|
|
<option value="1949">1949</option>
|
|
<option value="1950">1950</option>
|
|
<option value="1951">1951</option>
|
|
<option value="1952">1952</option>
|
|
<option value="1953">1953</option>
|
|
<option value="1954">1954</option>
|
|
<option value="1955">1955</option>
|
|
<option value="1956">1956</option>
|
|
<option value="1957">1957</option>
|
|
<option value="1958">1958</option>
|
|
<option value="1959">1959</option>
|
|
<option value="1960">1960</option>
|
|
<option value="1961">1961</option>
|
|
<option value="1962">1962</option>
|
|
<option value="1963">1963</option>
|
|
<option value="1964">1964</option>
|
|
<option value="1965">1965</option>
|
|
<option value="1966">1966</option>
|
|
<option value="1967">1967</option>
|
|
<option value="1968">1968</option>
|
|
<option value="1969">1969</option>
|
|
<option value="1970">1970</option>
|
|
<option value="1971">1971</option>
|
|
<option value="1972">1972</option>
|
|
<option value="1973">1973</option>
|
|
<option value="1974">1974</option>
|
|
<option value="1975">1975</option>
|
|
<option value="1976">1976</option>
|
|
<option value="1977">1977</option>
|
|
<option value="1978">1978</option>
|
|
<option value="1979">1979</option>
|
|
<option value="1980">1980</option>
|
|
<option value="1981">1981</option>
|
|
<option value="1982">1982</option>
|
|
<option value="1983">1983</option>
|
|
<option value="1984">1984</option>
|
|
<option value="1985">1985</option>
|
|
<option value="1986">1986</option>
|
|
<option value="1987">1987</option>
|
|
<option value="1988">1988</option>
|
|
<option value="1989">1989</option>
|
|
<option value="1990">1990</option>
|
|
<option value="1991">1991</option>
|
|
<option value="1992">1992</option>
|
|
<option value="1993">1993</option>
|
|
<option value="1994">1994</option>
|
|
<option value="1995">1995</option>
|
|
<option value="1996">1996</option>
|
|
<option value="1997">1997</option>
|
|
<option value="1998">1998</option>
|
|
<option value="1999">1999</option>
|
|
<option value="2000">2000</option>
|
|
<option value="2001">2001</option>
|
|
<option value="2002">2002</option>
|
|
<option value="2003">2003</option>
|
|
<option value="2004">2004</option>
|
|
<option value="2005">2005</option>
|
|
<option value="1966">1966</option>
|
|
<option value="1967">1967</option>
|
|
<option value="1968">1968</option>
|
|
<option value="1969">1969</option>
|
|
<option value="1970">1970</option>
|
|
<option value="1971">1971</option>
|
|
<option value="1972">1972</option>
|
|
<option value="1973">1973</option>
|
|
<option value="1974">1974</option>
|
|
<option value="1975">1975</option>
|
|
<option value="1976">1976</option>
|
|
<option value="1977">1977</option>
|
|
<option value="1978">1978</option>
|
|
<option value="1979">1979</option>
|
|
<option value="1980">1980</option>
|
|
<option value="1981">1981</option>
|
|
<option value="1982">1982</option>
|
|
<option value="1983">1983</option>
|
|
<option value="1984">1984</option>
|
|
<option value="1985">1985</option>
|
|
<option value="1986">1986</option>
|
|
<option value="1987">1987</option>
|
|
<option value="1988">1988</option>
|
|
<option value="1989">1989</option>
|
|
<option value="1990">1990</option>
|
|
<option value="1991">1991</option>
|
|
<option value="1992">1992</option>
|
|
<option value="1993">1993</option>
|
|
<option value="1994">1994</option>
|
|
<option value="1995">1995</option>
|
|
<option value="1996">1996</option>
|
|
<option value="1997">1997</option>
|
|
<option value="1998">1998</option>
|
|
<option value="1999">1999</option>
|
|
<option value="2000">2000</option>
|
|
<option value="2001">2001</option>
|
|
<option value="2002">2002</option>
|
|
<option value="2003">2003</option>
|
|
<option value="2004">2004</option>
|
|
<option value="2005">2005</option>
|
|
</select>
|
|
<select name="g" id="g" />
|
|
<option selected value="">Género?</option>
|
|
<option value="f">Femenino</option>
|
|
<option value="m">Masculino</option>
|
|
</select>
|
|
<input type="submit" value="Buscar" onCLick="drawChart();" />
|
|
</fieldset>
|
|
</form>
|
|
</main>
|
|
</body>
|
|
</html>
|