add some feature in page

app.js

@@ -2,6 +2,10 @@ const hamburger = document.querySelector('.header .nav-bar .nav-list .hamburger'
 const mobile_menu = document.querySelector('.header .nav-bar .nav-list ul');
 const menu_item = document.querySelectorAll('.header .nav-bar .nav-list ul li a');
 const header = document.querySelector('.header.container');
+let buttonOfuP = document.getElementById('buttonOfuP')
+let date = document.getElementById('date')
+
+
 
 hamburger.addEventListener('click', () => {
 	hamburger.classList.toggle('active');
@@ -23,3 +27,24 @@ menu_item.forEach((item) => {
 		mobile_menu.classList.toggle('active');
 	});
 });
+
+
+window.addEventListener("DOMContentLoaded",
+	function () {
+		document.addEventListener('scroll', () => {
+			if (window.scrollY == 0)
+				buttonOfuP.classList.add("hideButtonOfuP")
+			else
+				buttonOfuP.classList.remove("hideButtonOfuP")
+		})
+		buttonOfuP.addEventListener('click', () => {
+			window.scroll(0, 0)
+		})
+	});
+
+
+window.addEventListener('DOMContentLoaded', () => {
+	newDate = new Date
+	date.innerText = newDate.getFullYear() 
+})
+

index.html

@@ -12,7 +12,10 @@
   <!-- Header -->
   <section id="header">
     <div class="header container">
-      <div class="nav-bar">
+      <div class="nav-bar"> 
+        <div id="myPhoto">
+          <img src="img/myHpoto.png" alt="image">
+        </div>
         <div class="brand">
           <a href="#hero">
             <h1><span>S</span>haif <span>A</span>rfan</h1>
@@ -35,7 +38,7 @@ <h1><span>S</span>haif <span>A</span>rfan</h1>
   </section>
   <!-- End Header -->
 
-
+  
   <!-- Hero Section  -->
   <section id="hero">
     <div class="hero container">
@@ -231,17 +234,20 @@ <h2>Your Complete Web Solution</h2>
         <div class="social-item">
           <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/instagram-new.png" /></a>
         </div>
-        <div class="social-item">
-          <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/twitter.png" /></a>
-        </div>
         <div class="social-item">
           <a href="#"><img src="https://img.icons8.com/bubbles/100/000000/behance.png" /></a>
         </div>
       </div>
-      <p>Copyright © 2020 Arfan. All rights reserved</p>
+      <p>Copyright © <span id="date"></span> Arfan. All rights reserved</p>
     </div>
   </section>
   <!-- End Footer -->
+
+  <!-- button for go up -->
+  <div class="hideButtonOfuP" id="buttonOfuP">
+    <img src="img/go-up.png" alt="image">
+  </div>
+  <!-- button for go up -->
   <script src="./app.js"></script>
 </body>
 

style.css

@@ -198,6 +198,18 @@ p {
 }
 /* End Header section */
 
+/* add my photo */
+#myPhoto{
+	position: fixed;
+    height: 60px;
+    width: 41px;
+    top: 0px;
+    left: 0px;
+    z-index: 1000;
+    padding-right: 6px;
+}
+/* and small photo*/
+
 /* Hero Section */
 #hero {
 	background-image: url(./img/hero-bg.png);
@@ -701,3 +713,18 @@ p {
 	}
 }
 /* End  Media Query For Desktop */
+
+/* Button for go up */
+#buttonOfuP{
+	height: 50px;
+    width: 50px;
+    position: fixed;
+    bottom: 0px;
+    right: 0px;
+	z-index: 100;
+}
+
+.hideButtonOfuP{
+	visibility: hidden;
+}
+/* Buttan for go up */