Skip to content

Commit

Permalink
completed
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhaojustin
zhaojustin committed Feb 17, 2021
1 parent c59e12d commit ca139e5
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 54 deletions.
7 changes: 7 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,13 @@ p {
font-size: 1.25em;
}

.uk-form-label {
font-family: "Overpass Mono" !important;
font-weight: 400;
color: #3a3a3a;
font-size: 1.2em;
}

.dollar {
display: inline-block;
position: relative;
Expand Down
116 changes: 62 additions & 54 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<title>Boba Tracker - 2021</title>
</head>

Expand Down Expand Up @@ -77,60 +80,65 @@ <h2 class="uk-modal-title" style="padding-bottom: 5%">
<span uk-icon="pencil" style="padding-right: 10px"></span>New Entry
</h2>

<!-- content -->
<table class="uk-table">
<tbody>
<!-- date -->
<tr>
<td class="uk-width-small">
<p>date: </p>
</td>
<td>
<input class="uk-input" type="text" placeholder="5/8">
</td>
</tr>
<!-- drink name -->
<tr>
<td class="uk-width-small">
<p>drink: </p>
</td>
<td>
<input class="uk-input" type="text" placeholder="Jasmine Milk Tea">
</td>
</tr>
<!-- toppings -->
<tr>
<td class="uk-width-small">
<p>toppings: </p>
</td>
<td>
<input class="uk-input" type="text" placeholder="Boba">
</td>
</tr>
<!-- store name -->
<tr>
<td class="uk-width-small">
<p>store: </p>
</td>
<td>
<input class="uk-input" type="text" placeholder="Omomo Tea Shoppe">
</td>
</tr>
<!-- price -->
<tr>
<td class="uk-width-small">
<p>price: </p>
</td>
<td>
<div class="dollar"><input class="uk-input" type="number" placeholder="5.00"></div>
</td>
</tr>
</tbody>
</table>

<!-- continue button -->
<button class="uk-button uk-button-default uk-modal-close" type="button"
style="margin-top: 5%">Done</button>
<form class="uk-form-horizontal" id="sendData">

<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">date:</label>
<div class="uk-form-controls">
<input name="Date" class="uk-input" id="date" type="text" placeholder="5/8">
</div>
</div>

<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">drink:</label>
<div class="uk-form-controls">
<input name="Drink" class="uk-input" id="drink" type="text" placeholder="Jasmine Milk Tea">
</div>
</div>

<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">toppings:</label>
<div class="uk-form-controls">
<input name="Topping" class="uk-input" id="topping" type="text" placeholder="Boba">
</div>
</div>

<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">store:</label>
<div class="uk-form-controls">
<input name="Store" class="uk-input" id="store" type="text" placeholder="Omomo">
</div>
</div>

<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">price:</label>
<div class="uk-form-controls">
<input name="Price" class="uk-input dollar" id="price" type="text" placeholder="5.00">
</div>
</div>

<!-- continue button -->
<button class="uk-button uk-button-default uk-modal-close" type="submit" onclick="sendData()"
uk-toggle="target: #done-modal" style="margin-top: 5%">Done</button>

</form>

</div>
</div>

<!-- done modal -->
<div id="done-modal" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<!-- title -->
<h2 class="uk-modal-title" style="padding-bottom: 5%">
<span uk-icon="check" style="padding-right: 10px"></span>Complete!
</h2>
<p>Logged:</p>
<p style="padding-top: 5%"><span id="drink_date"></span></p>
<p><span id="drink_name"></span></p>
<p><span id="drink_topping"></span></p>
<p><span id="drink_store"></span></p>
<p>$ <span id="drink_price"></span></p>
</div>
</div>

Expand Down
31 changes: 31 additions & 0 deletions js/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
// set date
var d = new Date();
document.getElementById("date").value = (d.getMonth()+1)+"/"+d.getDate();

// send information to google sheets
function sendData() {

var date = document.getElementById("date").value;
var drink = document.getElementById("drink").value;
var topping = document.getElementById("topping").value;
var store = document.getElementById("store").value;
var price = document.getElementById("price").value;

document.getElementById("drink_date").innerHTML = date;
document.getElementById("drink_name").innerHTML = drink;
document.getElementById("drink_topping").innerHTML = topping;
document.getElementById("drink_store").innerHTML = store;
document.getElementById("drink_price").innerHTML = price;

$.ajax({
url:'https://api.apispreadsheets.com/data/8288/',
type:'post',
data:$("#sendData").serializeArray(),
success: function(){
console.log("Form Data Submitted :)")
},
error: function(){
alert("There was an error :(")
}
});
}

0 comments on commit ca139e5

Please sign in to comment.