I've been experimenting with creating a calendar using javascript, HTML, and CSS on my own. I managed to achieve some functionality like obtaining the current month and year as well as the previous month and year by clicking a button in HTML. However, I'm facing a challenge when it comes to displaying the days in the correct format. Despite referring to resources from w3schools and Google, I still feel like there are gaps in my knowledge.
My goal is to showcase the days in a div/grid structure that I have set up in HTML using CSS styling.
I understand this may seem like a basic question compared to others related to jQuery, but I'm specifically seeking a Javascript solution for learning purposes.
Here's the code snippet I tried:
<div id="caldays"></div>JAVASCRIPT:
let days="";
for (let i = 1; i <= 31; i++) {
days = days + i;
caldays.innerHTML = days;
}The result can be viewed here: https://i.sstatic.net/7ESQa.png
Another variation of Javascript code using div elements:
let days="";
for (let i = 1; i <= 31; i++) {
days = days + "<div> $[i] </div>";
caldays.innerHTML = days;
}The result of this version can be seen here: https://i.sstatic.net/lygqo.png
If you could provide insight into what I might be missing or doing incorrectly, and how to rectify it, I would greatly appreciate it.
Thank you in advance to all the experts for your help and guidance. Also, please note that I have been exploring the following link for learning: https://medium.com/@nitinpatel_20236/challenge-of-building-a-calendar-with-pure-javascript-a86f1303267d but prefer using divs over tables or rows.