Ad Blocker
+ +
+
+
+
+
+
diff --git a/Source-Code/AdsBlockerExtension/popup.js b/Source-Code/AdsBlockerExtension/popup.js
new file mode 100644
index 0000000..2a544a6
--- /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/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 @@
+
+
+
+
+
+ Whitelist
+ + +
+
+
+
+
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;
+}
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 @@
+
+
+
+
+
+ Simple Chat App
+ + +
+
+
+
+
\ 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..e318503
--- /dev/null
+++ b/Source-Code/CurrencyConverter/style.css
@@ -0,0 +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;
+}
+
+.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;
+}
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 @@
+
+
+
+
+
+ Currency Converter
+
+
+
+ to
+
+
+
+
+
+
+
+
+
+
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;
+}
diff --git a/Source-Code/E-CommerceWebsite/index.html b/Source-Code/E-CommerceWebsite/index.html
new file mode 100644
index 0000000..2f8fbc7
--- /dev/null
+++ b/Source-Code/E-CommerceWebsite/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+ Task List 1
+-
+
- Task 1 +
- Task 2 +
- Task 3 +
+
+ Task List 2
+-
+
- Task 4 +
- Task 5 +
- Task 6 +
+
+
+
+ Products
+ +
+
+
+
+
+
diff --git a/Source-Code/E-CommerceWebsite/script.js b/Source-Code/E-CommerceWebsite/script.js
new file mode 100644
index 0000000..7d34ddb
--- /dev/null
+++ 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.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 new file mode 100644 index 0000000..c7c8624 --- /dev/null +++ b/Source-Code/E-CommerceWebsite/style.css @@ -0,0 +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; +} 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 @@ + + + + + +
+
+
+
+
+
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;
+}
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 @@
+
+
+
+
+
+ Food Order App
+
+
+
+
+ 
+
+
+
+
+ Burger
+$5.99
+ +
+ 
+
+
+
+
+ Pizza
+$8.99
+ +
+ 
+
+
+
+
+ Pasta
+$7.49
+ +
+
+ Your Cart
+-
+
+
Total: $0.00
+ +
+
+
+
+
+
+
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;
+}
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 @@
+
+
+
+
+
+
+ Vote for Your Favorite Programming Language
+ +
+
+ Results
+-
+
+
Just Relax !!
+
+
+
+
+
+
+
+
+
+
+
+