Develop Reference

How to save budget list in local storage?

I know local storage is not a secure solution for this, but for now, I am doing it this way for practice.
I think I am on the right track here, I want my created list for the budget app to store, this method seems to store the first created list.
/*----Store Stored budget list----*/
function storedEntry(){
const saveData = makeNewBudget();
const myJSON = JSON.stringify(saveData);
window.localStorage.setItem(STORAGE_KEY, myJSON);
}
I think what needs to happen is get that same method to work for the array.
let budgetArray = [];
I tried this method, but gives a JSON error, sop for some reason it's not converted to JSON
let budgetArray = JSON.parse(window.localStorage.getItem(STORAGE_KEY) ?? "[]");
End result should be set local storage for array in its own function and get the stored information when checking the array.
I put the entire JS code so you can see what is going on
/*----Generate ID----*/
const createId = () =>`${Math.floor(Math.random() * 10000)}$(new Date().getTime())}`;
/*----Get current Date----*/
function createdDate() {
let currentDate = new Date();
let day = String(currentDate.getDate()).padStart(2, '0');
let month = String(currentDate.getMonth() + 1).padStart(2, '0');
let year = currentDate.getFullYear();
currentDate = month + '/' + day + '/' + year;
console.log(currentDate)
return currentDate;
}
/*----Variable Objects----*/
const el = {
list: document.querySelector(".list"),
cashflow: document.querySelector("#cashflow"),
catagory: document.querySelector(".catagory"),
label: document.querySelector(".label"),
number: document.querySelector(".number"),
};
/*----Array with local Storage----*/
let budgetArray = [];
/*----Budget list Object----*/
function makeNewBudget(){
const data = {
id: createId(),
cashflowNew: el.cashflow.value,
catagoryNew: el.catagory.value,
labelNew: el.label.value,
dateNew: createdDate(),
numberNew: el.number.value,
};
return data;
}
/*----Render Budget List----*/
function renderList(){
el.list.innerHTML = budgetArray.map(function (data,i) {
return `<div class="entry">
<div class="list">
<button onclick="deleteItem(event, ${i})" class="Archive" data-id="${data.id}">
<img src="../resources/Images/archive.png" alt="Archive">
</button>
<button onclick="editItem(event, ${i})" class = "edit" data-id="${data.id}" class = "edit" data-id="${data.id}">
<img src="../resources/Images/edit.png" alt="Edit">
</button>
<div class="input" data-id="${data.id}"></div>
<label class="dateNew">${data.dateNew}</label>
<label class="cashflowNew">${data.cashflowNew}</label>
<label class="catagoryNew">${data.catagoryNew}</label>
<label class="labelNew">${data.labelNew}</label>
<label class="numberNew">${data.numberNew}</label>
</div>
</div>
<label class="total"></label>`;
});
}
/*----form validation----*/
let budgetButton = document.querySelector(".budget-button");
let label = document.querySelector(".label");
let num = document.querySelector(".number");
let entry = document.querySelector(".entry")
budgetButton.addEventListener("click", () => {
if (!label.value || !num.value) {
alert("please make sure all inputs are filled");
}
budgetArray.push(makeNewBudget())
renderList();
storedEntry();
});
/*----Archive list----*/
function deleteItem(event, i){
}
/*----Store Stored budget list----*/
function storedEntry(){
const saveData = makeNewBudget();
const myJSON = JSON.stringify(saveData);
window.localStorage.setItem(STORAGE_KEY, myJSON);
}

My weather app only loads the data on the first try, and I have to refresh the page before it works again

I have been trying to figure out this bug for several days and I need some help.
This code is for a weather app that I am building that takes in coordinates after you share your location, or a city name from a search bar. This code only works one time however, meaning you have to refresh the page before you can type in a new location to search up, and if you allow the page to take your location, you won't be able to even search up a new city using the search bar.
// This section is for the search bar and submit button
let submit = document.querySelector('.weatherSubmit');
let searchBar = document.querySelector('.inputValue');
searchBar.addEventListener("keyup", function(e) {
if (e.keyCode === 13) {
submit.click();
}
});
submit.addEventListener('click', function() {
fetch(`http://api.openweathermap.org/data/2.5/weather?q=${searchBar.value}&units=imperial&APPID=4edd74c5cec3113209554fa2045fdb73`)
.then(response => response.json())
.then(data => {
let {lat, lon} = data.coord;
onecall(lat, lon);
reverseGeocode(lat, lon);
})
.catch(err => alert('Wrong city name!'));
})
// This takes in the data and displays it
const showData = (data) => {
let current_weather_container = document.querySelector('.current_weather_container');
let {temp, sunrise, sunset, wind_speed, dt, humidity} = data.current;
let {description} = data.current.weather[0];
let {max, min} = data.daily[0].temp;
description = description.charAt(0).toUpperCase() + description.slice(1);
wind_speed = Math.round(wind_speed);
max = Math.round(max);
min = Math.round(min);
temp = Math.round(temp);
let dateInMillisec = dt * 1000;
let sunriseInMillisec = sunrise * 1000;
let sunsetInMilliSec = sunset * 1000;
let dateObj = new Date(dateInMillisec);
let sunriseTimeObj = new Date(sunriseInMillisec);
let sunsetTimeObj = new Date(sunsetInMilliSec);
let date = dateObj.toLocaleString("en-US", {weekday: 'short', month: 'short', day: 'numeric'});
let sunriseTime = sunriseTimeObj.toLocaleString("en-US", {hour: "numeric", minute: "numeric"});
let sunsetTime = sunsetTimeObj.toLocaleString("en-US", {hour: "numeric", minute: "numeric"});
//This is the current weather section
current_weather_container.innerHTML =
`
<div class='current_time_container'>
<div class='current_date'>${date}</div>
</div>
<div class='current_weather'>
<div id='submitDiv'>
<input class='weatherSubmit' type="submit" value="Search">
<input class='inputValue' type='text' placeholder="Enter city name" required>
</div>
<div class='weather_class' id='current_temp'>
<div class='current_weather_item'>${temp + '\u00B0F'}</div>
</div>
<div class='weather_class'>
<div id='description' class='current_weather_item extraPadding'>${description}</div>
</div>
<div class='current_data'>
<div class='current_weather_class'>
<div class='weather_item'>${'Sunset: ' + sunsetTime}</div>
</div>
<div class='current_weather_class'>
<div class='weather_item'>${'Sunrise: ' + sunriseTime}</div>
</div>
<div class='current_weather_class'>
<div class='weather_item'>${'Humidity: ' + humidity + '%'}</div>
</div>
</div>
<div class='current_data'>
<div class='current_weather_class'>
<div class='weather_item'>${'High: ' + max + '\u00B0F'}</div>
</div>
<div class='current_weather_class'>
<div class='weather_item'>${'Low: ' + min + '\u00B0F'}</div>
</div>
<div class='current_weather_class'>
<div class='weather_item'>${'Wind: ' + wind_speed + 'mph'}</div>
</div>
</div>
</div>`
;
//This is the hourly section
let hourlyForecast = '';
let counter = 0;
data.hourly.forEach((hour) => {
let hourTime = hour.dt;
hourTimeInMilli = hourTime * 1000;
hourTimeObj = new Date(hourTimeInMilli);
time = hourTimeObj.toLocaleString("en-US", {hour: "numeric"});
while(counter < 12 && hourTime > dt) {
hourlyForecast +=
`<div class='forecast_weather_class'>
<div class='increaseFont'>${time}</div>
<div class='weather_image'><img id='icon2' class='icon2' src="http://openweathermap.org/img/w/${hour.weather[0].icon}.png"></div>
<div class='weather_item alignLeft'>${hour.weather[0].description.charAt(0).toUpperCase() + hour.weather[0].description.slice(1)}</div>
<div class='weather_class_container'>
<div class='weather_class alignLeft'>
<div class='weather_item increaseFont alignLeft'>${Math.round(hour.temp) + '\u00B0F'}</div>
</div>
</div>
</div>`;
return counter++;
}
});
let top = document.querySelector('.top');
top.innerHTML = hourlyForecast;
//This is the daily section
let dailyForecast = '';
let counter2 = 0;
data.daily.forEach((day) => {
let dayTime = day.dt;
dayInMilli = dayTime * 1000;
dateObject = new Date(dayInMilli);
time = dateObject.toLocaleString("en-US", {weekday: "short", day: "2-digit"});
if (counter2 === 0) {
return counter2++;
} else {
dailyForecast +=
`<div class='forecast_weather_class alignLeft'>
<div class='increaseFont'>${time}</div>
<div class='weather_image'><img id='icon2' class='icon2' src="http://openweathermap.org/img/w/${day.weather[0].icon}.png"></div>
<div class='weather_item'>${day.weather[0].description.charAt(0).toUpperCase() + day.weather[0].description.slice(1)}</div>
<div class='weather_class_container'>
<div class='weather_class alignLeft'>
<div class='weather_item increaseTempFont '>${Math.round(day.temp.max) + '\u00B0F'}</div>
<div class='weather_item decreaseTempFont '>${Math.round(day.temp.min) + '\u00B0F'}</div>
</div>
</div>
</div>`
}
});
let bottom = document.querySelector('.bottom');
bottom.innerHTML = dailyForecast;
}
// This adds the name of the city to the page
const nameSpot = (data) => {
let cityName = document.querySelector('.cityName');
let {city} = data;
cityName.innerHTML = `
<h2 class='cityName'>${city}</h2>
`
}
/// This grabs the lat & longitude
function grabGeolocation() {
navigator.geolocation.getCurrentPosition((success) => {
let { latitude, longitude } = success.coords;
let lat = latitude;
let lon = longitude;
onecall(lat, lon);
reverseGeocode(lat, lon);
});
}
grabGeolocation();
// This grabs all the data but the city name
function onecall(lat, lon) {
let weatherApiUrl = fetch(`http://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&units=imperial&appid=4edd74c5cec3113209554fa2045fdb73`);
weatherApiUrl.then(response => response.json())
.then(data => {
showData(data);
})
.catch(err => alert('Unable to grab coordinates!'));
}
// This grabs the city name
function reverseGeocode(lat, lon) {
let cityGeoLocationUrl = fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lon}&localityLanguage=en`);
cityGeoLocationUrl.then(response => response.json())
.then(data => {
nameSpot(data);
})
.catch(err => alert('Unable to grab coordinates!'));
}```

Can't set css property to an object property in javascript

I'm trying to change the color of the product(object) title based on the current year.
I mean if the product's year is the same as the current year it should change the title color.
Whenever I save, I get an Error in DevTools:
" Uncaught TypeError: Cannot set property 'color' of undefined ".
<form id="theForm">
<div>
<input type="text" id="title" placeholder="Type title...">
</div>
<div>
<input type="date" id="date">
</div>
<button type="submit" id="sub">Add</button>
</form>
<section class="result">
<div id="addedProducts"></div>
</section>
const theForm = document.getElementById("theForm");
theForm.addEventListener("submit", saveProduct);
function saveProduct(evt){
const proTitle = document.getElementById("title").value;
const proDate = document.getElementById("date").value;
const product = {
title: proTitle,
date: proDate
}
if(localStorage.getItem("products") === null){
const products = []; //initialized
products.push(product);// add a new Product
//to local localStorage
localStorage.setItem("products", JSON.stringify(products));
} else {
// get products from localStorage
const products = JSON.parse(localStorage.getItem("products"));
// add product to products
products.push(product);
// set again to localStorage
localStorage.setItem("products", JSON.stringify(products));
}
theForm.reset();
fetchProducts();
evt.preventDefault()
}
function fetchProducts(){
const products = JSON.parse(localStorage.getItem("products"));
const addedProducts = document.getElementById("addedProducts");
addedProducts.innerHTML = "";
products.forEach(addProduct);
function addProduct(product) {
const title = product.title;
const date = product.date;
const splitDate = date.split("");
const splittedYear = splitDate.slice(0, 4);
const splittedMonth = splitDate.slice(5, 7);
const splittedDay = splitDate.slice(8);
const jYear = splittedYear.join("");
const jMonth = splittedMonth.join("");
const jDay = splittedDay.join("");
const jDate = jMonth +"/"+ jDay +"/"+
jYear;
// Parsed Date attributes
const pYear = parseInt(jYear, 10);
const pMonth = parseInt(jMonth, 10);
const pDay = parseInt(jDay, 10);
// current Date
const cDate = new Date();
const cDay = cDate.getDate();
const cMonth = cDate.getMonth() + 1;
const cYear = cDate.getFullYear();
//Here's the problem!!!
if(pYear == cYear){
// The next line broke every thing
/* Uncaught TypeError: Cannot
set property 'color' of undefined*/
title.style.color = "#159";
console.log("yes");//that works fine
} else {
console.log("not");// So da that one
}
addedProducts.innerHTML += '<div class="res">'+
'<span class="title">' + title +'</span>' +
" " + '<span class="dateClass">' + jDate +'</span>'+
'<button onclick="deletePro(\'' + title + '\',\'' + date + '\')" id="remove">Delete</button>' +
'</div>';
}
}
Sorry if it's a long code. I've been so confused!

Get items by date by clicking day on calendar Javascript Django

I'm developing calendar app with Javascript and Django . I don't now how to display item by date by clicking the day . Is there any solutions ? I have a guess that I need to get elements by ajax on clicking the date . Here is some code :
models.py
class Item(models.Model):
title=models.CharField(max_length=200)
date = models.DateTimeField(default=datetime.now,blank=True)
is_published=models.BooleanField(default=True)
views.py
def calendar(request):
item = Item.objects.order_by('-date').filter(is_published=True)
context={
'item':item,
}
return render(request,'main/calendar.html',context)
Javascript calendar draw methods
drawAll() {
this.drawWeekDays();
this.drawMonths();
this.drawDays();
this.drawYearAndCurrentDay();
this.drawEvents();
}
drawYearAndCurrentDay() {
let calendar = this.getCalendar();
this.elements.year.innerHTML = calendar.active.year;
this.elements.currentDay.innerHTML = calendar.active.day;
this.elements.currentWeekDay.innerHTML = AVAILABLE_WEEK_DAYS[calendar.active.week];
}
drawDays() {
let calendar = this.getCalendar();
let latestDaysInPrevMonth = this.range(calendar.active.startWeek).map((day, idx) => {
return {
dayNumber: this.countOfDaysInMonth(calendar.pMonth) - idx,
month: new Date(calendar.pMonth).getMonth(),
year: new Date(calendar.pMonth).getFullYear(),
currentMonth: false
}
}).reverse();
let daysInActiveMonth = this.range(calendar.active.days).map((day, idx) => {
let dayNumber = idx + 1;
let today = new Date();
return {
dayNumber,
today: today.getDate() === dayNumber && today.getFullYear() === calendar.active.year && today.getMonth() === calendar.active.month,
month: calendar.active.month,
year: calendar.active.year,
selected: calendar.active.day === dayNumber,
currentMonth: true
}
});
Here is constructor of class Calendar
constructor(options) {
this.options = options;
this.elements = {
days: this.getFirstElementInsideIdByClassName('calendar-days'),
week: this.getFirstElementInsideIdByClassName('calendar-week'),
month: this.getFirstElementInsideIdByClassName('calendar-month'),
year: this.getFirstElementInsideIdByClassName('calendar-current-year'),
currentDay: this.getFirstElementInsideIdByClassName('display_day'),
currentWeekDay: this.getFirstElementInsideIdByClassName('calendar-left-side-day-of-week'),
prevYear: this.getFirstElementInsideIdByClassName('calendar-change-year-slider-prev'),
nextYear: this.getFirstElementInsideIdByClassName('calendar-change-year-slider-next')
};
this.date = +new Date();
this.options.maxDays = 37;
this.init();
}
getFirstElementInsideIdByClassName(className) {
return document.getElementById(this.options.id).getElementsByClassName(className)[0];
}
Here is template
<div class="right-side">
<div class="text-right calendar-change-year">
<div class="calendar-change-year-slider">
<span class="fa fa-caret-left cursor-pointer calendar-change-year-slider-prev"></span>
<span class="calendar-current-year"></span>
<span class="fa fa-caret-right cursor-pointer calendar-change-year-slider-next"></span>
</div>
</div>
<div class="calendar-month-list">
<ul class="calendar-month"></ul>
</div>
<div class="calendar-week-list">
<ul class="calendar-week"></ul>
</div>
<div class="calendar-day-list">
<ul class="calendar-days"></ul>
</div>
</div>
<h1 class="calendar__heading calendar__heading-2 display_day"></h1>
<h1 class="calendar__heading calendar-left-side-day-of-week"></h1>
Here is what I want
Or is there a way to change calendar ? This calendar isn't so necessary

The javascript code should detect which day you clicked, then it should call an endpoint that will end up in your django view. The view should receive the day and filter the items by date, something like this:
Entry.objects.filter(date=selected_day)
This should return all the items for a given day.

React - sort messages in monthly sections

I am trying to group a list of messages in monthly sections. Every time the month changes I want to add a header <h2>Previous Month</h2> and then display all the messages from that month.
Here is my attempt:
MessageList.js
import React from "react"
export default class MessageList extends React.Component {
constructor() {
super()
}
render() {
var currentDate = new Date()
var currentMonth = currentDate.getMonth()
var timeline=""
var mssgTypeList = {
"this_month" : [],
"last_month" : [],
"previous_month" : []
}
this.props.messages.forEach(function(message,index){
var date = message.date.substring(0, 10)
var time = message.date.slice(12)
var messageDate = new Date(date)
var messageMonth = messageDate.getMonth()
if(currentMonth == messageMonth) {
timeline == 'this_month'
} else if(currentMonth == messageMonth + 1){
timeline = 'last_month'
} else if(currentMonth == messageMonth + 2) {
timeline = 'previous_month'
}
mssgTypeList[timeline].push(message);
});
const ThisMonthMessageList = mssgTypeList["this_month"].map((message) => {
var date = message.date.substring(0, 10);
var time = message.date.slice(12);
return (
<li className="list-group-item" key={message.id}>
Date: {date} <br></br>
Time: {time} <br></br>
Body: {message.body}
</li>
)
});
const LastMonthMessageList = mssgTypeList["last_month"].map((message) => {
var date = message.date.substring(0, 10);
var time = message.date.slice(12);
return (
<li className="list-group-item" key={message.id}>
Date: {date} <br></br>
Time: {time} <br></br>
Body: {message.body}
</li>
)
})
const PreviousMonthMessageList = mssgTypeList["previous_month"].map((message) => {
var date = message.date.substring(0, 10);
var time = message.date.slice(12);
return (
<li className="list-group-item" key={message.id}>
Date: {date} <br></br>
Time: {time} <br></br>
Body: {message.body}
</li>
)
})
return (
<div id="messageList">
<h2>This Month</h2>
<ul className="list-group this-month-group">
{ThisMonthMessageList}
</ul>
<h2>Last Month</h2>
<ul className="list-group last-month-group">
{LastMonthMessageList}
</ul>
<h2>Previous Month</h2>
<ul className="list-group previous-month-group">
{PreviousMonthMessageList}
</ul>
</div>
)
}
The problem here is that this only generates a limited number of monthly sections; Basically sections that I hardcoded in mssgTypeList. It does not dynamically create a new section whenever the month changes.
How do I dynamically generate a new section every time the month changes?
Or is there an alternative way to sort messages in monthly sections? Maybe create additional components?

Its probably a better idea to put all the logic that depends in the props in the componentWillReceiveProps Method and the same should be present in the componentDidMount function since componentWillReceiveProps is not being called the initial time. Also having all this logic in the render is expensive since render is called any state change.
Dynamic rendering can be achieved in the following manner, however it would be better if you include the month with the year as a key.
export default class MessageList extends React.Component {
constructor() {
super();
this.state = {
msgTypeList : {
}
}
}
componentDidMount() {
var currentDate = new Date()
var currentMonth = currentDate.getMonth()
var messageTypeList = {}
this.props.messages.forEach((message, index) => {
var date = message.date.substring(0, 10)
var messageDate = new Date(date)
var messageMonth = messageDate.getMonth();
messageTypeList[messageMonth].push(message);
})
this.setState({messageTypeList});
}
componentWillReceiveProps(nextProps) {
var currentDate = new Date()
var currentMonth = currentDate.getMonth()
var timeline=""
var messageTypeList = {}
nextProps.messages.forEach((message, index) => {
var date = message.date.substring(0, 10)
var messageDate = new Date(date)
var messageMonth = messageDate.getMonth();
messageTypeList[messageMonth].push(message);
})
this.setState({messageTypeList});
}
render() {
return (
<div id="messageList">
{Object.keys(this.state.messageTypeList).map((key) => {
return (
<div>
<h2>{key}</h2>
<ul className="list-group">
{this.state.messageTypeList[key].map((message) => {
var date = message.date.substring(0, 10);
var time = message.date.slice(12);
return (
<li className="list-group-item" key={message.id}>
Date: {date} <br></br>
Time: {time} <br></br>
Body: {message.body}
</li>
)
})}
</ul>
</div>
)
})
}
</div>
)
}

You are on the right track. Notice that {ThisMonthMessageList} is not hard-code but you build it. Well you can do the same thing for your entire message list. Your render return statement would then look something like this:
return (
<div id="messageList">
{messageList}
</div>
);
Hopefully that's enough to get you thinking about this the right way.