diff --git a/Color-Flipper/index.html b/Color-Flipper/index.html new file mode 100644 index 0000000..18a38e6 --- /dev/null +++ b/Color-Flipper/index.html @@ -0,0 +1,18 @@ + + + + + + 03 - Colour Flipper + + + + +
+

+ Background: #fffff +

+ +
+ + \ No newline at end of file diff --git a/Color-Flipper/script.js b/Color-Flipper/script.js new file mode 100644 index 0000000..2954995 --- /dev/null +++ b/Color-Flipper/script.js @@ -0,0 +1,40 @@ +const newColourBtnElement = document.getElementById( + 'new-colour-button' +); + +const currentColourElement = document.getElementById( + 'current-colour' +); +// 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F +const hexValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', +]; + +function getRandomHexValue() { + const randomIndexPosition = Math.floor( + Math.random() * hexValues.length + ); + + const randomHexValue = hexValues[randomIndexPosition]; + + return randomHexValue; +} + +function getRandomHexString(stringLength) { + let hexString = ''; + for (let i = 0; i < stringLength; i++) { + hexString += getRandomHexValue(); + } + + return hexString; +} + +newColourBtnElement.addEventListener('click', function () { + const randomHexString = '#' + getRandomHexString(6); + + document.body.style.setProperty( + 'background-color', + randomHexString + ); + + currentColourElement.textContent = randomHexString; +}); \ No newline at end of file diff --git a/Color-Flipper/styles.css b/Color-Flipper/styles.css new file mode 100644 index 0000000..b92cfc7 --- /dev/null +++ b/Color-Flipper/styles.css @@ -0,0 +1,32 @@ +body { + transition: background-color 0.5s; +} + +section#colour-display { + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + margin: 100px auto; + width: 50%; + background-color: white; + box-shadow: 0 0 30px rgba(0,0,0, 0.5); + padding: 4rem; + border-radius: .5rem; +} + +section#colour-display h1 { + font-weight: 900; +} + +section#colour-display #new-colour-button { + width: 100%; + background-color: black; + color: white; + font-weight: 900; + padding: 1rem; + border: none; + font-size: 1rem; + cursor: pointer; +} + +section#colour-display #new-colour-button:hover { + background-color: #454444; +} \ No newline at end of file diff --git a/Countdown-timer/index.html b/Countdown-timer/index.html new file mode 100644 index 0000000..eca754c --- /dev/null +++ b/Countdown-timer/index.html @@ -0,0 +1,40 @@ + + + + + + + 09 - Countdown Timer + + + + + +

CountDown Timer

+
+ +
+ + + + + + + + + + +
+ +
+

+
+
+
+

+
+
+ + + + \ No newline at end of file diff --git a/Countdown-timer/script.js b/Countdown-timer/script.js new file mode 100644 index 0000000..1470b56 --- /dev/null +++ b/Countdown-timer/script.js @@ -0,0 +1,59 @@ +const startTimerButtonElement = document.getElementById('startTimer'); +const hoursInputElement = document.getElementById('hoursInput'); +const minutesInputElement = document.getElementById('minutesInput'); +const secondsInputElement = document.getElementById('secondsInput'); + +const hoursOutputElement = document.getElementById('hoursOutput'); +const minutesOutputElement = document.getElementById('minutesOutput'); +const secondsOutputElement = document.getElementById('secondsOutput'); + +let targetTime; +let timerInterval; + + +const updateTimer = () => { + if (targetTime) { + const differenceInSeconds = Math.floor(targetTime - Date.now()) / 1000; + if (differenceInSeconds < 1) { + clearInterval(timerInterval); + } + + const hours = Math.floor(differenceInSeconds / 3600); + const minutes = Math.floor(differenceInSeconds / 60) % 60; + const seconds = Math.floor(differenceInSeconds % 60); + + hoursOutputElement.textContent = `${hours} hours`; + minutesOutputElement.textContent = `${minutes} minutes`; + secondsOutputElement.textContent = `${seconds} seconds`; + } +} + +startTimerButtonElement.addEventListener('click', () => { + clearInterval(timerInterval); + const futureHours = parseInt(hoursInputElement.value); + const futureMinutes = parseInt(minutesInputElement.value); + const futureSeconds = parseInt(secondsInputElement.value); + + const date = new Date(); + const currentHours = date.getHours(); + const currentMinutes = date.getMinutes(); + const currentSeconds = date.getSeconds(); + + date.setHours(currentHours + futureHours); + date.setMinutes(futureMinutes + currentMinutes); + date.setSeconds(currentSeconds + futureSeconds); + + targetTime = date.getTime(); + localStorage.setItem('targetTime', targetTime); + updateTimer(); + timerInterval = setInterval(updateTimer, 500); +}); + + +const storedTargetTime = localStorage.getItem('targetTime'); + +if (storedTargetTime) { + targetTime = storedTargetTime; + updateTimer(); + timerInterval = setInterval(updateTimer, 500); +} \ No newline at end of file diff --git a/Countdown-timer/styles.css b/Countdown-timer/styles.css new file mode 100644 index 0000000..b66dc91 --- /dev/null +++ b/Countdown-timer/styles.css @@ -0,0 +1,44 @@ +html, body{ + height: 100%; +} +body{ + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + margin: 2rem; + background-image: url(timer-bg.jpg) +} +h1{ + color: whitesmoke; +} +.container{ + display: flex; + gap: 2rem; + box-shadow:0 0 24px 8px rgba(0,0,0,0.2); + padding: 1rem; + border-radius:.5rem; + background-color: whitesmoke; +} +.inputs{ + display: flex; + flex-direction: column; + gap: .5rem; + width: 100px; +} +.inputs input{ + padding: .5rem; +} +.inputs button{ + border: 0; + padding: .5rem 1rem; + background-color:lightgray ; + cursor: pointer; +} +.inputs button:hover{ + background-color: white; +} +.timer{ + width: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; +} \ No newline at end of file diff --git a/Countdown-timer/timer-bg.jpg b/Countdown-timer/timer-bg.jpg new file mode 100644 index 0000000..fd104e5 Binary files /dev/null and b/Countdown-timer/timer-bg.jpg differ diff --git a/Hello-World/index.html b/Hello-World/index.html new file mode 100644 index 0000000..8c1bd1b --- /dev/null +++ b/Hello-World/index.html @@ -0,0 +1,15 @@ + + + + + + + + Document + +

Hello World

+ + + + + \ No newline at end of file diff --git a/Hello-World/script.js b/Hello-World/script.js new file mode 100644 index 0000000..3b592d3 --- /dev/null +++ b/Hello-World/script.js @@ -0,0 +1,7 @@ +const btnelement = document.querySelector('button') +const spanElement = document.querySelector('span') + +btnelement.addEventListener('click', ()=>{ + const result = prompt('Enter your name') + spanElement.textContent = result +}) \ No newline at end of file diff --git a/Hello-World/styles.css b/Hello-World/styles.css new file mode 100644 index 0000000..c17a1ab --- /dev/null +++ b/Hello-World/styles.css @@ -0,0 +1,28 @@ +h1{ + font-size: 100px; + padding: 10px 10px; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} +span{ + color: blue; +} +.btn{ + width: 200px; + height: 50px; + font-weight: bold; + font-size: 25px; + background-color: aquamarine; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + margin-left: 15px; + cursor: pointer; + border-radius: 3px; + box-shadow: 0px 0px 20px 0px rgb(154, 149, 149); +} +body{ + margin-left:500px; + +} +.btn:hover{ + background-color: rgb(79, 245, 189); + transition: 0.2s ease; +} \ No newline at end of file