Initial-commit

elena-brd · Sep 26, 2023 · 55976ad · 55976ad
commit 55976ad
Show file tree

Hide file tree

Showing 10 changed files with 188 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,14 @@
+# Focus Landing Page
+
+User can enter the name and the main focus of the day. All this information will be stored on LocalStorage.
+
+Depending on the time the main background will be changes for morning, evening and afternoon
+
+Morning
+![morning-example](./img/morning-example.png)
+
+Afternoon
+![morning-example](./img/afternoon-example.png)
+
+Evening
+![morning-example](./img/evening-example.png)
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,45 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #181818;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    height: 100vh;
+}
+
+#time {
+    font-size: 9rem;
+}
+
+h1 {
+    font-weight: 500;
+    margin-bottom: 2rem;
+}
+
+h2 {
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+}
+
+#focus {
+    margin: auto;
+    width: 50%;
+}
+
+@media(max-width: 750px) {
+    #time {
+        font-size: 6rem;
+    }
+
+    h1 {
+        font-size: 1.7rem;
+    }
+}
diff --git a/img/afternoon-example.png b/img/afternoon-example.png
diff --git a/img/afternoon.jpg b/img/afternoon.jpg
diff --git a/img/evening-example.png b/img/evening-example.png
diff --git a/img/evening.jpg b/img/evening.jpg
diff --git a/img/morning-example.png b/img/morning-example.png
diff --git a/img/morning.jpg b/img/morning.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!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="css/style.css">
+    <title>Welcome</title>
+</head>
+
+<body>
+    <div class="container">
+        <time id="time"></time>
+
+        <div class="greets">
+            <h1>
+                <span id="greetings"></span>
+                <span id="name" contenteditable="true"></span>
+            </h1>
+        </div>
+        <div class="focus-content">
+            <h2>What Is Your Focus Today?</h2>
+            <h2 id="focus" contenteditable="true">Focus</h2>
+        </div>
+    </div>
+
+
+    <script src="js/main.js"></script>
+</body>
+
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,98 @@
+const time = document.getElementById('time');
+const greetings = document.getElementById('greetings');
+const name = document.getElementById('name');
+const focus = document.getElementById('focus');
+
+// display time
+function getTime() {
+    const currentTime = new Date();
+
+    const hour = currentTime.getHours();
+    const minutes = currentTime.getMinutes();
+    const seconds = currentTime.getSeconds();
+
+    time.innerHTML = `${hour}<span>:</span>${addZeroToTime(minutes)}<span>:</span>${addZeroToTime(seconds)}`
+
+    setTimeout(getTime, 1000)
+}
+
+// add zero
+function addZeroToTime(number) {
+    return (parseInt(number, 10) < 10 ? '0' : '') + number;
+}
+
+// background Image
+function backgroundImageTime() {
+    const timesOfTheDay = new Date();
+    const hour = timesOfTheDay.getHours();
+
+    if (hour < 12) {
+        document.body.style.backgroundImage = "url('./img/morning.jpg')";
+        greetings.textContent = 'Good Morning';
+
+    } else if (hour < 18) {
+        document.body.style.backgroundImage = "url('./img/afternoon.jpg')";
+        greetings.textContent = 'Good Afternoon';
+
+    } else {
+        document.body.style.backgroundImage = "url('./img/evening.jpg')";
+        greetings.textContent = 'Good Evening';
+        document.body.style.color = '#fff';
+    }
+}
+
+// user name
+function setUserName(e) {
+    if (e.type == 'keypress') {
+        if (e.keyCode == 13) {
+            localStorage.setItem('name', e.target.innerText);
+            name.blur();
+        }
+    } else {
+        localStorage.setItem('name', e.target.innerText)
+    }
+}
+
+function getUserName() {
+    if (localStorage.getItem('name') === null) {
+        name.textContent = '[Enter Your Name]';
+    } else {
+        name.textContent = localStorage.getItem('name');
+    }
+}
+
+// focus
+function setFocus(e) {
+    if (e.type == 'keypress') {
+        if (e.keyCode == 13) {
+            localStorage.setItem('focus', e.target.innerText);
+            focus.blur();
+        }
+    } else {
+        localStorage.setItem('focus', e.target.innerText)
+    }
+}
+
+function getFocus() {
+    if (localStorage.getItem('focus') === null) {
+        focus.textContent = '[Enter Your Focus]';
+        focus.style.color = '#333'
+    } else {
+        focus.textContent = localStorage.getItem('focus');
+    }
+}
+
+name.addEventListener('keypress', setUserName);
+name.addEventListener('blur', setUserName);
+focus.addEventListener('keypress', setFocus);
+focus.addEventListener('blur', setFocus);
+
+
+function init() {
+    getTime();
+    backgroundImageTime();
+    getUserName();
+    getFocus()
+}
+
+init();