I am currently learning JavaScript on my own and trying to practise DOM manipulation with a simple scheduler application which accepts information in a form (taking in the date, name, and event description), and thereafter inserts the form responses into a calendar corresponding to the day.
I basically used a for loop to loop through the entire calendar to find the date corresponding to the one chosen in the form, and if it is equal, then the input values will be slotted under the date.
(For the moment let's just assume the calendar can only hold October 2018 dates, for simplicity sake.)
Thanks a lot for the help!!
const dateInput = document.getElementById('date');
const nameInput = document.getElementById('who');
const remarksInput = document.getElementById('remarks');
const eventAdderButton = document.getElementById('event-adder-button');
const calendar = document.getElementsByClassName('days');
eventAdderButton.addEventListener('click', () => {
const date = dateInput.value.slice(3,5);
for (let i = 0; i < calendar.length; i += 1) {
const calendardays = calendar[i].getElementsByTagName('td');
for (let j = 0; j < calendardays.length; j += 1) {
if (calendardays[j].textContent == date) {
const newEvent = document.createElement('p');
newEvent.textContent = remarksInput.value + nameInput.value;
calendardays[j].innerHTML = "<p>" + calendardays[j] + "</p>" + newEvent.innerHTML;
}
}
}
})body {
text-align: center;
box-sizing: border-box;
}
h2 {
color: inherit;
}
.intro-wrapper {
background-color: #45d1a0;
padding: 10px;
margin: 10px 10px;
}
#intro {
background-color: #45d1a0;
color: white;
font-family: "Chelsea Market";
border-style: double;
border-color: white;
border-width: thick;
padding: 10px;
margin: 10px 10px;
}
.form-wrapper {
background-color: #d15545;
font-family: "Chelsea Market";
padding: 10px;
margin: 10px 10px;
}
.form-start {
color: white;
border-style: double;
border-color: white;
border-width: thick;
padding: 10px;
margin: 10px 10px;
}
label, #event-adder-button {
margin-top: 20px;
}
#date, #who, #remarks {
margin: 0 auto;
text-align: center;
width: 300px;
}
.calendar-wrapper {
background-color: #03f;
color: white;
font-family: "Chelsea Market";
padding: 10px;
margin: 10px 10px;
}
ul {list-style-type: none;}
/* Month header */
.month {
padding: 25px 25px;
background: #1abc9c;
text-align: center;
}
/* Month list */
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
/* Previous button inside month header */
.month .prev {
float: left;
padding-top: 10px;
}
/* Next button */
.month .next {
float: right;
padding-top: 10px;
}
/* calendar table */
.calendar-table {
width: 100%;
}
/* Weekdays (Mon-Sun) */
.weekdays {
margin: 0;
padding: 10px 0;
background-color:#ddd;
width: 100%;
}
.weekdays th {
width: 10%;
color: #666;
text-align: center;
border: solid;
}
/* Days (1-31) */
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days td {
width: 10%;
height: 100px;
margin-bottom: 5px;
padding-top: 5px;
font-size:12px;
color: #777;
border: solid;
text-align: left;
vertical-align: top;
}
/* Highlight the "current" day */
.days td .active {
padding: 3px;
background: #1abc9c;
color: white !important
}<!DOCTYPE HTML>
<html>
<head>
<title>My Calendar Application</title>
<link href='http://fonts.googleapis.com/css?family=Chelsea+Market' rel='stylesheet' type='text/css'>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Banner -->
<div class="intro-wrapper">
<section id="intro">
<p></p>
<h2>Manage your Schedule</h2>
<p>Add. Share. And Enjoy!</p>
</section>
</div>
<div class="form-wrapper">
<section id="one">
<div class="form-start">
<header>
<h2>Add an Event</h2>
</header>
<form method="post" action="#">
<div>
<label for="date">Date</label>
<br>
<input name="date" id="date" type="date">
</div>
<br>
<div>
<label for="who">With Whom?</label>
<br>
<input name="who" id="who" type="text">
</div>
<br>
<div>
<label for="remarks">Remarks</label>
<br>
<textarea name="remarks" id="remarks" rows="4"></textarea>
</div>
<input value="Add Event" type="submit" id="event-adder-button"></li>
</form>
</div>
</section>
</div>
<!--end of Form-->
<!-- Calendar -->
<section class="calendar-wrapper">
<div class="inner">
<h2>Calendar</h2>
</div>
<div class="month">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li>October<br><span style="font-size:18px">2018</span></li>
</ul>
</div>
<div>
<table class="calendar-table">
<tr class="weekdays">
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
<th>Su</th>
</tr>
<tr class="days">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr class="days">
<td>8</td>
<td>9</td>
<td><span class="active">10</span></td>>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr class="days">
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr class="days">
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr class="days">
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
