Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
359 lines (336 sloc) 13.8 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="How to Order Like a Malaysian by Nazrul Kamaruddin">
<meta name="description" content="An automated guide to help you order drinks in Malaysia. It can work in Singapore and Brunei too.">
<meta property="og:url" content="https://nazroll.com/orderlikemalaysian.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="How to Order Like a Malaysian by Nazrul Kamaruddin" />
<meta property="og:description" content="An automated guide to help you order drinks in Malaysia. It can work in Singapore and Brunei too." />
<meta property="og:image" content="https://nazroll.com/assets/img/masthead/1.jpg" />
<title>How to Order Like a Malaysian by Nazrul Kamaruddin</title>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-T8X75XG');</script>
<!-- End Google Tag Manager -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Catamaran">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pavanam">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet">
<link rel="stylesheet" href="/assets/css/styles.css">
<style>
.text-order {
font-size: 42px;
font-weight: 800;
font-family: 'Open Sans', sans-serif;
}
.btn-done {
margin-top: 15px;
}
.panel-order {
margin-top: 15px;
}
.row-order-selections {
padding-bottom: 45px;
}
.col-float.active {
border-top: solid 1px #eee;
position: fixed;
bottom: 0;
left: 0;
background-color: #ffffff;
z-index: 1;
padding-bottom: 15px;
text-align: right;
}
</style>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T8X75XG" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="container">
<div class="row row-header">
<div class="col-md-1 col-sm-2 col-xs-3">
<a href="/"><img class="img-responsive img-logo" src="/assets/img/logo.svg" alt="NZRL"></a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h1>How to Order Like a Malaysian</h1>
<p class="lead">An automated guide to help you order drinks in Malaysia. It can work in Singapore &amp; Brunei too.</p>
</div>
</div>
<div class="row" id="order-like-malaysian">
<div class="col-xs-12">
<div class="panel panel-default panel-order">
<div class="panel-body text-center">
<span class="text-order text-muted">Nothing here yet</span>
</div>
</div>
</div>
</div>
<div class="row row-order-selections">
<!-- Type -->
<div class="col-xs-12 col-type">
<h4>Type</h4>
<div class="radio">
<label>
<input type="radio" name="type" value="coffee" checked="checked"> Coffee
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="type" value="tea"> Tea
</label>
</div>
</div>
<!-- Water temperature -->
<div class="col-xs-12 col-water-temp">
<h4>Water temperature</h4>
<div class="radio">
<label>
<input type="radio" name="temp" value="hot" checked="checked"> Hot
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="temp" value="ice"> Ice
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="temp" value="less"> Less ice
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="temp" value="warm"> Warm
</label>
</div>
</div>
<!-- Drink size -->
<div class="col-xs-12 col-drink-size">
<h4>Drink size</h4>
<div class="radio">
<label>
<input type="radio" name="size" value="normal" checked="checked"> Normal
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="size" value="small"> Small
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="size" value="large"> Large
</label>
</div>
</div>
<!-- Milk -->
<div class="col-xs-12 col-milk">
<h4>Milk</h4>
<div class="radio">
<label>
<input type="radio" name="milk" value="yes" checked="checked"> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="milk" value="no"> No
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="milk" value="evaporated"> Evaporated milk
</label>
</div>
</div>
<!-- Sugar -->
<div class="col-xs-12 col-sugar">
<h4>Sugar</h4>
<div class="radio">
<label>
<input type="radio" name="sugar" value="yes" checked="checked"> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="sugar" value="no"> No
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="sugar" value="extra"> Extra sweet
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="sugar" value="less"> Less sweet
</label>
</div>
</div>
<!-- Extra -->
<div class="col-xs-12 col-extra">
<h4>Extra</h4>
<div class="checkbox">
<label>
<input type="checkbox" name="extra" value="pulled"> Pulled
</label>
</div>
</div>
<div class="col-xs-12 col-float active">
<button class="btn btn-inline btn-primary btn-lg btn-done">Translate</button>
<label class="checkbox-inline" style="margin-top: 15px; margin-left: 15px;">
<input type="checkbox" name="speak"> Speak
</label>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<p class="text-muted"><em>Last updated on 10 September 2017. <a href="https://github.com/nazroll/nazroll.com/blob/master/public/orderlikemalaysian.html">Source code is available at Github</a>. We now have an <a href="https://github.com/nazroll/nazroll.com/blob/master/functions#order-like-a-malaysian-api">API</a>.</em></p>
<footer class="footer">
<p class="text-left text-small">How to Order Like a Malaysian by Nazrul Kamaruddin &copy; 2017. All rights reserved.</p>
</footer>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var props = {
coffee: 'kopi', tea: 'teh',
milk: 'susu', no_milk: 'o', evaporated: 'susu cair',
sugar: 'manis', no_sugar: 'kosong', extra_sweet: 'tambah gula', less_sweet: 'kurang manis',
hot: 'panas', ice: 'ais', less_ice: 'kurang ais', warm: 'suam',
large: 'besar', small: 'kecik', normal: 'biasa',
pulled: 'tarik'
};
$(document).ready(function() {
var currWindowHeight = $(window).height();
$(window).scroll(function() {
if (document.getElementsByClassName('col-float')[0].getBoundingClientRect().top < currWindowHeight) {
$('.col-float').removeClass('active');
}
if (document.getElementsByClassName('col-float')[0].getBoundingClientRect().top > currWindowHeight) {
$('.col-float').addClass('active');
}
});
$('.btn-done').click(function(){
// Scroll to top. Good for mobile.
$('html, body').animate({
scrollTop: $('#order-like-malaysian').offset().top
}, 120);
// Get all selected parameters.
var radios = $("input[type='radio']:checked");
var checkboxes = $("input[type='checkbox']:checked");
var drink = [];
var drink_size;
var drink_water_temp;
var drink_type;
var drink_milk;
var drink_extra;
var drink_sugar;
var no_milk = false;
var no_ice = true;
var speak = false;
radios.each(function(i, v){
// Type
if (v.name == 'type') {
drink_type = props[v.value];
}
// Size
if (v.name == 'size') {
if (v.value == 'large') {
drink_size = props[v.value];
}
if (v.value == 'small') {
drink_size = props[v.value];
}
}
// Water temperature
if (v.name == 'temp') {
if (v.value == 'warm') {
drink_water_temp = props[v.value];
}
if (v.value == 'ice') {
drink_water_temp = props[v.value];
no_ice = false;
}
if (v.value == 'less') {
drink_water_temp = props['less_ice'];
no_ice = false;
}
}
// Milk
if (v.name == 'milk') {
if (v.value == 'no') {
drink_milk = props['no_milk'];
no_milk = true;
} else {
drink_milk = props[v.value];
}
}
// Sugar
if (v.name == 'sugar') {
if (v.value == 'no') {
drink_sugar = props['no_sugar'];
}
if (v.value == 'extra') {
drink_sugar = props['extra_sweet'];
}
if (v.value == 'less') {
drink_sugar = props['less_sweet'];
}
}
});
checkboxes.each(function(i, v) {
// Extra
if (v.name == 'extra') {
drink_extra = props[v.value];
}
// WebSpeech API
if (v.name == 'speak') {
speak = true;
}
});
drink.push(drink_type);
if (no_milk == true) drink.push(drink_milk);
if (no_ice == true) drink.push(drink_extra);
drink.push(drink_water_temp);
drink.push(drink_size);
if (no_milk == false) drink.push(drink_milk);
drink.push(drink_sugar);
var text = drink.join(" ");
$('.panel-order .panel-body').addClass('bg-success');
$('.text-order').addClass('text-success').html(text);
if (speak == true) {
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.text = text;
msg.lang = 'ms';
msg.voice = voices[10];
msg.voiceURI = "native";
msg.rate = 0.75;
window.speechSynthesis.speak(msg);
}
// Push event to Google Analytics.
dataLayer.push({
'event': 'propsOrderLikeMalaysian',
'eventCategory': 'Orderprops',
'eventAction': 'Selected',
'eventLabel': 'GenerateOrder',
'eventValue': drink.join(" ")
});
});
});
</script>
</body>
</html>