fixed setinterval memory leak bug;
fixed media queries not imported; created mobile example;
This commit is contained in:
Vinícius Biavatti
parent
aae4aa10e8
commit
1a917e286d
@ -1,6 +1,15 @@
|
||||
# TuiCss ChangeLog
|
||||
### This is the change log of TuiCss. Here you can find the documentations of the feature of each released version
|
||||
|
||||
#### 2.1.1
|
||||
|
||||
Bugs
|
||||
- Fixed memory leak due to setinterval for clocks: https://github.com/vinibiavatti1/TuiCss/pull/29
|
||||
- Imported media queries classes to tuicss.scss: https://github.com/vinibiavatti1/TuiCss/issues/30
|
||||
|
||||
Examples
|
||||
- Created the mobile example
|
||||
|
||||
#### 2.1.0
|
||||
- .disabled classes
|
||||
- Fixed the default radius border of inputs
|
||||
|
||||
54
dist/tuicss.css
vendored
54
dist/tuicss.css
vendored
@ -49,6 +49,60 @@ hr {
|
||||
input, select, textarea {
|
||||
width: 200px; }
|
||||
|
||||
/* Font (Options: 'Lucida Console' or 'DOS') */
|
||||
/* Characters */
|
||||
/* Theme */
|
||||
/* Responsive */
|
||||
/* Scrool */
|
||||
/* Grid */
|
||||
@media only screen and (max-width: 600px) {
|
||||
.hide-on-small-only, .hide-on-small-and-down {
|
||||
display: none !important; } }
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.hide-on-med-and-down {
|
||||
display: none !important; } }
|
||||
|
||||
@media only screen and (min-width: 601px) {
|
||||
.hide-on-med-and-up {
|
||||
display: none !important; } }
|
||||
|
||||
@media only screen and (min-width: 600px) and (max-width: 992px) {
|
||||
.hide-on-med-only {
|
||||
display: none !important; } }
|
||||
|
||||
@media only screen and (min-width: 993px) {
|
||||
.hide-on-large-only {
|
||||
display: none !important; } }
|
||||
|
||||
@media only screen and (min-width: 1201px) {
|
||||
.hide-on-extra-large-only {
|
||||
display: none !important; } }
|
||||
|
||||
@media only screen and (min-width: 1201px) {
|
||||
.show-on-extra-large {
|
||||
display: block !important; } }
|
||||
|
||||
@media only screen and (min-width: 993px) {
|
||||
.show-on-large {
|
||||
display: block !important; } }
|
||||
|
||||
@media only screen and (min-width: 600px) and (max-width: 992px) {
|
||||
.show-on-medium {
|
||||
display: block !important; } }
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.show-on-small {
|
||||
display: block !important; } }
|
||||
|
||||
@media only screen and (min-width: 601px) {
|
||||
.show-on-medium-and-up {
|
||||
display: block !important; } }
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.show-on-medium-and-down {
|
||||
display: block !important; } }
|
||||
|
||||
/* Font (Options: 'Lucida Console' or 'DOS') */
|
||||
/* Characters */
|
||||
/* Theme */
|
||||
|
||||
63
dist/tuicss.js
vendored
63
dist/tuicss.js
vendored
@ -99,45 +99,44 @@ function datetimeController() {
|
||||
|
||||
// Kick off our clock interval stuff.
|
||||
datetimeInterval();
|
||||
setInterval(datetimeInterval, 1000);
|
||||
|
||||
// Synchronize time and set interval to control the clocks
|
||||
setTimeout(() => {
|
||||
setInterval(datetimeInterval, 1000);
|
||||
}, 1000 - new Date().getMilliseconds());
|
||||
|
||||
function datetimeInterval() {
|
||||
for (const clock of clocks) {
|
||||
// Set the interval.
|
||||
const interval = setInterval(() => {
|
||||
// Technically we should have already returned earlier in the code, but to be on the safe side.
|
||||
if (clock === null) {
|
||||
clearInterval(interval);
|
||||
return;
|
||||
}
|
||||
if (clock === null) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Get the format we want to display in the element.
|
||||
let format = clock.getAttribute('data-format');
|
||||
// Get the format we want to display in the element.
|
||||
let format = clock.getAttribute('data-format');
|
||||
|
||||
// parse out the date and time into constants.
|
||||
const today = new Date();
|
||||
const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
|
||||
const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
|
||||
const year = today.getFullYear() + '';
|
||||
const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
|
||||
const hour12 = (parseInt(hour) + 24) % '12' || '12';
|
||||
const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
|
||||
const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
|
||||
const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM';
|
||||
// parse out the date and time into constants.
|
||||
const today = new Date();
|
||||
const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
|
||||
const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
|
||||
const year = today.getFullYear() + '';
|
||||
const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
|
||||
const hour12 = (parseInt(hour) + 24) % '12' || '12';
|
||||
const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
|
||||
const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
|
||||
const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM';
|
||||
|
||||
// Replace based on the format.
|
||||
format = format.replace('M', month);
|
||||
format = format.replace('d', day);
|
||||
format = format.replace('y', year);
|
||||
format = format.replace('H', hour);
|
||||
format = format.replace('h', hour12);
|
||||
format = format.replace('m', minute);
|
||||
format = format.replace('s', second);
|
||||
format = format.replace('a', ampm);
|
||||
// Replace based on the format.
|
||||
format = format.replace('M', month);
|
||||
format = format.replace('d', day);
|
||||
format = format.replace('y', year);
|
||||
format = format.replace('H', hour);
|
||||
format = format.replace('h', hour12);
|
||||
format = format.replace('m', minute);
|
||||
format = format.replace('s', second);
|
||||
format = format.replace('a', ampm);
|
||||
|
||||
// Show it in the element.
|
||||
clock.innerHTML = format;
|
||||
});
|
||||
// Show it in the element.
|
||||
clock.innerHTML = format;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
2
dist/tuicss.min.css
vendored
2
dist/tuicss.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/tuicss.min.js
vendored
2
dist/tuicss.min.js
vendored
@ -1 +1 @@
|
||||
function domReady(t){document.addEventListener("DOMContentLoaded",t),"interactive"!==document.readyState&&"complete"!==document.readyState||t()}function tabsController(){const t=document.getElementsByClassName("tui-tab");if(!t.length)return;for(const e of t)e.addEventListener("click",function(e){if(e.target.classList.contains("disabled"))return;for(const e of t)e.classList.remove("active");const o=document.getElementsByClassName("tui-tab-content");if(!o)throw"No tab content elements found.";for(const t of o)t.style.display="none";const n=e.target.getAttribute("data-tab-content");if(n){const t=document.getElementById(n);if(!t)throw'No tab content element with id "'+n+'" found.';t.style.display="block"}e.target.classList.add("active")});const e=document.querySelector(".tui-tab.active");e?e.click():t[0].click()}function datetimeController(){const t=document.getElementsByClassName("tui-datetime");function e(){for(const e of t){const t=setInterval(()=>{if(null===e)return void clearInterval(t);let o=e.getAttribute("data-format");const n=new Date,a=2===(n.getMonth()+"").length?n.getMonth()+1:"0"+(n.getMonth()+1),s=2===(n.getDay()+"").length?n.getDay()+1:"0"+(n.getDay()+1),c=n.getFullYear()+"",l=2===(n.getHours()+"").length?n.getHours():"0"+n.getHours(),i=(parseInt(l)+24)%"12"||"12",r=2===(n.getMinutes()+"").length?n.getMinutes():"0"+n.getMinutes(),d=2===(n.getSeconds()+"").length?n.getSeconds():"0"+n.getSeconds(),u=parseInt(l)>=12?"PM":"AM";o=(o=(o=(o=(o=(o=(o=(o=o.replace("M",a)).replace("d",s)).replace("y",c)).replace("H",l)).replace("h",i)).replace("m",r)).replace("s",d)).replace("a",u),e.innerHTML=o})}}t.length&&(e(),setInterval(e,1e3))}function sidenavController(){const t=document.querySelector(".tui-sidenav-button");t&&t.addEventListener("click",()=>{const t=document.querySelector(".tui-sidenav");if(!t)throw"No sidenav element found.";t.classList.contains("active")?t.classList.remove("active"):t.classList.add("active")})}function modalController(){const t=document.querySelector(".tui-overlap");if(!t)return;const e=document.getElementsByClassName("tui-modal-button");for(const o of e)o.addEventListener("click",e=>{t.classList.add("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.add("active")}});const o=document.getElementsByClassName("tui-modal-close-button");if(e.length>0&&!o.length)throw"No modal close buttons found.";for(const e of o)e.addEventListener("click",e=>{t.classList.remove("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.remove("active")}})}domReady(function(){tabsController(),datetimeController(),sidenavController(),modalController()});
|
||||
function domReady(t){document.addEventListener("DOMContentLoaded",t),"interactive"!==document.readyState&&"complete"!==document.readyState||t()}function tabsController(){const t=document.getElementsByClassName("tui-tab");if(!t.length)return;for(const e of t)e.addEventListener("click",function(e){if(e.target.classList.contains("disabled"))return;for(const e of t)e.classList.remove("active");const o=document.getElementsByClassName("tui-tab-content");if(!o)throw"No tab content elements found.";for(const t of o)t.style.display="none";const n=e.target.getAttribute("data-tab-content");if(n){const t=document.getElementById(n);if(!t)throw'No tab content element with id "'+n+'" found.';t.style.display="block"}e.target.classList.add("active")});const e=document.querySelector(".tui-tab.active");e?e.click():t[0].click()}function datetimeController(){const t=document.getElementsByClassName("tui-datetime");function e(){for(const e of t){if(null===e)continue;let t=e.getAttribute("data-format");const o=new Date,n=2===(o.getMonth()+"").length?o.getMonth()+1:"0"+(o.getMonth()+1),a=2===(o.getDay()+"").length?o.getDay()+1:"0"+(o.getDay()+1),s=o.getFullYear()+"",c=2===(o.getHours()+"").length?o.getHours():"0"+o.getHours(),l=(parseInt(c)+24)%"12"||"12",i=2===(o.getMinutes()+"").length?o.getMinutes():"0"+o.getMinutes(),d=2===(o.getSeconds()+"").length?o.getSeconds():"0"+o.getSeconds(),r=parseInt(c)>=12?"PM":"AM";t=(t=(t=(t=(t=(t=(t=(t=t.replace("M",n)).replace("d",a)).replace("y",s)).replace("H",c)).replace("h",l)).replace("m",i)).replace("s",d)).replace("a",r),e.innerHTML=t}}t.length&&(e(),setTimeout(()=>{setInterval(e,1e3)},1e3-(new Date).getMilliseconds()))}function sidenavController(){const t=document.querySelector(".tui-sidenav-button");t&&t.addEventListener("click",()=>{const t=document.querySelector(".tui-sidenav");if(!t)throw"No sidenav element found.";t.classList.contains("active")?t.classList.remove("active"):t.classList.add("active")})}function modalController(){const t=document.querySelector(".tui-overlap");if(!t)return;const e=document.getElementsByClassName("tui-modal-button");for(const o of e)o.addEventListener("click",e=>{t.classList.add("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.add("active")}});const o=document.getElementsByClassName("tui-modal-close-button");if(e.length>0&&!o.length)throw"No modal close buttons found.";for(const e of o)e.addEventListener("click",e=>{t.classList.remove("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.remove("active")}})}domReady(function(){tabsController(),datetimeController(),sidenavController(),modalController()});
|
||||
@ -23,8 +23,9 @@
|
||||
<button class="tui-button">Button</button><br>
|
||||
<input type="button" class="tui-button" value="Input" /><br>
|
||||
<a href="#!" class="tui-button">Anchor</a><br>
|
||||
<button class="tui-button red-168">Custom</button><br>
|
||||
<button class="tui-button red-168 disabled" disabled style="margin-bottom: 5px;">Disabled</button><br>
|
||||
<button class="tui-button orange-168 white-text">Custom</button><br>
|
||||
<button class="tui-button red-168 disabled" disabled>Disabled</button><br>
|
||||
<button class="tui-button" style="margin-bottom: 5px;">Focused</button><br>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
171
examples/mobile.html
Normal file
171
examples/mobile.html
Normal file
@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-tui-scroll">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mobile Example</title>
|
||||
<script src="../dist/tuicss.min.js"></script>
|
||||
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
||||
<style>
|
||||
.content {
|
||||
padding: 40px 0px;
|
||||
}
|
||||
.post-img {
|
||||
width: 100%;
|
||||
border: 4px solid black;
|
||||
}
|
||||
.add-btn {
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
z-index: 999;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.post {
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="tui-bg-blue-black relative">
|
||||
<!-- Sidenav -->
|
||||
<nav class="tui-sidenav absolute">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">P</span>rofile
|
||||
<span class="tui-shortcut">ctrl+p</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">S</span>earch
|
||||
<span class="tui-shortcut">ctrl+s</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
S<span class="red-168-text">t</span>ory
|
||||
<span class="tui-shortcut">ctrl+t</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="tui-nav">
|
||||
<span class="tui-datetime" data-format="h:m:s a"></span>
|
||||
<ul>
|
||||
<li class="tui-sidenav-button red-168-text">≡</li>
|
||||
<li class="tui-dropdown hide-on-med-and-down">
|
||||
<span class="red-168-text">P</span>rofile
|
||||
<div class="tui-dropdown-content">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">A</span>vatar
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
P<span class="red-168-text">r</span>eferences
|
||||
<span class="tui-shortcut">F3</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="tui-dropdown block">
|
||||
<span class="right">►</span>
|
||||
<span class="red-168-text">M</span>ore
|
||||
<div class="tui-dropdown-content">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">I</span>diom
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">B</span>locked Users
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<div class="tui-black-divider"></div>
|
||||
<li>
|
||||
<a href="#!">
|
||||
<span class="red-168-text">S</span>tories
|
||||
<span class="tui-shortcut">F10</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="tui-dropdown hide-on-med-and-down">
|
||||
<span class="red-168-text">H</span>elp
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Edit panel -->
|
||||
<div class="content container">
|
||||
<div class="row">
|
||||
<div class="col s12 m12 l12 white-text center">
|
||||
<h3>InstaTui</h3>
|
||||
<hr>
|
||||
The best old-school social network<br>
|
||||
<span class="orange-255 black-text hide-on-small-only">(Try this in a mobile view)</span>
|
||||
<span class="green-255 black-text hide-on-med-and-up">(√ Mobile view)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s12 m4 l4">
|
||||
<div class="post tui-window">
|
||||
<fieldset class="tui-fieldset">
|
||||
John Due says:
|
||||
<hr>
|
||||
<img class="post-img" src="resources/winxp.png" />
|
||||
The winxp bg is amazing!
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m4 l4">
|
||||
<div class="post tui-window">
|
||||
<fieldset class="tui-fieldset">
|
||||
Jane Due says:
|
||||
<hr>
|
||||
<img class="post-img" src="resources/disks.png" />
|
||||
Bought my first 2 PC games!
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m4 l4">
|
||||
<div class="post tui-window">
|
||||
<fieldset class="tui-fieldset">
|
||||
Astronaut says:
|
||||
<hr>
|
||||
<img class="post-img" src="resources/step.png" />
|
||||
One small step for man one giant leap for mankind
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status bar -->
|
||||
<div class="tui-statusbar fixed" style="bottom: 0px;">
|
||||
<ul>
|
||||
<li class="right" style="margin-right: 10px;"><a href="#!">Search</a></li>
|
||||
<li><a href="#!">Profile</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button class="tui-button red-168 white-255-text fixed add-btn">+</button>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
examples/resources/disks.png
Normal file
BIN
examples/resources/disks.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
examples/resources/step.png
Normal file
BIN
examples/resources/step.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
examples/resources/winxp.png
Normal file
BIN
examples/resources/winxp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "tuicss",
|
||||
"version": "2.0.1",
|
||||
"version": "2.1.1",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "tuicss",
|
||||
"version": "2.0.1",
|
||||
"version": "2.1.1",
|
||||
"description": "TuiCss is a library for developing Web applications that uses text-based user interface applications (TUI) as a style",
|
||||
"keywords": [
|
||||
"tui",
|
||||
|
||||
BIN
resources/tuicss mobile.png
Normal file
BIN
resources/tuicss mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
@ -99,45 +99,44 @@ function datetimeController() {
|
||||
|
||||
// Kick off our clock interval stuff.
|
||||
datetimeInterval();
|
||||
setInterval(datetimeInterval, 1000);
|
||||
|
||||
// Synchronize time and set interval to control the clocks
|
||||
setTimeout(() => {
|
||||
setInterval(datetimeInterval, 1000);
|
||||
}, 1000 - new Date().getMilliseconds());
|
||||
|
||||
function datetimeInterval() {
|
||||
for (const clock of clocks) {
|
||||
// Set the interval.
|
||||
const interval = setInterval(() => {
|
||||
// Technically we should have already returned earlier in the code, but to be on the safe side.
|
||||
if (clock === null) {
|
||||
clearInterval(interval);
|
||||
return;
|
||||
}
|
||||
if (clock === null) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Get the format we want to display in the element.
|
||||
let format = clock.getAttribute('data-format');
|
||||
// Get the format we want to display in the element.
|
||||
let format = clock.getAttribute('data-format');
|
||||
|
||||
// parse out the date and time into constants.
|
||||
const today = new Date();
|
||||
const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
|
||||
const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
|
||||
const year = today.getFullYear() + '';
|
||||
const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
|
||||
const hour12 = (parseInt(hour) + 24) % '12' || '12';
|
||||
const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
|
||||
const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
|
||||
const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM';
|
||||
// parse out the date and time into constants.
|
||||
const today = new Date();
|
||||
const month = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
|
||||
const day = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
|
||||
const year = today.getFullYear() + '';
|
||||
const hour = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
|
||||
const hour12 = (parseInt(hour) + 24) % '12' || '12';
|
||||
const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
|
||||
const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
|
||||
const ampm = parseInt(hour) >= 12 ? 'PM' : 'AM';
|
||||
|
||||
// Replace based on the format.
|
||||
format = format.replace('M', month);
|
||||
format = format.replace('d', day);
|
||||
format = format.replace('y', year);
|
||||
format = format.replace('H', hour);
|
||||
format = format.replace('h', hour12);
|
||||
format = format.replace('m', minute);
|
||||
format = format.replace('s', second);
|
||||
format = format.replace('a', ampm);
|
||||
// Replace based on the format.
|
||||
format = format.replace('M', month);
|
||||
format = format.replace('d', day);
|
||||
format = format.replace('y', year);
|
||||
format = format.replace('H', hour);
|
||||
format = format.replace('h', hour12);
|
||||
format = format.replace('m', minute);
|
||||
format = format.replace('s', second);
|
||||
format = format.replace('a', ampm);
|
||||
|
||||
// Show it in the element.
|
||||
clock.innerHTML = format;
|
||||
});
|
||||
// Show it in the element.
|
||||
clock.innerHTML = format;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
/* Styles */
|
||||
@import './styles/global.scss';
|
||||
@import './styles/media.scss';
|
||||
@import './styles/color.scss';
|
||||
@import './styles/util.scss';
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user