Skip to content

added dark and light mode button #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
arkumish wants to merge 2 commits into
base: master
Choose a base branch
from
Open

added dark and light mode button #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cf22a05
dark and light mode button added
arkumish Jan 5, 2019
a75df80
changeBodyBg() function modified
arkumish Jan 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions css/stylesheet.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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%;
}
4 changes: 3 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
<title>Geolocator for FOSSASIA</title>
</head>
<body>
<h2>Geo locator to faciliate easy integration of location data</h2>
<input type="button" value="Dark" id="myButton1" onclick="changeBodyBg();"></input>
Copy link
Member

@abishekvashok abishekvashok Jan 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pls intend correctly

<h2 id="title">Geo locator to faciliate easy integration of location data</h2>

<div id="main-div" class="card">
<label class="label">Click the below button to get Geolocation</label><br><br><br>
<input id="button" type="button" value="Get my geolocation" onclick="geolocation()">
Expand Down
25 changes: 22 additions & 3 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
let output = document.getElementById("output");
let out = document.getElementById("out")
let flag = 1

Copy link

@sakshee-19 sakshee-19 Jan 5, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to add empty lines.

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";
}
Expand Down Expand Up @@ -47,4 +48,22 @@ const fileit = (error) => {
output.innerHTML = "Unknown Error please try again";
break;
}
}
}

const changeBodyBg = () => {
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;
}