Calendar using html css and javascript -

Calendar using html css and javascript -

i have been trying calendar using html, css , javascript. have little experience 3 of them.

i havent got work javascript, sofar have created html+css , ugly solution:

css:

#day { float: left; border: 1px solid black; width: 85px; height: 85px; padding: 5px; margin: 5px; border-radius: 18px; }

html:

<div id="content"> <h1>november</h1> <br> <div id="day"> 1 </div> <div id="day"> 2 </div> <div id="day"> 3 </div> <div id="day"> 4 </div> <div id="day"> 5 </div> <div id="day"> 6 </div> <div id="day"> 7 </div> <br> <div id="day"> 8 </div> <div id="day"> 9 </div> <div id="day"> 10 </div> <div id="day"> 11 </div> <div id="day"> 12 </div> <div id="day"> 13 </div> <div id="day"> 14 </div> <br> <div id="day"> 15 </div> <div id="day"> 16 </div> <div id="day"> 17 </div> <div id="day"> 18 </div> <div id="day"> 19 </div> <div id="day"> 20 </div> <div id="day"> 21 </div> <br> <div id="day"> 22 </div> <div id="day"> 23 </div> <div id="day"> 24 </div> <div id="day"> 25 </div> <div id="day"> 26 </div> <div id="day"> 27 </div> <div id="day"> 28 </div> <br> <div id="day"> 29 </div> <div id="day"> 30 </div> </div>

i guess for-loop good? like:

for(i = 0; i<30;i++){ "code creating day-boxes" }

i found couple of calendars online, complicated , doesnt want do.

i'm not sure whether question right, shouldn't next work?

var div = document.getelementbyid('content'); for(i = 1; i<=30;i++){ div.innerhtml += '<div id=\'day\'>' + + '</div>'; }

here jsfiddle-example

note: dont utilize same values (day) id. utilize class attribute:

change css :

.day { float: left; border: 1px solid black; width: 85px; height: 85px; padding: 5px; margin: 5px; border-radius: 18px; }

and utilize javascript code:

var div = document.getelementbyid('content'); for(i = 1; i<=30;i++){ div.innerhtml += '<div class=\'day\'>' + + '</div>'; }

javascript html css calendar