scubbo/mix256-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Full rudimentary logic working

Browse Source
This commit is contained in:
Jack Jackson 2022-12-27 17:04:48 -08:00
parent 877904b516
commit e265e45302
3 changed files with 107 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
site/static/css/main.css Normal file
View File

@ -0,0 +1,65 @@
body {
background-color: black;
color: white;
}
div#body-div {
width: 80%;
margin: 0 auto;
border-radius: 25px;
background-color: #222;
padding: 30px;
}
div#heading-div {
margin: auto;
width: 200px;
}
h1 {
margin: 0;
}
.h1orange {
color: rgb(238, 117, 47);
}
.h1blue {
color: rgb(114, 198, 250);
}
.h1yellow {
color: rgb(255, 253, 84);
}
.h1green {
color: rgb(88, 164, 92);
}
.select-div {
float: left;
width: 200px;
}
.select-div select {
width: 130px;
}
#results-div {
padding: 20px 0;
font-size: 20px;
}
#results-name {
color: pink;
}
.clearfix {
overflow: auto;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}

38
site/static/index.html
View File

@ -1,19 +1,43 @@
<html>
<head>
<title>It works!</title>
<title>Mix 256</title>
<script src="/static/js/jquery-3.6.3.min.js"></script>
<script src="/static/js/main.js"></script>
<link rel="stylesheet" href="/static/css/main.css"/>
<body>
<h1>Mix 256</h1>
<div id="body-div">
<div id="heading-div">
<h1><span class="h1orange">M</span><span class="h1blue">i</span><span class="h1yellow">x</span> <span class="h1green">2</span><span class="h1orange">5</span><span class="h1blue">6</span></h1>
</div>
<div>
<div id="select-div" class="clearfix">
<select id='base'></select>
<select id='second'></select>
<select id='sour'></select>
<select id='mixer'></select>
<div id="select-div-base" class="select-div">
<h2>Base Alcohol</h2>
<select id='base'></select>
</div>
<div id="select-div-second" class="select-div">
<h2>Second Alcohol</h2>
<select id='second'></select>
</div>
<div id="select-div-sour" class="select-div">
<h2>Sour</h2>
<select id='sour'></select>
</div>
<div id="select-div-mixer" class="select-div">
<h2>Mixer</h2>
<select id='mixer'></select>
</div>
</div>
<div id="results-div" style="display: none;">
<span id="results-span">Your cocktail is: </span><span id="results-name"></span>
<div id="more-info-div" style="display: none;">
<span id="more-info-span"></span>
</div>
</div>
</div>
</body>
</html>

11
site/static/js/main.js
View File

@ -34,5 +34,16 @@ function onSelectChange() {
data = $.get(`api/combination/${combo_id}`, function (data) {
console.log(`Called for ${combo_id}`);
console.log(data);
$('#results-div').slideDown();
$('#results-name').html(data[0]);
if (data[1] != "") {
$('#more-info-span').html(data[1]);
$('#more-info-div').slideDown();
} else {
$('#more-info-span').html("");
$('#more-info-div').slideUp();
}
})
}