Fixed greetings
This commit is contained in:
parent
b56bb5706a
commit
ea1acd1f9e
@ -1,11 +1,6 @@
|
|||||||
// Get the hour
|
// Get the hour
|
||||||
if (today === undefined) {
|
const today = new Date();
|
||||||
const today = new Date();
|
const hour = today.getHours();
|
||||||
}
|
|
||||||
|
|
||||||
if (today === undefined) {
|
|
||||||
const hour = today.getHours();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Here you can change your name
|
// Here you can change your name
|
||||||
const name = 'John Doe';
|
const name = 'John Doe';
|
||||||
@ -20,11 +15,11 @@ const gree6 = 'Good evening ';
|
|||||||
|
|
||||||
// Define the hours of the greetings
|
// Define the hours of the greetings
|
||||||
if (hour >= 23 && hour < 5) {
|
if (hour >= 23 && hour < 5) {
|
||||||
document.getElementById('greetings').innerText = gree1 + name;
|
document.getElementById('greetings').innerText = gree1 + name;
|
||||||
} else if (hour >= 6 && hour < 12) {
|
} else if (hour >= 6 && hour < 12) {
|
||||||
document.getElementById('greetings').innerText = gree2 + name;
|
document.getElementById('greetings').innerText = gree2 + name;
|
||||||
} else if (hour >= 12 && hour < 17) {
|
} else if (hour >= 12 && hour < 17) {
|
||||||
document.getElementById('greetings').innerText = gree3 + name;
|
document.getElementById('greetings').innerText = gree3 + name;
|
||||||
} else {
|
} else {
|
||||||
document.getElementById('greetings').innerText = gree4 + name;
|
document.getElementById('greetings').innerText = gree4 + name;
|
||||||
}
|
}
|
||||||
|
32
js/theme.js
32
js/theme.js
@ -3,32 +3,32 @@ let darkTheme = localStorage.getItem('darkTheme');
|
|||||||
const themeToggle = document.querySelector('#themeButton');
|
const themeToggle = document.querySelector('#themeButton');
|
||||||
|
|
||||||
const enableDark = () => {
|
const enableDark = () => {
|
||||||
document.body.classList.add('darktheme');
|
document.body.classList.add('darktheme');
|
||||||
localStorage.setItem('darkTheme', 'enabled');
|
localStorage.setItem('darkTheme', 'enabled');
|
||||||
themeToggle.innerHTML = `<i id="bicon" data-feather="moon"></i>`;
|
themeToggle.innerHTML = `<i id="bicon" data-feather="moon"></i>`;
|
||||||
feather.replace();
|
feather.replace();
|
||||||
};
|
};
|
||||||
|
|
||||||
const disableDark = () => {
|
const disableDark = () => {
|
||||||
document.body.classList.remove('darktheme');
|
document.body.classList.remove('darktheme');
|
||||||
localStorage.setItem('darkTheme', null);
|
localStorage.setItem('darkTheme', null);
|
||||||
themeToggle.innerHTML = `<i id="bicon" data-feather="sun"></i>`;
|
themeToggle.innerHTML = `<i id="bicon" data-feather="sun"></i>`;
|
||||||
feather.replace();
|
feather.replace();
|
||||||
};
|
};
|
||||||
|
|
||||||
if (darkTheme === 'enabled') {
|
if (darkTheme === 'enabled') {
|
||||||
enableDark();
|
enableDark();
|
||||||
} else {
|
} else {
|
||||||
disableDark();
|
disableDark();
|
||||||
}
|
}
|
||||||
|
|
||||||
themeToggle.addEventListener('click', () => {
|
themeToggle.addEventListener('click', () => {
|
||||||
darkTheme = localStorage.getItem('darkTheme');
|
darkTheme = localStorage.getItem('darkTheme');
|
||||||
if (darkTheme !== 'enabled') {
|
if (darkTheme !== 'enabled') {
|
||||||
enableDark();
|
enableDark();
|
||||||
} else {
|
} else {
|
||||||
disableDark();
|
disableDark();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Change the theme with the time
|
// Change the theme with the time
|
||||||
|
70
js/time.js
70
js/time.js
@ -1,42 +1,42 @@
|
|||||||
window.onload = displayClock();
|
window.onload = displayClock();
|
||||||
function displayClock() {
|
function displayClock() {
|
||||||
const monthNames = [
|
const monthNames = [
|
||||||
'Jan',
|
'Jan',
|
||||||
'Feb',
|
'Feb',
|
||||||
'Mar',
|
'Mar',
|
||||||
'Apr',
|
'Apr',
|
||||||
'May',
|
'May',
|
||||||
'Jun',
|
'Jun',
|
||||||
'Jul',
|
'Jul',
|
||||||
'Aug',
|
'Aug',
|
||||||
'Sep',
|
'Sep',
|
||||||
'Oct',
|
'Oct',
|
||||||
'Nov',
|
'Nov',
|
||||||
'Dec',
|
'Dec',
|
||||||
];
|
];
|
||||||
|
|
||||||
// Set to true to use a 12 hour date format
|
// Set to true to use a 12 hour date format
|
||||||
var format_12hour = false;
|
var format_12hour = false;
|
||||||
|
|
||||||
var d = new Date();
|
var d = new Date();
|
||||||
var mm = monthNames[d.getMonth()];
|
var mm = monthNames[d.getMonth()];
|
||||||
var dd = d.getDate();
|
var dd = d.getDate();
|
||||||
var min = (mins = ('0' + d.getMinutes()).slice(-2));
|
var min = (mins = ('0' + d.getMinutes()).slice(-2));
|
||||||
var hh = d.getHours();
|
var hh = d.getHours();
|
||||||
var ampm = '';
|
var ampm = '';
|
||||||
|
|
||||||
if (format_12hour) {
|
|
||||||
ampm = hh >= 12 ? ' pm' : ' am';
|
|
||||||
hh = hh % 12;
|
|
||||||
hh = hh ? hh : 12; //show mod 0 as 12
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('hour').innerText = hh;
|
|
||||||
document.getElementById('separator').innerHTML = ' : ';
|
|
||||||
document.getElementById('minutes').innerText = min + ampm;
|
|
||||||
|
|
||||||
document.getElementById('month').innerText = mm;
|
if (format_12hour) {
|
||||||
document.getElementById('day').innerText = dd;
|
ampm = hh >= 12 ? ' pm' : ' am';
|
||||||
|
hh = hh % 12;
|
||||||
|
hh = hh ? hh : 12; //show mod 0 as 12
|
||||||
|
}
|
||||||
|
|
||||||
setTimeout(displayClock, 1000);
|
document.getElementById('hour').innerText = hh;
|
||||||
|
document.getElementById('separator').innerHTML = ' : ';
|
||||||
|
document.getElementById('minutes').innerText = min + ampm;
|
||||||
|
|
||||||
|
document.getElementById('month').innerText = mm;
|
||||||
|
document.getElementById('day').innerText = dd;
|
||||||
|
|
||||||
|
setTimeout(displayClock, 1000);
|
||||||
}
|
}
|
||||||
|
@ -5,7 +5,7 @@ const descElement = document.querySelector('.temperature-description p');
|
|||||||
// App data
|
// App data
|
||||||
const weather = {};
|
const weather = {};
|
||||||
weather.temperature = {
|
weather.temperature = {
|
||||||
unit: 'celsius',
|
unit: 'celsius',
|
||||||
};
|
};
|
||||||
|
|
||||||
// Change to 'F' for Fahrenheit
|
// Change to 'F' for Fahrenheit
|
||||||
@ -19,39 +19,40 @@ const key = 'aa5b0a76dfbf87441928fb3cc32d3d25';
|
|||||||
setPosition();
|
setPosition();
|
||||||
|
|
||||||
function setPosition(position) {
|
function setPosition(position) {
|
||||||
// Here you can change your position
|
// Here you can change your position
|
||||||
// You can use https://www.latlong.net/ to get it! (I use San Francisco as an example)
|
// You can use https://www.latlong.net/ to get it! (I use San Francisco as an example)
|
||||||
let latitude = 37.774929;
|
let latitude = 37.774929;
|
||||||
let longitude = -122.419418;
|
let longitude = -122.419418;
|
||||||
|
|
||||||
getWeather(latitude, longitude);
|
getWeather(latitude, longitude);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get the Weather data
|
// Get the Weather data
|
||||||
function getWeather(latitude, longitude) {
|
function getWeather(latitude, longitude) {
|
||||||
let api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`;
|
let api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`;
|
||||||
|
|
||||||
console.log(api);
|
console.log(api);
|
||||||
|
|
||||||
fetch(api)
|
fetch(api)
|
||||||
.then(function (response) {
|
.then(function (response) {
|
||||||
let data = response.json();
|
let data = response.json();
|
||||||
return data;
|
return data;
|
||||||
})
|
})
|
||||||
.then(function (data) {
|
.then(function (data) {
|
||||||
let celsius = Math.floor(data.main.temp - KELVIN);
|
let celsius = Math.floor(data.main.temp - KELVIN);
|
||||||
weather.temperature.value = (tempUnit == 'C') ? celsius : (celsius * 9/5) + 32;
|
weather.temperature.value =
|
||||||
weather.description = data.weather[0].description;
|
tempUnit == 'C' ? celsius : (celsius * 9) / 5 + 32;
|
||||||
weather.iconId = data.weather[0].icon;
|
weather.description = data.weather[0].description;
|
||||||
})
|
weather.iconId = data.weather[0].icon;
|
||||||
.then(function () {
|
})
|
||||||
displayWeather();
|
.then(function () {
|
||||||
});
|
displayWeather();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Display Weather info
|
// Display Weather info
|
||||||
function displayWeather() {
|
function displayWeather() {
|
||||||
iconElement.innerHTML = `<img src="icons/OneDark/${weather.iconId}.png"/>`;
|
iconElement.innerHTML = `<img src="icons/OneDark/${weather.iconId}.png"/>`;
|
||||||
tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
|
tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
|
||||||
descElement.innerHTML = weather.description;
|
descElement.innerHTML = weather.description;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user