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

Merge 64c2616a80 into c92b0bc3a8

Browse Source
pull/229/merge
Mayank Raj 6 months ago committed by GitHub
parent c92b0bc3a8 64c2616a80
commit 8a31d89bbb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 224 additions and 169 deletions
Show Stats Download Patch File Download Diff File

13
auto-text-effect/index.html
Unescape View File

@ -1,19 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<title>Auto Text Effect</title> <title>Auto Text Effect</title>
</head> </head>
<body>
<body>
<h1 id="text">Starting...</h1> <h1 id="text">Starting...</h1>
<div> <div>
<label for="speed">Speed:</label> <label for="speed">Speed:</label>
<input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1"> <input type="number" name="speed" id="speed" value="5" min="1" max="10" step="1">
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

23
auto-text-effect/script.js
Unescape View File

@ -1,22 +1,21 @@
const textEl = document.getElementById('text') const textEl = document.getElementById('text');
const speedEl = document.getElementById('speed') const speedEl = document.getElementById('speed');
const text = 'We Love Programming!' const text = 'xAI is an AI company with the mission of advancing scientific discovery and gaining a deeper understanding of our universe.';
let idx = 1 let idx = 1;
let speed = 300 / speedEl.value let speed = 300 / speedEl.value;
writeText() writeText();
function writeText() { function writeText() {
textEl.innerText = text.slice(0, idx) textEl.innerText = text.slice(0, idx);
idx++ idx++;
if(idx > text.length) { if(idx > text.length) {
idx = 1 idx = 1;
} }
setTimeout(writeText, speed) setTimeout(writeText, speed);
} }
speedEl.addEventListener('input', (e) => speed = 300 / e.target.value);
speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)

14
auto-text-effect/style.css
Unescape View File

@ -5,7 +5,7 @@
} }
body { body {
background-color: darksalmon; background-color: rgb(234, 255, 217);
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -13,13 +13,19 @@ body {
justify-content: center; justify-content: center;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
margin: 0; width: 80vw;
margin: auto;
}
#text {
text-align: center;
} }
div { div {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
background: rgba(0, 0, 0, 0.1); background: rgba(9, 105, 31, 0.1);
padding: 10px 20px; padding: 10px 20px;
font-size: 18px; font-size: 18px;
} }
@ -28,7 +34,7 @@ input {
width: 50px; width: 50px;
padding: 5px; padding: 5px;
font-size: 18px; font-size: 18px;
background-color: darksalmon; background-color: rgb(172, 234, 201);
border: none; border: none;
text-align: center; text-align: center;
} }

26
expanding-cards/index.html
Unescape View File

@ -1,31 +1,39 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<title>Expanding Cards</title> <title>Expanding Cards</title>
</head> </head>
<body>
<body>
<div class="container"> <div class="container">
<div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"> <div class="panel active"
style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Explore The World</h3> <h3>Explore The World</h3>
</div> </div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"> <div class="panel"
style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Wild Forest</h3> <h3>Wild Forest</h3>
</div> </div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')"> <div class="panel"
style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
<h3>Sunny Beach</h3> <h3>Sunny Beach</h3>
</div> </div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')"> <div class="panel"
style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
<h3>City on Winter</h3> <h3>City on Winter</h3>
</div> </div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"> <div class="panel"
style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Mountains - Clouds</h3> <h3>Mountains - Clouds</h3>
</div> </div>
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

6
expanding-cards/script.js
Unescape View File

@ -2,13 +2,13 @@ const panels = document.querySelectorAll('.panel')
panels.forEach(panel => { panels.forEach(panel => {
panel.addEventListener('click', () => { panel.addEventListener('click', () => {
removeActiveClasses() removeActiveClasses();
panel.classList.add('active') panel.classList.add('active');
}) })
}) })
function removeActiveClasses() { function removeActiveClasses() {
panels.forEach(panel => { panels.forEach(panel => {
panel.classList.remove('active') panel.classList.remove('active');
}) })
} }

9
expanding-cards/style.css
Unescape View File

@ -10,6 +10,7 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100vh; height: 100vh;
/* width is 100vw by default*/
overflow: hidden; overflow: hidden;
margin: 0; margin: 0;
} }
@ -25,19 +26,19 @@ body {
background-repeat: no-repeat; background-repeat: no-repeat;
height: 80vh; height: 80vh;
border-radius: 50px; border-radius: 50px;
color: #fff; color: #ffffff;
cursor: pointer; cursor: pointer;
flex: 0.5; flex: 0.5;
margin: 10px; margin: 10px;
position: relative; position: relative;
-webkit-transition: all 700ms ease-in; transition: all 700ms ease-in;
} }
.panel h3 { .panel h3 {
font-size: 24px; font-size: 24px;
position: absolute; position: absolute;
bottom: 20px; bottom: 30px;
left: 20px; left: 30px;
margin: 0; margin: 0;
opacity: 0; opacity: 0;
} }

13
progress-steps/index.html
Unescape View File

@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css">
<title>Progress Steps</title> <title>Progress Steps</title>
</head> </head>
<body>
<body>
<div class="container"> <div class="container">
<div class="progress-container"> <div class="progress-container">
<div class="progress" id="progress"></div> <div class="progress" id="progress"></div>
@ -20,5 +22,6 @@
<button class="btn" id="next">Next</button> <button class="btn" id="next">Next</button>
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

53
progress-steps/script.js
Unescape View File

@ -1,49 +1,44 @@
const progress = document.getElementById('progress') const progress = document.getElementById('progress');
const prev = document.getElementById('prev') const prev = document.getElementById('prev');
const next = document.getElementById('next') const next = document.getElementById('next');
const circles = document.querySelectorAll('.circle') const circles = document.querySelectorAll('.circle');
let currentActive = 1 let currentActive = 1;
next.addEventListener('click', () => { next.addEventListener('click', () => {
currentActive++ currentActive++;
if (currentActive > circles.length) {
if(currentActive > circles.length) { currentActive = circles.length;
currentActive = circles.length
} }
update();
update()
}) })
prev.addEventListener('click', () => { prev.addEventListener('click', () => {
currentActive-- currentActive--;
if (currentActive < 1) {
if(currentActive < 1) { currentActive = 1;
currentActive = 1
} }
update();
update()
}) })
function update() { function update() {
circles.forEach((circle, idx) => { circles.forEach((circle, idx) => {
if(idx < currentActive) { if (idx < currentActive) {
circle.classList.add('active') circle.classList.add('active');
} else { } else {
circle.classList.remove('active') circle.classList.remove('active');
} }
}) })
const actives = document.querySelectorAll('.active') const actives = document.querySelectorAll('.active');
progress.style.width = ((actives.length - 1) / (circles.length - 1)) * 100 + '%';
progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%'
if(currentActive === 1) { if (currentActive === 1) {
prev.disabled = true prev.disabled = true;
} else if(currentActive === circles.length) { } else if (currentActive === circles.length) {
next.disabled = true next.disabled = true;
} else { } else {
prev.disabled = false prev.disabled = false;
next.disabled = false next.disabled = false;
} }
} }

40
progress-steps/style.css
Unescape View File

@ -3,7 +3,6 @@
:root { :root {
--line-border-fill: #3498db; --line-border-fill: #3498db;
--line-border-empty: #383838; --line-border-empty: #383838;
} }
* { * {
@ -29,7 +28,7 @@ body {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
margin-bottom: 30px; margin-bottom: 20px;
max-width: 100%; max-width: 100%;
width: 350px; width: 350px;
} }
@ -59,20 +58,36 @@ body {
} }
.circle { .circle {
position: relative;
z-index: 1;
background-color: #f1f1f1; background-color: #f1f1f1;
color:#e2e2e2; color: #000000;
border-radius: 50%; border-radius: 50%;
height: 30px; height: 40px;
width: 30px; width: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 3px solid var(--line-border-empty); border: 3px solid var(--line-border-empty);
transition: 0.4s ease; transition: 0.4s ease;
/* Add this to ensure the background is solid */
box-shadow: 0 0 0 4px #f1f1f1;
} }
.circle.active { .circle.active {
border-color: var(--line-border-fill); border-color: var(--line-border-fill);
background-color: #e7f7fa;
animation-name: pop;
animation-timing-function: ease-in-out;
animation-duration: 0.5s;
font-size: 130%;
font-weight: 1000;
}
.circle:not(.active) {
transform: scale(0.9);
opacity: 1;
transition: transform 0.3s ease-in-out, opacity 0.3s ease;
} }
.btn { .btn {
@ -98,4 +113,19 @@ body {
.btn:disabled { .btn:disabled {
background-color: var(--line-border-empty); background-color: var(--line-border-empty);
cursor: not-allowed; cursor: not-allowed;
transform: scale(1);
}
@keyframes pop {
0% {
transform: scale(0.8);
}
60% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
} }

30
rotating-nav-animation/index.html
Unescape View File

@ -1,13 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<title>Rotating Navigation</title> <title>Rotating Navigation</title>
</head> </head>
<body>
<body>
<div class="container"> <div class="container">
<div class="circle-container"> <div class="circle-container">
<div class="circle"> <div class="circle">
@ -21,13 +25,16 @@
</div> </div>
<div class="content"> <div class="content">
<h1>Amazing Article</h1> <h1>GitHub</h1>
<small>Florin Pop</small> <small>Wikipedia</small>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, maxime aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime dolorem provident natus veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem, molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae temporibus minus optio eum soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur perferendis consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa.</p> <p>GitHub is a proprietary developer platform that allows developers to create, store, manage, and share their code. It uses Git to provide distributed version control and GitHub itself provides access control, bug tracking, software feature requests, task management, continuous integration, and wikis for every project. Headquartered in California, it has been a subsidiary of Microsoft since 2018.
</p>
<h3>My Dog</h3> <h3>GitHub Invertocat logo</h3>
<img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="doggy" /> <img
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt vel consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. Perferendis totam placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit deserunt qui vero voluptas, ut quia cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores explicabo provident. Voluptates sint, neque fuga cum illum, tempore autem maxime similique laborum odio, magnam esse. Aperiam?</p> src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/GitHub_Invertocat_Logo.svg/800px-GitHub_Invertocat_Logo.svg.png"
alt="GitHub" height="100px", width="100px">
<p>It is commonly used to host open source software development projects. As of January 2023, GitHub reported having over 100 million developers and more than 420 million repositories, including at least 28 million public repositories. It is the world's largest source code host as of June 2023. Over five billion developer contributions were made to more than 500 million open source projects in 2024.</p>
</div> </div>
</div> </div>
@ -39,5 +46,6 @@
</ul> </ul>
</nav> </nav>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

26
rotating-nav-animation/style.css
Unescape View File

@ -6,19 +6,20 @@
body { body {
font-family: 'Lato', sans-serif; font-family: 'Lato', sans-serif;
background-color: #333; background-color: #0c5c9e;
color: #222; color: #222;
overflow-x: hidden; overflow-x: hidden;
margin: 0; margin: 0;
} }
.container { .container {
background-color: #fafafa; background-color: #e5ffde;
transform-origin: top left; transform-origin: top left;
transition: transform 0.5s linear; transition: transform 0.5s linear;
width: 100vw; width: 100vw;
min-height: 100vh; min-height: 100vh;
padding: 50px; padding: 50px;
position: relative;
} }
.container.show-nav { .container.show-nav {
@ -27,8 +28,9 @@ body {
.circle-container { .circle-container {
position: fixed; position: fixed;
top: -100px; top: 0px;
left: -100px; left: 0px;
transform: translate(-50%, -50%);
} }
.circle { .circle {
@ -37,7 +39,7 @@ body {
width: 200px; width: 200px;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
transition: transform 0.5s linear; transition: transform 0.7s linear;
} }
.container.show-nav .circle { .container.show-nav .circle {
@ -49,7 +51,7 @@ body {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
height: 100px; height: 80px;
background: transparent; background: transparent;
border: 0; border: 0;
font-size: 26px; font-size: 26px;
@ -70,7 +72,7 @@ body {
transform-origin: top left; transform-origin: top left;
} }
.container.show-nav + nav li { .container.show-nav+nav li {
transform: translateX(0); transform: translateX(0);
transition-delay: 0.3s; transition-delay: 0.3s;
} }
@ -84,7 +86,7 @@ nav {
nav ul { nav ul {
list-style-type: none; list-style-type: none;
padding-left: 30px; padding-left: 20px;
} }
nav ul li { nav ul li {
@ -100,17 +102,17 @@ nav ul li i {
margin-right: 10px; margin-right: 10px;
} }
nav ul li + li { nav ul li+li {
margin-left: 15px; margin-left: 15px;
transform: translateX(-150%); transform: translateX(-150%);
} }
nav ul li + li + li { nav ul li+li+li {
margin-left: 30px; margin-left: 30px;
transform: translateX(-200%); transform: translateX(-200%);
} }
nav a{ nav a {
color: #fafafa; color: #fafafa;
text-decoration: none; text-decoration: none;
transition: all 0.5s; transition: all 0.5s;
@ -126,7 +128,7 @@ nav a:hover {
} }
.content { .content {
max-width: 1000px; max-width: 100vw;
margin: 50px auto; margin: 50px auto;
} }

Write Preview
Loading…
Cancel
Save