update html to accept an unlimited number of links

This commit is contained in:
Ryan Mwangi 2024-10-02 02:15:52 +03:00
parent 0e2d6cac8a
commit 3d75b40018
1 changed files with 30 additions and 10 deletions

View File

@ -4,19 +4,38 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Merger</title>
<link rel="stylesheet" href="/styles.css">
<style>
body {
font-family: Arial, sans-serif;
}
#calendars {
margin-bottom: 20px;
}
#calendars .calendar {
margin-bottom: 10px;
}
#calendars .calendar input[type="text"] {
width: 50%;
margin-right: 10px;
}
#calendars .calendar input[type="url"] {
width: 50%;
}
#add-calendar {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Calendar Merger</h1>
<form id="merge-form">
<label for="cal1-url">Calendar 1 URL:</label>
<input type="url" id="cal1-url" name="cal1-url"><br><br>
<label for="cal1-prefix">Calendar 1 Prefix:</label>
<input type="text" id="cal1-prefix" name="cal1-prefix"><br><br>
<label for="cal2-url">Calendar 2 URL:</label>
<input type="url" id="cal2-url" name="cal2-url"><br><br>
<label for="cal2-prefix">Calendar 2 Prefix:</label>
<input type="text" id="cal2-prefix" name="cal2-prefix"><br><br>
<div id="calendars">
<div class="calendar">
<input type="text" id="prefix-0" placeholder="Prefix">
<input type="url" id="url-0" placeholder="Calendar URL">
</div>
</div>
<button id="add-calendar" type="button">Add Calendar</button>
<button type="submit">Merge Calendars</button>
</form>
<div id="result"></div>
@ -24,3 +43,4 @@
<script src="script.js"></script>
</body>
</html>