Fixed greetings

This commit is contained in:
Miguel R. Ávila 2021-01-03 20:54:21 -06:00
parent b56bb5706a
commit ea1acd1f9e
4 changed files with 84 additions and 88 deletions

View File

@ -1,11 +1,6 @@
// Get the hour
if (today === undefined) {
const today = new Date();
}
if (today === undefined) {
const hour = today.getHours();
}
const today = new Date();
const hour = today.getHours();
// Here you can change your name
const name = 'John Doe';
@ -20,11 +15,11 @@ const gree6 = 'Good evening ';
// Define the hours of the greetings
if (hour >= 23 && hour < 5) {
document.getElementById('greetings').innerText = gree1 + name;
document.getElementById('greetings').innerText = gree1 + name;
} else if (hour >= 6 && hour < 12) {
document.getElementById('greetings').innerText = gree2 + name;
document.getElementById('greetings').innerText = gree2 + name;
} else if (hour >= 12 && hour < 17) {
document.getElementById('greetings').innerText = gree3 + name;
} else {
document.getElementById('greetings').innerText = gree4 + name;
document.getElementById('greetings').innerText = gree3 + name;
} else {
document.getElementById('greetings').innerText = gree4 + name;
}

View File

@ -3,32 +3,32 @@ let darkTheme = localStorage.getItem('darkTheme');
const themeToggle = document.querySelector('#themeButton');
const enableDark = () => {
document.body.classList.add('darktheme');
localStorage.setItem('darkTheme', 'enabled');
themeToggle.innerHTML = `<i id="bicon" data-feather="moon"></i>`;
feather.replace();
document.body.classList.add('darktheme');
localStorage.setItem('darkTheme', 'enabled');
themeToggle.innerHTML = `<i id="bicon" data-feather="moon"></i>`;
feather.replace();
};
const disableDark = () => {
document.body.classList.remove('darktheme');
localStorage.setItem('darkTheme', null);
themeToggle.innerHTML = `<i id="bicon" data-feather="sun"></i>`;
feather.replace();
document.body.classList.remove('darktheme');
localStorage.setItem('darkTheme', null);
themeToggle.innerHTML = `<i id="bicon" data-feather="sun"></i>`;
feather.replace();
};
if (darkTheme === 'enabled') {
enableDark();
enableDark();
} else {
disableDark();
disableDark();
}
themeToggle.addEventListener('click', () => {
darkTheme = localStorage.getItem('darkTheme');
if (darkTheme !== 'enabled') {
enableDark();
} else {
disableDark();
}
darkTheme = localStorage.getItem('darkTheme');
if (darkTheme !== 'enabled') {
enableDark();
} else {
disableDark();
}
});
// Change the theme with the time

View File

@ -1,42 +1,42 @@
window.onload = displayClock();
function displayClock() {
const monthNames = [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
];
const monthNames = [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
];
// Set to true to use a 12 hour date format
var format_12hour = false;
// Set to true to use a 12 hour date format
var format_12hour = false;
var d = new Date();
var mm = monthNames[d.getMonth()];
var dd = d.getDate();
var min = (mins = ('0' + d.getMinutes()).slice(-2));
var hh = d.getHours();
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;
var d = new Date();
var mm = monthNames[d.getMonth()];
var dd = d.getDate();
var min = (mins = ('0' + d.getMinutes()).slice(-2));
var hh = d.getHours();
var ampm = '';
document.getElementById('month').innerText = mm;
document.getElementById('day').innerText = dd;
if (format_12hour) {
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);
}

View File

@ -5,7 +5,7 @@ const descElement = document.querySelector('.temperature-description p');
// App data
const weather = {};
weather.temperature = {
unit: 'celsius',
unit: 'celsius',
};
// Change to 'F' for Fahrenheit
@ -19,39 +19,40 @@ const key = 'aa5b0a76dfbf87441928fb3cc32d3d25';
setPosition();
function setPosition(position) {
// Here you can change your position
// You can use https://www.latlong.net/ to get it! (I use San Francisco as an example)
let latitude = 37.774929;
let longitude = -122.419418;
// Here you can change your position
// You can use https://www.latlong.net/ to get it! (I use San Francisco as an example)
let latitude = 37.774929;
let longitude = -122.419418;
getWeather(latitude, longitude);
getWeather(latitude, longitude);
}
// Get the Weather data
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)
.then(function (response) {
let data = response.json();
return data;
})
.then(function (data) {
let celsius = Math.floor(data.main.temp - KELVIN);
weather.temperature.value = (tempUnit == 'C') ? celsius : (celsius * 9/5) + 32;
weather.description = data.weather[0].description;
weather.iconId = data.weather[0].icon;
})
.then(function () {
displayWeather();
});
fetch(api)
.then(function (response) {
let data = response.json();
return data;
})
.then(function (data) {
let celsius = Math.floor(data.main.temp - KELVIN);
weather.temperature.value =
tempUnit == 'C' ? celsius : (celsius * 9) / 5 + 32;
weather.description = data.weather[0].description;
weather.iconId = data.weather[0].icon;
})
.then(function () {
displayWeather();
});
}
// Display Weather info
function displayWeather() {
iconElement.innerHTML = `<img src="icons/OneDark/${weather.iconId}.png"/>`;
tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
descElement.innerHTML = weather.description;
iconElement.innerHTML = `<img src="icons/OneDark/${weather.iconId}.png"/>`;
tempElement.innerHTML = `${weather.temperature.value}°<span class="darkfg">${tempUnit}</span>`;
descElement.innerHTML = weather.description;
}