msb-public
/
50projects50days
mirror of https://github.com/bradtraversy/50projects50days
1
0
Code Issues Projects Releases Wiki Activity

creating 3 projects

Browse Source
pull/198/head
imrozkhan205 2 months ago
parent 9409685c9a
commit d44baf023d
10 changed files with 283 additions and 0 deletions
Show Stats Download Patch File Download Diff File

18
Color-Flipper/index.html
Unescape View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03 - Colour Flipper</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<section id="colour-display">
<h1>
Background: <span id="current-colour">#fffff</span>
</h1>
<button id="new-colour-button">New Colour!</button>
</section>
</body>
</html>

40
Color-Flipper/script.js
Unescape View File

@ -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;
});

32
Color-Flipper/styles.css
Unescape View File

@ -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;
}

40
Countdown-timer/index.html
Unescape View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>09 - Countdown Timer</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<h1>CountDown Timer</h1>
<div class="container">
<div class="inputs">
<label for="hoursInput">Hours:</label>
<input id="hoursInput" type="number" min="0" value="0">
<label for="minutesInput">Minutes:</label>
<input id="minutesInput" type="number" min="0" value="0">
<label for="secondsInput">Seconds:</label>
<input id="secondsInput" type="number" min="0" value="0">
<button id="startTimer">Start</button>
</div>
<div class="timer">
<h2>
<div id="hoursOutput"></div>
<div id="minutesOutput"></div>
<div id="secondsOutput"></span>
</h2>
</div>
</div>
</body>
</html>

59
Countdown-timer/script.js
Unescape View File

@ -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);
}

44
Countdown-timer/styles.css
Unescape View File

@ -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;
}

BIN
Countdown-timer/timer-bg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

15
Hello-World/index.html
Unescape View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer ></script>
<title>Document</title>
</head>
<h1>Hello <span>World</span></h1>
<body>
<button class="btn" >Say hi</button>
</body>
</html>

7
Hello-World/script.js
Unescape View File

@ -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
})

28
Hello-World/styles.css
Unescape View File

@ -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;
}
Write Preview
Loading…
Cancel
Save