Added a message.
This commit is contained in:
@@ -13,6 +13,8 @@ body {
|
||||
.main {
|
||||
width: 100%;
|
||||
text-align: center; }
|
||||
.main #message {
|
||||
padding-bottom: 25px; }
|
||||
.main #search-bar {
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
@@ -42,7 +44,6 @@ body {
|
||||
background: #2e2e2e;
|
||||
padding: 20px 15px;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
min-height: 150px; }
|
||||
.main #other-content .sqr:hover {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
|
||||
@@ -12,6 +12,9 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="main" class="my-auto py-5 main">
|
||||
<div id="message">
|
||||
<h2>Hey Deepjyoti, Good Morning!</h2>
|
||||
</div>
|
||||
<div id="search-bar">
|
||||
<input id="search-bar-input" placeholder="Search something on Google"></input>
|
||||
</div>
|
||||
|
||||
45
js/main.js
45
js/main.js
@@ -3,6 +3,8 @@ window.onload = function() {
|
||||
}
|
||||
|
||||
searchBarId = "search-bar-input"
|
||||
messageId = "message h2"
|
||||
userName = "Deepjyoti"
|
||||
|
||||
function initBody() {
|
||||
/**
|
||||
@@ -21,4 +23,47 @@ function initBody() {
|
||||
query = document.getElementById(searchBarId).value.replace(/\ /g, "+")
|
||||
document.location = googleSearchUrl + query
|
||||
})
|
||||
|
||||
// Build a message for the user
|
||||
builtMsg = buildMsg()
|
||||
builtMsg == "" ?
|
||||
builtMsg = `Hello ${userName}` : builtMsg = `Hey ${userName}, ${builtMsg}!`
|
||||
$("#" + messageId).text(builtMsg)
|
||||
}
|
||||
|
||||
function buildMsg() {
|
||||
/**
|
||||
* Build a nice message for the user.
|
||||
*
|
||||
* Following is how the message would be decided.
|
||||
* 0 - 5:59 : It's too late, take some sleep
|
||||
* 6 - 8:59 : You're up early
|
||||
* 9 - 11:59 : Have a good day ahead
|
||||
* 12 - 16:59 : Good Afternoon
|
||||
* 17 - 19:59 : Good Evening
|
||||
* 20 - 23:59 : Get away from the computer
|
||||
*/
|
||||
date = new Date()
|
||||
currentHour = date.getHours()
|
||||
currentMinute = date.getMinutes()
|
||||
currentTime = currentHour + (0.01 * currentMinute)
|
||||
|
||||
if (inRange(currentTime, 0, 5.59))
|
||||
return "It's too late, take some sleep"
|
||||
if (inRange(currentTime, 6, 8.59))
|
||||
return "You're up early"
|
||||
if (inRange(currentTime, 9, 11.59))
|
||||
return "Have a good day ahead"
|
||||
if (inRange(currentTime, 12, 16.59))
|
||||
return "Good Afternoon"
|
||||
if (inRange(currentTime, 17, 19.59))
|
||||
return "Good Evening"
|
||||
if (inRange(currentTime, 20, 24))
|
||||
return "Get away from the computer"
|
||||
else
|
||||
return ""
|
||||
}
|
||||
|
||||
function inRange(number, min, max) {
|
||||
return (number >= min && number <= max)
|
||||
}
|
||||
@@ -24,6 +24,10 @@ body {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
#message {
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
#search-bar {
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
@@ -61,7 +65,6 @@ body {
|
||||
background: lighten($background, 5);
|
||||
padding: 20px 15px;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
min-height: 150px;
|
||||
|
||||
&:hover {
|
||||
|
||||
Reference in New Issue
Block a user