egyptionize
Version:
Make Time Estimations Readable For Egyptions
142 lines (140 loc) • 3.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="https://fonts.googleapis.com/css?family=Cairo&display=swap" rel="stylesheet" />
<title>Egyptionize Time</title>
<style>
body {
display: flex;
justify-content: space-between;
font-family: "Cairo", sans-serif;
background-color: #f8e4cc;
}
.time-control {
flex: 1;
border: 2px dashed #8fbcdb;
background-color: wheat;
padding: 2rem;
border-radius: 12px;
margin: 1em;
}
.time-view {
border: 2px dashed #8fbcdb;
background-color: wheat;
padding: 2rem;
font-size: 1em;
border-radius: 12px;
flex: 3;
margin: 1em;
text-align: center;
}
.time-view div {
font-weight: bold;
font-size: 3em;
}
.slider-control {
display: flex;
font-weight: bold;
justify-content: space-between;
padding: 1em;
align-items: center;
}
.slider-control > div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column-reverse;
width: 100px;
}
.slider-control > div > span:last-child {
font-size: 3em;
line-height: 1;
}
.slider-control > input {
flex: 1;
}
.slider span {
display: flex;
font-size: 2em;
}
</style>
</head>
<body>
<div class="time-view">
<h3>
Your Package will arrive in
</h3>
<div id="egyption-time">
???????
</div>
</div>
<div class="time-control">
<div class="slider-control">
<div>
<span>
دقيقة
</span>
<span></span>
</div>
<input type="range" value="0" min="0" max="60" class="slider" id="minute" />
</div>
<div class="slider-control">
<div>
<span>
ساعة
</span>
<span></span>
</div>
<input type="range" value="0" min="0" max="24" class="slider" id="hour" />
</div>
<div class="slider-control">
<div>
<span>
يوم
</span>
<span></span>
</div>
<input type="range" value="0" min="0" max="31" class="slider" id="day" />
</div>
<div class="slider-control">
<div>
<span>
أسبوع
</span>
<span></span>
</div>
<input type="range" value="0" min="0" max="52" class="slider" id="week" />
</div>
</div>
<script src="./bundle.js"></script>
<script>
const values = {
minute: 0,
hour: 0,
day: 0,
week: 0
};
const setupSlider = (sliderId, onchange) => {
var slider = document.getElementById(sliderId);
var output = slider.previousElementSibling.lastElementChild;
output.innerHTML = slider.value;
slider.oninput = function() {
values[sliderId] = this.value;
output.innerHTML = this.value;
};
slider.onchange = onchange;
};
const onchange = () => {
const message = getEgyptionizedTime(values);
document.getElementById("egyption-time").innerHTML = message;
};
setupSlider("minute", onchange);
setupSlider("hour", onchange);
setupSlider("day", onchange);
setupSlider("week", onchange);
</script>
</body>
</html>