From dd051ceb8faa9b071aa1c3f19e3b68105bed844e Mon Sep 17 00:00:00 2001 From: tiwavaldese Date: Tue, 26 Mar 2024 15:44:53 +0100 Subject: [PATCH 1/3] writing a different code for rolling the dice --- projects/dice-roll-simulator/index.js | 42 ++++++++++++++++++++++++++ projects/dice-roll-simulator/style.css | 3 +- projects/sticky-navbar/index.html | 2 +- projects/sticky-navbar/index.js | 35 +++++++++++++-------- 4 files changed, 68 insertions(+), 14 deletions(-) diff --git a/projects/dice-roll-simulator/index.js b/projects/dice-roll-simulator/index.js index 8deecde..a66e301 100644 --- a/projects/dice-roll-simulator/index.js +++ b/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); +// }) diff --git a/projects/dice-roll-simulator/style.css b/projects/dice-roll-simulator/style.css index 439ab24..71ecd30 100644 --- a/projects/dice-roll-simulator/style.css +++ b/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 { diff --git a/projects/sticky-navbar/index.html b/projects/sticky-navbar/index.html index 93e26c9..c1e36aa 100644 --- a/projects/sticky-navbar/index.html +++ b/projects/sticky-navbar/index.html @@ -20,7 +20,7 @@

Welcome to our website

-
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tempore explicabo veritatis dignissimos accusantium nostrum voluptatum qui diff --git a/projects/sticky-navbar/index.js b/projects/sticky-navbar/index.js index 49830d5..e6f6f91 100644 --- a/projects/sticky-navbar/index.js +++ b/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') + } +}) \ No newline at end of file From 7f32e1087c00b430c39d626da6483b9297b55340 Mon Sep 17 00:00:00 2001 From: tiwavaldese Date: Tue, 9 Apr 2024 15:55:40 +0100 Subject: [PATCH 2/3] add comment on progress step file --- projects/step-progress-bar/index.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/projects/step-progress-bar/index.js b/projects/step-progress-bar/index.js index 23b3511..9d8107a 100644 --- a/projects/step-progress-bar/index.js +++ b/projects/step-progress-bar/index.js @@ -2,10 +2,10 @@ const nextEl = document.getElementById("next"); const prevEl = document.getElementById("prev"); const progressEl = document.querySelector(".progress-bar-front"); - +// select all the steps const stepsEl = document.querySelectorAll(".step"); - -let currentChecked = 1; +//Current step the user is on +let currentChecked = 0; nextEl.addEventListener("click", () => { currentChecked++; @@ -24,6 +24,8 @@ prevEl.addEventListener("click", () => { }); function updateStepProgress() { + //if the index of the step is less than currentChecked + //add a check and some labels to mark complete stepsEl.forEach((stepEl, idx) => { if (idx < currentChecked) { stepEl.classList.add("checked"); @@ -34,10 +36,14 @@ function updateStepProgress() { ? "Start" : idx === stepsEl.length - 1 ? "Final" - : "Step " + idx + : "Step " + idx // step 1, step 2, step 3 } `; - } else { + + } + //if the index of the step is greater than currentChecked + //remove the check and include a times icon. + else { stepEl.classList.remove("checked"); stepEl.innerHTML = ` @@ -46,7 +52,9 @@ function updateStepProgress() { }); const checkedNumber = document.querySelectorAll(".checked"); - +//calculate the width base on the ratio of the +//completed steps(checkedNumber) to total steps(stepEl) +// multiple by 100 to convert the value to % progressEl.style.width = ((checkedNumber.length - 1) / (stepsEl.length - 1)) * 100 + "%"; From 719c62ec372c70d8e55c7b7abb980d6767a6548f Mon Sep 17 00:00:00 2001 From: tiwavaldese Date: Tue, 23 Apr 2024 14:19:04 +0100 Subject: [PATCH 3/3] add comment in the profile statistics project --- projects/profile-statistics/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/projects/profile-statistics/index.js b/projects/profile-statistics/index.js index 29a8da8..8d98403 100644 --- a/projects/profile-statistics/index.js +++ b/projects/profile-statistics/index.js @@ -1,12 +1,14 @@ const countersEl = document.querySelectorAll(".counter"); - +//Iterate over each elements in the counter countersEl.forEach((counterEl) => { + //Initial value of the counter to zero counterEl.innerText = "0"; incrementCounter(); function incrementCounter() { let currentNum = +counterEl.innerText; const dataCeil = counterEl.getAttribute("data-ceil"); const increment = dataCeil / 15; + //Math.ceil()= round to the nearest integer currentNum = Math.ceil(currentNum + increment); if (currentNum < dataCeil) {