diff --git a/_project_starter_/index.html b/_project_starter_/index.html index 4783501..da1d8dd 100644 --- a/_project_starter_/index.html +++ b/_project_starter_/index.html @@ -7,7 +7,11 @@ My Project -

Project Starter

+
+

Welcome to My Project

+

This is a project starter template to get you started!

+ +
diff --git a/_project_starter_/script.js b/_project_starter_/script.js index 8b13789..b7ec8c7 100644 --- a/_project_starter_/script.js +++ b/_project_starter_/script.js @@ -1 +1,4 @@ - +document.getElementById('start-btn').addEventListener('click', function() { + alert('Welcome to My Project! Let\'s get started!'); + }); + \ No newline at end of file diff --git a/_project_starter_/style.css b/_project_starter_/style.css index ec80c4b..a229ca5 100644 --- a/_project_starter_/style.css +++ b/_project_starter_/style.css @@ -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; } diff --git a/github-profiles/index.html b/github-profiles/index.html index 5157144..8e3c486 100644 --- a/github-profiles/index.html +++ b/github-profiles/index.html @@ -4,16 +4,32 @@ - Github Profiles + GitHub Profiles -
- -
+
+

GitHub Profile Finder

+ + +
+ +
+ + +
+
-
+ + - + diff --git a/github-profiles/script.js b/github-profiles/script.js index 6ac589d..a9e553e 100644 --- a/github-profiles/script.js +++ b/github-profiles/script.js @@ -1,92 +1,96 @@ -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) - - createUserCard(data) - getRepos(username) - } catch(err) { - if(err.response.status == 404) { - createErrorCard('No profile with this username') - } + try { + const { data } = await axios(APIURL + username); + + createUserCard(data); // Create user card with fetched data + getRepos(username); // Fetch and display user's repositories + } catch (err) { + 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) - } catch(err) { - createErrorCard('Problem fetching repos') - } + try { + const { data } = await axios(APIURL + username + '/repos?sort=created'); + addReposToCard(data); // Add repositories to the user card + } catch (err) { + createErrorCard('Problem fetching repositories'); + } } +// Create user card with profile information function createUserCard(user) { - const userID = user.name || user.login - const userBio = user.bio ? `

${user.bio}

` : '' - const cardHTML = ` + const userID = user.name || user.login; + const userBio = user.bio ? `

${user.bio}

` : ''; + + // HTML structure for user profile card + const cardHTML = `
-
- ${user.name} +
+ ${userID} +
+
-
-

${userID}

- ${userBio} - - -
-
-
- ` - 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 = ` -
-

${msg}

-
- ` + const cardHTML = ` +
+

${msg}

+
+ `; - main.innerHTML = cardHTML + main.innerHTML = cardHTML; } +// Add repositories to the user card function addReposToCard(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 - - reposEl.appendChild(repoEl) - }) + 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; + + reposEl.appendChild(repoEl); + }); } +// Event listener for form submission form.addEventListener('submit', (e) => { - e.preventDefault() - - const user = search.value - - if(user) { - getUser(user) - - search.value = '' - } -}) - + e.preventDefault(); // Prevent the form from submitting traditionally + + const user = search.value.trim(); // Get the username input value + + if (user) { + getUser(user); // Fetch and display user info + search.value = ''; // Clear the search input + } +}); diff --git a/github-profiles/style.css b/github-profiles/style.css index b648f88..d4a1d83 100644 --- a/github-profiles/style.css +++ b/github-profiles/style.css @@ -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; + } +} \ No newline at end of file diff --git a/netflix-mobile-navigation/index.html b/netflix-mobile-navigation/index.html index 1b10c76..e8b6175 100644 --- a/netflix-mobile-navigation/index.html +++ b/netflix-mobile-navigation/index.html @@ -16,41 +16,37 @@ -

Mobile Navigation

-
-
-
- - - - - -
+ - \ No newline at end of file + diff --git a/netflix-mobile-navigation/script.js b/netflix-mobile-navigation/script.js index 3bc1f9a..4ca9476 100644 --- a/netflix-mobile-navigation/script.js +++ b/netflix-mobile-navigation/script.js @@ -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')) -}) \ No newline at end of file + nav.classList.remove('visible'); +}); diff --git a/netflix-mobile-navigation/style.css b/netflix-mobile-navigation/style.css index bf023ac..1ba5701 100644 --- a/netflix-mobile-navigation/style.css +++ b/netflix-mobile-navigation/style.css @@ -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 { diff --git a/quiz-app/index.html b/quiz-app/index.html index 688716a..8d9d20d 100644 --- a/quiz-app/index.html +++ b/quiz-app/index.html @@ -1,39 +1,39 @@ - + Quiz App - - + +
-
-

Question text

-
    -
  • - - -
    • +
    +

    Question text

    +
      +
    • + + +
      • -
    • - - -
      • +
    • + + +
      • -
    • - - -
      • +
    • + + +
      • -
    • - - -
      • -
    -
    - +
  • + + +
    • +
+
+
- + diff --git a/quiz-app/script.js b/quiz-app/script.js index 543ee19..dc4c6e9 100644 --- a/quiz-app/script.js +++ b/quiz-app/script.js @@ -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 + if (answerEl.checked) { + answer = answerEl.id; } - }) + }); - return answer + return answer; } submitBtn.addEventListener('click', () => { - const answer = getSelected() + const answer = getSelected(); - if(answer) { - if(answer === quizData[currentQuiz].correct) { - score++ + if (answer) { + if (answer === quizData[currentQuiz].correct) { + score++; } - currentQuiz++ + currentQuiz++; - if(currentQuiz < quizData.length) { - loadQuiz() + if (currentQuiz < quizData.length) { + loadQuiz(); } else { quiz.innerHTML = `

You answered ${score}/${quizData.length} questions correctly

- - ` + `; } + } else { + alert('Please select an answer before submitting!'); // Add an alert for no selection } -}) \ No newline at end of file +}); diff --git a/verify-account-ui/script.js b/verify-account-ui/script.js index 6df6bf0..a23754c 100644 --- a/verify-account-ui/script.js +++ b/verify-account-ui/script.js @@ -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) + if (e.key >= 0 && e.key <= 9) { + 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); + } } - }) -}) \ No newline at end of file + }); + + 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); + } + }); +});