How to Build a Calendar with HTML, CSS and JavaScript

Calendar with HTML, CSS, and JavaScript - How to build calendar using HTML, CSS, and JavaScript

In this tutorial, we will build a Calendar with HTML, CSS, and JavaScript

UPDATE: Unfortunately there is a glitch in the tutorial, the statement "monthDays.innerHTML = days;" should be placed outside of the for loop!!!

SOURCE FILES: https://github.com/lashaNoz/Calendar


Design a calendar using HTML and CSS

In this article, we will create a calendar using HTML, and CSS. First, we have to know a little about HTML. If someone does not know HTML and CSS, they will not be able to make the calendar better. The main focus of this article is on HTML tags and the way we are going to use CSS.

Approach: First we will be using the table tag, which will be used to create the structure of the calendar. This will give us an idea of how the calendar is created using HTML. Later we will apply some CSS property to make the design of the calendar better.

Creating Structure: In this section, we will create first the structure of the calendar by using the <table> tag. So this will help us to get the structure of the calendar.

<!DOCTYPE html>
<html>

<body>
	<!-- Here we are using attributes like
		cellspacing and cellpadding -->

	<!-- The purpose of the cellpadding is
		the space that a user want between
		the border of cell and its contents-->

	<!-- cellspacing is used to specify the
		space between the cell and its contents -->
	<h2 align="center" style="color: orange;">
		January 2021
	</h2>
	<br />
	
	<table bgcolor="lightgrey" align="center"
		cellspacing="21" cellpadding="21">
		
		<!-- The tr tag is used to enter
			rows in the table -->

		<!-- It is used to give the heading to the
			table. We can give the heading to the
			top and bottom of the table -->

		<caption align="top">
			<!-- Here we have used the attribute
				that is style and we have colored
				the sentence to make it better
				depending on the web page-->
		</caption>

		<!-- Here th stands for the heading of the
			table that comes in the first row-->

		<!-- The text in this table header tag will
			appear as bold and is center aligned-->

		<thead>
			<tr>
				<!-- Here we have applied inline style
					to make it more attractive-->
				<th>Sun</th>
				<th>Mon</th>
				<th>Tue</th>
				<th>Wed</th>
				<th>Thu</th>
				<th>Fri</th>
				<th>sat</th>
			</tr>
		</thead>
		
		<tbody>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td>1</td>
				<td>2</td>
			</tr>
			<tr></tr>
			<tr>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
			<tr>
				<td>10</td>
				<td>11</td>
				<td>12</td>
				<td>13</td>
				<td>14</td>
				<td>15</td>
				<td>16</td>
			</tr>
			<tr>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
			</tr>
			<tr>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</td>
				<td>29</td>
				<td>30</td>
			</tr>
			<tr>
				<td>31</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
		</tbody>
	</table>
</body>

</html>

Output:

CSS Design and its attributes: We will use some CSS properties and attributes of the table tag to design the calendar. The attributes that we are going to use is the border and cellspacing and cellpadding. Here we have used an interesting property of CSS that is border-collapse. The purpose of the border-collapse is to make all the border to be collapsed into a single border.  Here we have also used the inline style attribute to make the dates of February be little visible.

CSS code:

table {
    border-collapse: collapse;
    background: white;
    color: black;
}
th, td { 
    font-weight: bold;
}

Attributes that we will use in the table tag:

<table bgcolor="lightgrey" align="center" 
    cellspacing="21" cellpadding="21">  

Final code: This is the combination of all the above codes

<!DOCTYPE html>
<html>

<head>
	<style>
		table {
			border-collapse: collapse;
			background: white;
			color: black;
		}
		
		th,
		td {
			font-weight: bold;
		}
	</style>
</head>

<body>
	<!-- Here we are using attributes like
		cellspacing and cellpadding -->

	<!-- The purpose of the cellpadding is
		the space that a user want between
		the border of cell and its contents-->

	<!-- cellspacing is used to specify the
		space between the cell and its contents -->
	<h2 align="center" style="color: orange;">
		January 2021
	</h2>
	<br />

	<table bgcolor="lightgrey" align="center"
		cellspacing="21" cellpadding="21">

		<!-- The tr tag is used to enter
			rows in the table -->

		<!-- It is used to give the heading to the
			table. We can give the heading to the
			top and bottom of the table -->

		<caption align="top">
			<!-- Here we have used the attribute
				that is style and we have colored
				the sentence to make it better
				depending on the web page-->
		</caption>

		<!-- Here th stands for the heading of the
			table that comes in the first row-->

		<!-- The text in this table header tag will
			appear as bold and is center aligned-->

		<thead>
			<tr>
				<!-- Here we have applied inline style
					to make it more attractive-->
				<th style="color: white; background: purple;">
					Sun</th>
				<th style="color: white; background: purple;">
					Mon</th>
				<th style="color: white; background: purple;">
					Tue</th>
				<th style="color: white; background: purple;">
					Wed</th>
				<th style="color: white; background: purple;">
					Thu</th>
				<th style="color: white; background: purple;">
					Fri</th>
				<th style="color: white; background: purple;">
					Sat</th>
			</tr>
		</thead>

		<tbody>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td>1</td>
				<td>2</td>
			</tr>
			<tr></tr>
			<tr>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
			<tr>
				<td>10</td>
				<td>11</td>
				<td>12</td>
				<td>13</td>
				<td>14</td>
				<td>15</td>
				<td>16</td>
			</tr>
			<tr>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
			</tr>
			<tr>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</td>
				<td>29</td>
				<td>30</td>
			</tr>
			<tr>
				<td>31</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
		</tbody>
	</table>
</body>

</html>

Output:

#javascript #html #css #programming

What is GEEK

Buddha Community

How to Build a Calendar with HTML, CSS and JavaScript
Lyda  White

Lyda White

1628189100

How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript 

code savvy

code savvy

1630506330

Product landing page using HTML CSS & JavaScript | web design

Knowledge

This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

πŸ“ Assets 
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript 

code savvy

code savvy

1629473371

Web Design Speed Code | HTML, CSS, JavaScript (GSAP) | Portfolio Design

Portfolio Website Design with HTML, CSS & Javascript

 

Hello Everyone, In this video we'll create a Portfolio Page design using HTML, CSS & JavaScript (GSAP) πŸ“

🧠 Knowledge : 

Html, CSS (Flexbox), JavaScript DOM, Javascript Animations.

Anyway, you can learn everything mentioned. Follow the tutorial.

⏱ Outline

 

#css #javascript  #JavaScript  #HTML #html 

Click to Watch Full Tutorial 

anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

Nandini roy

Nandini roy

1618667097

Responsive Personal Portfolio Website Using HTML CSS and JavaScript

Tutorial: https://youtu.be/9DDiorNZiyw

#create a portfolio website with html css javascript #personal portfolio complete website using only html css javascript #responsive portfolio website html css javascript #responsive personal portfolio website #portfolio website #responsive website