vcgit-forge/Sample-Calendar
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/Sample-Calendar.git synced 2026-02-10 04:33:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add Sample Calender

Browse Source
This commit is contained in:
Raghu-Ch
2018-01-12 20:23:29 -05:00
commit 34ceb87ac7
4 changed files with 88 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.DS_Store

38
index.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<label for="choice">Select a month:</label>
<select id="months">
<option value="">--Month--</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<div class="calender">
<h1></h1>
<ul></ul>
</div>
<script src="scripts/main.js"></script>
</body>
</html>

32
scripts/main.js Normal file
View File

@@ -0,0 +1,32 @@
/**
* Active learning: A simple calendar
*/
var select = document.querySelector('select');
var list = document.querySelector('ul');
var h1 = document.querySelector('h1');
select.onchange = () => {
var choice = select.value;
var days = 31;
if (choice === 'February') {
days = 28;
} else if (choice === 'April' || choice === 'June' || choice === 'September' || choice === 'November') {
days = 30;
} else {
days = 31;
}
createCalender(days, choice);
}
function createCalender(days, choice) {
h1.textContent = choice;
list.innerHTML = '';
for (let i = 1; i <= days; i++) {
var listIteam = document.createElement('li');
listIteam.textContent = i;
list.appendChild(listIteam);
}
}

17
styles.css Normal file
View File

@@ -0,0 +1,17 @@
h1 {
font-family: "Trebuchet MS", Verdana, sans-serif;
}
.calender ul {
padding-left: 0;
}
.calender li {
display: block;
float: left;
width: 25%;
border: 2px solid white;
padding: 5px;
height: 40px;
background-color: rgb(23, 135, 201);
color: white;
}