Nivedita-coder · Oct 4, 2020 · Oct 4, 2020
diff --git a/jsLib/afternoon.jpg b/jsLib/afternoon.jpg
diff --git a/jsLib/index.html b/jsLib/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Hello there!</title>
+</head>
+<body>
+    <time id="time">12:18:06 PM</time>
+    <h1>
+      <span id="greeting">Good Afternoon</span>
+      <span id="name" contenteditable="true">[Enter your name]</span>
+    </h1>
+
+    <h2>What Is Your Focus For Today?</h2>
+    <h2 id="focus" contenteditable="true">[Enter Focus]</h2>
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/jsLib/main.js b/jsLib/main.js
@@ -0,0 +1,110 @@
+// DOM Elements
+const time = document.getElementById('time'),
+  greeting = document.getElementById('greeting'),
+  name = document.getElementById('name'),
+  focus = document.getElementById('focus');
+
+// Options
+const showAmPm = true;
+
+// Show Time
+function showTime() {
+  let today = new Date(),
+    hour = today.getHours(),
+    min = today.getMinutes(),
+    sec = today.getSeconds();
+
+  // Set AM or PM
+  const amPm = hour >= 12 ? 'PM' : 'AM';
+
+  // 12hr Format
+  hour = hour % 12 || 12;
+
+  // Output Time
+  time.innerHTML = `${hour}<span>:</span>${addZero(min)}<span>:</span>${addZero(
+    sec
+  )} ${showAmPm ? amPm : ''}`;
+
+  setTimeout(showTime, 1000);
+}
+
+// Add Zeros
+function addZero(n) {
+  return (parseInt(n, 10) < 10 ? '0' : '') + n;
+}
+
+// Set Background and Greeting
+function setBgGreet() {
+  let today = new Date(),
+    hour = today.getHours();
+
+  if (hour < 12) {
+    // Morning
+    document.body.style.backgroundImage = "url('https://i.ibb.co/rbmx2RK/morning.jpg')";
+    greeting.textContent = 'Good Morning, ';
+  } else if (hour < 18) {
+    // Afternoon
+    document.body.style.backgroundImage = "url('https://i.ibb.co/wKtVjYM/night.jpg')";
+    greeting.textContent = 'Good Afternoon, ';
+  } else {
+    // Evening
+    document.body.style.backgroundImage = "url('https://i.ibb.co/JQRJ91J/afternoon.jpg')";
+    greeting.textContent = 'Good Evening, ';
+    document.body.style.color = 'white';
+  }
+}
+
+// Get Name
+function getName() {
+  if (localStorage.getItem('name') === null) {
+    name.textContent = '[Enter Name]';
+  } else {
+    name.textContent = localStorage.getItem('name');
+  }
+}
+
+// Set Name
+function setName(e) {
+  if (e.type === 'keypress') {
+    // Make sure enter is pressed
+    if (e.which == 13 || e.keyCode == 13) {
+      localStorage.setItem('name', e.target.innerText);
+      name.blur();
+    }
+  } else {
+    localStorage.setItem('name', e.target.innerText);
+  }
+}
+
+// Get Focus
+function getFocus() {
+  if (localStorage.getItem('focus') === null) {
+    focus.textContent = '[Enter Focus]';
+  } else {
+    focus.textContent = localStorage.getItem('focus');
+  }
+}
+
+// Set Focus
+function setFocus(e) {
+  if (e.type === 'keypress') {
+    // Make sure enter is pressed
+    if (e.which == 13 || e.keyCode == 13) {
+      localStorage.setItem('focus', e.target.innerText);
+      focus.blur();
+    }
+  } else {
+    localStorage.setItem('focus', e.target.innerText);
+  }
+}
+
+name.addEventListener('keypress', setName);
+name.addEventListener('blur', setName);
+focus.addEventListener('keypress', setFocus);
+focus.addEventListener('blur', setFocus);
+
+// Run
+showTime();
+setBgGreet();
+getName();
+getFocus();
diff --git a/jsLib/morning.jpg b/jsLib/morning.jpg
diff --git a/jsLib/night.jpg b/jsLib/night.jpg
diff --git a/jsLib/style.css b/jsLib/style.css
@@ -0,0 +1,36 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    font-family: 'Quicksand', sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    height: 100vh;
+    color: black;
+  }
+
+  #time {
+    font-size: 8rem;
+  }
+
+  h1 {
+    margin-bottom: 3rem;
+  }
+
+  h2 {
+    margin-bottom: 0.5rem;
+    opacity: 0.6;
+  }
+
+  @media (max-width: 700px) {
+    #time {
+      font-size: 6rem;
+    }
+  }
+