This is my first static web project made from scratch without any external js libraries.
please review and let me know the improvement areas.
1, are my js functions upto mark? any performance issues are there? 2, are css styles properly refactored? 3, are html tags used fine? etc..
/* dark mode code */
const darkModeButtonId = 'dark-mode-button';
function darkMode() {
let button = document.getElementById(darkModeButtonId);
document.body.className = 'body-dark';
button.innerHTML = '🌞';
button.title = 'lights on';
}
function lightMode() {
let button = document.getElementById(darkModeButtonId);
document.body.className = 'body-light';
button.innerHTML = '🌙';
button.title = 'dark mode';
}
function toggleDarkMode() {
if (document.body.className == 'body-light') {
darkMode()
//setModeInSession('dark');
} else {
lightMode()
//setModeInSession('light');
}
}
// to save the state of the mode to appear across pages in current browser session
function setModeInSession(value) {
if (sessionStorage.getItem('mode') != value) {
sessionStorage.setItem('mode', value);
}
}
function getModeFromSession() {
return sessionStorage.getItem('mode');
}
window.onload = function switchMode() {
//if (!(getModeFromSession() === null)) { //get the mode and apply for current page
//if (getModeFromSession() == 'dark') {
//darkMode()
//} else {
// lightMode()
// }
// } else { //if no mode in session apply dark mode based on current time
let today = new Date()
let time = today.getHours()
if (time < 6 || time > 20) {
darkMode()
//}
}
}
/* dark mode code - ends */
/* scroll to anchor */
let anchorlinks = document.querySelectorAll('a[href^="#"]')
for (let item of anchorlinks) {
item.addEventListener('click', (e) => {
let hashval = item.getAttribute('href')
let target = document.querySelector(hashval)
target.scrollIntoView({
behavior: 'smooth'
//block: 'start',
//inline:'nearest'
})
history.pushState(null, null, hashval) // for url updation
e.preventDefault() //needed for scroll
})
}
/* scroll to anchor - ends */
/* go to top button */
var prevScrollpos = window.pageYOffset;
const navigationBarId = 'navigation';
const footerId = 'footer';
window.onscroll = function () {
let currentScrollPos = window.pageYOffset;
if (currentScrollPos > 0) {
if (prevScrollpos > currentScrollPos) {
document.getElementById(navigationBarId).style.top = "0";
document.getElementById(footerId).style.bottom = "0";
document.getElementById("shareBtn").style.top = "85px"
document.getElementById("sharelinks").style.top = "115px"
} else {
document.getElementById(navigationBarId).style.top = "-70px";
document.getElementById(footerId).style.bottom = "-70px";
document.getElementById("shareBtn").style.top = "10px"
document.getElementById("sharelinks").style.top = "40px"
}
prevScrollpos = currentScrollPos;
}
scrollFunction();
}
// When the user scrolls down 20px from the top of the document, show the button
//window.onscroll = function() {scrollFunction()};
function scrollFunction() {
let goToTopButton = document.getElementById("goToTopBtn");
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
goToTopButton.style.display = "block";
} else {
goToTopButton.style.display = "none"; // to disappear once scroll ends
}
}
// When the user clicks on the button, scroll to the top of the document
function goToTopFunction() {
scrollToTop();
//document.body.scrollTop = 0; // For Safari
// document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) { // check if page reached top or not
window.requestAnimationFrame(scrollToTop); // for smooth animation
window.scrollTo(0, c - c / 8);
}
};
/* go to top button - ends*/
/* share button - starts*/
// var shareBtn = document.getElementById('shareBtn');
// if (window.matchMedia('(min-width: 1000px)')) {
// shareBtn.addEventListener('mouseover', (e) => {
// let sharelinks = document.getElementById("sharelinks");
// if (sharelinks.style.display == 'none' || sharelinks.style.display == '') {
// sharelinks.style.display = 'flex';
// } else {
// sharelinks.style.display = 'none';
// }
// });
// }
function share() {
let sharelinks = document.getElementById("sharelinks");
if (sharelinks.style.display == 'none' || sharelinks.style.display == '') {
sharelinks.style.display = 'flex';
} else {
sharelinks.style.display = 'none';
}
}
function buildURI(item) {
if (item.href == 'mailto:?') {
subject = 'subject=' + document.getElementById('header').innerText;
body = "&body=Check out at this url : " + window.location.href;
item.setAttribute('href', item.href + subject + body);
} else {
item.setAttribute('href', item.href + window.location.href);
}
}
/* share button - ends*/body {
max-width: 850px;
text-align: left;
margin: auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
body,
a,
#navigation,
#footer {
transition: 0.4s;
}
.body-dark {
--dark-background-color: #202020;
--dark-text-color: #b3b9c5;
background-color: var(--dark-background-color);
color: var(--dark-text-color);
}
.body-dark h3 {
background-color: var(--dark-background-color);
color: var(--dark-text-color);
}
.body-dark a {
color: var(--dark-text-color);
}
.body-dark #navigation {
background-color: var(--dark-background-color);
}
.body-dark #footer {
background-color: var(--dark-background-color);
}
.body-light {
--light-background-color: #f8f9fa;
--light-text-color: black;
background-color: var(--light-background-color);
color: var(--light-text-color);
}
.body-light h3 {
background-color: var(--light-background-color);
color: var(--light-text-color);
}
.body-light a {
color: var(--light-text-color);
}
.body-light #navigation {
background-color: var(--light-background-color);
}
.body-light #footer {
background-color: var(--light-background-color);
}
/* navigation - start */
#navigation {
position: fixed;
margin: auto;
width: 100%;
max-width: 850px;
padding: 20px;
top: 0;
opacity: 0.9;
z-index: 1;
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
#navigation:hover{
opacity: 1;
}
#brand {
display: flex;
align-items: center;
flex-direction: row;
}
#navbrand {
text-decoration: none;
}
#name {
font-size: 23px;
padding-left: 20px;
display: inline;
text-decoration: none;
}
@media only screen and (max-width: 620px) {
#name {
display: none;
}
}
.navItems {
padding-right: 30px;
list-style: none;
}
.navItems a {
text-decoration: none;
padding: 5px;
}
.navItems a:hover {
color: steelblue;
text-decoration: none;
}
/* dark/light mode button */
#dark-mode-button {
background-color: transparent;
border: none;
outline: 0;
cursor: pointer;
}
/* navigation - end */
/* navigator start */
#navigator a {
text-decoration: none;
}
#navigator a:hover {
text-decoration: none;
color: steelblue;
}
/* navigator end */
#header {
margin-top: 70px;
}
h2 {
padding: 10px 20px 0px;
}
.text {
text-indent: 50px;
padding: 0 20px;
}
h3 {
margin: auto;
padding: 10px 20px;
position: -webkit-sticky;
position: sticky;
top: 0px;
opacity: 0.9;
transition: 0.4s;
}
#footer {
position: fixed;
padding: 10px 0;
z-index: 1;
opacity: 0.8;
bottom: 0;
width: 100%;
max-width: 850px;
position: -webkit-sticky;
position: sticky;
display: flex;
align-items: center;
justify-content: center;
}
.icon {
text-decoration: none;
padding: 0 10px;
cursor: pointer;
}
#footer:hover{
opacity: 1;
}
.body-dark .icon {
filter: invert(100%);
}
/* new code add below*/
/* scroll to top button */
#goToTopBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 50px; /* Place the button at the bottom of the page */
right: 15px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: steelblue; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 25px; /* Rounded corners */
font-size: 18px; /* Increase font size */
opacity: 0.7;
}
@media (min-width: 1100px) {
#goToTopBtn {
bottom: 50px; /* Place the button at the bottom of the page */
right: 250px;
}
}
#goToTopBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}
/* scroll to top button ends */
/* share button code starts*/
#shareBtn{
position: fixed;
top: 85px; /* Place the button at the bottom of the page */
right: 22.5px; /* Place the button 30px from the right */
z-index: 99;
opacity: 0.7;
background-color: transparent;
border: none;
padding: 0;
outline: 0;
}
.body-dark #shareBtn {
filter: invert(100%);
}
@media (min-width: 1100px) {
#shareBtn {
right: 250px;
}
}
#shareBtn:hover{
cursor: pointer;
opacity: 1;
}
#sharelinks{
position: fixed;
display:none;
top: 115px; /* Place the button at the bottom of the page */
right: 22.5px; /* Place the button 30px from the right */
z-index: 99;
flex-direction: column;
align-items: center;
justify-content: space-between;
opacity: 0.7;
/* animate down */
}
#sharelinks:hover{
opacity: 1;
}
.body-dark #sharelinks {
filter: invert(100%);
}
.sharelink{
padding: 5px 0;
}
@media (min-width: 1100px) {
#sharelinks {
right: 250px;
}
}
/* share button code ends*/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Author</title>
<link rel="stylesheet" href="style.css">
<script src="darkMode.js" defer></script>
</head>
<body id="body" class="body-light">
<div id="navigation">
<div id="brand">
<a id="navbrand" href="index.html">😎</a>
<a id="name" href="index.html"><strong>Author</strong></a>
</div>
<div class="navItems">
<a href="index.html">Home</a>
<a href="index.html">About</a>
<a href="mailto:[email protected]">Contact Me</a>
<button onclick="toggleDarkMode()" title="dark mode" id="dark-mode-button">🌙</button>
</div>
</div>
<div id="header">
<h2>HTML Tutorial
</h2>
</div>
<nav id="navigator">
<ol>
<li>
<a href="#what">What is html?</a>
</li>
<li>
<a href="#how">How is css?</a>
</li>
<li>
<a href="#when">What is css?</a>
</li>
</ol>
</nav>
<button onclick="goToTopFunction()" id="goToTopBtn" title="Go to top">Top</button>
<button onclick="share()" id="shareBtn" title="Share to"><img src="share.png"></button>
<div id="sharelinks">
<a onclick="buildURI(this)" href="https://www.facebook.com/sharer/sharer.php?u=" class="sharelink"
target="_blank" title="Facebook"><img src="facebook32.png" /></a>
<a onclick="buildURI(this)" href="https://wa.me/whatsappphonenumber/?text=" class="sharelink" target="_blank"
title="WhatsApp"><img src="whatsapp24.png"></a>
<a onclick="buildURI(this)" href="mailto:?" class="sharelink" target="_blank"
title="Mail"><img src="envelope.png"></a>
</div>
<div class="content">
<h3 id="what">What is html?</h3>
<article class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi dolores doloribus et
illum
necessitatibus aliquid fugit dignissimos similique? Enim consequatur iste eius eveniet sint adipisci
deserunt
eaque? Adipisci, veniam veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi
dolores
doloribus et illum
necessitatibus aliquid fugit dignissimos similique? Enim consequatur iste eius eveniet sint adipisci
deserunt
eaque? Adipisci, veniam veritatis! </article>
</div>
<div class="content">
<h3 id="how">how is css?</h3>
<article class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi dolores doloribus et
illum
necessitatibus aliquid fugit dignissimos similique? Enim consequatur iste eius eveniet sint adipisci
deserunt
eaque? Adipisci, veniam veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi
dolores
doloribus et illum
necessitatibus aliquid fugit dignissimos similique? Enim consequatur iste eius eveniet sint adipisci
deserunt
eaque? Adipisci, veniam veritatis! </article>
<article class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium veniam sed esse ipsa,
est quas, suscipit
itaque quae tempore eaque delectus ullam ea sit doloremque numquam dolores totam, blanditiis corporis
consequuntur! Esse, doloribus incidunt at odio sequi neque totam nisi, soluta animi magnam optio nihil
perspiciatis. Quod consequuntur rerum ipsam aspernatur. Ipsam quia eius minima nemo. Aliquam nihil
commodi,
dolor necessitatibus cupiditate recusandae sunt animi autem nam officiis perferendis itaque esse debitis
amet, fuga accusamus dolorem minima veniam, pariatur cumque! Rerum possimus eveniet exercitationem
commodi
libero labore aut, facilis voluptatem quam? Facere, eos, harum nemo dolorem nulla minima quas ipsum amet
sed
deserunt cupiditate quisquam pariatur ratione inventore, perspiciatis totam laborum excepturi modi?
Dignissimos veniam, similique sunt debitis quibusdam nesciunt quo dolorum fuga velit. Dolores eum vero
sed,
officiis, earum possimus consequatur voluptas enim illo nisi reprehenderit cupiditate. Optio repellat
voluptatem consequatur corporis eveniet quam quos cupiditate dolorem, libero provident, rerum qui
assumenda
velit repudiandae temporibus? Asperiores eum dolorem distinctio reprehenderit? Voluptatum eaque eius
ducimus
quam distinctio! Deserunt doloremque sint commodi ipsam at atque, pariatur vel totam, quas aliquam
voluptatibus nobis corrupti, repellat cumque aut quaerat libero quisquam repellendus quo dignissimos
consectetur. Quia hic inventore, nesciunt iusto rem beatae esse!</article>
</div>
<div class="content">
<h3 id="when">what is css?</h3>
<article class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi dolores doloribus et
illum
necessitatibus aliquid fugit dignissimos similique? Enim consequatur iste eius eveniet sint adipisci
deserunt
eaque? Adipisci, veniam veritatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi
dolores
doloribus et illum
necessitatibus aliquid fugit dignissimos similique? Enim consequatur iste eius eveniet sint adipisci
deserunt
eaque? Adipisci, veniam veritatis! </article>
<article class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium veniam sed esse ipsa,
est quas, suscipit
itaque quae tempore eaque delectus ullam ea sit doloremque numquam dolores totam, blanditiis corporis
consequuntur! Esse, doloribus incidunt at odio sequi neque totam nisi, soluta animi magnam optio nihil
perspiciatis. Quod consequuntur rerum ipsam aspernatur. Ipsam quia eius minima nemo. Aliquam nihil
commodi,
dolor necessitatibus cupiditate recusandae sunt animi autem nam officiis perferendis itaque esse debitis
amet, fuga accusamus dolorem minima veniam, pariatur cumque! Rerum possimus eveniet exercitationem
commodi
libero labore aut, facilis voluptatem quam? Facere, eos, harum nemo dolorem nulla minima quas ipsum amet
sed
deserunt cupiditate quisquam pariatur ratione inventore, perspiciatis totam laborum excepturi modi?
Dignissimos veniam, similique sunt debitis quibusdam nesciunt quo dolorum fuga velit. Dolores eum vero
sed,
officiis, earum possimus consequatur voluptas enim illo nisi reprehenderit cupiditate. Optio repellat
voluptatem consequatur corporis eveniet quam quos cupiditate dolorem, libero provident, rerum qui
assumenda
velit repudiandae temporibus? Asperiores eum dolorem distinctio reprehenderit? Voluptatum eaque eius
ducimus
quam distinctio! Deserunt doloremque sint commodi ipsam at atque, pariatur vel totam, quas aliquam
voluptatibus nobis corrupti, repellat cumque aut quaerat libero quisquam repellendus quo dignissimos
consectetur. Quia hic inventore, nesciunt iusto rem beatae esse!</article>
</div>
<div id="footer" class="footer">
<a href="https://www.facebook.com/" class="icon" target="_blank" title="facebook"><img src="facebook32.png"/></a>
<a href="https://www.instagram.com/" class="icon" target="_blank" title="instagram"><img src="instagram32.png"/></a>
<a href="https://www.twitter.com/" class="icon" target="_blank" title="twitter"><img src="twitter32.png"/></a>
<a href="https://www.github.com/" class="icon" target="_blank" title="github"><img src="github32.png"/></a>
<a href="https://www.linkedin.com/" class="icon" target="_blank" title="linkedin"><img src="linkedin32.png"/></a>
<a href="mailto:[email protected]" class="icon" target="_blank" title="Mail"><img src="envelope.png"/></a>
</div>
</body>
</html>
