Skip to content
Snippets Groups Projects
Commit 2d0721ca authored by Kevin Dutier's avatar Kevin Dutier
Browse files

cleaned and commented code

parent fb0a410b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
index.html
+ 15
− 3
View file @ 2d0721ca
......@@ -5,14 +5,26 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="icon" type="image/x-icon" href="./favicon.ico" />
<title>Homepage</title>
</head>
<!-- NOTE:
this page is fully customizable, feel free to edit/add/remove any link
to change a link, simply replace the ' href="..." ' attribute, and the name of the link
you can also add the attribute ' target="_blank" ' if you prefer the link to open in a new tab
example:
<li class="link">
<a target="_blank" href="your url here">name of your link</a>
</li>
-->
<body>
<div class="main">
<span class="datetime"></span>
<span class="dateTime"></span>
<div class="main-container">
<!-- first category -->
<div class="link-container">
<h1 class="title" style="color: #820000">music</h1>
<ul class="list">
......
script.js
+ 28
− 5
View file @ 2d0721ca
let dt = new Date();
let time = document.querySelector(".datetime");
// NOTE: the javascript displays and update time and date (every 5 seconds)
let initialDt = new Date(); // intitial time, displayed when the page is first loaded
let dateTime = document.querySelector(".dateTime");
// formatting time: displays it as "DD.MM.YYYY - HH:mm"
// I chose not to install any dependency to keep the file lightweight, but you can install moment if you want to edit the time/date more easily
dateTime.innerHTML =
("0" + initialDt.getDate()).slice(-2) +
"." +
("0" + (initialDt.getMonth() + 1)).slice(-2) +
"." +
initialDt.getFullYear() +
"&nbsp; - &nbsp;" +
("0" + initialDt.getHours()).slice(-2) +
":" +
("0" + initialDt.getMinutes()).slice(-2);
time.innerHTML = (("0"+dt.getDate()).slice(-2)) +"."+ (("0"+(dt.getMonth()+1)).slice(-2)) +"."+ (dt.getFullYear()) +"&nbsp; - &nbsp;"+ (("0"+dt.getHours()).slice(-2)) +":"+ (("0"+dt.getMinutes()).slice(-2));
// updates time every 5 seconds
setInterval(() => {
let d = new Date();
time.innerHTML = (("0"+d.getDate()).slice(-2)) +"."+ (("0"+(d.getMonth()+1)).slice(-2)) +"."+ (d.getFullYear()) +"&nbsp; - &nbsp;"+ (("0"+d.getHours()).slice(-2)) +":"+ (("0"+d.getMinutes()).slice(-2));
let updatedDt = new Date();
dateTime.innerHTML =
("0" + updatedDt.getDate()).slice(-2) +
"." +
("0" + (updatedDt.getMonth() + 1)).slice(-2) +
"." +
updatedDt.getFullYear() +
"&nbsp; - &nbsp;" +
("0" + updatedDt.getHours()).slice(-2) +
":" +
("0" + updatedDt.getMinutes()).slice(-2);
}, 5_000);
style.css
+ 18
− 10
View file @ 2d0721ca
......@@ -4,13 +4,14 @@
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Courier New", Courier, monospace;
font-family: "Courier New", Courier, monospace; /* text font*/
}
body {
/* background color of the whole page */
background-color: #080808;
/* prevent text select */
/* prevents text select */
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
......@@ -20,24 +21,26 @@ h1,
ul,
li,
p {
/* color of the text (links and time) */
color: #f7f7f7;
}
ul {
list-style-type: none; /* removes bullet points */
/* removes default bullet points */
list-style-type: none;
}
a {
/* removes default link decoration (underline and blue color) */
color: inherit;
text-decoration: none;
cursor: default;
}
a:hover {
/* color: #1d81b2; */
/* color: #FEC260; */
color: #D36B00;
}
/* color shown when user hovers on a link */
color: #d36b00;
}
.main {
height: 100vh;
......@@ -47,24 +50,28 @@ a:hover {
}
.main-container {
/* main container that encompasses all of the categories */
width: 80vw;
min-width: 800px;
display: flex;
justify-content: center;
z-index: 1;
z-index: 1; /* displays text above the image, if they ever overlap */
}
.link-container {
/* container used by each individual category */
margin: 0 26px;
}
.title {
/* category title */
font-size: 20px;
font-weight: 400;
margin-bottom: 0.15rem;
}
.datetime {
.dateTime {
/* displays date and time at top right corner */
color: #f7f7f7;
position: fixed;
font-size: 18px;
......@@ -73,8 +80,9 @@ a:hover {
}
.image {
/* displays image at bottom right corner */
position: fixed;
bottom: 0;
right: 0;
z-index: 0;
z-index: 0; /* displays image below text, if they ever overlap */
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment