From 3f1e832f5678c18c1ec3128b5e998f87263f7326 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 17 Dec 2024 00:37:24 +0530 Subject: [PATCH 01/50] create a templete for project --- Source-Code/NotesKeeper/index.html | 12 ++++++++++++ Source-Code/NotesKeeper/script.js | 0 Source-Code/NotesKeeper/style.css | 0 3 files changed, 12 insertions(+) create mode 100644 Source-Code/NotesKeeper/index.html create mode 100644 Source-Code/NotesKeeper/script.js create mode 100644 Source-Code/NotesKeeper/style.css diff --git a/Source-Code/NotesKeeper/index.html b/Source-Code/NotesKeeper/index.html new file mode 100644 index 0000000..5914054 --- /dev/null +++ b/Source-Code/NotesKeeper/index.html @@ -0,0 +1,12 @@ + + + + + + Notes Keeper + + + + + + \ No newline at end of file diff --git a/Source-Code/NotesKeeper/script.js b/Source-Code/NotesKeeper/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/NotesKeeper/style.css b/Source-Code/NotesKeeper/style.css new file mode 100644 index 0000000..e69de29 From 51bed6bc08d5eca8ff04c85a469a6d701da8a4c9 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 17 Dec 2024 00:53:44 +0530 Subject: [PATCH 02/50] Add the project --- Source-Code/NotesKeeper/index.html | 23 ++++++ Source-Code/NotesKeeper/script.js | 65 +++++++++++++++++ Source-Code/NotesKeeper/style.css | 109 +++++++++++++++++++++++++++++ 3 files changed, 197 insertions(+) diff --git a/Source-Code/NotesKeeper/index.html b/Source-Code/NotesKeeper/index.html index 5914054..3e6a629 100644 --- a/Source-Code/NotesKeeper/index.html +++ b/Source-Code/NotesKeeper/index.html @@ -7,6 +7,29 @@ + + +
+

Welcome to Notes App

+
+
+
+ +
+
+

Your Notes

+
+
No notes added yet.
+
\ No newline at end of file diff --git a/Source-Code/NotesKeeper/script.js b/Source-Code/NotesKeeper/script.js index e69de29..77bc42a 100644 --- a/Source-Code/NotesKeeper/script.js +++ b/Source-Code/NotesKeeper/script.js @@ -0,0 +1,65 @@ +console.log('Welcome to Magic Notes App!'); + +// Function Declaration Before Use +function showNotes() { + const notesObj = JSON.parse(localStorage.getItem('notes')) || []; + const notesElem = document.getElementById('notes'); + + if (notesObj.length === 0) { + notesElem.innerHTML = 'No notes added yet.'; + return; + } + + notesElem.innerHTML = notesObj + .map( + (note, index) => ` +
+

Note ${index + 1}

+

${note}

+ +
+ `, + ) + .join(''); +} + +// Event Listener for Add Note Button +document.getElementById('myBtn').addEventListener('click', () => { + const textArea = document.getElementById('textarea'); + const noteContent = textArea.value.trim(); + if (!noteContent) { + alert('Please enter a note!'); + return; + } + + const notesObj = JSON.parse(localStorage.getItem('notes')) || []; + notesObj.push(noteContent); + localStorage.setItem('notes', JSON.stringify(notesObj)); + textArea.value = ''; + showNotes(); +}); + +// Delete Note Function +// eslint-disable-next-line no-unused-vars +function deleteNote(index) { + const notesObj = JSON.parse(localStorage.getItem('notes')) || []; + notesObj.splice(index, 1); + localStorage.setItem('notes', JSON.stringify(notesObj)); + showNotes(); +} + +// Search Notes +document.getElementById('search').addEventListener('input', function () { + const inputVal = this.value.toLowerCase().trim(); + const noteBoxes = document.getElementsByClassName('noteBox'); + + Array.from(noteBoxes).forEach((element) => { + const boxTxt = element + .querySelector('.paraHeading') + .innerText.toLowerCase(); + element.style.display = boxTxt.includes(inputVal) ? 'block' : 'none'; + }); +}); + +// Initial Call +showNotes(); diff --git a/Source-Code/NotesKeeper/style.css b/Source-Code/NotesKeeper/style.css index e69de29..b6f5f85 100644 --- a/Source-Code/NotesKeeper/style.css +++ b/Source-Code/NotesKeeper/style.css @@ -0,0 +1,109 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + background-color: #f4f4f9; + padding: 20px; +} + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #333; + padding: 10px 20px; + color: white; +} + +.navbar #logo { + font-size: 24px; + font-weight: bold; +} + +.navbar ul { + list-style: none; + display: flex; +} + +.navbar ul li { + margin-left: 20px; +} + +.navbar ul li a { + color: white; + text-decoration: none; + font-size: 18px; +} + +.form-group input { + padding: 5px; + margin-right: 10px; +} + +.form-group button { + padding: 5px 10px; + background-color: #ff6700; + border: none; + color: white; + cursor: pointer; +} + +.container { + margin-top: 30px; +} + +.note-input { + background: white; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.note-input label { + font-size: 18px; + font-weight: bold; +} + +.note-input textarea { + width: 100%; + padding: 10px; + margin-top: 10px; + border: 1px solid #ccc; + border-radius: 5px; + resize: none; +} + +.note-input button { + margin-top: 10px; + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.hrStyle { + margin: 20px 0; +} + +.notesBox { + background: white; + display: flex; + gap: 30px; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + min-height: 100px; + text-align: center; + font-size: 18px; + color: #555; +} + +.buttonHeading { + padding: 5px 20px; +} From ccee6d68dda4145d0fbde50f300803d28b32bb59 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 17 Dec 2024 00:56:41 +0530 Subject: [PATCH 03/50] update the readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index aec14bb..ad3dbb5 100644 --- a/README.md +++ b/README.md @@ -397,6 +397,17 @@ In order to run this project you need: +
  • +
    +Notes Keeper +

    The Notes Keeper App is a web-based application designed for creating, storing, and managing personal notes. It offers a simple and intuitive interface for adding, searching, and deleting notes using local storage, ensuring data persistence across sessions.

    + +
    +
    • +

    (back to top)

    From d9ab3e87b5198fa69c416d2b339c936bbc4441b0 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 17 Dec 2024 01:26:13 +0530 Subject: [PATCH 04/50] add the project --- Source-Code/CurrencyConverter/index.html | 33 +++++++++++++++++ Source-Code/CurrencyConverter/script.js | 27 ++++++++++++++ Source-Code/CurrencyConverter/style.css | 46 ++++++++++++++++++++++++ 3 files changed, 106 insertions(+) create mode 100644 Source-Code/CurrencyConverter/index.html create mode 100644 Source-Code/CurrencyConverter/script.js create mode 100644 Source-Code/CurrencyConverter/style.css diff --git a/Source-Code/CurrencyConverter/index.html b/Source-Code/CurrencyConverter/index.html new file mode 100644 index 0000000..52d77f6 --- /dev/null +++ b/Source-Code/CurrencyConverter/index.html @@ -0,0 +1,33 @@ + + + + + + Currency Converter + + + +
    +

    Currency Converter

    +
    + + + to + + +
    +
    +
    + + + \ No newline at end of file diff --git a/Source-Code/CurrencyConverter/script.js b/Source-Code/CurrencyConverter/script.js new file mode 100644 index 0000000..afb6869 --- /dev/null +++ b/Source-Code/CurrencyConverter/script.js @@ -0,0 +1,27 @@ +document.getElementById('convert').addEventListener('click', () => { + const amount = document.getElementById('amount').value; + const fromCurrency = document.getElementById('from-currency').value; + const toCurrency = document.getElementById('to-currency').value; + + if (amount === '' || Number.isNaN(Number(amount))) { + alert('Please enter a valid amount'); + return; + } + + const apiUrl = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`; + + fetch(apiUrl) + .then((response) => response.json()) + .then((data) => { + const exchangeRate = data.rates[toCurrency]; + const convertedAmount = (amount * exchangeRate).toFixed(2); + document.getElementById( + 'result', + ).innerText = `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`; + }) + .catch((error) => { + document.getElementById( + 'result', + ).innerText = `Error fetching exchange rates. ${error}Try again later.`; + }); +}); diff --git a/Source-Code/CurrencyConverter/style.css b/Source-Code/CurrencyConverter/style.css new file mode 100644 index 0000000..e5cf912 --- /dev/null +++ b/Source-Code/CurrencyConverter/style.css @@ -0,0 +1,46 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background-color: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 400px; + text-align: center; +} + +h1 { + margin-bottom: 20px; +} + +input, select, button { + margin: 10px 0; + padding: 10px; + font-size: 16px; +} + +button { + background-color: #4CAF50; + color: white; + border: none; + cursor: pointer; +} + +button:hover { + background-color: #45a049; +} + +#result { + margin-top: 20px; + font-size: 18px; + font-weight: bold; +} From 7bcce3db035d0c619bd2b639e0722b174720b96b Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 17 Dec 2024 01:26:54 +0530 Subject: [PATCH 05/50] correct the css --- Source-Code/CurrencyConverter/style.css | 56 +++++++++++++------------ 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/Source-Code/CurrencyConverter/style.css b/Source-Code/CurrencyConverter/style.css index e5cf912..e318503 100644 --- a/Source-Code/CurrencyConverter/style.css +++ b/Source-Code/CurrencyConverter/style.css @@ -1,46 +1,48 @@ body { - font-family: Arial, sans-serif; - background-color: #f4f4f4; - margin: 0; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; } .container { - background-color: white; - padding: 20px; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - width: 400px; - text-align: center; + background-color: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 400px; + text-align: center; } h1 { - margin-bottom: 20px; + margin-bottom: 20px; } -input, select, button { - margin: 10px 0; - padding: 10px; - font-size: 16px; +input, +select, +button { + margin: 10px 0; + padding: 10px; + font-size: 16px; } button { - background-color: #4CAF50; - color: white; - border: none; - cursor: pointer; + background-color: #4caf50; + color: white; + border: none; + cursor: pointer; } button:hover { - background-color: #45a049; + background-color: #45a049; } #result { - margin-top: 20px; - font-size: 18px; - font-weight: bold; + margin-top: 20px; + font-size: 18px; + font-weight: bold; } From a94bc17434916dcd11c4248efdcc50dcedc1839f Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 17 Dec 2024 01:29:31 +0530 Subject: [PATCH 06/50] updat eteh readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index ad3dbb5..7d52ee5 100644 --- a/README.md +++ b/README.md @@ -408,6 +408,17 @@ In order to run this project you need: +
  • +
    +Currency Converter +

    This project is a Currency Converter application built using HTML, CSS, and JavaScript. It allows users to convert one currency into another by inputting an amount and selecting the currencies they want to convert from and to.

    + +
    +
    • +

    (back to top)

    From 9f278323e1155d61cb3375f690d7b7b091d89a06 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Thu, 19 Dec 2024 21:53:52 +0530 Subject: [PATCH 07/50] Add the project --- Source-Code/JustRelax/index.html | 24 +++++++ Source-Code/JustRelax/script.js | 32 +++++++++ Source-Code/JustRelax/style.css | 116 +++++++++++++++++++++++++++++++ 3 files changed, 172 insertions(+) create mode 100644 Source-Code/JustRelax/index.html create mode 100644 Source-Code/JustRelax/script.js create mode 100644 Source-Code/JustRelax/style.css diff --git a/Source-Code/JustRelax/index.html b/Source-Code/JustRelax/index.html new file mode 100644 index 0000000..796e484 --- /dev/null +++ b/Source-Code/JustRelax/index.html @@ -0,0 +1,24 @@ + + + + + + + Just Relax App + + + + +

    Just Relax !!

    +
    +
    +

    +
    + +
    +
    +
    + + + + \ No newline at end of file diff --git a/Source-Code/JustRelax/script.js b/Source-Code/JustRelax/script.js new file mode 100644 index 0000000..e7098fe --- /dev/null +++ b/Source-Code/JustRelax/script.js @@ -0,0 +1,32 @@ +/* eslint-disable no-use-before-define */ +const container = document.querySelector('.container'); +const text = document.querySelector('#text'); + +const TOTAL_TIME = 7500; +const BREATHE_TIME = (TOTAL_TIME / 5) * 2; +const HOLD_TIME = TOTAL_TIME / 7; + +// Start the animation +const startBreathingAnimation = () => { + animateBreathing(); + setInterval(animateBreathing, TOTAL_TIME); +}; + +const animateBreathing = () => { + text.textContent = 'Breathe In!'; + container.classList.add('grow'); + container.classList.remove('shrink'); + + setTimeout(() => { + text.textContent = 'Hold...'; + + setTimeout(() => { + text.textContent = 'Breathe Out!'; + container.classList.add('shrink'); + container.classList.remove('grow'); + }, HOLD_TIME); + }, BREATHE_TIME); +}; + +// Initialize the animation +startBreathingAnimation(); diff --git a/Source-Code/JustRelax/style.css b/Source-Code/JustRelax/style.css new file mode 100644 index 0000000..447fe0c --- /dev/null +++ b/Source-Code/JustRelax/style.css @@ -0,0 +1,116 @@ +@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@550;700&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background: linear-gradient(90deg, #5567b7, #53a0ad); + color: rgb(243, 250, 235); + font-family: 'Dancing Script', sans-serif; + font-size: large; + font-weight: 500; + min-height: 100vh; + overflow: hidden; + display: flex; + align-items: center; + flex-direction: column; + margin: 0; +} + +.container { + display: flex; + align-items: center; + justify-content: center; + height: 300px; + width: 300px; + margin: auto; + position: relative; + transform: scale(1); +} + +.gradient-circle { + background: + conic-gradient( + #5567b7 0%, + #954ca4 40%, + #fff 40%, + #fff 60%, + #53afb3 60%, + #53a0ad 100% + ); + height: 320px; + width: 320px; + position: absolute; + top: -10px; + left: -10px; + z-index: -2; + border-radius: 50%; +} + +.circle { + background-color: rgb(2, 16, 43); + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; + border-radius: 50%; +} + +.pointer-container { + position: absolute; + top: -40px; + left: 140px; + width: 20px; + height: 190px; + animation: rotate 7.5s linear forwards infinite; + transform-origin: bottom center; +} + +.pointer { + background-color: lavender; + border-radius: 50%; + height: 20px; + width: 20px; + display: block; +} + +.container.grow { + animation: grow 3s linear forwards; +} + +.container.shrink { + animation: shrink 3s linear forwards; +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@keyframes grow { + from { + transform: scale(1); + } + + to { + transform: scale(1.2); + } +} + +@keyframes shrink { + from { + transform: scale(1.2); + } + + to { + transform: scale(1); + } +} From 825e5b1132407155eadd4c70bb0116d57465262a Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Thu, 19 Dec 2024 21:57:56 +0530 Subject: [PATCH 08/50] update the with the project --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 7d52ee5..a57a985 100644 --- a/README.md +++ b/README.md @@ -419,6 +419,17 @@ In order to run this project you need: +
  • +
    +Just Relax +

    The Just Relax App is a breathing exercise web application built with HTML, CSS, and JavaScript (ES6+). It guides users through a breathing exercise by animating visual cues and displaying text prompts such as "Breathe In," "Hold," and "Breathe Out." This helps users relax and practice mindfulness.

    + +
    +
    • +

    (back to top)

    From 6edc85f7d721634cec80211b8d0c352dd5d53119 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Thu, 19 Dec 2024 22:32:07 +0530 Subject: [PATCH 09/50] add the recipe app --- Source-Code/RecipeApp/index.html | 19 ++++++++++ Source-Code/RecipeApp/script.js | 38 ++++++++++++++++++++ Source-Code/RecipeApp/style.css | 61 ++++++++++++++++++++++++++++++++ 3 files changed, 118 insertions(+) create mode 100644 Source-Code/RecipeApp/index.html create mode 100644 Source-Code/RecipeApp/script.js create mode 100644 Source-Code/RecipeApp/style.css diff --git a/Source-Code/RecipeApp/index.html b/Source-Code/RecipeApp/index.html new file mode 100644 index 0000000..51ba5bf --- /dev/null +++ b/Source-Code/RecipeApp/index.html @@ -0,0 +1,19 @@ + + + + + + Recipe App + + + +

    Recipe App

    +
    + + +
    +
    + + + + \ No newline at end of file diff --git a/Source-Code/RecipeApp/script.js b/Source-Code/RecipeApp/script.js new file mode 100644 index 0000000..de13836 --- /dev/null +++ b/Source-Code/RecipeApp/script.js @@ -0,0 +1,38 @@ +/* eslint-disable no-use-before-define */ + +const searchRecipes = async () => { + const query = document.getElementById('search-input').value; + if (!query) return; + + try { + const response = await fetch( + `https://www.themealdb.com/api/json/v1/1/search.php?s=${query}`, + ); + const data = await response.json(); + displayRecipes(data.meals); + } catch (error) { + console.error('Error fetching recipes:', error); + } +}; + +const displayRecipes = (meals) => { + const recipesContainer = document.getElementById('recipes'); + recipesContainer.innerHTML = ''; + + if (!meals) { + recipesContainer.innerHTML = '

    No recipes found!

    '; + return; + } + + meals.forEach((meal) => { + const recipe = document.createElement('div'); + recipe.className = 'recipe'; + recipe.innerHTML = ` + ${meal.strMeal} +

    ${meal.strMeal}

    + View Recipe + `; + recipesContainer.appendChild(recipe); + }); +}; +document.getElementById('search').addEventListener('click', searchRecipes); diff --git a/Source-Code/RecipeApp/style.css b/Source-Code/RecipeApp/style.css new file mode 100644 index 0000000..3cea222 --- /dev/null +++ b/Source-Code/RecipeApp/style.css @@ -0,0 +1,61 @@ +body { + font-family: Arial, sans-serif; + background-color: #f8f8f8; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +h1 { + text-align: center; + color: #333; +} + +.search-box { + display: flex; + gap: 20px; +} + +input[type="text"] { + min-width: 300px; + max-width: 400px; + padding: 10px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 4px; +} + +button { + padding: 10px 20px; + font-size: 16px; + background: #28a745; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background: #218838; +} + +.recipes { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; +} + +.recipe { + background: #f4f4f4; + padding: 15px; + border-radius: 8px; + text-align: center; +} + +.recipe img { + width: 100%; + border-radius: 8px; +} From c2a2ce0de73b14a5b597ba37126d7a8d0ad3280b Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Thu, 19 Dec 2024 23:16:45 +0530 Subject: [PATCH 10/50] update the readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index a57a985..f34710e 100644 --- a/README.md +++ b/README.md @@ -430,6 +430,17 @@ In order to run this project you need: +
  • +
    +Recipe App +

    The Recipe App is designed to make cooking enjoyable and easy for everyone, from beginners to seasoned chefs. Discover a wide range of recipes, create your own, and share them with the community. With an intuitive interface and smart features, it helps you explore new dishes, organize your favorite recipes, and plan meals for any occasion.

    + +
    +
    • +

    (back to top)

    From 14fa618b4c2daff4de6845871395ac19614267c1 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 01:30:42 +0530 Subject: [PATCH 11/50] Add the features for music --- Source-Code/MusicPlayer/index.html | 35 ++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 Source-Code/MusicPlayer/index.html diff --git a/Source-Code/MusicPlayer/index.html b/Source-Code/MusicPlayer/index.html new file mode 100644 index 0000000..1c3f58f --- /dev/null +++ b/Source-Code/MusicPlayer/index.html @@ -0,0 +1,35 @@ + + + + + + Music Player + + + +
    +

    Music Player

    +
    +

    No song playing

    + +
    + + + +
    + +
    +
    +

    Your Playlist

    +
      +
      +
      +

      Add Your Songs

      + + +
      +
      + + + + \ No newline at end of file From 5d00a75af34331d8f36fb64a83645d9fe1c74a01 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 01:31:16 +0530 Subject: [PATCH 12/50] Add the styles for music player --- Source-Code/MusicPlayer/style.css | 86 +++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 Source-Code/MusicPlayer/style.css diff --git a/Source-Code/MusicPlayer/style.css b/Source-Code/MusicPlayer/style.css new file mode 100644 index 0000000..9cc2090 --- /dev/null +++ b/Source-Code/MusicPlayer/style.css @@ -0,0 +1,86 @@ +/* styles.css */ +body { + font-family: Arial, sans-serif; + background-color: #1e1e2f; + color: #fff; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.music-player { + text-align: center; + background: #29293d; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); + width: 300px; +} + +.player h2 { + font-size: 18px; + margin-bottom: 20px; +} + +.controls { + display: flex; + justify-content: center; + gap: 15px; + margin-bottom: 15px; +} + +.controls button { + background: #3b3b57; + color: white; + border: none; + padding: 10px 15px; + border-radius: 5px; + cursor: pointer; + font-size: 16px; +} + +.add-song button { + background: #3b3b57; + color: white; + border: none; + padding: 10px; + margin-top: 10px; + border-radius: 5px; + cursor: pointer; +} + +.controls button:hover { + background: #50506b; +} + +#volume { + width: 100%; +} + +.song-list ul { + list-style: none; + padding: 0; + margin: 0; +} + +.song-list li { + background: #3b3b57; + padding: 10px; + margin: 5px 0; + border-radius: 5px; + cursor: pointer; +} + +.song-list li:hover { + background: #50506b; +} + +.add-song input { + margin-top: 10px; +} + +.add-song button:hover { + background: #50506b; +} From 295698abfff913511c40a60765ce095a3d89a66c Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 01:31:43 +0530 Subject: [PATCH 13/50] Add the functiaonality of the feature --- Source-Code/MusicPlayer/script.js | 95 +++++++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 Source-Code/MusicPlayer/script.js diff --git a/Source-Code/MusicPlayer/script.js b/Source-Code/MusicPlayer/script.js new file mode 100644 index 0000000..980df0e --- /dev/null +++ b/Source-Code/MusicPlayer/script.js @@ -0,0 +1,95 @@ +// script.js + +const audio = document.getElementById('audio'); +const songTitle = document.getElementById('song-title'); +const playButton = document.getElementById('play'); +const nextButton = document.getElementById('next'); +const prevButton = document.getElementById('prev'); +const volumeControl = document.getElementById('volume'); +const playlist = document.getElementById('playlist'); +const fileInput = document.getElementById('file-input'); +const addSongButton = document.getElementById('add-song-btn'); + +const songs = []; +let currentSongIndex = 0; + +// Load song by index +const loadSong = (index) => { + const song = songs[index]; + audio.src = song.src; + songTitle.textContent = song.title; +}; + +// Play/Pause functionality +const togglePlay = () => { + if (audio.paused) { + audio.play(); + playButton.textContent = '⏸️'; + } else { + audio.pause(); + playButton.textContent = '▶️'; + } +}; + +// Next song +const nextSong = () => { + currentSongIndex = (currentSongIndex + 1) % songs.length; + loadSong(currentSongIndex); + audio.play(); + playButton.textContent = '⏸️'; +}; + +// Previous song +const prevSong = () => { + currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length; + loadSong(currentSongIndex); + audio.play(); + playButton.textContent = '⏸️'; +}; + +// Volume control +const changeVolume = () => { + audio.volume = volumeControl.value; +}; + +// Update playlist display +const updatePlaylist = () => { + playlist.innerHTML = ''; + songs.forEach((song, index) => { + const li = document.createElement('li'); + li.textContent = song.title; + li.addEventListener('click', () => { + currentSongIndex = index; + loadSong(currentSongIndex); + audio.play(); + playButton.textContent = '⏸️'; + }); + playlist.appendChild(li); + }); +}; +// Add a song to the playlist +function addSong(file) { + const song = { + title: file.name, + src: URL.createObjectURL(file), + }; + songs.push(song); + updatePlaylist(); +} + +// Event listeners +playButton.addEventListener('click', togglePlay); +nextButton.addEventListener('click', nextSong); +prevButton.addEventListener('click', prevSong); +volumeControl.addEventListener('input', changeVolume); + +addSongButton.addEventListener('click', () => { + const file = fileInput.files[0]; + if (file) { + addSong(file); + fileInput.value = ''; // Reset file input + } +}); + +// Initialize player with no songs +songTitle.textContent = 'No song playing'; From cf5d744c0fa82dfc2c593cf12c43c247fbcfe2ac Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 01:31:58 +0530 Subject: [PATCH 14/50] Update the readme file --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index f34710e..72f2cb3 100644 --- a/README.md +++ b/README.md @@ -441,6 +441,17 @@ In order to run this project you need: +
    • +
      +Music Player +

      A simple, user-friendly Music Player built using HTML, CSS, and JavaScript. This app allows users to upload and manage their favorite songs dynamically, creating a personalized playlist.

      + +
      +
      • +

      (back to top)

      From d9cb1e261e690f0c95b0982d47c4b424f55c28aa Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 02:09:06 +0530 Subject: [PATCH 15/50] Add the project --- Source-Code/QuizApp/index.html | 35 +++++++++++ Source-Code/QuizApp/script.js | 107 +++++++++++++++++++++++++++++++++ Source-Code/QuizApp/style.css | 85 ++++++++++++++++++++++++++ 3 files changed, 227 insertions(+) create mode 100644 Source-Code/QuizApp/index.html create mode 100644 Source-Code/QuizApp/script.js create mode 100644 Source-Code/QuizApp/style.css diff --git a/Source-Code/QuizApp/index.html b/Source-Code/QuizApp/index.html new file mode 100644 index 0000000..437eb41 --- /dev/null +++ b/Source-Code/QuizApp/index.html @@ -0,0 +1,35 @@ + + + + + + Quiz App + + + +
      +

      Quiz App

      +
      +
      +

      Loading question...

      +
      +
      + + + + +
      +
      + +
      +
      + +
      + + + + diff --git a/Source-Code/QuizApp/script.js b/Source-Code/QuizApp/script.js new file mode 100644 index 0000000..6a5b71a --- /dev/null +++ b/Source-Code/QuizApp/script.js @@ -0,0 +1,107 @@ +const questions = [ + { + question: 'What is the capital of France?', + answers: ['Berlin', 'Madrid', 'Paris', 'Rome'], + correct: 2, + }, + { + question: 'Which planet is known as the Red Planet?', + answers: ['Earth', 'Mars', 'Jupiter', 'Saturn'], + correct: 1, + }, + { + question: 'What is the largest ocean on Earth?', + answers: ['Atlantic', 'Indian', 'Arctic', 'Pacific'], + correct: 3, + }, + { + question: "Who wrote 'Romeo and Juliet'?", + answers: ['Shakespeare', 'Dickens', 'Hemingway', 'Austen'], + correct: 0, + }, +]; + +let currentQuestionIndex = 0; +let score = 0; + +const questionElement = document.getElementById('question'); +const answerButtons = document.querySelectorAll('.answer-btn'); +const nextButton = document.getElementById('next-btn'); +const resultContainer = document.getElementById('result-container'); +const restartButton = document.getElementById('restart-btn'); +const scoreElement = document.getElementById('score'); + +// Load question and answers +const loadQuestion = () => { + const currentQuestion = questions[currentQuestionIndex]; + questionElement.textContent = currentQuestion.question; + + answerButtons.forEach((button, index) => { + button.textContent = currentQuestion.answers[index]; + button.disabled = false; + button.style.backgroundColor = '#4CAF50'; // Reset button color + }); + + nextButton.disabled = true; // Disable next button until an answer is selected +}; + +// Handle answer selection +const handleAnswerClick = (index) => { + const currentQuestion = questions[currentQuestionIndex]; + + if (index === currentQuestion.correct) { + score += 1; + } + + // Disable all buttons after an answer is selected + answerButtons.forEach((button, i) => { + button.disabled = true; + if (i === currentQuestion.correct) { + button.style.backgroundColor = '#4CAF50'; // Correct answer + } else { + button.style.backgroundColor = '#f44336'; // Incorrect answers + } + }); + + nextButton.disabled = false; // Enable next button +}; + +// Show quiz result +const showResult = () => { + document.getElementById('quiz-box').classList.add('hidden'); + resultContainer.classList.remove('hidden'); + scoreElement.textContent = `You scored ${score} out of ${questions.length}`; +}; + +// Move to next question +const nextQuestion = () => { + currentQuestionIndex += 1; + if (currentQuestionIndex < questions.length) { + loadQuestion(); + } else { + showResult(); + } +}; + +// Restart the quiz +const restartQuiz = () => { + currentQuestionIndex = 0; + score = 0; + resultContainer.classList.add('hidden'); + document.getElementById('quiz-box').classList.remove('hidden'); + loadQuestion(); +}; + +// Add event listeners to answer buttons +answerButtons.forEach((button, index) => { + button.addEventListener('click', () => handleAnswerClick(index)); +}); + +// Add event listener to next button +nextButton.addEventListener('click', nextQuestion); + +// Add event listener to restart button +restartButton.addEventListener('click', restartQuiz); + +// Start the quiz +loadQuestion(); diff --git a/Source-Code/QuizApp/style.css b/Source-Code/QuizApp/style.css new file mode 100644 index 0000000..e492d30 --- /dev/null +++ b/Source-Code/QuizApp/style.css @@ -0,0 +1,85 @@ +/* styles.css */ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f9; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + } + + .quiz-container { + background: #fff; + border-radius: 8px; + padding: 20px; + width: 300px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + } + + h1 { + text-align: center; + color: #333; + } + + #question-container { + margin-bottom: 20px; + } + + #answer-container { + margin-bottom: 20px; + } + + .answer-btn { + background-color: #4CAF50; + color: white; + padding: 10px; + width: 100%; + margin: 5px 0; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; + } + + .answer-btn:hover { + background-color: #45a049; + } + + #next-btn { + background-color: #008CBA; + color: white; + padding: 10px; + width: 100%; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + } + + #next-btn:disabled { + background-color: #ccc; + } + + .hidden { + display: none; + } + + #result-container { + text-align: center; + } + + #restart-btn { + background-color: #f44336; + color: white; + padding: 10px; + border: none; + border-radius: 5px; + cursor: pointer; + width: 100%; + } + + #restart-btn:hover { + background-color: #d32f2f; + } + \ No newline at end of file From 9ade7a4bf0d8265bc5d45388ad51781c1a519df1 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 02:11:39 +0530 Subject: [PATCH 16/50] update the readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 72f2cb3..76da17e 100644 --- a/README.md +++ b/README.md @@ -452,6 +452,17 @@ In order to run this project you need: +
    • +
      +Quiz App +

      A simple quiz app built using HTML, CSS, and JavaScript. The app presents multiple-choice questions, and the user can select answers to test their knowledge. At the end of the quiz, the user's score is displayed along with an option to restart the quiz.

      + +
      +
      • +

      (back to top)

      From 17e6d58018ce3dbe4fdf150c36a02e37af95b108 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 02:15:15 +0530 Subject: [PATCH 17/50] solve linter errors --- Source-Code/QuizApp/style.css | 165 +++++++++++++++++----------------- 1 file changed, 82 insertions(+), 83 deletions(-) diff --git a/Source-Code/QuizApp/style.css b/Source-Code/QuizApp/style.css index e492d30..391b56c 100644 --- a/Source-Code/QuizApp/style.css +++ b/Source-Code/QuizApp/style.css @@ -1,85 +1,84 @@ /* styles.css */ body { - font-family: Arial, sans-serif; - background-color: #f4f4f9; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - margin: 0; - } - - .quiz-container { - background: #fff; - border-radius: 8px; - padding: 20px; - width: 300px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - } - - h1 { - text-align: center; - color: #333; - } - - #question-container { - margin-bottom: 20px; - } - - #answer-container { - margin-bottom: 20px; - } - - .answer-btn { - background-color: #4CAF50; - color: white; - padding: 10px; - width: 100%; - margin: 5px 0; - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s; - } - - .answer-btn:hover { - background-color: #45a049; - } - - #next-btn { - background-color: #008CBA; - color: white; - padding: 10px; - width: 100%; - border: none; - border-radius: 5px; - cursor: pointer; - font-size: 16px; - } - - #next-btn:disabled { - background-color: #ccc; - } - - .hidden { - display: none; - } - - #result-container { - text-align: center; - } - - #restart-btn { - background-color: #f44336; - color: white; - padding: 10px; - border: none; - border-radius: 5px; - cursor: pointer; - width: 100%; - } - - #restart-btn:hover { - background-color: #d32f2f; - } - \ No newline at end of file + font-family: Arial, sans-serif; + background-color: #f4f4f9; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.quiz-container { + background: #fff; + border-radius: 8px; + padding: 20px; + width: 300px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +h1 { + text-align: center; + color: #333; +} + +#question-container { + margin-bottom: 20px; +} + +#answer-container { + margin-bottom: 20px; +} + +.answer-btn { + background-color: #4caf50; + color: white; + padding: 10px; + width: 100%; + margin: 5px 0; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +.answer-btn:hover { + background-color: #45a049; +} + +#next-btn { + background-color: #008cba; + color: white; + padding: 10px; + width: 100%; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; +} + +#next-btn:disabled { + background-color: #ccc; +} + +.hidden { + display: none; +} + +#result-container { + text-align: center; +} + +#restart-btn { + background-color: #f44336; + color: white; + padding: 10px; + border: none; + border-radius: 5px; + cursor: pointer; + width: 100%; +} + +#restart-btn:hover { + background-color: #d32f2f; +} From 4c14e71e61f78a808aee1261badff779aa690e93 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 02:27:59 +0530 Subject: [PATCH 18/50] Add the project --- Source-Code/MemeGenerator/index.html | 24 +++++++++++++ Source-Code/MemeGenerator/script.js | 47 +++++++++++++++++++++++++ Source-Code/MemeGenerator/style.css | 52 ++++++++++++++++++++++++++++ 3 files changed, 123 insertions(+) create mode 100644 Source-Code/MemeGenerator/index.html create mode 100644 Source-Code/MemeGenerator/script.js create mode 100644 Source-Code/MemeGenerator/style.css diff --git a/Source-Code/MemeGenerator/index.html b/Source-Code/MemeGenerator/index.html new file mode 100644 index 0000000..241acb9 --- /dev/null +++ b/Source-Code/MemeGenerator/index.html @@ -0,0 +1,24 @@ + + + + + + Meme Generator + + + +
      +

      Random Meme Generator

      +
      + Random Meme +
      +
      + + + +
      +
      + + + + diff --git a/Source-Code/MemeGenerator/script.js b/Source-Code/MemeGenerator/script.js new file mode 100644 index 0000000..b505ede --- /dev/null +++ b/Source-Code/MemeGenerator/script.js @@ -0,0 +1,47 @@ +const memeImage = document.getElementById('meme-image'); +const newMemeButton = document.getElementById('new-meme'); +const downloadMemeButton = document.getElementById('download-meme'); +const shareMemeButton = document.getElementById('share-meme'); + +// Fetch random meme from the API +async function fetchMeme() { + try { + const response = await fetch('https://api.imgflip.com/get_memes'); + const data = await response.json(); + const { memes } = data.data; + const randomMeme = memes[Math.floor(Math.random() * memes.length)]; + memeImage.src = randomMeme.url; + } catch (error) { + console.error('Error fetching meme:', error); + } +} + +// Download the meme +const downloadMeme = () => { + const memeUrl = memeImage.src; + if (memeUrl) { + const a = document.createElement('a'); + a.href = memeUrl; + a.download = 'meme.jpg'; + a.click(); + } +}; + +// Share the meme +const shareMeme = () => { + const memeUrl = memeImage.src; + if (memeUrl) { + const shareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent( + memeUrl, + )}`; + window.open(shareUrl, '_blank'); + } +}; + +// Event listeners +newMemeButton.addEventListener('click', fetchMeme); +downloadMemeButton.addEventListener('click', downloadMeme); +shareMemeButton.addEventListener('click', shareMeme); + +// Load an initial meme on page load +fetchMeme(); diff --git a/Source-Code/MemeGenerator/style.css b/Source-Code/MemeGenerator/style.css new file mode 100644 index 0000000..99a578d --- /dev/null +++ b/Source-Code/MemeGenerator/style.css @@ -0,0 +1,52 @@ +/* styles.css */ +body { + font-family: Arial, sans-serif; + background-color: #f1f1f1; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + } + + .meme-container { + text-align: center; + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 80%; + max-width: 500px; + } + + h1 { + color: #333; + } + + #meme-box img { + width: 100%; + height: auto; + border-radius: 8px; + margin: 20px 0; + } + + #meme-buttons button { + background-color: #4CAF50; + color: white; + padding: 10px 20px; + margin: 10px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; + } + + #meme-buttons button:hover { + background-color: #45a049; + } + + #meme-buttons button:disabled { + background-color: #ccc; + cursor: not-allowed; + } + \ No newline at end of file From 2c21a8317b3b6e285d30cf615882b6b2089d6a19 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 02:28:25 +0530 Subject: [PATCH 19/50] solve linter error --- Source-Code/MemeGenerator/style.css | 99 ++++++++++++++--------------- 1 file changed, 49 insertions(+), 50 deletions(-) diff --git a/Source-Code/MemeGenerator/style.css b/Source-Code/MemeGenerator/style.css index 99a578d..921ae3a 100644 --- a/Source-Code/MemeGenerator/style.css +++ b/Source-Code/MemeGenerator/style.css @@ -1,52 +1,51 @@ /* styles.css */ body { - font-family: Arial, sans-serif; - background-color: #f1f1f1; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - margin: 0; - } - - .meme-container { - text-align: center; - background-color: #fff; - padding: 20px; - border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - width: 80%; - max-width: 500px; - } - - h1 { - color: #333; - } - - #meme-box img { - width: 100%; - height: auto; - border-radius: 8px; - margin: 20px 0; - } - - #meme-buttons button { - background-color: #4CAF50; - color: white; - padding: 10px 20px; - margin: 10px; - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s; - } - - #meme-buttons button:hover { - background-color: #45a049; - } - - #meme-buttons button:disabled { - background-color: #ccc; - cursor: not-allowed; - } - \ No newline at end of file + font-family: Arial, sans-serif; + background-color: #f1f1f1; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.meme-container { + text-align: center; + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 80%; + max-width: 500px; +} + +h1 { + color: #333; +} + +#meme-box img { + width: 100%; + height: auto; + border-radius: 8px; + margin: 20px 0; +} + +#meme-buttons button { + background-color: #4caf50; + color: white; + padding: 10px 20px; + margin: 10px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +#meme-buttons button:hover { + background-color: #45a049; +} + +#meme-buttons button:disabled { + background-color: #ccc; + cursor: not-allowed; +} From 71fd4e7b25d4b797611c56252f3b857907afb3b4 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 02:31:18 +0530 Subject: [PATCH 20/50] update with description and demo link --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 76da17e..cda8db1 100644 --- a/README.md +++ b/README.md @@ -463,6 +463,17 @@ In order to run this project you need: +
    • +
      +Meme Generator +

      A fun and interactive Meme Generator app built using HTML, CSS, and JavaScript. This app fetches random memes from an API and displays them for the user to enjoy. It also provides options for users to download the meme or share it on social media.

      + +
      +
      • +

      (back to top)

      From 5d8ea78805b50c488c7101a1fdd9651fdb5b8207 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 02:44:37 +0530 Subject: [PATCH 21/50] Add the project --- Source-Code/TypingSpeedTest/index.html | 25 +++++++++ Source-Code/TypingSpeedTest/script.js | 63 ++++++++++++++++++++++ Source-Code/TypingSpeedTest/style.css | 75 ++++++++++++++++++++++++++ 3 files changed, 163 insertions(+) create mode 100644 Source-Code/TypingSpeedTest/index.html create mode 100644 Source-Code/TypingSpeedTest/script.js create mode 100644 Source-Code/TypingSpeedTest/style.css diff --git a/Source-Code/TypingSpeedTest/index.html b/Source-Code/TypingSpeedTest/index.html new file mode 100644 index 0000000..ba0081c --- /dev/null +++ b/Source-Code/TypingSpeedTest/index.html @@ -0,0 +1,25 @@ + + + + + + Typing Speed Test + + + +
      +

      Typing Speed Test

      +
      +

      Click "Start" to begin!

      +
      + +
      +
      WPM: 0
      +
      Accuracy: 100%
      +
      + +
      + + + + diff --git a/Source-Code/TypingSpeedTest/script.js b/Source-Code/TypingSpeedTest/script.js new file mode 100644 index 0000000..4ff26f2 --- /dev/null +++ b/Source-Code/TypingSpeedTest/script.js @@ -0,0 +1,63 @@ +// Get the necessary elements +const startButton = document.getElementById('start-btn'); +const typedText = document.getElementById('typed-text'); +const randomText = document.getElementById('random-text'); +const wpmDisplay = document.getElementById('wpm'); +const accuracyDisplay = document.getElementById('accuracy'); + +const sampleTexts = [ + 'The quick brown fox jumps over the lazy dog.', + 'JavaScript is a versatile programming language.', + 'A journey of a thousand miles begins with a single step.', + 'To be or not to be, that is the question.', + 'Typing tests help improve typing speed and accuracy.', +]; + +let startTime; + +// Start the typing test +function startTest() { + const randomIndex = Math.floor(Math.random() * sampleTexts.length); + randomText.textContent = sampleTexts[randomIndex]; + typedText.disabled = false; + typedText.value = ''; + typedText.focus(); + startButton.disabled = true; + startTime = new Date().getTime(); + wpmDisplay.textContent = 'WPM: 0'; + accuracyDisplay.textContent = 'Accuracy: 100%'; +} + +// Calculate typing speed (WPM) and accuracy +function calculateResults() { + const typedValue = typedText.value; + const randomTextValue = randomText.textContent; + + // Calculate WPM + const timeTaken = (new Date().getTime() - startTime) / 1000; // in seconds + const wordsTyped = typedValue.split(' ').length; + const wpm = Math.round((wordsTyped / timeTaken) * 60); + + // Calculate accuracy + let correctChars = 0; + for (let i = 0; i < typedValue.length; i += 1) { + if (typedValue[i] === randomTextValue[i]) { + correctChars += 1; + } + } + const accuracy = Math.round((correctChars / typedValue.length) * 100); + + wpmDisplay.textContent = `WPM: ${wpm}`; + accuracyDisplay.textContent = `Accuracy: ${accuracy}%`; + + if (typedValue === randomTextValue) { + setTimeout(() => { + alert('Test Complete! Well done!'); + startButton.disabled = false; + }, 100); + } +} + +// Event listeners +startButton.addEventListener('click', startTest); +typedText.addEventListener('input', calculateResults); diff --git a/Source-Code/TypingSpeedTest/style.css b/Source-Code/TypingSpeedTest/style.css new file mode 100644 index 0000000..cff373b --- /dev/null +++ b/Source-Code/TypingSpeedTest/style.css @@ -0,0 +1,75 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f9; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + text-align: center; + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + width: 60%; + max-width: 600px; +} + +h1 { + color: #333; +} + +.text-display { + margin: 20px 0; + font-size: 1.2em; + line-height: 1.5em; +} + +textarea { + width: 80%; + height: 100px; + padding: 10px; + font-size: 1.2em; + margin-bottom: 20px; + border-radius: 8px; + border: 1px solid #ccc; + resize: none; + outline: none; +} + +textarea:disabled { + background-color: #f0f0f0; +} + +.results { + margin-top: 20px; +} + +#start-btn { + background-color: #4caf50; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 1.1em; + transition: background-color 0.3s; +} + +#start-btn:hover { + background-color: #45a049; +} + +#start-btn:disabled { + background-color: #ccc; + cursor: not-allowed; +} + +#wpm, +#accuracy { + font-size: 1.2em; + margin: 5px 0; +} From d37c389f8dd735cc3184f9cadaee0871a62cadd3 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 02:49:08 +0530 Subject: [PATCH 22/50] update readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index cda8db1..ec6af70 100644 --- a/README.md +++ b/README.md @@ -474,6 +474,17 @@ In order to run this project you need: +
    • +
      +Typing Speed Test +

      The Typing Speed Test app is a simple web-based tool that allows users to test and improve their typing speed. The app displays a random sentence, and the user is asked to type it as quickly and accurately as possible. It calculates the typing speed in words per minute (WPM) and measures the accuracy based on the user's input.

      + +
      +
      • +

      (back to top)

      From 20d31cc7836d0536e8b57e07ccb247501eb2adfe Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 23 Dec 2024 00:44:14 +0530 Subject: [PATCH 23/50] Add the project --- Source-Code/MovieSearchApp/index.html | 20 +++++++ Source-Code/MovieSearchApp/script.js | 59 ++++++++++++++++++++ Source-Code/MovieSearchApp/style.css | 78 +++++++++++++++++++++++++++ 3 files changed, 157 insertions(+) create mode 100644 Source-Code/MovieSearchApp/index.html create mode 100644 Source-Code/MovieSearchApp/script.js create mode 100644 Source-Code/MovieSearchApp/style.css diff --git a/Source-Code/MovieSearchApp/index.html b/Source-Code/MovieSearchApp/index.html new file mode 100644 index 0000000..6434f2c --- /dev/null +++ b/Source-Code/MovieSearchApp/index.html @@ -0,0 +1,20 @@ + + + + + + Movie Search App + + + +
      +

      Movie Search App

      +
      + + +
      +
      +
      + + + diff --git a/Source-Code/MovieSearchApp/script.js b/Source-Code/MovieSearchApp/script.js new file mode 100644 index 0000000..860da01 --- /dev/null +++ b/Source-Code/MovieSearchApp/script.js @@ -0,0 +1,59 @@ +const searchBtn = document.getElementById('search-btn'); +const searchInput = document.getElementById('search'); +const movieContainer = document.getElementById('movie-container'); + +// API Details +const API_KEY = '40bbd9b4'; // Replace with your OMDB or TMDB API key +const API_URL = `https://www.omdbapi.com/?apikey=${API_KEY}&s=`; + +// Display Movies +const displayMovies = (movies) => { + movieContainer.innerHTML = ''; // Clear previous results + + movies.forEach((movie) => { + const movieCard = document.createElement('div'); + movieCard.classList.add('movie-card'); + + movieCard.innerHTML = ` + ${movie.Title} +

      ${movie.Title}

      +

      Year: ${movie.Year}

      + `; + + movieContainer.appendChild(movieCard); + }); +}; + +// Show Error Message +const showError = (message) => { + movieContainer.innerHTML = `

      ${message}

      `; +}; + +// Fetch Movies +async function fetchMovies(query) { + try { + const response = await fetch(`${API_URL}${query}`); + const data = await response.json(); + + if (data.Response === 'True') { + displayMovies(data.Search); + } else { + showError(data.Error); + } + } catch (error) { + console.error('Error fetching data:', error); + showError('Unable to fetch data. Please try again later.'); + } +} + +// Event Listener +searchBtn.addEventListener('click', () => { + const query = searchInput.value.trim(); + if (query) { + fetchMovies(query); + } else { + showError('Please enter a movie name.'); + } +}); diff --git a/Source-Code/MovieSearchApp/style.css b/Source-Code/MovieSearchApp/style.css new file mode 100644 index 0000000..2c8a42c --- /dev/null +++ b/Source-Code/MovieSearchApp/style.css @@ -0,0 +1,78 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; + text-align: center; +} + +.container { + padding: 20px; +} + +h1 { + color: #333; +} + +.search-container { + margin: 20px 0; +} + +#search { + padding: 10px; + width: 300px; + border: 1px solid #ccc; + border-radius: 4px; +} + +#search-btn { + padding: 10px 20px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +#search-btn:hover { + background-color: #0056b3; +} + +.movie-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; + margin-top: 20px; +} + +.movie-card { + background-color: #fff; + border: 1px solid #ddd; + border-radius: 4px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + width: 250px; + text-align: left; + overflow: hidden; +} + +.movie-card img { + width: 100%; + height: auto; +} + +.movie-card h3 { + padding: 10px; + font-size: 18px; +} + +.movie-card p { + padding: 0 10px 10px; + font-size: 14px; + color: #555; +} + +.error { + color: red; + margin-top: 20px; +} From f608698e570b217f4f679474a298474d865af7b0 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 23 Dec 2024 00:46:56 +0530 Subject: [PATCH 24/50] update the readme with the project description --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index ec6af70..ef4e7c2 100644 --- a/README.md +++ b/README.md @@ -485,6 +485,17 @@ In order to run this project you need: +
    • +
      +Movie Search App +

      The Movie Search App is a simple and responsive web application that allows users to search for movies and view their details. It utilizes a public API like OMDB to fetch and display movie information, including the title, year of release, and poster.

      + +
      +
      • +

      (back to top)

      From 7a112318132228cc8dfd290359cc2e9f84b21394 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 23 Dec 2024 01:22:16 +0530 Subject: [PATCH 25/50] Add a project --- Source-Code/PomodoroTimer/index.html | 23 ++++++++++++ Source-Code/PomodoroTimer/script.js | 54 ++++++++++++++++++++++++++++ Source-Code/PomodoroTimer/style.css | 51 ++++++++++++++++++++++++++ 3 files changed, 128 insertions(+) create mode 100644 Source-Code/PomodoroTimer/index.html create mode 100644 Source-Code/PomodoroTimer/script.js create mode 100644 Source-Code/PomodoroTimer/style.css diff --git a/Source-Code/PomodoroTimer/index.html b/Source-Code/PomodoroTimer/index.html new file mode 100644 index 0000000..e228a97 --- /dev/null +++ b/Source-Code/PomodoroTimer/index.html @@ -0,0 +1,23 @@ + + + + + + Productivity Timer + + + +
      +

      Productivity Timer

      +
      + 25:00 +
      +
      + + +
      +

      Focus Session

      +
      + + + diff --git a/Source-Code/PomodoroTimer/script.js b/Source-Code/PomodoroTimer/script.js new file mode 100644 index 0000000..cf456e9 --- /dev/null +++ b/Source-Code/PomodoroTimer/script.js @@ -0,0 +1,54 @@ +const startBtn = document.getElementById('start-btn'); +const resetBtn = document.getElementById('reset-btn'); +const minutesDisplay = document.getElementById('minutes'); +const secondsDisplay = document.getElementById('seconds'); +const statusDisplay = document.getElementById('status'); + +let timerInterval; +let isFocusSession = true; // Start with a focus session +const focusTime = 5 * 60; // 5 minutes in seconds +const breakTime = 5 * 60; // 5 minutes in seconds +let timeRemaining = focusTime; + +function updateDisplay() { + const minutes = Math.floor(timeRemaining / 60); + const seconds = timeRemaining % 60; + minutesDisplay.textContent = String(minutes).padStart(2, '0'); + secondsDisplay.textContent = String(seconds).padStart(2, '0'); +} + +function toggleSession() { + isFocusSession = !isFocusSession; + timeRemaining = isFocusSession ? focusTime : breakTime; + statusDisplay.textContent = isFocusSession + ? 'Focus Session' + : 'Break Session'; + updateDisplay(); +} + +function startTimer() { + if (timerInterval) return; // Prevent multiple intervals + timerInterval = setInterval(() => { + if (timeRemaining > 0) { + timeRemaining -= 1; + updateDisplay(); + } else { + clearInterval(timerInterval); + timerInterval = null; + toggleSession(); + } + }, 1000); +} + +function resetTimer() { + clearInterval(timerInterval); + timerInterval = null; + timeRemaining = isFocusSession ? focusTime : breakTime; + updateDisplay(); +} + +startBtn.addEventListener('click', startTimer); +resetBtn.addEventListener('click', resetTimer); + +// Initialize display +updateDisplay(); diff --git a/Source-Code/PomodoroTimer/style.css b/Source-Code/PomodoroTimer/style.css new file mode 100644 index 0000000..0d2d44d --- /dev/null +++ b/Source-Code/PomodoroTimer/style.css @@ -0,0 +1,51 @@ +body { + font-family: Arial, sans-serif; + background-color: #f0f4f8; + color: #333; + text-align: center; + margin: 0; + padding: 0; +} + +.container { + max-width: 400px; + margin: 100px auto; + padding: 20px; + background: #fff; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +h1 { + margin-bottom: 20px; +} + +.timer-display { + font-size: 3rem; + margin: 20px 0; +} + +.controls button { + font-size: 1rem; + padding: 10px 20px; + margin: 5px; + border: none; + border-radius: 5px; + cursor: pointer; +} + +#start-btn { + background-color: #28a745; + color: white; +} + +#reset-btn { + background-color: #dc3545; + color: white; +} + +#status { + font-size: 1.2rem; + margin-top: 20px; + color: #555; +} From 2cbdfd162f3d08d735aaef9d2c57567cb18eeafa Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 23 Dec 2024 01:25:44 +0530 Subject: [PATCH 26/50] Update the raedme with the description --- README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/README.md b/README.md index ef4e7c2..2f103ce 100644 --- a/README.md +++ b/README.md @@ -496,6 +496,19 @@ In order to run this project you need: +
    • +
      +Pomodoro Timer +

      The Productivity Timer (Pomodoro Timer) is a simple yet effective timer application based on the Pomodoro technique. It helps users stay productive by alternating between focus intervals (e.g., 5 minutes) and short breaks (e.g., 2 minutes). The app provides visual cues through animations and sound alerts to signal transitions between focus and break periods. + +

      + +
      +
      • +

      (back to top)

      From 58eb81c2bc5646d93fdf7fec1eefa922eebe093b Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 23 Dec 2024 01:29:15 +0530 Subject: [PATCH 27/50] followed es6 --- Source-Code/PomodoroTimer/script.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/Source-Code/PomodoroTimer/script.js b/Source-Code/PomodoroTimer/script.js index cf456e9..c7295e1 100644 --- a/Source-Code/PomodoroTimer/script.js +++ b/Source-Code/PomodoroTimer/script.js @@ -10,23 +10,23 @@ const focusTime = 5 * 60; // 5 minutes in seconds const breakTime = 5 * 60; // 5 minutes in seconds let timeRemaining = focusTime; -function updateDisplay() { +const updateDisplay = () => { const minutes = Math.floor(timeRemaining / 60); const seconds = timeRemaining % 60; minutesDisplay.textContent = String(minutes).padStart(2, '0'); secondsDisplay.textContent = String(seconds).padStart(2, '0'); -} +}; -function toggleSession() { +const toggleSession = () => { isFocusSession = !isFocusSession; timeRemaining = isFocusSession ? focusTime : breakTime; statusDisplay.textContent = isFocusSession ? 'Focus Session' : 'Break Session'; updateDisplay(); -} +}; -function startTimer() { +const startTimer = () => { if (timerInterval) return; // Prevent multiple intervals timerInterval = setInterval(() => { if (timeRemaining > 0) { @@ -38,14 +38,14 @@ function startTimer() { toggleSession(); } }, 1000); -} +}; -function resetTimer() { +const resetTimer = () => { clearInterval(timerInterval); timerInterval = null; timeRemaining = isFocusSession ? focusTime : breakTime; updateDisplay(); -} +}; startBtn.addEventListener('click', startTimer); resetBtn.addEventListener('click', resetTimer); From 29df4477e67b52ee8825b40f63d299199a7efaf4 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 23 Dec 2024 01:54:15 +0530 Subject: [PATCH 28/50] create a template for the project --- Source-Code/E-CommerceWebsite/index.html | 0 Source-Code/E-CommerceWebsite/script.js | 0 Source-Code/E-CommerceWebsite/style.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 Source-Code/E-CommerceWebsite/index.html create mode 100644 Source-Code/E-CommerceWebsite/script.js create mode 100644 Source-Code/E-CommerceWebsite/style.css diff --git a/Source-Code/E-CommerceWebsite/index.html b/Source-Code/E-CommerceWebsite/index.html new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/E-CommerceWebsite/script.js b/Source-Code/E-CommerceWebsite/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/E-CommerceWebsite/style.css b/Source-Code/E-CommerceWebsite/style.css new file mode 100644 index 0000000..e69de29 From dbe377437a1c435383017490df1aa1b9fa74b1c2 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 23 Dec 2024 02:29:58 +0530 Subject: [PATCH 29/50] Add the project --- Source-Code/E-CommerceWebsite/index.html | 33 ++++++ Source-Code/E-CommerceWebsite/script.js | 93 +++++++++++++++ Source-Code/E-CommerceWebsite/style.css | 145 +++++++++++++++++++++++ 3 files changed, 271 insertions(+) diff --git a/Source-Code/E-CommerceWebsite/index.html b/Source-Code/E-CommerceWebsite/index.html index e69de29..2f8fbc7 100644 --- a/Source-Code/E-CommerceWebsite/index.html +++ b/Source-Code/E-CommerceWebsite/index.html @@ -0,0 +1,33 @@ + + + + + + E-Commerce Product Page + + + +
      +
      +

      E-Commerce Store

      + +
      +
      + +
      +

      Products

      +
      +
      + + +
      +
      +

      Your Cart

      +
        + +
        +
        + + + + diff --git a/Source-Code/E-CommerceWebsite/script.js b/Source-Code/E-CommerceWebsite/script.js index e69de29..7d34ddb 100644 --- a/Source-Code/E-CommerceWebsite/script.js +++ b/Source-Code/E-CommerceWebsite/script.js @@ -0,0 +1,93 @@ +/* eslint-disable no-unused-vars */ +// Fake API URL (you can replace this with a real API if needed) +const apiUrl = 'https://fakestoreapi.com/products'; + +// Elements +const productsContainer = document.getElementById('products-container'); +const cartBtn = document.getElementById('cart-btn'); +const cartModal = document.getElementById('cart-modal'); +const closeCartBtn = document.getElementById('close-cart'); +const cartItemsList = document.getElementById('cart-items'); + +// Cart array to store added products +const cart = []; + +// Display fetched products +const displayProducts = (products) => { + productsContainer.innerHTML = ''; // Clear previous products + + products.forEach((product) => { + const productElement = document.createElement('div'); + productElement.classList.add('product'); + productElement.innerHTML = ` + ${product.title} +

        ${product.title}

        +

        $${product.price}

        + + `; + productsContainer.appendChild(productElement); + }); +}; + +// Fetch products from API +async function fetchProducts() { + try { + const response = await fetch(apiUrl); + const products = await response.json(); + displayProducts(products); + } catch (error) { + console.error('Error fetching products:', error); + } +} + +// Add product to cart +const addToCart = (id, title, image, price) => { + const existingProductIndex = cart.findIndex((item) => item.id === id); + + if (existingProductIndex === -1) { + cart.push({ + id, + title, + image, + price, + quantity: 1, + }); + } else { + cart[existingProductIndex].quantity += 1; + } + + console.log(cart); // You can replace this with a cart UI or alert + alert(`${title} added to cart!`); +}; + +// Close cart modal +closeCartBtn.addEventListener('click', () => { + cartModal.style.display = 'none'; +}); + +// Display cart contents +const displayCart = () => { + cartItemsList.innerHTML = ''; // Clear previous cart items + + cart.forEach((item) => { + const cartItem = document.createElement('li'); + cartItem.innerHTML = ` + ${item.title} (x${item.quantity}) + $${item.price * item.quantity} + `; + cartItemsList.appendChild(cartItem); + }); +}; + +// Open cart modal +cartBtn.addEventListener('click', () => { + if (cart.length === 0) { + alert('Your cart is empty.'); + } else { + displayCart(); + cartModal.style.display = 'flex'; + } +}); + +// Initialize +fetchProducts(); diff --git a/Source-Code/E-CommerceWebsite/style.css b/Source-Code/E-CommerceWebsite/style.css index e69de29..ae2d61b 100644 --- a/Source-Code/E-CommerceWebsite/style.css +++ b/Source-Code/E-CommerceWebsite/style.css @@ -0,0 +1,145 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f9f9f9; + } + + header { + background-color: #333; + color: #fff; + padding: 10px 20px; + text-align: center; + } + + .navbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + #cart-btn { + background-color: #28a745; + color: white; + border: none; + padding: 10px 20px; + font-size: 1rem; + cursor: pointer; + border-radius: 5px; + } + + #cart-btn:hover { + background-color: #218838; + } + + .container { + margin: 50px auto; + padding: 20px; + background: #fff; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + max-width: 1000px; + } + + h1 { + margin-bottom: 30px; + } + + .products-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 20px; + } + + .product { + border: 1px solid #ddd; + border-radius: 10px; + padding: 10px; + text-align: center; + background-color: #fff; + } + + .product img { + max-width: 100%; + height: 300px; + border-radius: 10px; + } + + .product .title { + font-size: 1.1rem; + font-weight: bold; + margin: 10px 0; + height: 60px; + overflow: hidden; + } + + .product .price { + font-size: 1rem; + color: #333; + margin: 10px 0; + } + + .product button { + background-color: #007bff; + color: white; + border: none; + padding: 10px; + font-size: 1rem; + cursor: pointer; + border-radius: 5px; + width: 100%; + } + + .product button:hover { + background-color: #0056b3; + } + + /* Cart Modal Styles */ + .cart-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + display: none; + justify-content: center; + align-items: center; + z-index: 1000; + } + + .cart-content { + background-color: white; + padding: 20px; + border-radius: 10px; + max-width: 500px; + width: 100%; + text-align: left; + } + + #cart-items { + list-style-type: none; + padding: 0; + } + + #cart-items li { + display: flex; + justify-content: space-between; + padding: 5px 0; + } + + #close-cart { + margin-top: 20px; + background-color: #dc3545; + color: white; + border: none; + padding: 10px; + font-size: 1rem; + cursor: pointer; + border-radius: 5px; + } + + #close-cart:hover { + background-color: #c82333; + } + \ No newline at end of file From 1d4bde72a1525cdccc56e2114d2058f3294e3394 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 23 Dec 2024 02:33:10 +0530 Subject: [PATCH 30/50] update the readme with the description --- README.md | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 2f103ce..3ed6348 100644 --- a/README.md +++ b/README.md @@ -499,9 +499,7 @@ In order to run this project you need:
      • Pomodoro Timer -

        The Productivity Timer (Pomodoro Timer) is a simple yet effective timer application based on the Pomodoro technique. It helps users stay productive by alternating between focus intervals (e.g., 5 minutes) and short breaks (e.g., 2 minutes). The app provides visual cues through animations and sound alerts to signal transitions between focus and break periods. - -

        +

        The Productivity Timer (Pomodoro Timer) is a simple yet effective timer application based on the Pomodoro technique. It helps users stay productive by alternating between focus intervals (e.g., 5 minutes) and short breaks (e.g., 2 minutes). The app provides visual cues through animations and sound alerts to signal transitions between focus and break periods.

        • Live Demo
        • Source
          • @@ -509,6 +507,17 @@ In order to run this project you need:
        • +
      • +
        +E-Commerce Website +

        This is a simple e-commerce product page built using **HTML**, **CSS**, and **JavaScript**. It displays a list of products fetched from a public API and allows users to add products to their cart. The page features a cart modal where users can view the products they have added, including quantity and total price.

        + +
        +
        • +

        (back to top)

        From cde2b3ba223661114cd691c7b2c2adfec471d55f Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 23 Dec 2024 02:36:56 +0530 Subject: [PATCH 31/50] solve the linter --- Source-Code/E-CommerceWebsite/style.css | 287 ++++++++++++------------ 1 file changed, 143 insertions(+), 144 deletions(-) diff --git a/Source-Code/E-CommerceWebsite/style.css b/Source-Code/E-CommerceWebsite/style.css index ae2d61b..c7c8624 100644 --- a/Source-Code/E-CommerceWebsite/style.css +++ b/Source-Code/E-CommerceWebsite/style.css @@ -1,145 +1,144 @@ body { - font-family: Arial, sans-serif; - margin: 0; - padding: 0; - background-color: #f9f9f9; - } - - header { - background-color: #333; - color: #fff; - padding: 10px 20px; - text-align: center; - } - - .navbar { - display: flex; - justify-content: space-between; - align-items: center; - } - - #cart-btn { - background-color: #28a745; - color: white; - border: none; - padding: 10px 20px; - font-size: 1rem; - cursor: pointer; - border-radius: 5px; - } - - #cart-btn:hover { - background-color: #218838; - } - - .container { - margin: 50px auto; - padding: 20px; - background: #fff; - border-radius: 10px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - max-width: 1000px; - } - - h1 { - margin-bottom: 30px; - } - - .products-container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 20px; - } - - .product { - border: 1px solid #ddd; - border-radius: 10px; - padding: 10px; - text-align: center; - background-color: #fff; - } - - .product img { - max-width: 100%; - height: 300px; - border-radius: 10px; - } - - .product .title { - font-size: 1.1rem; - font-weight: bold; - margin: 10px 0; - height: 60px; - overflow: hidden; - } - - .product .price { - font-size: 1rem; - color: #333; - margin: 10px 0; - } - - .product button { - background-color: #007bff; - color: white; - border: none; - padding: 10px; - font-size: 1rem; - cursor: pointer; - border-radius: 5px; - width: 100%; - } - - .product button:hover { - background-color: #0056b3; - } - - /* Cart Modal Styles */ - .cart-modal { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.7); - display: none; - justify-content: center; - align-items: center; - z-index: 1000; - } - - .cart-content { - background-color: white; - padding: 20px; - border-radius: 10px; - max-width: 500px; - width: 100%; - text-align: left; - } - - #cart-items { - list-style-type: none; - padding: 0; - } - - #cart-items li { - display: flex; - justify-content: space-between; - padding: 5px 0; - } - - #close-cart { - margin-top: 20px; - background-color: #dc3545; - color: white; - border: none; - padding: 10px; - font-size: 1rem; - cursor: pointer; - border-radius: 5px; - } - - #close-cart:hover { - background-color: #c82333; - } - \ No newline at end of file + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f9f9f9; +} + +header { + background-color: #333; + color: #fff; + padding: 10px 20px; + text-align: center; +} + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; +} + +#cart-btn { + background-color: #28a745; + color: white; + border: none; + padding: 10px 20px; + font-size: 1rem; + cursor: pointer; + border-radius: 5px; +} + +#cart-btn:hover { + background-color: #218838; +} + +.container { + margin: 50px auto; + padding: 20px; + background: #fff; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + max-width: 1000px; +} + +h1 { + margin-bottom: 30px; +} + +.products-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 20px; +} + +.product { + border: 1px solid #ddd; + border-radius: 10px; + padding: 10px; + text-align: center; + background-color: #fff; +} + +.product img { + max-width: 100%; + height: 300px; + border-radius: 10px; +} + +.product .title { + font-size: 1.1rem; + font-weight: bold; + margin: 10px 0; + height: 60px; + overflow: hidden; +} + +.product .price { + font-size: 1rem; + color: #333; + margin: 10px 0; +} + +.product button { + background-color: #007bff; + color: white; + border: none; + padding: 10px; + font-size: 1rem; + cursor: pointer; + border-radius: 5px; + width: 100%; +} + +.product button:hover { + background-color: #0056b3; +} + +/* Cart Modal Styles */ +.cart-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + display: none; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.cart-content { + background-color: white; + padding: 20px; + border-radius: 10px; + max-width: 500px; + width: 100%; + text-align: left; +} + +#cart-items { + list-style-type: none; + padding: 0; +} + +#cart-items li { + display: flex; + justify-content: space-between; + padding: 5px 0; +} + +#close-cart { + margin-top: 20px; + background-color: #dc3545; + color: white; + border: none; + padding: 10px; + font-size: 1rem; + cursor: pointer; + border-radius: 5px; +} + +#close-cart:hover { + background-color: #c82333; +} From efec664b91af8818aac78fe6b498195d0dc3c14a Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 25 Dec 2024 01:17:41 +0530 Subject: [PATCH 32/50] createde teh template for project --- Source-Code/LanguageTranslator/index.html | 11 +++++++++++ Source-Code/LanguageTranslator/script.js | 0 Source-Code/LanguageTranslator/style.css | 0 3 files changed, 11 insertions(+) create mode 100644 Source-Code/LanguageTranslator/index.html create mode 100644 Source-Code/LanguageTranslator/script.js create mode 100644 Source-Code/LanguageTranslator/style.css diff --git a/Source-Code/LanguageTranslator/index.html b/Source-Code/LanguageTranslator/index.html new file mode 100644 index 0000000..d01f779 --- /dev/null +++ b/Source-Code/LanguageTranslator/index.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/Source-Code/LanguageTranslator/script.js b/Source-Code/LanguageTranslator/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/LanguageTranslator/style.css b/Source-Code/LanguageTranslator/style.css new file mode 100644 index 0000000..e69de29 From 0c86bbb434f584214b6f489a0d4fb9224c55d652 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 25 Dec 2024 01:31:58 +0530 Subject: [PATCH 33/50] Add a project --- Source-Code/LanguageTranslator/index.html | 81 +++++++++++++++++++++-- Source-Code/LanguageTranslator/script.js | 32 +++++++++ Source-Code/LanguageTranslator/style.css | 65 ++++++++++++++++++ 3 files changed, 173 insertions(+), 5 deletions(-) diff --git a/Source-Code/LanguageTranslator/index.html b/Source-Code/LanguageTranslator/index.html index d01f779..2359393 100644 --- a/Source-Code/LanguageTranslator/index.html +++ b/Source-Code/LanguageTranslator/index.html @@ -1,11 +1,82 @@ - - - Document + + + Language Translator App + - +
        +

        Language Translator

        +
        + +
        + + + +
        + +
        +
        + - \ No newline at end of file + diff --git a/Source-Code/LanguageTranslator/script.js b/Source-Code/LanguageTranslator/script.js index e69de29..ee14549 100644 --- a/Source-Code/LanguageTranslator/script.js +++ b/Source-Code/LanguageTranslator/script.js @@ -0,0 +1,32 @@ +const translateButton = document.getElementById('translateButton'); +const sourceText = document.getElementById('sourceText'); +const translatedText = document.getElementById('translatedText'); +const sourceLang = document.getElementById('sourceLang'); +const targetLang = document.getElementById('targetLang'); + +// Replace with your own API key +const API_URL = 'https://api.mymemory.translated.net/get'; + +translateButton.addEventListener('click', async () => { + const text = sourceText.value.trim(); + const fromLang = sourceLang.value; + const toLang = targetLang.value; + + if (!text) { + alert('Please enter text to translate.'); + return; + } + + try { + const response = await fetch( + `${API_URL}?q=${encodeURIComponent(text)}&langpair=${fromLang}|${toLang}`, + ); + const data = await response.json(); + const translated = data.responseData.translatedText; + + translatedText.value = translated; + } catch (error) { + console.error('Error fetching translation:', error); + alert('Failed to translate. Please try again later.'); + } +}); diff --git a/Source-Code/LanguageTranslator/style.css b/Source-Code/LanguageTranslator/style.css index e69de29..772a271 100644 --- a/Source-Code/LanguageTranslator/style.css +++ b/Source-Code/LanguageTranslator/style.css @@ -0,0 +1,65 @@ +body { + font-family: Arial, sans-serif; + background-color: #a4bef2; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + } + + .container { + text-align: center; + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + min-width: 500px; + } + + h1 { + font-size: 24px; + margin-bottom: 20px; + } + + .translator { + display: flex; + flex-direction: column; + } + + textarea { + width: 90%; + height: 100px; + margin: 10px ; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + resize: none; + } + + .controls { + display: flex; + justify-content: space-around; + align-items: center; + } + + select { + padding: 10px; + border-radius: 5px; + border: 1px solid #ccc; + } + + button { + padding: 10px 15px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + } + + button:hover { + background-color: #0056b3; + } + \ No newline at end of file From c4dc76d7e585ef27017e8bb248c25e1604cc7712 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 25 Dec 2024 01:35:12 +0530 Subject: [PATCH 34/50] update the readme with the description --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 3ed6348..cd4db08 100644 --- a/README.md +++ b/README.md @@ -518,6 +518,17 @@ In order to run this project you need: +
      • +
        +Language Translator +

        The Language Translator App is a simple and user-friendly web application that allows users to translate text between various languages. It uses the MyMemory Translation API to fetch translations.

        + +
        +
        • +

        (back to top)

        From 511b689bef7974bf195b31941204ccc2162ba39a Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 25 Dec 2024 01:38:16 +0530 Subject: [PATCH 35/50] solve linter errors --- Source-Code/LanguageTranslator/style.css | 127 +++++++++++------------ 1 file changed, 63 insertions(+), 64 deletions(-) diff --git a/Source-Code/LanguageTranslator/style.css b/Source-Code/LanguageTranslator/style.css index 772a271..1d9b219 100644 --- a/Source-Code/LanguageTranslator/style.css +++ b/Source-Code/LanguageTranslator/style.css @@ -1,65 +1,64 @@ body { - font-family: Arial, sans-serif; - background-color: #a4bef2; - margin: 0; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - } - - .container { - text-align: center; - background: white; - padding: 20px; - border-radius: 10px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - min-width: 500px; - } - - h1 { - font-size: 24px; - margin-bottom: 20px; - } - - .translator { - display: flex; - flex-direction: column; - } - - textarea { - width: 90%; - height: 100px; - margin: 10px ; - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; - resize: none; - } - - .controls { - display: flex; - justify-content: space-around; - align-items: center; - } - - select { - padding: 10px; - border-radius: 5px; - border: 1px solid #ccc; - } - - button { - padding: 10px 15px; - background-color: #007bff; - color: white; - border: none; - border-radius: 5px; - cursor: pointer; - } - - button:hover { - background-color: #0056b3; - } - \ No newline at end of file + font-family: Arial, sans-serif; + background-color: #a4bef2; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + text-align: center; + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + min-width: 500px; +} + +h1 { + font-size: 24px; + margin-bottom: 20px; +} + +.translator { + display: flex; + flex-direction: column; +} + +textarea { + width: 90%; + height: 100px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + resize: none; +} + +.controls { + display: flex; + justify-content: space-around; + align-items: center; +} + +select { + padding: 10px; + border-radius: 5px; + border: 1px solid #ccc; +} + +button { + padding: 10px 15px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} From f4026e82eaad31f464e54511322ae21a1fc7acb1 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 25 Dec 2024 01:51:47 +0530 Subject: [PATCH 36/50] Add the project --- Source-Code/FoodOrdering/index.html | 51 +++++++++++++++++ Source-Code/FoodOrdering/script.js | 50 ++++++++++++++++ Source-Code/FoodOrdering/style.css | 88 +++++++++++++++++++++++++++++ 3 files changed, 189 insertions(+) create mode 100644 Source-Code/FoodOrdering/index.html create mode 100644 Source-Code/FoodOrdering/script.js create mode 100644 Source-Code/FoodOrdering/style.css diff --git a/Source-Code/FoodOrdering/index.html b/Source-Code/FoodOrdering/index.html new file mode 100644 index 0000000..07813f6 --- /dev/null +++ b/Source-Code/FoodOrdering/index.html @@ -0,0 +1,51 @@ + + + + + + Food Order App + + + +
        +

        Food Order App

        +
        +
        + Burger +
        +

        Burger

        +

        $5.99

        + +
        +
        +
        + Pizza +
        +

        Pizza

        +

        $8.99

        + +
        +
        +
        + Pasta +
        +

        Pasta

        +

        $7.49

        + +
        +
        +
        + +
        +

        Your Cart

        +
          + +
        +

        Total: $0.00

        + +
        +
        + + + + diff --git a/Source-Code/FoodOrdering/script.js b/Source-Code/FoodOrdering/script.js new file mode 100644 index 0000000..0d0ffe8 --- /dev/null +++ b/Source-Code/FoodOrdering/script.js @@ -0,0 +1,50 @@ +const addToCartButtons = document.querySelectorAll('.add-to-cart'); +const cartItemsList = document.getElementById('cart-items'); +const totalPriceElement = document.getElementById('total-price'); +const placeOrderButton = document.getElementById('place-order'); + +let cart = []; +let totalPrice = 0; + +const addToCart = (event) => { + const itemName = event.target.dataset.name; + const itemPrice = parseFloat(event.target.dataset.price); + + // Add item to cart + cart.push({ name: itemName, price: itemPrice }); + + // Update total price + totalPrice += itemPrice; + + // Add item to the cart UI + const cartItem = document.createElement('li'); + cartItem.textContent = `${itemName} - $${itemPrice.toFixed(2)}`; + cartItemsList.appendChild(cartItem); + + // Update the total price displayed + totalPriceElement.textContent = totalPrice.toFixed(2); + + // Enable the "Place Order" button + placeOrderButton.disabled = false; +}; + +addToCartButtons.forEach((button) => { + button.addEventListener('click', addToCart); +}); + +const placeOrder = () => { + if (cart.length === 0) return; + + alert('Order placed successfully!'); + cart = []; + totalPrice = 0; + + // Clear cart UI + cartItemsList.innerHTML = ''; + totalPriceElement.textContent = '0.00'; + + // Disable the "Place Order" button again + placeOrderButton.disabled = true; +}; + +placeOrderButton.addEventListener('click', placeOrder); diff --git a/Source-Code/FoodOrdering/style.css b/Source-Code/FoodOrdering/style.css new file mode 100644 index 0000000..8e1defe --- /dev/null +++ b/Source-Code/FoodOrdering/style.css @@ -0,0 +1,88 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + background-color: #a5ef9d; + height: 100vh; +} + +.container { + background-color: #fff; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + width: 70%; + max-width: 1000px; +} + +h1 { + text-align: center; + font-size: 32px; +} + +.menu { + display: flex; + justify-content: space-around; + margin-bottom: 20px; +} + +.menu-item { + text-align: center; + width: 30%; + background-color: #f9f9f9; + padding: 10px; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.menu-item img { + width: 100%; + max-height: 200px; + object-fit: cover; + border-radius: 10px; +} + +.add-to-cart { + margin-top: 10px; + padding: 10px 20px; + background-color: #28a745; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.add-to-cart:hover { + background-color: #218838; +} + +.cart { + margin-top: 30px; + text-align: center; +} + +.cart ul { + list-style-type: none; + padding: 0; +} + +.cart li { + margin: 10px 0; +} + +#place-order { + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +#place-order:disabled { + background-color: #aaa; + cursor: not-allowed; +} From f9153725a2fafcf152441725dd3e7e7828d4030b Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 25 Dec 2024 01:54:24 +0530 Subject: [PATCH 37/50] update the readme with the description --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index cd4db08..8e353ca 100644 --- a/README.md +++ b/README.md @@ -529,6 +529,17 @@ In order to run this project you need: +
      • +
        +Food Ordering App +

        The Food Order App is a simple web application that allows users to order food items from a menu. Users can view the available items, add them to their cart, and see the total price. The app also enables users to place an order, and upon successful placement, the cart is cleared.

        + +
        +
        • +

        (back to top)

        From cd7c06f608e15e99c8e2a565c0d589f1904de454 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 25 Dec 2024 02:16:21 +0530 Subject: [PATCH 38/50] Add the project --- Source-Code/TicTacToe/index.html | 20 +++++++++ Source-Code/TicTacToe/script.js | 72 ++++++++++++++++++++++++++++++++ Source-Code/TicTacToe/style.css | 61 +++++++++++++++++++++++++++ 3 files changed, 153 insertions(+) create mode 100644 Source-Code/TicTacToe/index.html create mode 100644 Source-Code/TicTacToe/script.js create mode 100644 Source-Code/TicTacToe/style.css diff --git a/Source-Code/TicTacToe/index.html b/Source-Code/TicTacToe/index.html new file mode 100644 index 0000000..37fccff --- /dev/null +++ b/Source-Code/TicTacToe/index.html @@ -0,0 +1,20 @@ + + + + + + Tic Tac Toe + + + +
        +

        Tic Tac Toe

        +
        + +
        + +
        +
        + + + diff --git a/Source-Code/TicTacToe/script.js b/Source-Code/TicTacToe/script.js new file mode 100644 index 0000000..6f297ce --- /dev/null +++ b/Source-Code/TicTacToe/script.js @@ -0,0 +1,72 @@ +/* eslint-disable no-use-before-define */ +// Get elements +const board = document.getElementById('board'); +const restartBtn = document.getElementById('restartBtn'); +const message = document.getElementById('message'); + +let currentPlayer = 'X'; +let gameBoard = Array(9).fill(null); // 3x3 grid, initialized to null (empty) + +const winPatterns = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], // Rows + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], // Columns + [0, 4, 8], + [2, 4, 6], // Diagonals +]; + +// Check for a winner or draw +const checkWinner = () => { + const winner = winPatterns.some(([a, b, c]) => { + if ( + gameBoard[a] + && gameBoard[a] === gameBoard[b] + && gameBoard[a] === gameBoard[c] + ) { + message.textContent = `${gameBoard[a]} wins!`; + board.style.pointerEvents = 'none'; // Disable clicks after game ends + return true; + } + return false; + }); + + if (!winner && !gameBoard.includes(null)) { + message.textContent = "It's a draw!"; + } +}; + +// Create the board cells +const createBoard = () => { + board.innerHTML = ''; // Clear any existing cells + gameBoard.forEach((cell, index) => { + const cellElement = document.createElement('div'); + cellElement.classList.add('cell'); + cellElement.textContent = cell; + cellElement.addEventListener('click', () => handleCellClick(index)); + board.appendChild(cellElement); + }); +}; + +// Handle cell click +const handleCellClick = (index) => { + if (gameBoard[index] !== null) return; // If cell is already filled, return + gameBoard[index] = currentPlayer; + currentPlayer = currentPlayer === 'X' ? 'O' : 'X'; // Switch player + createBoard(); + checkWinner(); +}; + +// Restart the game +restartBtn.addEventListener('click', () => { + gameBoard = Array(9).fill(null); // Reset the game board + currentPlayer = 'X'; // Reset to Player X + createBoard(); + message.textContent = ''; // Clear the message + board.style.pointerEvents = 'auto'; // Enable clicks again +}); + +// Initialize the game +createBoard(); diff --git a/Source-Code/TicTacToe/style.css b/Source-Code/TicTacToe/style.css new file mode 100644 index 0000000..ec93f6a --- /dev/null +++ b/Source-Code/TicTacToe/style.css @@ -0,0 +1,61 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #f4f4f9; +} + +.container { + text-align: center; +} + +h1 { + margin-bottom: 20px; +} + +.board { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3, 100px); + gap: 5px; + justify-content: center; + margin-bottom: 20px; +} + +.cell { + width: 100px; + height: 100px; + display: flex; + align-items: center; + justify-content: center; + font-size: 32px; + background-color: #fff; + border: 2px solid #333; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.cell:hover { + background-color: #f0f0f0; +} + +button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + margin-top: 10px; +} + +#message { + margin-top: 20px; + font-size: 18px; + font-weight: bold; +} From 803a7159ba11ff4d9d3be3d0a9f4afacadd5d066 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 25 Dec 2024 02:16:56 +0530 Subject: [PATCH 39/50] Update the readme file with the description --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 8e353ca..e0484ab 100644 --- a/README.md +++ b/README.md @@ -540,6 +540,17 @@ In order to run this project you need: +
      • +
        +Tic Tac Toe App +

        This is a simple Tic Tac Toe game built using HTML, CSS, and JavaScript. The game allows two players to alternate turns and try to win by getting three of their symbols (X or O) in a row, either horizontally, vertically, or diagonally. The game will automatically check for a winner or draw after each move, and players can restart the game at any time.

        + +
        +
        • +

        (back to top)

        From f43140a7b23dc8006460d7146640f0bd3c820a8a Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Thu, 26 Dec 2024 01:33:03 +0530 Subject: [PATCH 40/50] Add a project --- Source-Code/ChatApp/index.html | 20 +++++++++ Source-Code/ChatApp/script.js | 45 +++++++++++++++++++ Source-Code/ChatApp/style.css | 82 ++++++++++++++++++++++++++++++++++ 3 files changed, 147 insertions(+) create mode 100644 Source-Code/ChatApp/index.html create mode 100644 Source-Code/ChatApp/script.js create mode 100644 Source-Code/ChatApp/style.css diff --git a/Source-Code/ChatApp/index.html b/Source-Code/ChatApp/index.html new file mode 100644 index 0000000..11bd23d --- /dev/null +++ b/Source-Code/ChatApp/index.html @@ -0,0 +1,20 @@ + + + + + + Chat App + + + +
        +

        Simple Chat App

        +
        +
        + + +
        +
        + + + diff --git a/Source-Code/ChatApp/script.js b/Source-Code/ChatApp/script.js new file mode 100644 index 0000000..38bc0da --- /dev/null +++ b/Source-Code/ChatApp/script.js @@ -0,0 +1,45 @@ +const chatBox = document.getElementById('chatBox'); +const chatForm = document.getElementById('chatForm'); +const messageInput = document.getElementById('messageInput'); + +// Display a message in the chat box +const displayMessage = (message, sender) => { + const messageElement = document.createElement('div'); + messageElement.classList.add('message', sender); + messageElement.textContent = message; + chatBox.appendChild(messageElement); + chatBox.scrollTop = chatBox.scrollHeight; // Auto-scroll to the bottom +}; + +// Load messages from local storage +const loadMessages = () => { + const messages = JSON.parse(localStorage.getItem('chatMessages')) || []; + chatBox.innerHTML = ''; + messages.forEach(({ user, bot }) => { + displayMessage(user, 'user'); + displayMessage(bot, 'bot'); + }); +}; + +// Add messages to local storage +const addMessagesToStorage = (userMessage, botReply) => { + const messages = JSON.parse(localStorage.getItem('chatMessages')) || []; + messages.push({ user: userMessage, bot: botReply }); + localStorage.setItem('chatMessages', JSON.stringify(messages)); +}; + +// Handle form submission +chatForm.addEventListener('submit', (e) => { + e.preventDefault(); + const userMessage = messageInput.value.trim(); + if (userMessage) { + const botReply = userMessage; // Echo the user message + displayMessage(userMessage, 'user'); + displayMessage(botReply, 'bot'); + addMessagesToStorage(userMessage, botReply); + messageInput.value = ''; + } +}); + +// Initialize the app +loadMessages(); diff --git a/Source-Code/ChatApp/style.css b/Source-Code/ChatApp/style.css new file mode 100644 index 0000000..f05b489 --- /dev/null +++ b/Source-Code/ChatApp/style.css @@ -0,0 +1,82 @@ +body { + font-family: Arial, sans-serif; + background-color: #cbdc30; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.chat-container { + background-color: #fff; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + width: 400px; + padding: 20px; +} + +h1 { + text-align: center; + color: #333; +} + +.chat-box { + background-color: #f9f9f9; + border: 1px solid #ddd; + border-radius: 8px; + padding: 10px; + height: 300px; + overflow-y: auto; + margin-bottom: 10px; +} + +.chat-box .message { + display: flex; + flex-direction: column; + margin: 5px 0; + padding: 10px; + border-radius: 12px 2px; + font-size: 14px; +} + +.message.user { + background-color: #cdf2f7; + color: #025f54; + float: right; + width: 50%; +} + +.message.bot { + background-color: #fbcfdd; + color: #d81b60; + float: left; + width: 50%; +} + +form { + display: flex; +} + +input[type="text"] { + flex: 1; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 14px; +} + +button { + padding: 10px 20px; + border: none; + background-color: #049786; + color: white; + font-size: 14px; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background-color: #005f4b; +} From 57330869d02b0216ab0fe6c380db1c412493e715 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Thu, 26 Dec 2024 01:35:44 +0530 Subject: [PATCH 41/50] Update the raedme with description --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index e0484ab..53b244e 100644 --- a/README.md +++ b/README.md @@ -551,6 +551,17 @@ In order to run this project you need: +
      • +
        +Simple Chat App +

        This is a simple chat application that simulates a conversation where the app echoes the user's messages as a response. Messages are stored in the browser's local storage, so they persist even after the page is refreshed.

        + +
        +
        • +

        (back to top)

        From 353f0bc6ac29d67ebec371835462763e443d873d Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Thu, 26 Dec 2024 02:11:35 +0530 Subject: [PATCH 42/50] Add the project --- Source-Code/InteractivePolling/index.html | 29 ++++++++++ Source-Code/InteractivePolling/script.js | 48 ++++++++++++++++ Source-Code/InteractivePolling/style.css | 67 +++++++++++++++++++++++ 3 files changed, 144 insertions(+) create mode 100644 Source-Code/InteractivePolling/index.html create mode 100644 Source-Code/InteractivePolling/script.js create mode 100644 Source-Code/InteractivePolling/style.css diff --git a/Source-Code/InteractivePolling/index.html b/Source-Code/InteractivePolling/index.html new file mode 100644 index 0000000..2d67c99 --- /dev/null +++ b/Source-Code/InteractivePolling/index.html @@ -0,0 +1,29 @@ + + + + + + Interactive Polling App + + + +
        +

        Vote for Your Favorite Programming Language

        +
        + + + + +
        +
        +

        Results

        +
          + +
        +
        +
        + + + + + diff --git a/Source-Code/InteractivePolling/script.js b/Source-Code/InteractivePolling/script.js new file mode 100644 index 0000000..e0b4d0b --- /dev/null +++ b/Source-Code/InteractivePolling/script.js @@ -0,0 +1,48 @@ +document.addEventListener('DOMContentLoaded', () => { + const pollOptions = document.querySelectorAll('.poll-option'); + const resultsList = document.getElementById('results-list'); + + const votes = JSON.parse(localStorage.getItem('votes')) || { + Ruby: 0, + Python: 0, + Java: 0, + Javascript: 0, + }; + + // Update the results on the page + function updateResults() { + resultsList.innerHTML = ''; // Clear previous results + + const totalVotes = Object.values(votes).reduce( + (total, count) => total + count, + 0, + ); + + // Display the updated results + Object.entries(votes).forEach(([option, count]) => { + const percentage = totalVotes + ? ((count / totalVotes) * 100).toFixed(1) + : 0; + + const resultItem = document.createElement('li'); + resultItem.innerHTML = ` + ${option}: ${count} votes (${percentage}%) +
        + `; + resultsList.appendChild(resultItem); + }); + } + + // Display initial poll results + updateResults(); + + // Event listener for voting + pollOptions.forEach((option) => { + option.addEventListener('click', () => { + const selectedVote = option.getAttribute('data-vote'); + votes[selectedVote] += 1; + localStorage.setItem('votes', JSON.stringify(votes)); + updateResults(); + }); + }); +}); diff --git a/Source-Code/InteractivePolling/style.css b/Source-Code/InteractivePolling/style.css new file mode 100644 index 0000000..f85b2e4 --- /dev/null +++ b/Source-Code/InteractivePolling/style.css @@ -0,0 +1,67 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #f9f9f9; +} + +.poll-container { + background: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + width: 100%; + max-width: 400px; + text-align: center; +} + +.poll-question { + font-size: 1.2rem; + margin-bottom: 20px; +} + +label { + display: block; + margin: 10px 0; + font-size: 1rem; +} + +button { + margin-top: 20px; + padding: 10px 20px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +.poll-results { + margin-top: 20px; + text-align: left; +} + +.poll-results ul { + list-style: none; + padding: 0; +} + +.poll-results li { + padding: 5px 0; + font-size: 1rem; +} + +.poll-results .bar { + background-color: #007bff; + height: 10px; + border-radius: 4px; + margin-top: 5px; +} From 4fb1b8e4d6ca36c843ee9a509b429148a4ef72e1 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Thu, 26 Dec 2024 02:14:31 +0530 Subject: [PATCH 43/50] Update the Readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 53b244e..b5ac8c7 100644 --- a/README.md +++ b/README.md @@ -562,6 +562,17 @@ In order to run this project you need: +
      • +
        +Simple Chat App +

        This is an interactive polling app that allows users to vote on a specific question. Users can vote for their preferred options and view the results in real-time. The app tracks the votes for each option and stores them in the local storage so the votes persist even after the page is refreshed.

        + +
        +
        • +

        (back to top)

        From 01c0b8a8c18a56e866df2d68e5df94d17afaf51f Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Thu, 26 Dec 2024 02:28:52 +0530 Subject: [PATCH 44/50] Add a project --- Source-Code/DragAndDrop/index.html | 32 ++++++++++++++++ Source-Code/DragAndDrop/script.js | 54 +++++++++++++++++++++++++++ Source-Code/DragAndDrop/style.css | 60 ++++++++++++++++++++++++++++++ 3 files changed, 146 insertions(+) create mode 100644 Source-Code/DragAndDrop/index.html create mode 100644 Source-Code/DragAndDrop/script.js create mode 100644 Source-Code/DragAndDrop/style.css diff --git a/Source-Code/DragAndDrop/index.html b/Source-Code/DragAndDrop/index.html new file mode 100644 index 0000000..c49e5d6 --- /dev/null +++ b/Source-Code/DragAndDrop/index.html @@ -0,0 +1,32 @@ + + + + + + Drag and Drop App + + + +
        +
        +

        Task List 1

        +
          +
        • Task 1
          • +
        • Task 2
          • +
        • Task 3
          • +
        +
        + +
        +

        Task List 2

        +
          +
        • Task 4
          • +
        • Task 5
          • +
        • Task 6
          • +
        +
        +
        + + + + diff --git a/Source-Code/DragAndDrop/script.js b/Source-Code/DragAndDrop/script.js new file mode 100644 index 0000000..0cee99d --- /dev/null +++ b/Source-Code/DragAndDrop/script.js @@ -0,0 +1,54 @@ +// Get all the lists and list items +const lists = document.querySelectorAll('.list'); +const items = document.querySelectorAll('li'); + +// Drag start function to add the dragging class +function dragStart(e) { + e.target.classList.add('dragging'); +} + +// Drag end function to remove the dragging class +function dragEnd(e) { + e.target.classList.remove('dragging'); +} + +// Drag over function to allow dropping on the list +function dragOver(e) { + e.preventDefault(); +} + +// Drag enter function to style the list when an item is dragged over +function dragEnter(e) { + e.target.classList.add('over'); +} + +// Drag leave function to remove the styling when the item leaves the list +function dragLeave(e) { + e.target.classList.remove('over'); +} + +// Drop function to move the dragged item into the list +function drop(e) { + e.preventDefault(); + const draggedItem = document.querySelector('.dragging'); + e.target.classList.remove('over'); + + // If the target is a list, append the dragged item to it + if (e.target.classList.contains('list')) { + e.target.querySelector('ul').appendChild(draggedItem); + } +} + +// Add event listeners for dragging items +items.forEach((item) => { + item.addEventListener('dragstart', dragStart); + item.addEventListener('dragend', dragEnd); +}); + +// Add event listeners for the lists to accept dropped items +lists.forEach((list) => { + list.addEventListener('dragover', dragOver); + list.addEventListener('dragenter', dragEnter); + list.addEventListener('dragleave', dragLeave); + list.addEventListener('drop', drop); +}); diff --git a/Source-Code/DragAndDrop/style.css b/Source-Code/DragAndDrop/style.css new file mode 100644 index 0000000..b862af5 --- /dev/null +++ b/Source-Code/DragAndDrop/style.css @@ -0,0 +1,60 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f0f0f0; +} + +.container { + display: flex; + gap: 20px; +} + +.list { + background-color: #fff; + border-radius: 8px; + padding: 20px; + width: 200px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +h2 { + text-align: center; + margin-bottom: 20px; +} + +ul { + list-style-type: none; +} + +li { + padding: 10px; + margin: 5px 0; + background-color: #4caf50; + color: white; + border-radius: 4px; + cursor: grab; + transition: background-color 0.3s ease; +} + +li:hover { + background-color: #45a049; +} + +/* When dragging an item */ +li.dragging { + opacity: 0.5; +} + +.list.over { + border: 2px dashed #4caf50; + background-color: #f9f9f9; +} From 9287753e6d38fe7a97e8cc80869037540cfa079d Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Thu, 26 Dec 2024 02:30:44 +0530 Subject: [PATCH 45/50] Update readme with the description --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index b5ac8c7..b0eaa79 100644 --- a/README.md +++ b/README.md @@ -573,6 +573,17 @@ In order to run this project you need: +
      • +
        +Drag and Drop App +

        This is a simple drag-and-drop app where users can move items from one list to another. It's a basic implementation of a task manager or an image gallery where users can organize their items by dragging and dropping.

        + +
        +
        • +

        (back to top)

        From b1b3925bcbe1a9bdd4627bfae52278b455be2136 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Fri, 27 Dec 2024 01:50:17 +0530 Subject: [PATCH 46/50] create a empty file for the project --- Source-Code/AdsBlockerExtension/background.js | 0 Source-Code/AdsBlockerExtension/manifest.json | 0 Source-Code/AdsBlockerExtension/popup.html | 0 Source-Code/AdsBlockerExtension/style.css | 0 4 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 Source-Code/AdsBlockerExtension/background.js create mode 100644 Source-Code/AdsBlockerExtension/manifest.json create mode 100644 Source-Code/AdsBlockerExtension/popup.html create mode 100644 Source-Code/AdsBlockerExtension/style.css diff --git a/Source-Code/AdsBlockerExtension/background.js b/Source-Code/AdsBlockerExtension/background.js new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/AdsBlockerExtension/manifest.json b/Source-Code/AdsBlockerExtension/manifest.json new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/AdsBlockerExtension/popup.html b/Source-Code/AdsBlockerExtension/popup.html new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/AdsBlockerExtension/style.css b/Source-Code/AdsBlockerExtension/style.css new file mode 100644 index 0000000..e69de29 From 8bf1afcade09ec382e68631d824fa4c10b557f18 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sat, 28 Dec 2024 02:17:55 +0530 Subject: [PATCH 47/50] add the feature block the ads --- Source-Code/AdsBlockerExtension/background.js | 0 Source-Code/AdsBlockerExtension/content.js | 41 ++++++++++++++++++ .../AdsBlockerExtension/icons/icon128.png | Bin 0 -> 2101 bytes .../AdsBlockerExtension/icons/icon16.png | Bin 0 -> 1066 bytes .../AdsBlockerExtension/icons/icon48.png | Bin 0 -> 1560 bytes Source-Code/AdsBlockerExtension/manifest.json | 27 ++++++++++++ Source-Code/AdsBlockerExtension/popup.css | 35 +++++++++++++++ Source-Code/AdsBlockerExtension/popup.html | 24 ++++++++++ Source-Code/AdsBlockerExtension/popup.js | 34 +++++++++++++++ Source-Code/AdsBlockerExtension/style.css | 0 10 files changed, 161 insertions(+) delete mode 100644 Source-Code/AdsBlockerExtension/background.js create mode 100644 Source-Code/AdsBlockerExtension/content.js create mode 100644 Source-Code/AdsBlockerExtension/icons/icon128.png create mode 100644 Source-Code/AdsBlockerExtension/icons/icon16.png create mode 100644 Source-Code/AdsBlockerExtension/icons/icon48.png create mode 100644 Source-Code/AdsBlockerExtension/popup.css create mode 100644 Source-Code/AdsBlockerExtension/popup.js delete mode 100644 Source-Code/AdsBlockerExtension/style.css diff --git a/Source-Code/AdsBlockerExtension/background.js b/Source-Code/AdsBlockerExtension/background.js deleted file mode 100644 index e69de29..0000000 diff --git a/Source-Code/AdsBlockerExtension/content.js b/Source-Code/AdsBlockerExtension/content.js new file mode 100644 index 0000000..a40a9fd --- /dev/null +++ b/Source-Code/AdsBlockerExtension/content.js @@ -0,0 +1,41 @@ +const adSelectors = [ + 'iframe[src*="ads"]', + 'div[class*="ad"]', + 'div[id*="ad"]', + "ins.adsbygoogle", + "[data-ad]", + ".ad-banner", +]; + +// Normalize domain +const normalizeDomain = (domain) => domain.replace(/^www\./, ""); + +chrome.storage.local.get( + { adBlockerEnabled: true, whitelist: [] }, + ({ adBlockerEnabled, whitelist }) => { + if (!adBlockerEnabled) return; + + const currentSite = normalizeDomain(window.location.hostname); + const normalizedWhitelist = whitelist.map(normalizeDomain); + + if (normalizedWhitelist.includes(currentSite)) { + console.log(`Whitelist active: Ads are allowed on ${currentSite}`); + return; // Skip ad blocking + } + + // Ad blocking logic + const blockAds = () => { + adSelectors.forEach((selector) => { + const ads = document.querySelectorAll(selector); + console.log(`Found ${ads.length} ads for selector: ${selector}`); + ads.forEach((ad) => ad.remove()); + }); + }; + + blockAds(); // Initial blocking + + // Observe dynamically loaded ads + const observer = new MutationObserver(blockAds); + observer.observe(document.body, { childList: true, subtree: true }); + } +); diff --git a/Source-Code/AdsBlockerExtension/icons/icon128.png b/Source-Code/AdsBlockerExtension/icons/icon128.png new file mode 100644 index 0000000000000000000000000000000000000000..fbebcc8680e6b55762cf502443435ec007b64311 GIT binary patch literal 2101 zcmd5-Yfuwc6y6{z;njl7_(E7-vr;G7BtRrF2}FVh5v?&+5esax3t19&`hGyo`4>{i5R#u(6m72<>v8adYvfjFv!)+c3&vaD&C z3D=fV*xJ%ndSj{CC_|wXmA}F+X9v2iLw)@c|)X;>^2an}Mtg$FNJqckUajI6~r zy9JMA!QGau2t{N1tyWA4=`fnKQAW(oz$uNBq)`~cV5mwWk|YYm5`ko~0)FL)voWEN zZf7!3Re?;3%90RNfJqRkAWXyRN^NxZO$JvUYXbJ4Zno}jpe@u+w;JR$P{C#B_|rwTQC z(`2<#7Iz7tMi{eT#TdbGNfM7I2{pPi{eoLM3DupjZK7voMfq z9pP3(K@_9$LIMo=;hPMyb$?doLmp1S4Z1nz+jnO}ae z&;I}W@{N?bI$=tE{h>hzaJ9D)ZqLna%j~J|>$| z_Bv!P%dst*!~flonfGP=bWj~>8OD1%z}U_!b=##WL7Ix1N5fd(-Tc_jOHS36k(sF# z;o-wSU*Gj+><3Mn7rRS*qtt;-6nr8skbhGr88MXkI2(eRXyMuTF#bbb%&j};Dx3|$ zr>LVR1mXNHUBb1ZL7%FIz*F>Br6OPco*U8a522k^`H@E{GnE*~KYc^eTu?a8nZMvD zT~wMJ#{YGebM=$nZ?vM-dSTRe9nRZ3qM!Jcr2wJlXVs?N4~RZEJ2Gq6)7|Y+v1xuG zXm&{ppsN#YbmFb?zE#xwy1ka6l`)Qea7_=oDeo;_V@*^wICQp$4-N#G;ZOSZ>VWtX zQ%+~wo|8V>v5uUByT{fBfKNm2gtuO<%>|Csi<(Ch$=N>IKPzu`*Q`GqlG+tXJR7@r ze+3Xvc4iN5Jh+6{SdJ8aS{U%IKRCcwc88Zecn64A{c(TD)nMi|wuCNQm^UvKII?Z- zp?z>rwB!3@`Y_-F@K%s*3(=kprx z4t$*3me>OHya-*;%NcR#Z^`IA^=IhI7|> z=N8=`{NQqT&i(&>=luTX?h1ki4H`6P(D1)P647HyFa)HC9|_S6I+l1Zg=j>t!}zKH zL^h0vcO8bWT@~pKeGXx2r1cBq74L84mQ8Psh;ZtS#Y7A+K0c8RcMfIrD5_~jD)N1mA?At4fNI;K2B78U!C#eq({gXP7!U9L^SC8;0{}=VgudPOZEzp z2HlygqawOMMf_7X(P>YG2lXcCt6K`awFYn>&V)Nv>2Rw&4La;;->x56JaogB@}_NH za({;{_3iDd^bb8XhVKuKntt`x8oqRvrL0y(Tnkw+t+`|#c8YT|offo;ig=TgV2fnN zHcC*vL{Ot7qE?AumqhSuiJRUXtBPQi5{W*lDSZKbtc@aGxC>D zzlwa;un}N*fRkPO|ISXjkPN6Pa!do~^59+9VNP~E+L+FY3`f)&P{O;8C7(mu1&QEw zRK(qs;NkJSEyKiNO0e5$NnEQ`e7QvMuP6`>zT}!jd@$(Bvw;%9P?aAK<{TXqnqneK zbB>N{kw#1;t_f(s8yh%OFpE#N=FWun1A4fBGz;3w^iY~RGwgz`0ctW$-kop-HsH;? zdAVoh*@JwWsp4r0NqE7;I1)3MgH88 z;%eNtj#5+1iG_w@B=^9&fCjvc+`$H(DoTLjWwE2K5-TXLkh{j9`u#%RQ)rnEP8TJ} z@wp}hLvu-dj6~2&HsQ>61f{vUh#4qdp@TEqW%1~F!`9g|1SM!HO^TxgKlDz7%8j$2 zDC^H|upk};Yj?|=5L@$CitWr1}!W8zUMhWhu1P_H#_>kuiL7Q1k kRm5x1ph1HM4MG&-H}mYVUIaDRuK)l507*qoM6N<$fcv^pq-!#@6-zVL76d!7Pa4z2_Ix33 zDh=2}r#?)ggF#`NG$C=>B}1!yv4~#O(u@lmE+5>`z zHs(MIZ0zpj<9)I^lzyt0)bQ^!zN?fD-a}c zL{`@omZA!Uf~(N(lGR~~4hDmio1qwnLQ|NqACPB6vB*~@sKn_GX4;C*OBF8*`UkR6GE8xw!3-S z4M>pA_(+c@9VCI*k3?_A&7^%W81Q+kL}ioJG~3gN#mjgZpEpQ*Xn)Wfa90iN!`1kd zZ17ntlrU3;E$eJ-h_bSq6U#}lg-TYc7Uh(cfh)@L?@J}{)iNoDnzLI#;3=4cc_`^t zk?2a11fJDJJqMRd6v^qUON4rl%>ikcBTQ0&8DQjeBD_no%>-P4nm8=sBu?KWunJd* zTH)q@gr%%#Zma$5H)b^+IzTbCS7JgE8!_~(tcF1*W8hjAh$A5j^p6^~yq);}lw9;C ztJz(33lk_S+8@DKyKQAPCCj;R6iCklye$bO0jf~lf(tUw#UkAx8+mS^M@ry^232lX zq${nZ43XYB7^3c`xaYOYk)R2HW&u^57)Yqj9ORKBR5VfI^Bcdzu$qSxu}I21dUI;4 z^St~1@%jBlpL6n5tn=p1J(=}6qx??{ln^p@rL7cjpxx9FVxLVVa@A0_}Xj_cCey+=i?9Z9~CyT-A$LrSniL% zcEoNq*DD(~T^>`fys)ox;lZWz@|EKCFAlwN?evGP*DfSK`R1|I$=RVZpTQZ=L@9J? zv13cqSkUKZW@0@{^T*b=KJcyoM%&(*x_6(wHTZK|gS7c;(D&3MZ-*B>CtD|n{MQ2{ zIoVH*ZhHC9#nLO@xvRd{e_uOIOnPnv vvqSOHo#>BeKlhxz=G^z>i5;GGbKf^k)gE|t=_+&1n%#-6zSx=0J^TL#U8fT1 literal 0 HcmV?d00001 diff --git a/Source-Code/AdsBlockerExtension/manifest.json b/Source-Code/AdsBlockerExtension/manifest.json index e69de29..3982ced 100644 --- a/Source-Code/AdsBlockerExtension/manifest.json +++ b/Source-Code/AdsBlockerExtension/manifest.json @@ -0,0 +1,27 @@ +{ + "manifest_version": 2, + "name": "Ad Blocker", + "version": "1.0", + "description": "A simple ad blocker to remove advertisements from websites.", + "permissions": ["activeTab", "storage"], + "content_scripts": [ + { + "matches": [""], + "js": ["content.js"] + } + ], + "browser_action": { + "default_popup": "popup.html", + "default_icon": { + "16": "./icons/icon16.png", + "48": "./icons/icon48.png", + "128": "./icons/icon128.png" + } + }, + "icons": { + "16": "./icons/icon16.png", + "48": "./icons/icon48.png", + "128": "./icons/icon128.png" + } + } + \ No newline at end of file diff --git a/Source-Code/AdsBlockerExtension/popup.css b/Source-Code/AdsBlockerExtension/popup.css new file mode 100644 index 0000000..fb2d8d6 --- /dev/null +++ b/Source-Code/AdsBlockerExtension/popup.css @@ -0,0 +1,35 @@ +body { + font-family: Arial, sans-serif; + margin: 10px; + width: 250px; + } + + h1 { + font-size: 1.5em; + margin-bottom: 10px; + } + + label { + display: block; + margin-bottom: 20px; + } + + input { + margin-right: 10px; + } + + ul { + list-style-type: none; + padding: 0; + } + + li { + margin: 5px 0; + display: flex; + justify-content: space-between; + } + + button { + cursor: pointer; + } + \ No newline at end of file diff --git a/Source-Code/AdsBlockerExtension/popup.html b/Source-Code/AdsBlockerExtension/popup.html index e69de29..de88f92 100644 --- a/Source-Code/AdsBlockerExtension/popup.html +++ b/Source-Code/AdsBlockerExtension/popup.html @@ -0,0 +1,24 @@ + + + + + + Ad Blocker + + + +

        Ad Blocker

        + +
        +

        Whitelist

        + + +
          +
          +

          + + + diff --git a/Source-Code/AdsBlockerExtension/popup.js b/Source-Code/AdsBlockerExtension/popup.js new file mode 100644 index 0000000..ce29ed3 --- /dev/null +++ b/Source-Code/AdsBlockerExtension/popup.js @@ -0,0 +1,34 @@ +const whitelistInput = document.getElementById("whitelist-input"); +const addToWhitelist = document.getElementById("add-to-whitelist"); +const whitelist = document.getElementById("whitelist"); +let whitelistData = JSON.parse(localStorage.getItem("whitelist")) || []; + +// Load whitelist +function loadWhitelist() { + whitelist.innerHTML = ""; + whitelistData.forEach((site) => { + const li = document.createElement("li"); + li.textContent = site; + const removeBtn = document.createElement("button"); + removeBtn.textContent = "Remove"; + removeBtn.addEventListener("click", () => { + whitelistData = whitelistData.filter((item) => item !== site); + localStorage.setItem("whitelist", JSON.stringify(whitelistData)); + loadWhitelist(); + }); + li.appendChild(removeBtn); + whitelist.appendChild(li); + }); +} + +addToWhitelist.addEventListener("click", () => { + const site = whitelistInput.value.trim(); + if (site && !whitelistData.includes(site)) { + whitelistData.push(site); + localStorage.setItem("whitelist", JSON.stringify(whitelistData)); + whitelistInput.value = ""; + loadWhitelist(); + } +}); + +loadWhitelist(); diff --git a/Source-Code/AdsBlockerExtension/style.css b/Source-Code/AdsBlockerExtension/style.css deleted file mode 100644 index e69de29..0000000 From 351e3a2289eef7f5287977e12750488dac1bca85 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sat, 28 Dec 2024 15:36:13 +0530 Subject: [PATCH 48/50] Add and updat ethe projec with description --- README.md | 11 ++++ Source-Code/AdsBlockerExtension/content.js | 11 ++-- Source-Code/AdsBlockerExtension/popup.css | 67 +++++++++++----------- Source-Code/AdsBlockerExtension/popup.js | 26 ++++----- 4 files changed, 63 insertions(+), 52 deletions(-) diff --git a/README.md b/README.md index b0eaa79..8927f99 100644 --- a/README.md +++ b/README.md @@ -584,6 +584,17 @@ In order to run this project you need: +
        • +
          +Ads Blocker Extension +

          This is a simple Ad Blocker Extension. AdBlocker is a lightweight browser extension designed to block intrusive advertisements and enhance your browsing experience.

          + +
          +
          • +

          (back to top)

          diff --git a/Source-Code/AdsBlockerExtension/content.js b/Source-Code/AdsBlockerExtension/content.js index a40a9fd..7e719d8 100644 --- a/Source-Code/AdsBlockerExtension/content.js +++ b/Source-Code/AdsBlockerExtension/content.js @@ -1,14 +1,15 @@ +/* eslint-disable no-undef */ const adSelectors = [ 'iframe[src*="ads"]', 'div[class*="ad"]', 'div[id*="ad"]', - "ins.adsbygoogle", - "[data-ad]", - ".ad-banner", + 'ins.adsbygoogle', + '[data-ad]', + '.ad-banner', ]; // Normalize domain -const normalizeDomain = (domain) => domain.replace(/^www\./, ""); +const normalizeDomain = (domain) => domain.replace(/^www\./, ''); chrome.storage.local.get( { adBlockerEnabled: true, whitelist: [] }, @@ -37,5 +38,5 @@ chrome.storage.local.get( // Observe dynamically loaded ads const observer = new MutationObserver(blockAds); observer.observe(document.body, { childList: true, subtree: true }); - } + }, ); diff --git a/Source-Code/AdsBlockerExtension/popup.css b/Source-Code/AdsBlockerExtension/popup.css index fb2d8d6..5ba01a8 100644 --- a/Source-Code/AdsBlockerExtension/popup.css +++ b/Source-Code/AdsBlockerExtension/popup.css @@ -1,35 +1,34 @@ body { - font-family: Arial, sans-serif; - margin: 10px; - width: 250px; - } - - h1 { - font-size: 1.5em; - margin-bottom: 10px; - } - - label { - display: block; - margin-bottom: 20px; - } - - input { - margin-right: 10px; - } - - ul { - list-style-type: none; - padding: 0; - } - - li { - margin: 5px 0; - display: flex; - justify-content: space-between; - } - - button { - cursor: pointer; - } - \ No newline at end of file + font-family: Arial, sans-serif; + margin: 10px; + width: 250px; +} + +h1 { + font-size: 1.5em; + margin-bottom: 10px; +} + +label { + display: block; + margin-bottom: 20px; +} + +input { + margin-right: 10px; +} + +ul { + list-style-type: none; + padding: 0; +} + +li { + margin: 5px 0; + display: flex; + justify-content: space-between; +} + +button { + cursor: pointer; +} diff --git a/Source-Code/AdsBlockerExtension/popup.js b/Source-Code/AdsBlockerExtension/popup.js index ce29ed3..2a544a6 100644 --- a/Source-Code/AdsBlockerExtension/popup.js +++ b/Source-Code/AdsBlockerExtension/popup.js @@ -1,19 +1,19 @@ -const whitelistInput = document.getElementById("whitelist-input"); -const addToWhitelist = document.getElementById("add-to-whitelist"); -const whitelist = document.getElementById("whitelist"); -let whitelistData = JSON.parse(localStorage.getItem("whitelist")) || []; +const whitelistInput = document.getElementById('whitelist-input'); +const addToWhitelist = document.getElementById('add-to-whitelist'); +const whitelist = document.getElementById('whitelist'); +let whitelistData = JSON.parse(localStorage.getItem('whitelist')) || []; // Load whitelist function loadWhitelist() { - whitelist.innerHTML = ""; + whitelist.innerHTML = ''; whitelistData.forEach((site) => { - const li = document.createElement("li"); + const li = document.createElement('li'); li.textContent = site; - const removeBtn = document.createElement("button"); - removeBtn.textContent = "Remove"; - removeBtn.addEventListener("click", () => { + const removeBtn = document.createElement('button'); + removeBtn.textContent = 'Remove'; + removeBtn.addEventListener('click', () => { whitelistData = whitelistData.filter((item) => item !== site); - localStorage.setItem("whitelist", JSON.stringify(whitelistData)); + localStorage.setItem('whitelist', JSON.stringify(whitelistData)); loadWhitelist(); }); li.appendChild(removeBtn); @@ -21,12 +21,12 @@ function loadWhitelist() { }); } -addToWhitelist.addEventListener("click", () => { +addToWhitelist.addEventListener('click', () => { const site = whitelistInput.value.trim(); if (site && !whitelistData.includes(site)) { whitelistData.push(site); - localStorage.setItem("whitelist", JSON.stringify(whitelistData)); - whitelistInput.value = ""; + localStorage.setItem('whitelist', JSON.stringify(whitelistData)); + whitelistInput.value = ''; loadWhitelist(); } }); From f7d378a61b5d29add0c2f22888156f8034a10c2c Mon Sep 17 00:00:00 2001 From: Tajul Afreen <119053190+tajulafreen@users.noreply.github.com> Date: Sat, 28 Dec 2024 15:58:12 +0530 Subject: [PATCH 49/50] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8927f99..6f6364f 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ In order to run this project you need:
        • Open the index.html file in your preferred web browser.
          • -

          Feel free to explore, modify, and experiment with the code to better understand how these animations and transitions are achieved.

          +

          Feel free to explore, modify, and experiment with the code to better understand.

          (back to top)

          From 84b49f65ba8fc962adc6d0fb0c33af8ab85823aa Mon Sep 17 00:00:00 2001 From: Tajul Afreen <119053190+tajulafreen@users.noreply.github.com> Date: Fri, 28 Mar 2025 16:54:56 +0530 Subject: [PATCH 50/50] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6f6364f..c15f7cc 100644 --- a/README.md +++ b/README.md @@ -564,7 +564,7 @@ In order to run this project you need:
        • -Simple Chat App +Interactive Polling App

          This is an interactive polling app that allows users to vote on a specific question. Users can vote for their preferred options and view the results in real-time. The app tracks the votes for each option and stores them in the local storage so the votes persist even after the page is refreshed.