My first static web project without any external js

Question

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>

Answer 1

It's good web project for first time, but in your HTML use semantic HTML.

Also use section tags, header tags, nav tags and main tags.

This image can help you for layout:

layout

Answer 2

One of the things you should consider is user experience. You are saving the light or dark mode to Session Storage. Everytime the user visits your page he will have to select the mode again and again. If you save it in local storage instead, that will persist even if the user comes back another day. Consider that change. You want the user to do as less work as possible to enjoy the experience you provide.

• Safnas: Thanks. But after all the thought, I have decided to come up with the current time based switch approach as well for dark mode. So user will get the mode during his entire session and if he comes the same day during night, he will get dark mode as well, else if day it will be day mode. After all the thoughts and feedback from my wife, I used session storage and time based default mode..anyways thanks for your time. And yes, user experience IS my top priority.
• John: that's even cooler, but the concept applies anyway to other stuff