From cf22a0518a2c370119e28760a9b3deddda286d3a Mon Sep 17 00:00:00 2001
From: armish24 <31367960+armish24@users.noreply.github.com>
Date: Sat, 5 Jan 2019 13:20:11 +0530
Subject: [PATCH 1/2] dark and light mode button added
---
css/stylesheet.css | 18 ++++++++++++++++--
index.html | 4 +++-
js/main.js | 21 ++++++++++++++++++++-
3 files changed, 39 insertions(+), 4 deletions(-)
diff --git a/css/stylesheet.css b/css/stylesheet.css
index 7122ff1..7b740c1 100644
--- a/css/stylesheet.css
+++ b/css/stylesheet.css
@@ -1,9 +1,9 @@
body {
- background: #eee;
+ background: rgb(243, 238, 238);
font-family: Roboto, "Helvetica Neue", sans-serif;
}
-h2 {
+#title {
color: #7c795d;
font-family: 'Source Sans Pro', sans-serif;
font-size: 32px;
@@ -56,3 +56,17 @@ h2 {
#out * {
margin-top: 10px;
}
+
+#myButton1 {
+ background-color: rgb(0, 5, 0); /* Green */
+ border: none;
+ color: white;
+ padding: 15px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ margin: 4px 2px;
+ cursor: pointer;
+ border-radius: 50%;
+ }
diff --git a/index.html b/index.html
index 9b9e62d..8c5e23a 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,9 @@
Geolocator for FOSSASIA
- Geo locator to faciliate easy integration of location data
+
+ Geo locator to faciliate easy integration of location data
+
diff --git a/js/main.js b/js/main.js
index 3720e3f..c262d81 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,7 @@
let output = document.getElementById("output");
let out = document.getElementById("out")
+let flag=0
+
const geolocation = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(rit, fileit);
@@ -47,4 +49,21 @@ const fileit = (error) => {
output.innerHTML = "Unknown Error please try again";
break;
}
-}
\ No newline at end of file
+}
+
+const changeBodyBg = () => {
+ if(!flag)
+ {document.body.style.background = 'black';
+ document.getElementById("title").style.color = 'white';
+ document.getElementById("myButton1").value="Light";
+ document.getElementById("myButton1").style.background = 'white';
+ document.getElementById("myButton1").style.color = 'black';
+ flag=1;}
+ else
+ {document.body.style.background = '#eee';
+ document.getElementById("title").style.color = "#7c795d";
+ document.getElementById("myButton1").value="Dark";
+ document.getElementById("myButton1").style.background = 'black';
+ document.getElementById("myButton1").style.color = 'white';
+ flag=0;}
+}
From a75df80c2607804b1a761e739184cfc5bb96e36f Mon Sep 17 00:00:00 2001
From: armish24 <31367960+armish24@users.noreply.github.com>
Date: Mon, 7 Jan 2019 20:14:16 +0530
Subject: [PATCH 2/2] changeBodyBg() function modified
---
js/main.js | 34 +++++++++++++++++-----------------
1 file changed, 17 insertions(+), 17 deletions(-)
diff --git a/js/main.js b/js/main.js
index c262d81..cdbf323 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,14 +1,13 @@
let output = document.getElementById("output");
let out = document.getElementById("out")
-let flag=0
+let flag = 1
const geolocation = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(rit, fileit);
document.getElementById("button").value = "Get my geolocation again";
document.getElementById("button").onclick = "window.location.reload();"; // reloads and executes the geolocation();
- }
- else {
+ } else {
output.innerHTML = "Geolocation is not supported by this browser";
output.style.display = "inherit";
}
@@ -52,18 +51,19 @@ const fileit = (error) => {
}
const changeBodyBg = () => {
- if(!flag)
- {document.body.style.background = 'black';
- document.getElementById("title").style.color = 'white';
- document.getElementById("myButton1").value="Light";
- document.getElementById("myButton1").style.background = 'white';
- document.getElementById("myButton1").style.color = 'black';
- flag=1;}
- else
- {document.body.style.background = '#eee';
- document.getElementById("title").style.color = "#7c795d";
- document.getElementById("myButton1").value="Dark";
- document.getElementById("myButton1").style.background = 'black';
- document.getElementById("myButton1").style.color = 'white';
- flag=0;}
+ const background = flag? 'black' : '#eee';
+ const title = flag?'white': '#7c795d';
+ const btn_value = flag? 'Light': 'Dark';
+ const btn_back = flag? 'white' : 'black';
+ const btn_clr = flag? 'black': 'white';
+
+
+ document.body.style.background = background;
+ document.getElementById("title").style.color = title;
+
+ const btn = document.getElementById("myButton1");
+ btn.value = btn_value;
+ btn.style.background = btn_back;
+ btn.style.color = btn_clr;
+ flag=flag? 0:1;
}