From ade5e427291989d410027f2136cb188beca798ce Mon Sep 17 00:00:00 2001 From: Khris Date: Tue, 26 Nov 2024 12:45:39 -0500 Subject: [PATCH 1/2] Added timezone selector, manual time adjustment, and customizable clock face --- Animated_Clock/watch.css | 90 ++++++++++++++++++++++++++ Animated_Clock/watch.html | 39 +++++++++++ Animated_Clock/watch.js | 133 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 262 insertions(+) create mode 100644 Animated_Clock/watch.js diff --git a/Animated_Clock/watch.css b/Animated_Clock/watch.css index 93022efc..863d9579 100644 --- a/Animated_Clock/watch.css +++ b/Animated_Clock/watch.css @@ -193,3 +193,93 @@ transform: rotate(360deg); } } + +/* New Timezone selector */ +.timezone-selector { + text-align: center; + margin-top: 20px; + font-size: 16px; + color: #dbe7fd; +} + +.timezone-selector select { + padding: 5px 10px; + font-size: 16px; + background: #1e213a; + color: #dbe7fd; + border: 1px solid #cccccc; + border-radius: 5px; +} + +/* Manual Time Adjustment */ +.manual-time { + text-align: center; + margin: 20px 0; + font-size: 16px; + color: #dbe7fd; +} + +.manual-time label { + margin: 0 5px; +} + +.manual-time input { + width: 50px; + padding: 5px; + font-size: 16px; + margin: 0 5px; + background: #1e213a; + color: #dbe7fd; + border: 1px solid #cccccc; + border-radius: 5px; + text-align: center; +} + +.manual-time button { + padding: 5px 15px; + font-size: 16px; + background: #07f3dfb4; + color: #25283D; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.manual-time button:hover { + background: #05c1b2; +} + +/* Customizable Clock Face */ +/* Clock Face Options */ +.clock-face-options { + text-align: center; + margin: 20px 0; + font-size: 16px; + color: #dbe7fd; +} + +.clock-face-options label { + margin: 0 10px; + cursor: pointer; +} + +/* Clock Themes */ +.original #clock { + border-color: #1e213a; + box-shadow: inset 0 5px 25px #00000080, + 0 5px 25px #00000080, + 0 5px 30px #00000080; +} + +.neon #clock { + border-color: #07f3dfb4; + box-shadow: inset 0 5px 15px #07f3df80, + 0 5px 20px #07f3df80; +} + +.negative #clock { + border-color: #c7d8f8; + box-shadow: none; + background: #ffffff; +} + diff --git a/Animated_Clock/watch.html b/Animated_Clock/watch.html index c90f0045..b6eab2b7 100644 --- a/Animated_Clock/watch.html +++ b/Animated_Clock/watch.html @@ -29,5 +29,44 @@
  • + +
    + + +
    + +
    + + + + + + + + + + +
    + +
    + + + +
    + + + diff --git a/Animated_Clock/watch.js b/Animated_Clock/watch.js new file mode 100644 index 00000000..c5a066d2 --- /dev/null +++ b/Animated_Clock/watch.js @@ -0,0 +1,133 @@ +// Timezone Selector +const timezoneSelector = document.getElementById("timezoneSelector"); +const clock = document.getElementById("clock"); + +// Track if the time is manually set +let isManualUpdate = true; +let manualTime = null; // Store manually set time + +function updateClock() { + if (isManualUpdate && manualTime) { + // Use manual time if manual update is active + const { hours, minutes, seconds } = manualTime; + updateClockHands(hours, minutes, seconds); + return; + } + + // Timezone-based updates + const timezone = timezoneSelector.value; + const now = new Date(); + const options = { + timeZone: timezone, + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + hour12: false, + }; + + // Format the time for the selected timezone + const timeString = new Intl.DateTimeFormat("en-US", options).format(now); + const [hours, minutes, seconds] = timeString.split(":"); + + // Update the clock hands + updateClockHands(parseInt(hours), parseInt(minutes), parseInt(seconds)); +} + +function updateClockHands(hours, minutes, seconds) { + const hourHand = document.getElementById("hour"); + const minuteHand = document.getElementById("minute"); + const secondHand = document.getElementById("second"); + + const hourRotation = (hours % 12) * 30 + minutes * 0.5; // 360/12 = 30 degrees per hour + const minuteRotation = minutes * 6; // 360/60 = 6 degrees per minute + const secondRotation = seconds * 6; // 360/60 = 6 degrees per second + + hourHand.style.transform = `rotate(${hourRotation}deg)`; + minuteHand.style.transform = `rotate(${minuteRotation}deg)`; + secondHand.style.transform = `rotate(${secondRotation}deg)`; +} + +// Event listener for timezone changes +timezoneSelector.addEventListener("change", () => { + isManualUpdate = false; // Switch to timezone mode + manualTime = null; // Clear manual time + updateClock(); // Immediately update the clock to the new timezone +}); + +// Initialize the clock +setInterval(updateClock, 1000); + +// Manual Time Adjustment +const hoursInput = document.getElementById("hoursInput"); +const minutesInput = document.getElementById("minutesInput"); +const secondsInput = document.getElementById("secondsInput"); +const setTimeButton = document.getElementById("setTimeButton"); + +function setManualTime() { + const timezone = timezoneSelector.value; + + // Get the manual time inputs + const hours = parseInt(hoursInput.value) || 0; + const minutes = parseInt(minutesInput.value) || 0; + const seconds = parseInt(secondsInput.value) || 0; + + // Create a date object for the manual time + const manualDate = new Date(); + manualDate.setHours(hours); + manualDate.setMinutes(minutes); + manualDate.setSeconds(seconds); + + // Convert manual time to UTC based on the selected timezone + const options = { timeZone: timezone, hour12: false }; + const formatter = new Intl.DateTimeFormat("en-US", options); + const formattedTime = formatter.format(manualDate); + const [adjustedHours, adjustedMinutes, adjustedSeconds] = formattedTime.split(":").map(Number); + + // Store the adjusted manual time + manualTime = { + hours: adjustedHours, + minutes: adjustedMinutes, + seconds: adjustedSeconds, + }; + + // Update the clock hands + updateClockHands(manualTime.hours, manualTime.minutes, manualTime.seconds); + + // Set the manual update flag + isManualUpdate = true; + + // Clear the inputs + hoursInput.value = ''; + minutesInput.value = ''; + secondsInput.value = ''; +} + +// Event listener for manual time adjustment +setTimeButton.addEventListener("click", setManualTime); + +// Customizable Clock Face +const clockFaceOptions = document.querySelectorAll('input[name="clockFace"]'); +const wrapper = document.querySelector('.wrapper'); + +// Function to apply the selected clock face +function applyClockFace() { + const selectedFace = document.querySelector('input[name="clockFace"]:checked').value.toLowerCase(); + + // Remove existing theme classes + wrapper.classList.remove('original', 'neon', 'negative'); + + // Add the selected theme class + wrapper.classList.add(selectedFace); +} + +// Event listeners for clock face changes +clockFaceOptions.forEach(option => { + option.addEventListener('change', applyClockFace); +}); + +// Apply the default clock face on load +applyClockFace(); + + + + From cb95bd8b994c360ed13b2cba4201675b27d89859 Mon Sep 17 00:00:00 2001 From: Khris Date: Wed, 11 Dec 2024 16:20:19 -0500 Subject: [PATCH 2/2] Changes made to thr ball game --- ball game/index.html | 8 +-- ball game/script.js | 120 ++++++++++++++++++++++++++++++------------- ball game/style.css | 46 ++++++++++++++--- 3 files changed, 129 insertions(+), 45 deletions(-) diff --git a/ball game/index.html b/ball game/index.html index 1c092f2e..97414f8e 100644 --- a/ball game/index.html +++ b/ball game/index.html @@ -2,14 +2,16 @@ - Fall game + Fall Game
    - +
    Level: 1
    +
    +
    Score: 0
    - \ No newline at end of file + diff --git a/ball game/script.js b/ball game/script.js index dc16b482..a157dfc1 100644 --- a/ball game/script.js +++ b/ball game/script.js @@ -3,92 +3,140 @@ var game = document.getElementById("game"); var interval; var both = 0; var counter = 0; +var blocksCleared = 0; // Tracks blocks cleared for each level var currentBlocks = []; +let level = 1; // Added Level Variable +let speed = 0.5; // Initial Speed +let score = 0; // Added Score Variable -function moveLeft(){ +function moveLeft() { var left = parseInt(window.getComputedStyle(character).getPropertyValue("left")); - if(left>0){ + if (left > 0) { character.style.left = left - 2 + "px"; } } -function moveRight(){ + +function moveRight() { var left = parseInt(window.getComputedStyle(character).getPropertyValue("left")); - if(left<380){ + if (left < 380) { character.style.left = left + 2 + "px"; } } + document.addEventListener("keydown", event => { - if(both==0){ + if (both == 0) { both++; - if(event.key==="ArrowLeft"){ + if (event.key === "ArrowLeft") { interval = setInterval(moveLeft, 1); } - if(event.key==="ArrowRight"){ + if (event.key === "ArrowRight") { interval = setInterval(moveRight, 1); } } }); + document.addEventListener("keyup", event => { clearInterval(interval); - both=0; + both = 0; }); -var blocks = setInterval(function(){ - var blockLast = document.getElementById("block"+(counter-1)); - var holeLast = document.getElementById("hole"+(counter-1)); - if(counter>0){ +function getBlockColor(level) { + const colors = ["black", "green", "yellow", "blue", "purple", "red"]; + return colors[(level - 1) % colors.length]; // Cycle through colors for each level +} + +// Function to display the level-up message +function showLevelMessage(level) { + const messageDiv = document.getElementById("level-message"); + messageDiv.innerText = `Level ${level} - Blocks are now ${getBlockColor(level)}!`; // Display level and block color + messageDiv.style.display = "block"; // Show the message + setTimeout(() => { + messageDiv.style.display = "none"; // Hide the message after 3 seconds + }, 3000); // 3 seconds +} + +var blocks = setInterval(function () { + var blockLast = document.getElementById("block" + (counter - 1)); + var holeLast = document.getElementById("hole" + (counter - 1)); + if (counter > 0) { var blockLastTop = parseInt(window.getComputedStyle(blockLast).getPropertyValue("top")); var holeLastTop = parseInt(window.getComputedStyle(holeLast).getPropertyValue("top")); } - if(blockLastTop<400||counter==0){ + if (blockLastTop < 400 || counter == 0) { var block = document.createElement("div"); var hole = document.createElement("div"); block.setAttribute("class", "block"); hole.setAttribute("class", "hole"); - block.setAttribute("id", "block"+counter); - hole.setAttribute("id", "hole"+counter); - block.style.top = blockLastTop + 100 + "px"; - hole.style.top = holeLastTop + 100 + "px"; - var random = Math.floor(Math.random() * 360); + block.setAttribute("id", "block" + counter); + hole.setAttribute("id", "hole" + counter); + block.style.top = (blockLastTop || 0) + 100 + "px"; + hole.style.top = (holeLastTop || 0) + 100 + "px"; + block.style.backgroundColor = getBlockColor(level); // Set block color based on level + var random = Math.floor(Math.random() * 360); // Randomize Hole Position hole.style.left = random + "px"; game.appendChild(block); game.appendChild(hole); currentBlocks.push(counter); counter++; + score += 1; // Update Score + document.getElementById("score-display").innerText = "Score: " + score; } var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top")); var characterLeft = parseInt(window.getComputedStyle(character).getPropertyValue("left")); - var drop = 0; - if(characterTop <= 0){ - alert("Game over. Score: "+(counter-9)); + var drop = false; + + if (characterTop <= 0) { + alert("Game over. Score: " + score); clearInterval(blocks); location.reload(); } - for(var i = 0; i < currentBlocks.length;i++){ + + for (var i = 0; i < currentBlocks.length; i++) { let current = currentBlocks[i]; - let iblock = document.getElementById("block"+current); - let ihole = document.getElementById("hole"+current); + let iblock = document.getElementById("block" + current); + let ihole = document.getElementById("hole" + current); let iblockTop = parseFloat(window.getComputedStyle(iblock).getPropertyValue("top")); let iholeLeft = parseFloat(window.getComputedStyle(ihole).getPropertyValue("left")); + + // Move blocks and holes upward iblock.style.top = iblockTop - 0.5 + "px"; ihole.style.top = iblockTop - 0.5 + "px"; - if(iblockTop < -20){ + + // Remove blocks that move off-screen + if (iblockTop < -20) { currentBlocks.shift(); iblock.remove(); ihole.remove(); + blocksCleared++; // Increment cleared blocks } - if(iblockTop-20characterTop){ - drop++; - if(iholeLeft<=characterLeft && iholeLeft+20>=characterLeft){ - drop = 0; - } + + // Check if character is above a block and not in a hole + if ( + iblockTop - 20 < characterTop && + iblockTop > characterTop && + !(iholeLeft <= characterLeft && iholeLeft + 40 >= characterLeft) + ) { + drop = true; + character.style.top = iblockTop - 20 + "px"; // Keep character on the block } } - if(drop==0){ - if(characterTop < 480){ - character.style.top = characterTop + 2 + "px"; + + // Handle gravity when not supported by a block + if (!drop) { + if (characterTop < 480) { + character.style.top = characterTop + 2 + "px"; // Simulate gravity } - }else{ - character.style.top = characterTop - 0.5 + "px"; } -},1); + + // Level Progression Logic + if (blocksCleared >= 50) { // Every 50 blocks cleared + level++; + blocksCleared = 0; // Reset cleared block count for the next level + speed += 0.5; // Increase speed with each level + document.getElementById("level-display").innerText = "Level: " + level; + showLevelMessage(level); // Show level-up message + } +}, 1); + + + diff --git a/ball game/style.css b/ball game/style.css index 2e1b2ba4..88e6a4a3 100644 --- a/ball game/style.css +++ b/ball game/style.css @@ -1,15 +1,20 @@ -*{ +* { padding: 0; margin: 0; } -#game{ +body { + background: white; /* Initial Background Color */ + transition: background 1s ease-in-out; /* Smooth Transition for Levels */ +} +#game { width: 400px; height: 500px; border: 1px solid black; margin: auto; overflow: hidden; + position: relative; } -#character{ +#character { width: 20px; height: 20px; background-color: red; @@ -19,7 +24,7 @@ left: 190px; z-index: 1000000; } -.block{ +.block { width: 400px; height: 20px; background-color: black; @@ -27,11 +32,40 @@ top: 100px; margin-top: -20px; } -.hole{ +.hole { width: 40px; height: 20px; background-color: white; position: relative; top: 100px; margin-top: -20px; -} \ No newline at end of file +} +#level-display { + text-align: center; + font-size: 20px; + font-weight: bold; + margin-bottom: 10px; + color: black; +} +#score-display { + text-align: center; + font-size: 16px; + margin-top: 5px; + color: black; +} +#level-message { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + font-weight: bold; + color: white; + background-color: rgba(0, 0, 0, 0.8); + padding: 10px 20px; + border-radius: 10px; + display: none; /* Hidden by default */ + z-index: 999; + text-align: center; +} +