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

enhanced the css and index.html

Browse Source
pull/203/head
shiven 11 months ago
parent 9409685c9a
commit 1c02915e39
12 changed files with 322 additions and 208 deletions
Show Stats Download Patch File Download Diff File

6
_project_starter_/index.html
Unescape View File

@ -7,7 +7,11 @@
<title>My Project</title> <title>My Project</title>
</head> </head>
<body> <body>
<h1>Project Starter</h1> <div class="container">
<h1>Welcome to My Project</h1>
<p>This is a project starter template to get you started!</p>
<button id="start-btn">Get Started</button>
</div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

3
_project_starter_/script.js
Unescape View File

@ -1 +1,4 @@
document.getElementById('start-btn').addEventListener('click', function() {
alert('Welcome to My Project! Let\'s get started!');
});

44
_project_starter_/style.css
Unescape View File

@ -2,15 +2,51 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0;
padding: 0;
} }
body { body {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
display: flex; display: flex;
flex-direction: column;
align-items: center;
justify-content: center; justify-content: center;
align-items: center;
height: 100vh; height: 100vh;
overflow: hidden; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
margin: 0; color: #333;
}
.container {
text-align: center;
background-color: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #4A90E2;
}
p {
font-size: 1.2rem;
margin-bottom: 2rem;
color: #666;
}
button {
padding: 10px 20px;
font-size: 1rem;
background-color: #4A90E2;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #357ABD;
} }

22
github-profiles/index.html
Unescape View File

@ -4,16 +4,32 @@
<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>Github Profiles</title> <title>GitHub Profiles</title>
</head> </head>
<body> <body>
<div class="container">
<h1>GitHub Profile Finder</h1>
<!-- Form for searching GitHub users -->
<form class="user-form" id="form"> <form class="user-form" id="form">
<input type="text" id="search" placeholder="Search a Github User"> <input
type="text"
id="search"
placeholder="Search a GitHub user..."
aria-label="Search GitHub User"
/>
</form> </form>
<!-- Main content where user profile will be displayed -->
<main id="main"></main> <main id="main"></main>
</div>
<!-- Including axios library for making API requests -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js"
integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js" integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ==" crossorigin="anonymous"></script> <!-- Main JavaScript for handling profile search and display -->
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

84
github-profiles/script.js
Unescape View File

@ -1,39 +1,45 @@
const APIURL = 'https://api.github.com/users/' const APIURL = 'https://api.github.com/users/';
const main = document.getElementById('main') const main = document.getElementById('main');
const form = document.getElementById('form') const form = document.getElementById('form');
const search = document.getElementById('search') const search = document.getElementById('search');
// Fetch user data from GitHub API
async function getUser(username) { async function getUser(username) {
try { try {
const { data } = await axios(APIURL + username) const { data } = await axios(APIURL + username);
createUserCard(data) createUserCard(data); // Create user card with fetched data
getRepos(username) getRepos(username); // Fetch and display user's repositories
} catch (err) { } catch (err) {
if(err.response.status == 404) { if (err.response && err.response.status == 404) {
createErrorCard('No profile with this username') createErrorCard('No profile with this username');
} else {
createErrorCard('An error occurred while fetching user data');
} }
} }
} }
// Fetch user's repositories from GitHub API
async function getRepos(username) { async function getRepos(username) {
try { try {
const { data } = await axios(APIURL + username + '/repos?sort=created') const { data } = await axios(APIURL + username + '/repos?sort=created');
addReposToCard(data); // Add repositories to the user card
addReposToCard(data)
} catch (err) { } catch (err) {
createErrorCard('Problem fetching repos') createErrorCard('Problem fetching repositories');
} }
} }
// Create user card with profile information
function createUserCard(user) { function createUserCard(user) {
const userID = user.name || user.login const userID = user.name || user.login;
const userBio = user.bio ? `<p>${user.bio}</p>` : '' const userBio = user.bio ? `<p>${user.bio}</p>` : '';
// HTML structure for user profile card
const cardHTML = ` const cardHTML = `
<div class="card"> <div class="card">
<div> <div>
<img src="${user.avatar_url}" alt="${user.name}" class="avatar"> <img src="${user.avatar_url}" alt="${userID}" class="avatar">
</div> </div>
<div class="user-info"> <div class="user-info">
<h2>${userID}</h2> <h2>${userID}</h2>
@ -43,50 +49,48 @@ function createUserCard(user) {
<li>${user.following} <strong>Following</strong></li> <li>${user.following} <strong>Following</strong></li>
<li>${user.public_repos} <strong>Repos</strong></li> <li>${user.public_repos} <strong>Repos</strong></li>
</ul> </ul>
<div id="repos"></div> <!-- Container for repositories -->
<div id="repos"></div>
</div> </div>
</div> </div>
` `;
main.innerHTML = cardHTML
main.innerHTML = cardHTML; // Insert card into the main container
} }
// Create error card if user is not found or if there’s an issue
function createErrorCard(msg) { function createErrorCard(msg) {
const cardHTML = ` const cardHTML = `
<div class="card"> <div class="card">
<h1>${msg}</h1> <h1>${msg}</h1>
</div> </div>
` `;
main.innerHTML = cardHTML main.innerHTML = cardHTML;
} }
// Add repositories to the user card
function addReposToCard(repos) { function addReposToCard(repos) {
const reposEl = document.getElementById('repos') const reposEl = document.getElementById('repos');
repos repos.slice(0, 5).forEach(repo => {
.slice(0, 5) const repoEl = document.createElement('a');
.forEach(repo => { repoEl.classList.add('repo');
const repoEl = document.createElement('a') repoEl.href = repo.html_url;
repoEl.classList.add('repo') repoEl.target = '_blank';
repoEl.href = repo.html_url repoEl.innerText = repo.name;
repoEl.target = '_blank'
repoEl.innerText = repo.name
reposEl.appendChild(repoEl) reposEl.appendChild(repoEl);
}) });
} }
// Event listener for form submission
form.addEventListener('submit', (e) => { form.addEventListener('submit', (e) => {
e.preventDefault() e.preventDefault(); // Prevent the form from submitting traditionally
const user = search.value const user = search.value.trim(); // Get the username input value
if (user) { if (user) {
getUser(user) getUser(user); // Fetch and display user info
search.value = ''; // Clear the search input
search.value = ''
} }
}) });

57
github-profiles/style.css
Unescape View File

@ -2,6 +2,8 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0;
padding: 0;
} }
body { body {
@ -17,9 +19,21 @@ body {
margin: 0; margin: 0;
} }
.container {
text-align: center;
padding: 2rem;
}
h1 {
font-size: 2.5rem;
margin-bottom: 2rem;
color: #fff;
}
.user-form { .user-form {
width: 100%; width: 100%;
max-width: 700px; max-width: 700px;
margin-bottom: 2rem;
} }
.user-form input { .user-form input {
@ -35,6 +49,7 @@ body {
font-size: 1rem; font-size: 1rem;
box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
0 15px 40px rgba(0, 0, 0, 0.1); 0 15px 40px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease; /* Smoother transitions */
} }
.user-form input::placeholder { .user-form input::placeholder {
@ -43,6 +58,24 @@ body {
.user-form input:focus { .user-form input:focus {
outline: none; outline: none;
background-color: #6b40a5;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Adds shadow on focus */
}
.user-form input:hover {
background-color: #5a3495; /* Adds hover effect */
}
/* Card Animations */
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
} }
.card { .card {
@ -54,6 +87,12 @@ body {
display: flex; display: flex;
padding: 3rem; padding: 3rem;
margin: 0 1.5rem; margin: 0 1.5rem;
transition: transform 0.3s ease; /* Adds a smooth transition */
animation: fadeInUp 0.5s ease-out both; /* Fade-in animation */
}
.card:hover {
transform: translateY(-10px); /* Slight hover animation */
} }
.avatar { .avatar {
@ -61,11 +100,13 @@ body {
border: 10px solid #2a2a72; border: 10px solid #2a2a72;
height: 150px; height: 150px;
width: 150px; width: 150px;
animation: fadeInUp 0.8s ease-out both; /* Delayed animation */
} }
.user-info { .user-info {
color: #eee; color: #eee;
margin-left: 2rem; margin-left: 2rem;
animation: fadeInUp 1s ease-out both; /* Delayed animation */
} }
.user-info h2 { .user-info h2 {
@ -99,6 +140,13 @@ body {
margin-right: 0.5rem; margin-right: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
display: inline-block; display: inline-block;
border-radius: 5px;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.repo:hover {
background-color: #3a4ca8;
transform: scale(1.05); /* Slight scale effect */
} }
@media (max-width: 500px) { @media (max-width: 500px) {
@ -110,4 +158,13 @@ body {
.user-form { .user-form {
max-width: 400px; max-width: 400px;
} }
h1 {
font-size: 2rem;
}
.user-info ul {
flex-direction: column;
align-items: flex-start;
}
} }

12
netflix-mobile-navigation/index.html
Unescape View File

@ -16,21 +16,18 @@
<i class="fas fa-bars"></i> <i class="fas fa-bars"></i>
</button> </button>
<img <img src="https://images.ctfassets.net/4cd45et68cgf/7LrExJ6PAj6MSIPkDyCO86/542b1dfabbf3959908f69be546879952/Netflix-Brand-Logo.png?w=684&h=456"
src="https://images.ctfassets.net/4cd45et68cgf/7LrExJ6PAj6MSIPkDyCO86/542b1dfabbf3959908f69be546879952/Netflix-Brand-Logo.png?w=684&h=456"
alt="Logo" class="logo"> alt="Logo" class="logo">
<p class="text">Mobile Navigation</p> <p class="text">Mobile Navigation</p>
<div class="nav nav-black"> <div class="nav nav-black" id="nav">
<div class="nav nav-red"> <div class="nav-white">
<div class="nav nav-white">
<button class="nav-btn close-btn"> <button class="nav-btn close-btn">
<i class="fas fa-times"></i> <i class="fas fa-times"></i>
</button> </button>
<img <img src="https://images.ctfassets.net/4cd45et68cgf/7LrExJ6PAj6MSIPkDyCO86/542b1dfabbf3959908f69be546879952/Netflix-Brand-Logo.png?w=684&h=456"
src="https://images.ctfassets.net/4cd45et68cgf/7LrExJ6PAj6MSIPkDyCO86/542b1dfabbf3959908f69be546879952/Netflix-Brand-Logo.png?w=684&h=456"
alt="Logo" class="logo"> alt="Logo" class="logo">
<ul class="list"> <ul class="list">
@ -48,7 +45,6 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>

14
netflix-mobile-navigation/script.js
Unescape View File

@ -1,11 +1,11 @@
const open_btn = document.querySelector('.open-btn') const open_btn = document.querySelector('.open-btn');
const close_btn = document.querySelector('.close-btn') const close_btn = document.querySelector('.close-btn');
const nav = document.querySelectorAll('.nav') const nav = document.getElementById('nav');
open_btn.addEventListener('click', () => { open_btn.addEventListener('click', () => {
nav.forEach(nav_el => nav_el.classList.add('visible')) nav.classList.add('visible');
}) });
close_btn.addEventListener('click', () => { close_btn.addEventListener('click', () => {
nav.forEach(nav_el => nav_el.classList.remove('visible')) nav.classList.remove('visible');
}) });

20
netflix-mobile-navigation/style.css
Unescape View File

@ -52,21 +52,6 @@ body {
width: 60%; width: 60%;
max-width: 480px; max-width: 480px;
min-width: 320px; min-width: 320px;
transition-delay: 0.4s;
}
.nav-black.visible {
transition-delay: 0s;
}
.nav-red {
background-color: rgb(229, 9, 20);
width: 95%;
transition-delay: 0.2s;
}
.nav-red.visible {
transition-delay: 0.2s;
} }
.nav-white { .nav-white {
@ -74,11 +59,6 @@ body {
width: 95%; width: 95%;
padding: 40px; padding: 40px;
position: relative; position: relative;
transition-delay: 0s;
}
.nav-white.visible {
transition-delay: 0.4s;
} }
.close-btn { .close-btn {

8
quiz-app/index.html
Unescape View File

@ -13,22 +13,22 @@
<ul> <ul>
<li> <li>
<input type="radio" name="answer" id="a" class="answer"> <input type="radio" name="answer" id="a" class="answer">
<label for="a" id="a_text">Question</label> <label for="a" id="a_text">Option A</label> <!-- Changed from "Question" to "Option A" -->
</li> </li>
<li> <li>
<input type="radio" name="answer" id="b" class="answer"> <input type="radio" name="answer" id="b" class="answer">
<label for="b" id="b_text">Question</label> <label for="b" id="b_text">Option B</label> <!-- Changed from "Question" to "Option B" -->
</li> </li>
<li> <li>
<input type="radio" name="answer" id="c" class="answer"> <input type="radio" name="answer" id="c" class="answer">
<label for="c" id="c_text">Question</label> <label for="c" id="c_text">Option C</label> <!-- Changed from "Question" to "Option C" -->
</li> </li>
<li> <li>
<input type="radio" name="answer" id="d" class="answer"> <input type="radio" name="answer" id="d" class="answer">
<label for="d" id="d_text">Question</label> <label for="d" id="d_text">Option D</label> <!-- Changed from "Question" to "Option D" -->
</li> </li>
</ul> </ul>
</div> </div>

63
quiz-app/script.js
Unescape View File

@ -20,7 +20,7 @@ const quizData = [
a: "Hypertext Markup Language", a: "Hypertext Markup Language",
b: "Hypertext Markdown Language", b: "Hypertext Markdown Language",
c: "Hyperloop Machine Language", c: "Hyperloop Machine Language",
d: "Helicopters Terminals Motorboats Lamborginis", d: "Helicopters Terminals Motorboats Lamborghinis",
correct: "a", correct: "a",
}, },
{ {
@ -33,66 +33,67 @@ const quizData = [
}, },
]; ];
const quiz = document.getElementById('quiz') const quiz = document.getElementById('quiz');
const answerEls = document.querySelectorAll('.answer') const answerEls = document.querySelectorAll('.answer');
const questionEl = document.getElementById('question') const questionEl = document.getElementById('question');
const a_text = document.getElementById('a_text') const a_text = document.getElementById('a_text');
const b_text = document.getElementById('b_text') const b_text = document.getElementById('b_text');
const c_text = document.getElementById('c_text') const c_text = document.getElementById('c_text');
const d_text = document.getElementById('d_text') const d_text = document.getElementById('d_text');
const submitBtn = document.getElementById('submit') const submitBtn = document.getElementById('submit');
let currentQuiz = 0 let currentQuiz = 0;
let score = 0 let score = 0;
loadQuiz() loadQuiz();
function loadQuiz() { function loadQuiz() {
deselectAnswers() deselectAnswers();
const currentQuizData = quizData[currentQuiz] const currentQuizData = quizData[currentQuiz];
questionEl.innerText = currentQuizData.question questionEl.innerText = currentQuizData.question;
a_text.innerText = currentQuizData.a a_text.innerText = currentQuizData.a;
b_text.innerText = currentQuizData.b b_text.innerText = currentQuizData.b;
c_text.innerText = currentQuizData.c c_text.innerText = currentQuizData.c;
d_text.innerText = currentQuizData.d d_text.innerText = currentQuizData.d;
} }
function deselectAnswers() { function deselectAnswers() {
answerEls.forEach(answerEl => answerEl.checked = false) answerEls.forEach(answerEl => answerEl.checked = false);
} }
function getSelected() { function getSelected() {
let answer let answer;
answerEls.forEach(answerEl => { answerEls.forEach(answerEl => {
if (answerEl.checked) { if (answerEl.checked) {
answer = answerEl.id answer = answerEl.id;
} }
}) });
return answer return answer;
} }
submitBtn.addEventListener('click', () => { submitBtn.addEventListener('click', () => {
const answer = getSelected() const answer = getSelected();
if (answer) { if (answer) {
if (answer === quizData[currentQuiz].correct) { if (answer === quizData[currentQuiz].correct) {
score++ score++;
} }
currentQuiz++ currentQuiz++;
if (currentQuiz < quizData.length) { if (currentQuiz < quizData.length) {
loadQuiz() loadQuiz();
} else { } else {
quiz.innerHTML = ` quiz.innerHTML = `
<h2>You answered ${score}/${quizData.length} questions correctly</h2> <h2>You answered ${score}/${quizData.length} questions correctly</h2>
<button onclick="location.reload()">Reload</button> <button onclick="location.reload()">Reload</button>
` `;
} }
} else {
alert('Please select an answer before submitting!'); // Add an alert for no selection
} }
}) });

33
verify-account-ui/script.js
Unescape View File

@ -1,14 +1,31 @@
const codes = document.querySelectorAll('.code') const codes = document.querySelectorAll('.code');
codes[0].focus() codes[0].focus();
codes.forEach((code, idx) => { codes.forEach((code, idx) => {
code.addEventListener('keydown', (e) => { code.addEventListener('keydown', (e) => {
if (e.key >= 0 && e.key <= 9) { if (e.key >= 0 && e.key <= 9) {
codes[idx].value = '' codes[idx].value = e.key;
setTimeout(() => codes[idx + 1].focus(), 10)
} else if(e.key === 'Backspace') { if (idx < codes.length - 1) {
setTimeout(() => codes[idx - 1].focus(), 10) setTimeout(() => codes[idx + 1].focus(), 10);
}
}
else if (e.key === 'Backspace') {
codes[idx].value = '';
if (idx > 0) {
setTimeout(() => codes[idx - 1].focus(), 10);
}
}
});
code.addEventListener('input', () => {
if (code.value.length > 1) {
code.value = code.value[code.value.length - 1];
}
if (code.value && idx < codes.length - 1) {
setTimeout(() => codes[idx + 1].focus(), 10);
} }
}) });
}) });

Write Preview
Loading…
Cancel
Save