В настоящее время я изучаю JavaScript самостоятельно и пытаюсь попрактиковаться в манипулировании DOM с помощью простого приложения-планировщика, которое принимает информацию в форме (с указанием даты, имени и описания события), а затем вставляет ответы формы в календарьсоответствует дню.
Я в основном использовал цикл for для циклического перемещения по всему календарю, чтобы найти дату, соответствующую дате, выбранной в форме, и, если она равна, входные значения будут расположены под датой.
(На данный момент давайте просто предположим, что календарь может содержать только даты октября 2018 года, для простоты.)
Большое спасибо за помощь !!
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>