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>
</head>
<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>
</body>
</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;
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
margin: 0;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
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 name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Github Profiles</title>
<title>GitHub Profiles</title>
</head>
<body>
<div class="container">
<h1>GitHub Profile Finder</h1>
<!-- Form for searching GitHub users -->
<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>
<!-- Main content where user profile will be displayed -->
<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>
</body>
</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 form = document.getElementById('form')
const search = document.getElementById('search')
const main = document.getElementById('main');
const form = document.getElementById('form');
const search = document.getElementById('search');
// Fetch user data from GitHub API
async function getUser(username) {
try {
const { data } = await axios(APIURL + username)
const { data } = await axios(APIURL + username);
createUserCard(data)
getRepos(username)
createUserCard(data); // Create user card with fetched data
getRepos(username); // Fetch and display user's repositories
} catch (err) {
if(err.response.status == 404) {
createErrorCard('No profile with this username')
if (err.response && err.response.status == 404) {
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) {
try {
const { data } = await axios(APIURL + username + '/repos?sort=created')
addReposToCard(data)
const { data } = await axios(APIURL + username + '/repos?sort=created');
addReposToCard(data); // Add repositories to the user card
} catch (err) {
createErrorCard('Problem fetching repos')
createErrorCard('Problem fetching repositories');
}
}
// Create user card with profile information
function createUserCard(user) {
const userID = user.name || user.login
const userBio = user.bio ? `<p>${user.bio}</p>` : ''
const userID = user.name || user.login;
const userBio = user.bio ? `<p>${user.bio}</p>` : '';
// HTML structure for user profile card
const cardHTML = `
<div class="card">
<div>
<img src="${user.avatar_url}" alt="${user.name}" class="avatar">
<img src="${user.avatar_url}" alt="${userID}" class="avatar">
</div>
<div class="user-info">
<h2>${userID}</h2>
@ -43,50 +49,48 @@ function createUserCard(user) {
<li>${user.following} <strong>Following</strong></li>
<li>${user.public_repos} <strong>Repos</strong></li>
</ul>
<div id="repos"></div>
<div id="repos"></div> <!-- Container for repositories -->
</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) {
const cardHTML = `
<div class="card">
<h1>${msg}</h1>
</div>
`
`;
main.innerHTML = cardHTML
main.innerHTML = cardHTML;
}
// Add repositories to the user card
function addReposToCard(repos) {
const reposEl = document.getElementById('repos')
const reposEl = document.getElementById('repos');
repos
.slice(0, 5)
.forEach(repo => {
const repoEl = document.createElement('a')
repoEl.classList.add('repo')
repoEl.href = repo.html_url
repoEl.target = '_blank'
repoEl.innerText = repo.name
repos.slice(0, 5).forEach(repo => {
const repoEl = document.createElement('a');
repoEl.classList.add('repo');
repoEl.href = repo.html_url;
repoEl.target = '_blank';
repoEl.innerText = repo.name;
reposEl.appendChild(repoEl)
})
reposEl.appendChild(repoEl);
});
}
// Event listener for form submission
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) {
getUser(user)
search.value = ''
getUser(user); // Fetch and display user info
search.value = ''; // Clear the search input
}
})
});

57
github-profiles/style.css
Unescape View File

@ -2,6 +2,8 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
@ -17,9 +19,21 @@ body {
margin: 0;
}
.container {
text-align: center;
padding: 2rem;
}
h1 {
font-size: 2.5rem;
margin-bottom: 2rem;
color: #fff;
}
.user-form {
width: 100%;
max-width: 700px;
margin-bottom: 2rem;
}
.user-form input {
@ -35,6 +49,7 @@ body {
font-size: 1rem;
box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
0 15px 40px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease; /* Smoother transitions */
}
.user-form input::placeholder {
@ -43,6 +58,24 @@ body {
.user-form input:focus {
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 {
@ -54,6 +87,12 @@ body {
display: flex;
padding: 3rem;
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 {
@ -61,11 +100,13 @@ body {
border: 10px solid #2a2a72;
height: 150px;
width: 150px;
animation: fadeInUp 0.8s ease-out both; /* Delayed animation */
}
.user-info {
color: #eee;
margin-left: 2rem;
animation: fadeInUp 1s ease-out both; /* Delayed animation */
}
.user-info h2 {
@ -99,6 +140,13 @@ body {
margin-right: 0.5rem;
margin-bottom: 0.5rem;
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) {
@ -110,4 +158,13 @@ body {
.user-form {
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>
</button>
<img
src="https://images.ctfassets.net/4cd45et68cgf/7LrExJ6PAj6MSIPkDyCO86/542b1dfabbf3959908f69be546879952/Netflix-Brand-Logo.png?w=684&h=456"
<img src="https://images.ctfassets.net/4cd45et68cgf/7LrExJ6PAj6MSIPkDyCO86/542b1dfabbf3959908f69be546879952/Netflix-Brand-Logo.png?w=684&h=456"
alt="Logo" class="logo">
<p class="text">Mobile Navigation</p>
<div class="nav nav-black">
<div class="nav nav-red">
<div class="nav nav-white">
<div class="nav nav-black" id="nav">
<div class="nav-white">
<button class="nav-btn close-btn">
<i class="fas fa-times"></i>
</button>
<img
src="https://images.ctfassets.net/4cd45et68cgf/7LrExJ6PAj6MSIPkDyCO86/542b1dfabbf3959908f69be546879952/Netflix-Brand-Logo.png?w=684&h=456"
<img src="https://images.ctfassets.net/4cd45et68cgf/7LrExJ6PAj6MSIPkDyCO86/542b1dfabbf3959908f69be546879952/Netflix-Brand-Logo.png?w=684&h=456"
alt="Logo" class="logo">
<ul class="list">
@ -48,7 +45,6 @@
</ul>
</div>
</div>
</div>
<script src="script.js"></script>
</body>

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

@ -1,11 +1,11 @@
const open_btn = document.querySelector('.open-btn')
const close_btn = document.querySelector('.close-btn')
const nav = document.querySelectorAll('.nav')
const open_btn = document.querySelector('.open-btn');
const close_btn = document.querySelector('.close-btn');
const nav = document.getElementById('nav');
open_btn.addEventListener('click', () => {
nav.forEach(nav_el => nav_el.classList.add('visible'))
})
nav.classList.add('visible');
});
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%;
max-width: 480px;
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 {
@ -74,11 +59,6 @@ body {
width: 95%;
padding: 40px;
position: relative;
transition-delay: 0s;
}
.nav-white.visible {
transition-delay: 0.4s;
}
.close-btn {

8
quiz-app/index.html
Unescape View File

@ -13,22 +13,22 @@
<ul>
<li>
<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>
<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>
<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>
<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>
</ul>
</div>

63
quiz-app/script.js
Unescape View File

@ -20,7 +20,7 @@ const quizData = [
a: "Hypertext Markup Language",
b: "Hypertext Markdown Language",
c: "Hyperloop Machine Language",
d: "Helicopters Terminals Motorboats Lamborginis",
d: "Helicopters Terminals Motorboats Lamborghinis",
correct: "a",
},
{
@ -33,66 +33,67 @@ const quizData = [
},
];
const quiz = document.getElementById('quiz')
const answerEls = document.querySelectorAll('.answer')
const questionEl = document.getElementById('question')
const a_text = document.getElementById('a_text')
const b_text = document.getElementById('b_text')
const c_text = document.getElementById('c_text')
const d_text = document.getElementById('d_text')
const submitBtn = document.getElementById('submit')
const quiz = document.getElementById('quiz');
const answerEls = document.querySelectorAll('.answer');
const questionEl = document.getElementById('question');
const a_text = document.getElementById('a_text');
const b_text = document.getElementById('b_text');
const c_text = document.getElementById('c_text');
const d_text = document.getElementById('d_text');
const submitBtn = document.getElementById('submit');
let currentQuiz = 0
let score = 0
let currentQuiz = 0;
let score = 0;
loadQuiz()
loadQuiz();
function loadQuiz() {
deselectAnswers()
deselectAnswers();
const currentQuizData = quizData[currentQuiz]
const currentQuizData = quizData[currentQuiz];
questionEl.innerText = currentQuizData.question
a_text.innerText = currentQuizData.a
b_text.innerText = currentQuizData.b
c_text.innerText = currentQuizData.c
d_text.innerText = currentQuizData.d
questionEl.innerText = currentQuizData.question;
a_text.innerText = currentQuizData.a;
b_text.innerText = currentQuizData.b;
c_text.innerText = currentQuizData.c;
d_text.innerText = currentQuizData.d;
}
function deselectAnswers() {
answerEls.forEach(answerEl => answerEl.checked = false)
answerEls.forEach(answerEl => answerEl.checked = false);
}
function getSelected() {
let answer
let answer;
answerEls.forEach(answerEl => {
if (answerEl.checked) {
answer = answerEl.id
answer = answerEl.id;
}
})
});
return answer
return answer;
}
submitBtn.addEventListener('click', () => {
const answer = getSelected()
const answer = getSelected();
if (answer) {
if (answer === quizData[currentQuiz].correct) {
score++
score++;
}
currentQuiz++
currentQuiz++;
if (currentQuiz < quizData.length) {
loadQuiz()
loadQuiz();
} else {
quiz.innerHTML = `
<h2>You answered ${score}/${quizData.length} questions correctly</h2>
<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) => {
code.addEventListener('keydown', (e) => {
if (e.key >= 0 && e.key <= 9) {
codes[idx].value = ''
setTimeout(() => codes[idx + 1].focus(), 10)
} else if(e.key === 'Backspace') {
setTimeout(() => codes[idx - 1].focus(), 10)
codes[idx].value = e.key;
if (idx < codes.length - 1) {
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