writing a different code for rolling the dice

Author: tiwavaldese

projects/dice-roll-simulator/index.js

@@ -1,3 +1,4 @@
+
 const buttonEl = document.getElementById("roll-button");
 
 const diceEl = document.getElementById("dice");
@@ -51,3 +52,44 @@ buttonEl.addEventListener("click", () => {
     rollDice();
   }, 1000);
 });
+
+
+
+
+// // Get references to DOM elements
+// let dice = document.querySelector('#dice');
+// let rollBtn = document.querySelector('#roll-button')
+// let rollHis = document.querySelector('#roll-history')
+
+// //Function to generate random numbers between 1 and 6
+// function rollDice(){
+//   let num = Math.floor(Math.random() * 6) + 1;
+//   return num;
+// }
+// console.log(rollDice())
+// // // Add event listener to the button
+// rollBtn.addEventListener('click', function(){
+ 
+// //Roll the dice
+// let rollResult = rollDice()
+
+// //Update the dice display with rollResult
+// // string.fromCodePoint is the graphic representation of the dice face which convert the unicode
+// //unicode 9855 represent face 1
+// dice.textContent = String.fromCodePoint(9855 + rollResult);
+
+//   // Create a new list item to display the roll result
+// let newRollItem = document.createElement('li')
+// newRollItem.textContent = `Roll ${rollHis.childElementCount + 1}: ${dice.textContent}`
+
+// // Add the roll item to the roll history
+// rollHis.appendChild(newRollItem)
+
+// // Add roll animation class
+// dice.classList.add("roll-animation");
+//  // Remove roll animation class after 1 second and roll the dice again
+// setTimeout(() => {
+//   dice.classList.remove("roll-animation");
+//   rollDice();
+// }, 1000);
+// })

projects/dice-roll-simulator/style.css

@@ -11,9 +11,10 @@ h1 {
 
 .dice {
   font-size: 7rem;
-  margin: 5px;
+  margin: 5px ;
   animation-duration: 1s;
   animation-fill-mode: forwards;
+  color: red;
 }
 
 .roll-animation {

projects/sticky-navbar/index.html

@@ -20,7 +20,7 @@
     <div class="top-container">
       <h1>Welcome to our websiteh1>
     div>
-    <div class="bottom-container">
+    <div class="btm-container">
       <p class="text">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tempore
         explicabo veritatis dignissimos accusantium nostrum voluptatum qui

projects/sticky-navbar/index.js

@@ -1,18 +1,29 @@
-const navbarEl = document.querySelector(".navbar");
+// Select the element with the class "navbar" and store it in the variable navbarEl
+let navbarEl = document.querySelector('.navbar');
 
-const bottomContainerEl = document.querySelector(".bottom-container");
+// Select the element with the class "bottom-container" and store it in the variable bottomContainerEl
+let bottomContainerEl = document.querySelector('.btm-container')
 
+// Log the height of the navbar element to the console
 console.log(navbarEl.offsetHeight);
 
+// Log the offset top position of the bottom container element to the console
 console.log(bottomContainerEl.offsetTop);
 
-window.addEventListener("scroll", () => {
-  if (
-    window.scrollY >
-    bottomContainerEl.offsetTop - navbarEl.offsetHeight - 50
-  ) {
-    navbarEl.classList.add("active");
-  } else {
-    navbarEl.classList.remove("active");
-  }
-});
+// Add a scroll event listener to the window
+window.addEventListener('scroll', () =>{
+
+
+  // Check if the vertical scroll position is greater than the offset top position of the bottom container element
+  // minus the height of the navbar element minus 50 pixels
+  if(window.scrollY >
+    bottomContainerEl.offsetTop - navbarEl.offsetHeight - 50 ){
+
+    // If the condition is true, add the class "active" to the navbar element
+    navbarEl.classList.add('active')
+    }
+    // If the condition is false, remove the class "active" from the navbar element
+    else{
+      navbarEl.classList.remove('active')
+    }
+})