Skip to content

added clock #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added clock #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions Clock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width= device-width, initial-scale=1.0">

<!------------------------------ BOXICONS ------------------------------->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">

<!---------------------------------CSS----------------------------------->
<link rel="stylesheet" href="styles.css">

<title>Analog Clock UI</title>
</head>
<body>
<section class="clock container">
<div class="clock_container grid">
<div class="clock_content grid">
<div class="clock_circle">
<span class="clock_twelve"></span>
<span class="clock_three"></span>
<span class="clock_six"></span>
<span class="clock_nine"></span>

<div class="clock_rounder"></div>
<div class="clock_hour" id="clock-hour"></div>
<div class="clock_min" id="clock-min"></div>
<div class="clock_sec" id="clock-sec"></div>

<!-- DARK/LIGHT -->
<div class="theme">
<i class='bx bxs-moon' id="theme-btn"></i>
</div>
</div>
<div>
<div class="clock_text">
<div class="clock_text-hr" id="text-hr"></div>
<div class="clock_text-min" id="text-min"></div>
<div class="clock_text-m" id="text-am"></div>
</div>
<div class="clock_date">
<span id="date-day"></span>
<span id="date-month"></span>
<span id="date-year"></span>
</div>
</div>
</div>

<a href="#" target="blank" class="clock_logo">Clockido</a>
</div>
</section>

<!-- SCRIPT -->
<script src="main.js"></script>
</body>
</html>
93 changes: 93 additions & 0 deletions Clock/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
// -------------------------- CLOCK ------------------------------//
const hour=document.getElementById('clock-hour'),
mins=document.getElementById('clock-min'),
secs=document.getElementById('clock-sec')

const clock=()=>{
let date=new Date()
let h=date.getHours()*30,
min = date.getMinutes() * 6,
sec = date.getSeconds() * 6

// Rotation to elements
hour.style.transform=`rotateZ(${h+min/12}deg)`
mins.style.transform=`rotateZ(${min}deg)`
secs.style.transform=`rotateZ(${sec}deg)`
}

setInterval(clock, 1000) // 1000=1s

// -------------------------- DATE ------------------------------//
const texthr=document.getElementById('text-hr'),
textmin=document.getElementById('text-min'),
textam=document.getElementById('text-am'),
dateDay=document.getElementById('date-day'),
dateMonth=document.getElementById('date-month'),
dateYear=document.getElementById('date-year')

const Text= ()=>{
let date=new Date()
let h=date.getHours(),
am,
min=date.getMinutes(),
day=date.getDate(),
month=date.getMonth(),
year=date.getFullYear()

if(h>=12){
am='PM'
}
else{
am='AM'
}
if(h<10){h=`0${h}`}

texthr.innerHTML=`${h}:`

if(min<10){min=`0${min}`}

textmin.innerHTML=min

textam.innerHTML=am

let months=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec']

dateDay.innerHTML=day
dateMonth.innerHTML=`${months[month]},`
dateYear.innerHTML=year

//For 12 hr format
// if(h>=12){
// h=h-12
// am='PM'
// }
// else{
// am='AM'
// }
// if(h==0){h=12}
}
setInterval(Text,1000)//1000=1s

// ----------------------- DARK MODE-------------------------------//
const themeButton = document.getElementById('theme-btn')
const darkTheme = 'dark-theme'
const iconTheme = 'bxs-sun'

const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')

const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'bxs-moon'
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'bxs-moon' : 'bxs-sun'

if (selectedTheme) {
document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
themeButton.classList[selectedIcon === 'bxs-moon' ? 'add' : 'remove'](iconTheme)
}

// Activate / deactivate the theme manually with the button
themeButton.addEventListener('click', () => {
document.body.classList.toggle(darkTheme)
themeButton.classList.toggle(iconTheme)
localStorage.setItem('selected-theme', getCurrentTheme())
localStorage.setItem('selected-icon', getCurrentIcon())
})
Loading