Kalender 1
<!DOCTYPE html>
<html>
<head>
<title>Latihan Koding Informatika MAN Kapuas</title>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #dfe6d9;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
user-select: none;
}
.container .calendar{
width: 546px;
height: 622px;
background-color: #fff;
box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.2);
font-family: "Roboto", sans-serif;
overflow: hidden;
}
.container .digital_clock{
position: absolute;
top: 0;
left: 0;
padding: 20px;
}
.digital_clock:hover{
background: linear-gradient(to top, #008184 0%, #005658 100%);
}
.digital_clock .time{
font-size: 50px;
color: #fff;
}
.digital_clock .time .format{
font-size: 25px;
}
.calendar .month{
width: 100%;
background-color: #008184;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
padding: 84px 30px 40px 30px;
text-align: center;
}
.month h2{
font-size: 32px;
margin-top: 25px;
}
.month p{
margin-top: 5px;
font-size: 17px;
}
.month .arrow{
width: 40px;
height: 40px;
display: inline-block;
background-color: #016d6f;
line-height: 40px;
border-radius: 50%;
cursor: pointer;
transition: 0.3s;
}
.month .arrow:hover{
background-color: #005758;
}
.container .week{
display: flex;
background-color: #016d6f;
color: #fff;
}
.week div{
width: 14.28%;
text-align: center;
padding: 10px 0px;
transition: 0.4s;
}
.week .active{
background-color: #005758;
}
.week div:hover{
background-color: #005758;
}
.container .dates{
display: flex;
flex-wrap: wrap;
padding: 10px 0;
}
.dates div{
width: 74px;
height: 55px;
margin: 2px;
margin-top: 1.7px;
text-align: center;
line-height: 53px;
border: 3px solid #e9e9e9;
}
.dates .today{
background-color: #008184;
color: #fff;
}
.dates .today:hover{
background-color: #016d6f;
font-size: 20px;
font-weight: 600;
}
.dates div:hover:not(.today){
border: 3px dashed #111;
background-color: #f0f0f0;
color: #008184;
font-size: 600;
cursor: pointer;
-webkit-box-reflect: below 4px linear-gradient(transparent, #0000004d);
}
.dates div:nth-child(n+36):hover{
-webkit-box-reflect: above 4px linear-gradient(transparent, #0000004d);
}
.calendar .dates div:nth-child(n+43){
border: none !important;
cursor: auto !important;
background: none !important;
}
.dates .prev, .dates .next{
opacity: 0.5;
}
.dates .prev:hover,
.dates .next:hover{
opacity: 1;
}
</style>
</head>
<body>
<body onload="randerDate()">
<div class="container">
<div class="calendar">
<div class="digital_clock">
<div class="time">
<span class="hours">00</span>:
<span class="minutes">00</span>:
<span class="seconds">00</span>
<span class="format">AM</span>
</div>
</div>
<div class="month">
<div class="prev" onclick="moveDate('prev')">
<span class="arrow">❮</span>
</div>
<div>
<h2 id="month">April-2023</h2>
<p id="date">Tue April 20 2023</p>
</div>
<div class="next" onclick="moveDate('next')">
<span class="arrow">❯</span>
</div>
</div>
<div class="week">
<div>Sun</div>
<div>Mon</div>
<div>Tue</div>
<div>Wed</div>
<div>Thu</div>
<div>Fri</div>
<div>Sat</div>
</div>
<div class="dates">
<!-- <div class="prev">26</div>
<div class="prev">27</div>
<div class="prev">28</div>
<div class="prev">29</div>
<div class="prev">30</div>
<div class="prev">32</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<div>29</div>
<div>30</div>
<div class="next">1</div>
<div class="next">2</div>
<div class="next">3</div>
<div class="next">4</div>
<div class="next">5</div>
<div class="next">6</div> -->
</div>
</div>
</div>
<script src="app.js"></script>
</body>
<scrip>function digitalClock(){
let datefunction = new Date()
let hours = datefunction.getHours()
let minutes = datefunction.getMinutes()
let seconds = datefunction.getSeconds()
let timeFormat = 'AM'
timeFormat = hours >= 12 ? 'PM' : 'AM'
hours = hours == 0 ? 12 : hours
hours = hours > 12 ? hours - 12 : hours
hours = hours < 10 ? '0' + hours : hours
minutes = minutes < 10 ? '0' + minutes : minutes
seconds = seconds < 10 ? '0' + seconds : seconds
document.querySelector('.hours').innerHTML = hours
document.querySelector('.minutes').innerHTML = minutes
document.querySelector('.seconds').innerHTML = seconds
document.querySelector('.format').innerHTML = timeFormat
}
setInterval(digitalClock, 1000)
let newDateFunction = new Date()
function randerDate(){
newDateFunction.setDate(1)
let day = newDateFunction.getDay()
let currentDate = new Date(
newDateFunction.getFullYear(),
newDateFunction.getMonth() + 1,0
).getDate() // to get the last date of current month
let prevDate = new Date(
newDateFunction.getFullYear(),
newDateFunction.getMonth(), 0
).getDate() // to get the last date of previous month
let addNextDate = new Date(
newDateFunction.getFullYear(),
newDateFunction.getMonth() + 1,0
).getDate()
console.log(currentDate, prevDate, addNextDate);
let addNext = addNextDate + 7
let month = newDateFunction.getMonth()
let year = newDateFunction.getFullYear()
let monthArr = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
document.getElementById("month").innerHTML = monthArr[month] + " - " + year
let today = new Date()
let weekDay = today.getDay()
document.getElementById("date").innerHTML = today.toDateString()
document.querySelector(`.week :nth-child(${weekDay + 1})`).classList.add("active")
let DATES = ""
for(let x = day; x > 0; x--){
DATES += "<div class='prev'>" + (prevDate - x + 1) + "</div>"
}
for(let i = 1; i <= currentDate; i++){
if(i === today.getDate() && newDateFunction.getMonth() == today.getMonth() && newDateFunction.getFullYear() === today.getFullYear()){
DATES += "<div class='today'>" + i + "</div>"
}
else{
DATES += "<div>" + i + "</div>"
}
}
for(let k = 1; k <= addNext; k++){
DATES += "<div class='next'>" + k + "</div>"
}
document.querySelector('.dates').innerHTML = DATES
}
function moveDate(para){
if(para == 'prev'){
newDateFunction.setMonth(newDateFunction.getMonth() - 1)
}
else if(para == 'next'){
newDateFunction.setMonth(newDateFunction.getMonth() + 1)
}
randerDate()
}
</script>
</body>
</html>
0 komentar: