├── 1 ├── style.css ├── main.js └── index.html ├── 2 ├── style.css ├── main.js └── index.html ├── 3 ├── style.css ├── main.js └── index.html ├── 4 ├── style.css ├── main.js └── index.html ├── 5 ├── style.css ├── main.js └── index.html ├── 6 ├── style.css └── main.js ├── 7 ├── style.css ├── main.js └── index.html ├── 8 ├── style.css ├── main.js └── index.html ├── 9 ├── style.css ├── main.js └── index.html ├── 10 ├── style.css ├── main.js └── index.html ├── 11 ├── main.js ├── style.css └── index.html ├── 12 ├── style.css ├── main.js └── index.html ├── 13 ├── style.css ├── main.js └── index.html ├── 14 ├── style.css ├── main.js └── index.html ├── 15 ├── style.css ├── main.js └── index.html ├── 16 ├── style.css ├── main.js └── index.html ├── 17 ├── style.css ├── main.js └── index.html ├── 18 ├── style.css ├── main.js └── index.html ├── 19 ├── style.css ├── main.js └── index.html ├── 20 ├── style.css ├── index.html └── main.js ├── 21 ├── style.css ├── main.js └── index.html ├── 22 ├── style.css ├── main.js └── index.html ├── 23 ├── style.css ├── index.html └── main.js ├── 24 ├── style.css ├── index.html └── main.js ├── 25 ├── style.css ├── index.html └── main.js ├── 26 ├── style.css ├── index.html └── main.js ├── 27 ├── style.css └── index.html ├── 28 ├── style.css └── index.html ├── 29 ├── main.js ├── style.css └── index.html ├── 30 ├── main.js └── style.css ├── 31 ├── main.js └── style.css ├── 32 ├── style.css └── main.js ├── 33 ├── style.css └── index.html ├── 34 ├── style.css └── index.html ├── 35 └── style.css ├── 36 └── style.css ├── 37 ├── style.css └── main.js ├── 38 ├── main.js └── style.css ├── 39 ├── style.css ├── index.html └── main.js ├── 40 ├── style.css ├── index.html └── main.js ├── 41 ├── style.css ├── index.html └── main.js ├── 42 └── style.css ├── 43 └── style.css ├── 45 ├── style.css └── main.js ├── 46 └── style.css ├── 47 ├── style.css └── main.js ├── 48 ├── style.css └── index.html ├── 49 └── style.css ├── 50 └── style.css ├── LICENSE └── README.md /3/style.css: -------------------------------------------------------------------------------- 1 | .highlight { 2 | background-color: yellow; 3 | } 4 | -------------------------------------------------------------------------------- /16/style.css: -------------------------------------------------------------------------------- 1 | canvas { 2 | border: 1px solid #ddd; 3 | border-radius: 4px; 4 | background: #313131; 5 | } 6 | -------------------------------------------------------------------------------- /8/style.css: -------------------------------------------------------------------------------- 1 | .progress { 2 | height: 30px; 3 | } 4 | 5 | .progress-bar { 6 | transition: width 0.5s; 7 | } 8 | -------------------------------------------------------------------------------- /5/style.css: -------------------------------------------------------------------------------- 1 | .countdown { 2 | text-align: left; 3 | margin-top: 20px; 4 | } 5 | 6 | #timer { 7 | font-size: 2em; 8 | font-weight: bold; 9 | } 10 | -------------------------------------------------------------------------------- /22/style.css: -------------------------------------------------------------------------------- 1 | .color-picker { 2 | text-align: center; 3 | } 4 | 5 | .color-display { 6 | width: 100%; 7 | height: 200px; 8 | border: 1px solid #d4d4d4; 9 | } 10 | -------------------------------------------------------------------------------- /10/style.css: -------------------------------------------------------------------------------- 1 | /* Styling for the font size changer */ 2 | .font-size-changer { 3 | margin-top: 20px; 4 | } 5 | 6 | #textParagraph { 7 | font-size: 16px; /* Initial font size */ 8 | } 9 | -------------------------------------------------------------------------------- /11/main.js: -------------------------------------------------------------------------------- 1 | const toggleButton = document.getElementById("toggle-mode"); 2 | 3 | toggleButton.addEventListener("click", () => { 4 | document.body.classList.toggle("dark-mode"); 5 | }); 6 | -------------------------------------------------------------------------------- /1/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | max-width: 1200px; 3 | margin: 0 auto; 4 | padding: 0 20px; 5 | box-sizing: border-box; 6 | } 7 | 8 | .embed { 9 | max-height: 200px; 10 | width: auto; 11 | } 12 | -------------------------------------------------------------------------------- /2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | max-width: 1200px; 3 | margin: 0 auto; 4 | padding: 0 20px; 5 | box-sizing: border-box; 6 | } 7 | 8 | .embed { 9 | max-height: 200px; 10 | width: auto; 11 | } 12 | -------------------------------------------------------------------------------- /20/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #f8f9fa; 3 | } 4 | 5 | .card { 6 | transition: transform 0.2s; 7 | } 8 | 9 | .card:hover { 10 | transform: translateY(-2px); 11 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 12 | } 13 | -------------------------------------------------------------------------------- /9/style.css: -------------------------------------------------------------------------------- 1 | /* Styling for the color changer */ 2 | .color-changer { 3 | margin-top: 20px; 4 | } 5 | 6 | #colorBox { 7 | width: 100%; 8 | max-width: 300px; 9 | height: 100px; 10 | text-align: center; 11 | line-height: 100px; 12 | } 13 | -------------------------------------------------------------------------------- /7/style.css: -------------------------------------------------------------------------------- 1 | .code-snippet { 2 | position: relative; 3 | margin-top: 20px; 4 | } 5 | 6 | textarea#codeSnippet { 7 | width: 100%; 8 | max-width: 300px; /* Ensure the width does not exceed 300px */ 9 | height: auto; 10 | resize: vertical; 11 | } 12 | -------------------------------------------------------------------------------- /13/style.css: -------------------------------------------------------------------------------- 1 | .list-group-item { 2 | cursor: move; 3 | user-select: none; 4 | } 5 | 6 | .list-group-item.dragging { 7 | opacity: 0.5; 8 | background-color: #e9ecef; 9 | } 10 | 11 | .list-group-item.drag-over { 12 | border-top: 2px solid #007bff; 13 | } 14 | -------------------------------------------------------------------------------- /1/main.js: -------------------------------------------------------------------------------- 1 | const textInput = document.getElementById("textInput"); 2 | const charCount = document.getElementById("charCount"); 3 | 4 | textInput.addEventListener("input", () => { 5 | const remaining = 50 - textInput.value.length; 6 | charCount.textContent = remaining; 7 | }); 8 | -------------------------------------------------------------------------------- /14/style.css: -------------------------------------------------------------------------------- 1 | .api-list { 2 | max-width: 600px; 3 | margin: 0 auto; 4 | } 5 | 6 | .list-group-item { 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | } 11 | 12 | .user-email { 13 | color: #666; 14 | font-size: 0.9em; 15 | } 16 | -------------------------------------------------------------------------------- /2/main.js: -------------------------------------------------------------------------------- 1 | const textInput = document.getElementById("textInput"); 2 | const charCount = document.getElementById("charCount"); 3 | 4 | textInput.addEventListener("input", () => { 5 | const remaining = 50 - textInput.value.length; 6 | charCount.textContent = remaining; 7 | }); 8 | -------------------------------------------------------------------------------- /12/style.css: -------------------------------------------------------------------------------- 1 | .form-group { 2 | margin-bottom: 1rem; 3 | } 4 | 5 | .invalid-feedback { 6 | display: none; 7 | color: #dc3545; 8 | font-size: 0.875rem; 9 | } 10 | 11 | .form-control.is-invalid { 12 | border-color: #dc3545; 13 | } 14 | 15 | .form-control.is-invalid + .invalid-feedback { 16 | display: block; 17 | } 18 | -------------------------------------------------------------------------------- /21/style.css: -------------------------------------------------------------------------------- 1 | #networkStatus { 2 | display: none; 3 | text-align: center; 4 | font-size: 1.2em; 5 | } 6 | 7 | #networkStatus.online { 8 | background-color: #d4edda; 9 | color: #155724; 10 | border-color: #c3e6cb; 11 | } 12 | 13 | #networkStatus.offline { 14 | background-color: #f8d7da; 15 | color: #721c24; 16 | border-color: #f5c6cb; 17 | } 18 | -------------------------------------------------------------------------------- /22/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const colorInput = document.getElementById("colorInput"); 3 | const colorDisplay = document.getElementById("colorDisplay"); 4 | 5 | colorInput.addEventListener("input", function () { 6 | const selectedColor = colorInput.value; 7 | colorDisplay.style.backgroundColor = selectedColor; 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /6/style.css: -------------------------------------------------------------------------------- 1 | /* Initial state of the sticky header (hidden) */ 2 | .sticky-header { 3 | position: fixed; 4 | top: -100px; /* Hide the header initially */ 5 | width: 1110px; 6 | transition: top 0.3s; 7 | z-index: 1000; /* Ensure it is above other content */ 8 | } 9 | 10 | /* Visible state of the sticky header */ 11 | .sticky-header.visible { 12 | top: 0; /* Show the header */ 13 | } 14 | -------------------------------------------------------------------------------- /9/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const colorButton = document.getElementById("colorButton"); 3 | const colorBox = document.getElementById("colorBox"); 4 | 5 | colorButton.addEventListener("click", function () { 6 | const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16); 7 | colorBox.style.backgroundColor = randomColor; 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /6/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const stickyHeader = document.getElementById("sticky-header"); 3 | 4 | window.addEventListener("scroll", function () { 5 | if (window.scrollY > 100) { 6 | // Adjust the scroll position as needed 7 | stickyHeader.classList.add("visible"); 8 | } else { 9 | stickyHeader.classList.remove("visible"); 10 | } 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /4/style.css: -------------------------------------------------------------------------------- 1 | .collapsible-content { 2 | display: none; 3 | overflow: hidden; 4 | transition: max-height 0.2s ease-out; 5 | } 6 | 7 | .collapsible-button { 8 | background-color: #007bff; 9 | color: white; 10 | cursor: pointer; 11 | padding: 10px; 12 | border: none; 13 | text-align: left; 14 | outline: none; 15 | font-size: 15px; 16 | } 17 | 18 | .collapsible-button.active + .collapsible-content { 19 | display: block; 20 | } 21 | -------------------------------------------------------------------------------- /8/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const progressBar = document.getElementById("progressBar"); 3 | const updateButton = document.getElementById("updateButton"); 4 | let progress = 0; 5 | 6 | updateButton.addEventListener("click", function () { 7 | if (progress < 100) { 8 | progress += 10; // Increment progress by 10% 9 | progressBar.style.width = progress + "%"; 10 | progressBar.setAttribute("aria-valuenow", progress); 11 | } 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /4/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const collapsibleButton = document.querySelector(".collapsible-button"); 3 | const collapsibleContent = document.querySelector(".collapsible-content"); 4 | 5 | collapsibleButton.addEventListener("click", function () { 6 | this.classList.toggle("active"); 7 | if (collapsibleContent.style.display === "block") { 8 | collapsibleContent.style.display = "none"; 9 | } else { 10 | collapsibleContent.style.display = "block"; 11 | } 12 | }); 13 | }); -------------------------------------------------------------------------------- /11/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: white; 3 | color: black; 4 | } 5 | 6 | body.dark-mode { 7 | background-color: black; 8 | color: white; 9 | } 10 | 11 | .btn-primary { 12 | background-color: #007bff; 13 | border-color: #007bff; 14 | } 15 | 16 | body.dark-mode .btn-primary { 17 | background-color: #375a7f; 18 | border-color: #375a7f; 19 | } 20 | 21 | .card { 22 | background-color: white; 23 | color: black; 24 | border: 1px solid #ddd; 25 | } 26 | 27 | body.dark-mode .card { 28 | background-color: #333; 29 | color: white; 30 | border: 1px solid #444; 31 | } 32 | -------------------------------------------------------------------------------- /19/style.css: -------------------------------------------------------------------------------- 1 | .tooltip-custom { 2 | position: absolute; 3 | background: #333; 4 | color: white; 5 | padding: 8px 12px; 6 | border-radius: 4px; 7 | font-size: 14px; 8 | pointer-events: none; 9 | opacity: 0; 10 | transform: translateY(10px); 11 | transition: all 0.3s ease; 12 | } 13 | 14 | .tooltip-custom.active { 15 | opacity: 1; 16 | transform: translateY(0); 17 | } 18 | 19 | .tooltip-custom::before { 20 | content: ""; 21 | position: absolute; 22 | top: 100%; 23 | left: 50%; 24 | transform: translateX(-50%); 25 | border: 6px solid transparent; 26 | border-top-color: #333; 27 | } 28 | -------------------------------------------------------------------------------- /17/style.css: -------------------------------------------------------------------------------- 1 | .tab-buttons { 2 | margin-bottom: 20px; 3 | border-bottom: 2px solid #dee2e6; 4 | } 5 | 6 | .tab-btn { 7 | padding: 10px 20px; 8 | border: none; 9 | background: none; 10 | cursor: pointer; 11 | opacity: 0.6; 12 | transition: all 0.3s; 13 | } 14 | 15 | .tab-btn.active { 16 | opacity: 1; 17 | border-bottom: 2px solid #007bff; 18 | } 19 | 20 | .tab-panel { 21 | display: none; 22 | animation: fadeIn 0.3s; 23 | } 24 | 25 | .tab-panel.active { 26 | display: block; 27 | } 28 | 29 | @keyframes fadeIn { 30 | from { 31 | opacity: 0; 32 | } 33 | to { 34 | opacity: 1; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /7/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const copyButton = document.getElementById("copyButton"); 3 | const codeSnippet = document.getElementById("codeSnippet"); 4 | 5 | copyButton.addEventListener("click", function () { 6 | codeSnippet.select(); 7 | codeSnippet.setSelectionRange(0, 99999); // For mobile devices 8 | 9 | try { 10 | const successful = document.execCommand("copy"); 11 | if (successful) { 12 | alert("Code copied to clipboard!"); 13 | } else { 14 | alert("Failed to copy code."); 15 | } 16 | } catch (err) { 17 | alert("Failed to copy code."); 18 | } 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /38/main.js: -------------------------------------------------------------------------------- 1 | // Wait for DOM to be fully loaded 2 | document.addEventListener('DOMContentLoaded', function() { 3 | // Get all flip cards 4 | const flipCards = document.querySelectorAll('.flip-card'); 5 | 6 | // Add click event to each card 7 | flipCards.forEach(card => { 8 | card.addEventListener('click', function() { 9 | this.classList.toggle('flipped'); 10 | }); 11 | }); 12 | 13 | // Prevent buttons on back from triggering flip 14 | const buttons = document.querySelectorAll('.flip-card-back button, .flip-card-back a'); 15 | buttons.forEach(button => { 16 | button.addEventListener('click', function(e) { 17 | e.stopPropagation(); 18 | }); 19 | }); 20 | }); -------------------------------------------------------------------------------- /17/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const tabBtns = document.querySelectorAll(".tab-btn"); 3 | const tabPanels = document.querySelectorAll(".tab-panel"); 4 | 5 | tabBtns.forEach((btn) => { 6 | btn.addEventListener("click", () => { 7 | const tabId = btn.dataset.tab; 8 | 9 | // Update buttons 10 | tabBtns.forEach((b) => b.classList.remove("active")); 11 | btn.classList.add("active"); 12 | 13 | // Update panels 14 | tabPanels.forEach((panel) => { 15 | panel.classList.remove("active"); 16 | if (panel.dataset.tab === tabId) { 17 | panel.classList.add("active"); 18 | } 19 | }); 20 | }); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /23/style.css: -------------------------------------------------------------------------------- 1 | .cart-summary { 2 | border: 1px solid #e0e0e0; 3 | border-radius: 5px; 4 | padding: 20px; 5 | background-color: #f9f9f9; 6 | } 7 | 8 | .summary-item { 9 | display: flex; 10 | justify-content: space-between; 11 | margin-bottom: 10px; 12 | } 13 | 14 | .total-row { 15 | border-top: 1px solid #e0e0e0; 16 | padding-top: 10px; 17 | margin-top: 10px; 18 | font-size: 1.1em; 19 | } 20 | 21 | .discount-row { 22 | color: #28a745; 23 | } 24 | 25 | .coupon-section { 26 | margin: 15px 0; 27 | } 28 | 29 | .coupon-message { 30 | margin-top: 5px; 31 | font-size: 0.85em; 32 | } 33 | 34 | .coupon-message.success { 35 | color: #28a745; 36 | } 37 | 38 | .coupon-message.error { 39 | color: #dc3545; 40 | } 41 | -------------------------------------------------------------------------------- /3/main.js: -------------------------------------------------------------------------------- 1 | document.getElementById("searchInput").addEventListener("input", function () { 2 | const searchTerm = this.value.toLowerCase(); 3 | const items = document.querySelectorAll("#itemList .list-group-item"); 4 | 5 | items.forEach((item) => { 6 | const text = item.textContent.toLowerCase(); 7 | const index = text.indexOf(searchTerm); 8 | 9 | if (index !== -1 && searchTerm !== "") { 10 | const highlightedText = item.textContent.substring( 11 | index, 12 | index + searchTerm.length 13 | ); 14 | item.innerHTML = item.textContent.replace( 15 | highlightedText, 16 | `${highlightedText}` 17 | ); 18 | } else { 19 | item.innerHTML = item.textContent; 20 | } 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /5/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const timerElement = document.getElementById("timer"); 3 | let timeLeft = 3600; // Time in seconds (e.g., 1 hour) 4 | 5 | function updateTimer() { 6 | const hours = Math.floor(timeLeft / 3600); 7 | const minutes = Math.floor((timeLeft % 3600) / 60); 8 | const seconds = timeLeft % 60; 9 | 10 | timerElement.textContent = `${String(hours).padStart(2, "0")}:${String( 11 | minutes 12 | ).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`; 13 | 14 | if (timeLeft > 0) { 15 | timeLeft--; 16 | } else { 17 | clearInterval(timerInterval); 18 | } 19 | } 20 | 21 | const timerInterval = setInterval(updateTimer, 1000); 22 | updateTimer(); // Initial call to display the timer immediately 23 | }); 24 | -------------------------------------------------------------------------------- /16/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const ctx = document.getElementById("barChart").getContext("2d"); 3 | 4 | // Data 5 | const data = [30, 60, 25, 75, 45]; 6 | const labels = ["A", "B", "C", "D", "E"]; 7 | const barWidth = 50; 8 | const spacing = 20; 9 | 10 | // Colors 11 | ctx.fillStyle = "#007bff"; 12 | 13 | // Draw Bars 14 | data.forEach((value, index) => { 15 | const x = (spacing + barWidth) * index + spacing; 16 | const y = 400 - value * 4; // Scale factor 17 | 18 | // Bar 19 | ctx.fillRect(x, y, barWidth, value * 4); 20 | 21 | // Label 22 | ctx.fillStyle = "#fff"; // Set label color to white 23 | ctx.fillText(labels[index], x + 20, 380); 24 | ctx.fillText(value, x + 20, y - 10); 25 | ctx.fillStyle = "#007bff"; 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /10/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const increaseButton = document.getElementById("increaseButton"); 3 | const decreaseButton = document.getElementById("decreaseButton"); 4 | const textParagraph = document.getElementById("textParagraph"); 5 | 6 | increaseButton.addEventListener("click", function () { 7 | let currentFontSize = parseFloat( 8 | window.getComputedStyle(textParagraph, null).getPropertyValue("font-size") 9 | ); 10 | textParagraph.style.fontSize = currentFontSize + 2 + "px"; 11 | }); 12 | 13 | decreaseButton.addEventListener("click", function () { 14 | let currentFontSize = parseFloat( 15 | window.getComputedStyle(textParagraph, null).getPropertyValue("font-size") 16 | ); 17 | textParagraph.style.fontSize = currentFontSize - 2 + "px"; 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /18/style.css: -------------------------------------------------------------------------------- 1 | .progress-container { 2 | max-width: 400px; 3 | margin: 0 auto; 4 | } 5 | 6 | .progress-steps { 7 | display: flex; 8 | justify-content: space-between; 9 | position: relative; 10 | z-index: 1; 11 | } 12 | 13 | .step { 14 | width: 30px; 15 | height: 30px; 16 | border-radius: 50%; 17 | border: 3px solid #e0e0e0; 18 | background: white; 19 | display: flex; 20 | align-items: center; 21 | justify-content: center; 22 | transition: 0.3s; 23 | } 24 | 25 | .step.active { 26 | border-color: #007bff; 27 | } 28 | 29 | .progress-line { 30 | position: relative; 31 | height: 3px; 32 | background: #e0e0e0; 33 | margin: -15px 15px; 34 | } 35 | 36 | .progress { 37 | position: absolute; 38 | height: 100%; 39 | width: 0%; 40 | background: #007bff; 41 | transition: 0.3s; 42 | } 43 | 44 | .buttons { 45 | display: flex; 46 | justify-content: space-between; 47 | } 48 | -------------------------------------------------------------------------------- /12/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const form = document.getElementById("validationForm"); 3 | const email = document.getElementById("email"); 4 | const password = document.getElementById("password"); 5 | 6 | form.addEventListener("submit", function (event) { 7 | event.preventDefault(); 8 | 9 | // Reset validation states 10 | email.classList.remove("is-invalid"); 11 | password.classList.remove("is-invalid"); 12 | 13 | let isValid = true; 14 | 15 | // Email validation 16 | if (!email.value || !/\S+@\S+\.\S+/.test(email.value)) { 17 | email.classList.add("is-invalid"); 18 | isValid = false; 19 | } 20 | 21 | // Password validation 22 | if (!password.value || password.value.length < 6) { 23 | password.classList.add("is-invalid"); 24 | isValid = false; 25 | } 26 | 27 | if (isValid) { 28 | alert("Form submitted successfully!"); 29 | form.reset(); 30 | } 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /24/style.css: -------------------------------------------------------------------------------- 1 | .product-card { 2 | height: 100%; 3 | transition: transform 0.3s ease, box-shadow 0.3s ease; 4 | } 5 | 6 | .product-card:hover { 7 | transform: translateY(-5px); 8 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 9 | } 10 | 11 | .product-image-container { 12 | height: 200px; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | overflow: hidden; 17 | } 18 | 19 | .product-image { 20 | max-height: 100%; 21 | max-width: 100%; 22 | object-fit: contain; 23 | } 24 | 25 | .product-price { 26 | font-size: 1.2rem; 27 | font-weight: bold; 28 | color: #28a745; 29 | } 30 | 31 | .product-rating { 32 | display: flex; 33 | align-items: center; 34 | } 35 | 36 | .product-rating .stars { 37 | color: #ffc107; 38 | margin-right: 5px; 39 | } 40 | 41 | .product-description { 42 | height: 80px; 43 | overflow: hidden; 44 | text-overflow: ellipsis; 45 | display: -webkit-box; 46 | -webkit-line-clamp: 3; 47 | -webkit-box-orient: vertical; 48 | } 49 | -------------------------------------------------------------------------------- /18/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const progress = document.querySelector(".progress"); 3 | const steps = document.querySelectorAll(".step"); 4 | const prevBtn = document.getElementById("prevBtn"); 5 | const nextBtn = document.getElementById("nextBtn"); 6 | 7 | let currentStep = 1; 8 | 9 | nextBtn.addEventListener("click", () => { 10 | currentStep++; 11 | updateSteps(); 12 | }); 13 | 14 | prevBtn.addEventListener("click", () => { 15 | currentStep--; 16 | updateSteps(); 17 | }); 18 | 19 | function updateSteps() { 20 | steps.forEach((step, idx) => { 21 | if (idx < currentStep) { 22 | step.classList.add("active"); 23 | } else { 24 | step.classList.remove("active"); 25 | } 26 | }); 27 | 28 | progress.style.width = ((currentStep - 1) / (steps.length - 1)) * 100 + "%"; 29 | 30 | prevBtn.disabled = currentStep === 1; 31 | nextBtn.disabled = currentStep === steps.length; 32 | } 33 | }); 34 | -------------------------------------------------------------------------------- /21/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const networkStatus = document.getElementById("networkStatus"); 3 | const statusText = document.getElementById("statusText"); 4 | const statusIcon = networkStatus.querySelector("i"); 5 | 6 | function updateNetworkStatus() { 7 | if (navigator.onLine) { 8 | networkStatus.classList.remove("offline"); 9 | networkStatus.classList.add("online"); 10 | statusText.textContent = "You are online"; 11 | statusIcon.className = "fas fa-check-circle"; 12 | } else { 13 | networkStatus.classList.remove("online"); 14 | networkStatus.classList.add("offline"); 15 | statusText.textContent = "You are offline"; 16 | statusIcon.className = "fas fa-times-circle"; 17 | } 18 | networkStatus.style.display = "block"; 19 | } 20 | 21 | window.addEventListener("online", updateNetworkStatus); 22 | window.addEventListener("offline", updateNetworkStatus); 23 | 24 | // Initial check 25 | updateNetworkStatus(); 26 | }); 27 | -------------------------------------------------------------------------------- /32/style.css: -------------------------------------------------------------------------------- 1 | .qr-generator-container { 2 | max-width: 1200px; 3 | margin: 0 auto; 4 | padding-bottom: 2rem; 5 | } 6 | 7 | .card { 8 | border-radius: 10px; 9 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 10 | height: 100%; 11 | } 12 | 13 | .card-title { 14 | color: #333; 15 | margin-bottom: 20px; 16 | font-weight: 600; 17 | } 18 | 19 | .qr-code-container { 20 | min-height: 250px; 21 | display: flex; 22 | flex-direction: column; 23 | justify-content: center; 24 | align-items: center; 25 | } 26 | 27 | #qrcode { 28 | margin: 0 auto; 29 | } 30 | 31 | #qrcode img { 32 | margin: 0 auto; 33 | display: block; 34 | border-radius: 5px; 35 | } 36 | 37 | .color-label { 38 | display: block; 39 | font-size: 0.9rem; 40 | margin-bottom: 5px; 41 | } 42 | 43 | input[type="color"] { 44 | height: 40px; 45 | width: 60px; 46 | padding: 2px; 47 | border-radius: 4px; 48 | } 49 | 50 | @media (max-width: 767px) { 51 | .col-md-6:last-child { 52 | margin-top: 20px; 53 | } 54 | } -------------------------------------------------------------------------------- /15/style.css: -------------------------------------------------------------------------------- 1 | .api-list { 2 | max-width: 600px; 3 | margin: 0 auto; 4 | } 5 | 6 | .list-group-item { 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | } 11 | 12 | .user-email { 13 | color: #666; 14 | font-size: 0.9em; 15 | } 16 | 17 | /* Skeleton Loader */ 18 | .skeleton-item { 19 | padding: 1rem; 20 | margin-bottom: 0.5rem; 21 | border: 1px solid #dee2e6; 22 | border-radius: 0.25rem; 23 | } 24 | 25 | .skeleton-line { 26 | height: 1rem; 27 | background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); 28 | background-size: 200% 100%; 29 | animation: loading 1.5s infinite; 30 | border-radius: 0.25rem; 31 | } 32 | 33 | .skeleton-line.name { 34 | width: 60%; 35 | margin-bottom: 0.5rem; 36 | } 37 | 38 | .skeleton-line.email { 39 | width: 80%; 40 | } 41 | 42 | @keyframes loading { 43 | 0% { 44 | background-position: 200% 0; 45 | } 46 | 100% { 47 | background-position: -200% 0; 48 | } 49 | } 50 | 51 | /* Hide skeleton loader when content loads */ 52 | .loaded #skeletonLoader { 53 | display: none; 54 | } 55 | -------------------------------------------------------------------------------- /25/style.css: -------------------------------------------------------------------------------- 1 | .address-form-container { 2 | max-width: 600px; 3 | padding: 20px; 4 | border: 1px solid #e0e0e0; 5 | border-radius: 5px; 6 | background-color: #f8f9fa; 7 | } 8 | 9 | .address-suggestions { 10 | margin-top: -15px; 11 | margin-bottom: 15px; 12 | border: 1px solid #ddd; 13 | border-top: none; 14 | border-radius: 0 0 4px 4px; 15 | max-height: 200px; 16 | overflow-y: auto; 17 | background-color: white; 18 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 19 | } 20 | 21 | .suggestion-item { 22 | padding: 10px 15px; 23 | cursor: pointer; 24 | transition: background-color 0.2s; 25 | } 26 | 27 | .suggestion-item:hover { 28 | background-color: #f0f0f0; 29 | } 30 | 31 | .no-results { 32 | padding: 10px 15px; 33 | color: #777; 34 | font-style: italic; 35 | } 36 | 37 | .auto-filled { 38 | background-color: #e8f4fe; 39 | transition: background-color 0.5s; 40 | } 41 | 42 | /* Responsive adjustments */ 43 | @media (max-width: 576px) { 44 | .form-row { 45 | flex-direction: column; 46 | } 47 | 48 | .form-group.col-md-6 { 49 | max-width: 100%; 50 | padding: 0; 51 | } 52 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Lovekesh Pal 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /30/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | const scrollToTopBtn = document.getElementById('scrollToTopBtn'); 3 | const rootElement = document.documentElement; 4 | 5 | // Function to check scroll position 6 | function handleScroll() { 7 | // Show button when user has scrolled down 300px from the top 8 | const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight; 9 | 10 | if (rootElement.scrollTop / scrollTotal > 0.1) { 11 | // Show button 12 | scrollToTopBtn.classList.add('visible'); 13 | } else { 14 | // Hide button 15 | scrollToTopBtn.classList.remove('visible'); 16 | } 17 | } 18 | 19 | // Scroll to top when button is clicked 20 | function scrollToTop() { 21 | // Smooth scroll to the top 22 | window.scrollTo({ 23 | top: 0, 24 | behavior: 'smooth' 25 | }); 26 | } 27 | 28 | // Add event listeners 29 | window.addEventListener('scroll', handleScroll, { passive: true }); 30 | scrollToTopBtn.addEventListener('click', scrollToTop); 31 | 32 | // Initial check in case the page is refreshed while scrolled down 33 | handleScroll(); 34 | }); -------------------------------------------------------------------------------- /31/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | const progressBar = document.getElementById('scrollProgressBar'); 3 | 4 | // Function to update the scroll progress 5 | function updateScrollProgress() { 6 | // Calculate how much has been scrolled 7 | const scrollTop = window.pageYOffset || document.documentElement.scrollTop; 8 | 9 | // Calculate the height of the page content 10 | // (full document height minus the viewport height) 11 | const scrollHeight = document.documentElement.scrollHeight - 12 | document.documentElement.clientHeight; 13 | 14 | // Calculate the scroll percentage (0 to 1) 15 | const scrollPercent = scrollTop / scrollHeight; 16 | 17 | // Set the width of the progress bar as a percentage 18 | progressBar.style.width = scrollPercent * 100 + '%'; 19 | } 20 | 21 | // Listen for scroll events 22 | window.addEventListener('scroll', updateScrollProgress, { passive: true }); 23 | 24 | // Initialize on page load 25 | updateScrollProgress(); 26 | 27 | // Update on window resize as heights may change 28 | window.addEventListener('resize', updateScrollProgress, { passive: true }); 29 | }); -------------------------------------------------------------------------------- /19/main.js: -------------------------------------------------------------------------------- 1 | /* filepath: /e:/Development/the-real-world-javascript/19/main.js */ 2 | document.addEventListener("DOMContentLoaded", function () { 3 | // Create tooltip element 4 | const tooltip = document.createElement("div"); 5 | tooltip.className = "tooltip-custom"; 6 | document.body.appendChild(tooltip); 7 | 8 | // Get all elements with tooltips 9 | const elements = document.querySelectorAll("[data-tooltip]"); 10 | 11 | elements.forEach((element) => { 12 | element.addEventListener("mouseenter", showTooltip); 13 | element.addEventListener("mouseleave", hideTooltip); 14 | element.addEventListener("mousemove", moveTooltip); 15 | }); 16 | 17 | function showTooltip(e) { 18 | const text = this.getAttribute("data-tooltip"); 19 | tooltip.textContent = text; 20 | tooltip.classList.add("active"); 21 | moveTooltip.call(this, e); 22 | } 23 | 24 | function hideTooltip() { 25 | tooltip.classList.remove("active"); 26 | } 27 | 28 | function moveTooltip(e) { 29 | const tooltipHeight = tooltip.offsetHeight; 30 | const tooltipWidth = tooltip.offsetWidth; 31 | 32 | tooltip.style.left = `${e.pageX - tooltipWidth / 2}px`; 33 | tooltip.style.top = `${e.pageY - tooltipHeight - 10}px`; 34 | } 35 | }); 36 | -------------------------------------------------------------------------------- /13/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const list = document.getElementById("draggableList"); 3 | const items = list.getElementsByClassName("list-group-item"); 4 | 5 | for (let item of items) { 6 | item.addEventListener("dragstart", handleDragStart); 7 | item.addEventListener("dragend", handleDragEnd); 8 | item.addEventListener("dragover", handleDragOver); 9 | item.addEventListener("drop", handleDrop); 10 | } 11 | 12 | function handleDragStart(e) { 13 | this.classList.add("dragging"); 14 | e.dataTransfer.setData("text/plain", this.innerHTML); 15 | } 16 | 17 | function handleDragEnd(e) { 18 | this.classList.remove("dragging"); 19 | } 20 | 21 | function handleDragOver(e) { 22 | e.preventDefault(); 23 | this.classList.add("drag-over"); 24 | } 25 | 26 | function handleDrop(e) { 27 | e.preventDefault(); 28 | this.classList.remove("drag-over"); 29 | 30 | const draggingItem = list.querySelector(".dragging"); 31 | const dropTarget = this; 32 | 33 | if (draggingItem !== dropTarget) { 34 | // Swap the content 35 | const temp = dropTarget.innerHTML; 36 | dropTarget.innerHTML = draggingItem.innerHTML; 37 | draggingItem.innerHTML = temp; 38 | } 39 | } 40 | }); 41 | -------------------------------------------------------------------------------- /14/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const userList = document.getElementById("userList"); 3 | const loading = document.getElementById("loading"); 4 | const error = document.getElementById("error"); 5 | 6 | async function fetchUsers() { 7 | try { 8 | const response = await fetch( 9 | "https://jsonplaceholder.typicode.com/users" 10 | ); 11 | if (!response.ok) throw new Error("Failed to fetch"); 12 | const users = await response.json(); 13 | 14 | loading.style.display = "none"; 15 | users.forEach((user) => { 16 | const li = document.createElement("li"); 17 | li.className = "list-group-item"; 18 | li.innerHTML = ` 19 |
20 | ${user.name} 21 |
${user.email}
22 |
23 | ${user.company.name} 24 | `; 25 | userList.appendChild(li); 26 | }); 27 | } catch (err) { 28 | loading.style.display = "none"; 29 | error.style.display = "block"; 30 | error.textContent = "Error loading users: " + err.message; 31 | } 32 | } 33 | 34 | fetchUsers(); 35 | }); 36 | -------------------------------------------------------------------------------- /40/style.css: -------------------------------------------------------------------------------- 1 | /* General form styling */ 2 | #celebrationForm label { 3 | font-weight: 500; 4 | } 5 | 6 | /* Confetti container */ 7 | #confetti-container { 8 | position: fixed; 9 | top: 0; 10 | left: 0; 11 | width: 100%; 12 | height: 100%; 13 | pointer-events: none; 14 | z-index: 9999; 15 | } 16 | 17 | /* Confetti pieces */ 18 | .confetti { 19 | position: absolute; 20 | width: 10px; 21 | height: 10px; 22 | opacity: 0; 23 | transform-origin: center; 24 | } 25 | 26 | /* Different shapes for confetti */ 27 | .confetti.square { 28 | clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); 29 | } 30 | 31 | .confetti.triangle { 32 | clip-path: polygon(50% 0%, 100% 100%, 0% 100%); 33 | } 34 | 35 | .confetti.circle { 36 | border-radius: 50%; 37 | } 38 | 39 | /* Success message fade-in animation */ 40 | @keyframes fadeIn { 41 | from { 42 | opacity: 0; 43 | transform: translateY(20px); 44 | } 45 | 46 | to { 47 | opacity: 1; 48 | transform: translateY(0); 49 | } 50 | } 51 | 52 | #successMessage { 53 | animation: fadeIn 0.5s ease forwards; 54 | } 55 | 56 | /* Card hover effect */ 57 | .card { 58 | transition: transform 0.3s ease; 59 | } 60 | 61 | .card:hover { 62 | transform: translateY(-5px); 63 | } -------------------------------------------------------------------------------- /31/style.css: -------------------------------------------------------------------------------- 1 | /* Styling for the progress container */ 2 | .progress-container { 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | width: 100%; 7 | height: 6px; 8 | background: transparent; 9 | z-index: 1030; 10 | /* Above most elements */ 11 | } 12 | 13 | /* Styling for the progress bar */ 14 | .progress-bar { 15 | height: 100%; 16 | width: 0%; 17 | background: linear-gradient(90deg, #007bff, #00dbde); 18 | box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); 19 | transition: width 0.2s ease-out; 20 | border-radius: 0 3px 3px 0; 21 | } 22 | 23 | /* Style for section headers */ 24 | section h2 { 25 | color: #343a40; 26 | margin-bottom: 20px; 27 | border-bottom: 2px solid #f8f9fa; 28 | padding-bottom: 10px; 29 | } 30 | 31 | /* Style for sections */ 32 | section { 33 | padding: 30px; 34 | background-color: white; 35 | border-radius: 8px; 36 | box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); 37 | margin-bottom: 30px; 38 | } 39 | 40 | /* Add some extra padding to body to ensure content doesn't hide under the progress bar */ 41 | body { 42 | padding-top: 6px; 43 | } 44 | 45 | /* Make social links more prominent */ 46 | .social { 47 | margin-bottom: 50px; 48 | } 49 | 50 | .social a { 51 | margin-right: 10px; 52 | transition: transform 0.2s; 53 | } 54 | 55 | .social a:hover { 56 | transform: translateY(-2px); 57 | } -------------------------------------------------------------------------------- /37/style.css: -------------------------------------------------------------------------------- 1 | .preview-container { 2 | background-color: white; 3 | border-radius: 6px; 4 | margin-top: 20px; 5 | transition: all 0.3s ease; 6 | } 7 | 8 | .preview-text { 9 | transition: all 0.3s ease; 10 | } 11 | 12 | .font-small { 13 | font-size: 14px; 14 | } 15 | 16 | .font-medium { 17 | font-size: 18px; 18 | } 19 | 20 | .font-large { 21 | font-size: 24px; 22 | } 23 | 24 | .font-bold { 25 | font-weight: bold; 26 | } 27 | 28 | .font-italic { 29 | font-style: italic; 30 | } 31 | 32 | .font-underline { 33 | text-decoration: underline; 34 | } 35 | 36 | .controls label { 37 | font-weight: 500; 38 | margin-bottom: 5px; 39 | } 40 | 41 | .btn-outline-secondary.active, 42 | .btn-outline-secondary:active { 43 | background-color: #6c757d; 44 | color: white; 45 | } 46 | 47 | .current-styles { 48 | font-size: 0.9rem; 49 | } 50 | 51 | .style-info { 52 | list-style: none; 53 | padding-left: 0; 54 | } 55 | 56 | .style-info li { 57 | margin-bottom: 5px; 58 | } 59 | 60 | .card { 61 | border: none; 62 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 63 | } 64 | 65 | .card-header { 66 | border-radius: 5px 5px 0 0 !important; 67 | } 68 | 69 | .preview-change { 70 | animation: highlight 0.5s ease; 71 | } 72 | 73 | @keyframes highlight { 74 | 0% { 75 | background-color: rgba(0, 123, 255, 0.1); 76 | } 77 | 78 | 100% { 79 | background-color: white; 80 | } 81 | } -------------------------------------------------------------------------------- /15/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const userList = document.getElementById("userList"); 3 | const error = document.getElementById("error"); 4 | const apiList = document.querySelector(".api-list"); 5 | const skeletonLoader = document.getElementById("skeletonLoader"); 6 | 7 | async function fetchUsers() { 8 | try { 9 | // Add artificial delay 10 | await new Promise((resolve) => setTimeout(resolve, 1000)); 11 | 12 | const response = await fetch( 13 | "https://jsonplaceholder.typicode.com/users" 14 | ); 15 | if (!response.ok) throw new Error("Failed to fetch"); 16 | const users = await response.json(); 17 | 18 | apiList.classList.add("loaded"); 19 | 20 | users.forEach((user) => { 21 | const li = document.createElement("li"); 22 | li.className = "list-group-item"; 23 | li.innerHTML = ` 24 |
25 | ${user.name} 26 |
${user.email}
27 |
28 | ${user.company.name} 29 | `; 30 | userList.appendChild(li); 31 | }); 32 | } catch (err) { 33 | apiList.classList.add("loaded"); 34 | error.style.display = "block"; 35 | error.textContent = "Error loading users: " + err.message; 36 | } 37 | } 38 | 39 | fetchUsers(); 40 | }); 41 | -------------------------------------------------------------------------------- /35/style.css: -------------------------------------------------------------------------------- 1 | .password-meter-container { 2 | max-width: 600px; 3 | } 4 | 5 | .card { 6 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 7 | border: none; 8 | border-radius: 8px; 9 | } 10 | 11 | .card-header { 12 | border-radius: 8px 8px 0 0 !important; 13 | } 14 | 15 | .password-requirements { 16 | background-color: #f8f9fa; 17 | padding: 15px; 18 | border-radius: 5px; 19 | } 20 | 21 | .requirements-list { 22 | list-style-type: none; 23 | padding-left: 10px; 24 | } 25 | 26 | .requirement { 27 | margin-bottom: 8px; 28 | } 29 | 30 | .requirement i { 31 | margin-right: 8px; 32 | } 33 | 34 | .requirement.met i { 35 | color: #28a745 !important; 36 | } 37 | 38 | .progress { 39 | height: 8px; 40 | background-color: #e9ecef; 41 | } 42 | 43 | /* Strength meter colors */ 44 | .strength-very-weak { 45 | background-color: #dc3545; 46 | width: 20% !important; 47 | } 48 | 49 | .strength-weak { 50 | background-color: #ffc107; 51 | width: 40% !important; 52 | } 53 | 54 | .strength-medium { 55 | background-color: #fd7e14; 56 | width: 60% !important; 57 | } 58 | 59 | .strength-strong { 60 | background-color: #20c997; 61 | width: 80% !important; 62 | } 63 | 64 | .strength-very-strong { 65 | background-color: #28a745; 66 | width: 100% !important; 67 | } 68 | 69 | /* Password toggle button */ 70 | .toggle-password { 71 | cursor: pointer; 72 | } 73 | 74 | .toggle-password:focus { 75 | box-shadow: none; 76 | } -------------------------------------------------------------------------------- /33/style.css: -------------------------------------------------------------------------------- 1 | /* Navbar and cart styling */ 2 | .navbar { 3 | border-radius: 5px; 4 | padding: 10px 20px; 5 | } 6 | 7 | .cart-container { 8 | position: relative; 9 | } 10 | 11 | #cartButton { 12 | font-size: 1.2rem; 13 | } 14 | 15 | .cart-badge { 16 | position: absolute; 17 | top: -8px; 18 | right: -8px; 19 | background-color: #dc3545; 20 | color: white; 21 | border-radius: 50%; 22 | width: 20px; 23 | height: 20px; 24 | display: flex; 25 | align-items: center; 26 | justify-content: center; 27 | font-size: 0.7rem; 28 | } 29 | 30 | /* Product card styling */ 31 | .product-card { 32 | transition: all 0.3s ease; 33 | height: 100%; 34 | } 35 | 36 | .product-card:hover { 37 | transform: translateY(-5px); 38 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 39 | } 40 | 41 | .card-img-top { 42 | height: 200px; 43 | object-fit: cover; 44 | } 45 | 46 | .price { 47 | font-size: 1.2rem; 48 | font-weight: bold; 49 | color: #333; 50 | } 51 | 52 | .add-to-cart { 53 | margin-bottom: 10px; 54 | } 55 | 56 | /* Stock indicator styling */ 57 | .stock-indicator { 58 | padding: 5px 10px; 59 | border-radius: 4px; 60 | margin-top: 10px; 61 | font-size: 0.85rem; 62 | font-weight: 500; 63 | text-align: center; 64 | } 65 | 66 | .in-stock { 67 | background-color: #d4edda; 68 | color: #155724; 69 | } 70 | 71 | .low-stock { 72 | background-color: #fff3cd; 73 | color: #856404; 74 | } 75 | 76 | .out-of-stock { 77 | background-color: #f8d7da; 78 | color: #721c24; 79 | } -------------------------------------------------------------------------------- /30/style.css: -------------------------------------------------------------------------------- 1 | /* Styling for the scroll to top button */ 2 | .scroll-top-btn { 3 | position: fixed; 4 | bottom: 30px; 5 | right: 30px; 6 | width: 50px; 7 | height: 50px; 8 | border-radius: 50%; 9 | background-color: #007bff; 10 | color: white; 11 | border: none; 12 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | cursor: pointer; 17 | opacity: 0; 18 | visibility: hidden; 19 | transition: all 0.3s ease; 20 | z-index: 1000; 21 | } 22 | 23 | .scroll-top-btn.visible { 24 | opacity: 1; 25 | visibility: visible; 26 | } 27 | 28 | .scroll-top-btn:hover { 29 | background-color: #0056b3; 30 | transform: translateY(-3px); 31 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); 32 | } 33 | 34 | .scroll-top-btn:active { 35 | transform: translateY(-1px); 36 | } 37 | 38 | /* Additional styling for sections to create enough content for scrolling */ 39 | section { 40 | padding: 20px; 41 | margin-bottom: 30px; 42 | background-color: #f8f9fa; 43 | border-radius: 5px; 44 | } 45 | 46 | h2 { 47 | color: #343a40; 48 | margin-bottom: 20px; 49 | } 50 | 51 | blockquote { 52 | border-left: 4px solid #007bff; 53 | padding-left: 15px; 54 | margin: 20px 0; 55 | } 56 | 57 | .social { 58 | margin-bottom: 50px; 59 | } 60 | 61 | /* Make footer links more visible */ 62 | .social a { 63 | margin-right: 10px; 64 | transition: transform 0.2s; 65 | } 66 | 67 | .social a:hover { 68 | transform: translateY(-2px); 69 | } -------------------------------------------------------------------------------- /26/style.css: -------------------------------------------------------------------------------- 1 | .product-card { 2 | border: 1px solid #e0e0e0; 3 | border-radius: 5px; 4 | padding: 15px; 5 | margin-bottom: 20px; 6 | transition: all 0.3s ease; 7 | } 8 | 9 | .product-card:hover { 10 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 11 | transform: translateY(-3px); 12 | } 13 | 14 | .product-image { 15 | height: 200px; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | margin-bottom: 15px; 20 | } 21 | 22 | .product-image img { 23 | max-height: 100%; 24 | max-width: 100%; 25 | } 26 | 27 | .product-name { 28 | font-weight: 600; 29 | margin-bottom: 5px; 30 | } 31 | 32 | .product-price { 33 | color: #e74c3c; 34 | font-weight: bold; 35 | margin-bottom: 15px; 36 | } 37 | 38 | .cart-container { 39 | position: relative; 40 | } 41 | 42 | .cart-badge { 43 | position: absolute; 44 | top: -8px; 45 | right: -8px; 46 | background-color: #e74c3c; 47 | color: white; 48 | border-radius: 50%; 49 | width: 20px; 50 | height: 20px; 51 | display: flex; 52 | align-items: center; 53 | justify-content: center; 54 | font-size: 12px; 55 | font-weight: bold; 56 | transition: transform 0.2s; 57 | } 58 | 59 | .cart-badge-update { 60 | animation: badgePulse 0.5s; 61 | } 62 | 63 | @keyframes badgePulse { 64 | 0% { 65 | transform: scale(1); 66 | } 67 | 68 | 50% { 69 | transform: scale(1.3); 70 | } 71 | 72 | 100% { 73 | transform: scale(1); 74 | } 75 | } 76 | 77 | .btn-add-to-cart { 78 | width: 100%; 79 | } 80 | 81 | .btn-add-to-cart.added { 82 | background-color: #28a745; 83 | border-color: #28a745; 84 | } -------------------------------------------------------------------------------- /29/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | const contentContainer = document.getElementById('contentContainer'); 3 | const scrollToBottomBtn = document.getElementById('scrollToBottomBtn'); 4 | 5 | // Variables to track scroll direction 6 | let lastScrollTop = 0; 7 | let isScrollingDown = true; 8 | let isAtBottom = false; 9 | 10 | // Check if user is at the bottom of the container 11 | function checkIfAtBottom() { 12 | const scrollTop = contentContainer.scrollTop; 13 | const scrollHeight = contentContainer.scrollHeight; 14 | const clientHeight = contentContainer.clientHeight; 15 | 16 | // Consider "at bottom" if within 20px of the bottom 17 | return scrollTop + clientHeight >= scrollHeight - 20; 18 | } 19 | 20 | // Handle scroll events 21 | contentContainer.addEventListener('scroll', function() { 22 | const st = contentContainer.scrollTop; 23 | 24 | // Determine scroll direction 25 | isScrollingDown = st > lastScrollTop; 26 | isAtBottom = checkIfAtBottom(); 27 | 28 | // Show button if scrolling up and not at bottom 29 | if (!isScrollingDown && !isAtBottom) { 30 | scrollToBottomBtn.classList.add('visible'); 31 | } else { 32 | scrollToBottomBtn.classList.remove('visible'); 33 | } 34 | 35 | lastScrollTop = st; 36 | }); 37 | 38 | // Scroll to bottom when button is clicked 39 | scrollToBottomBtn.addEventListener('click', function() { 40 | contentContainer.scrollTo({ 41 | top: contentContainer.scrollHeight, 42 | behavior: 'smooth' 43 | }); 44 | }); 45 | }); -------------------------------------------------------------------------------- /34/style.css: -------------------------------------------------------------------------------- 1 | .task-tracker { 2 | max-width: 800px; 3 | } 4 | 5 | .task-item { 6 | transition: background-color 0.3s; 7 | } 8 | 9 | .task-item.completed { 10 | background-color: #f8f9fa; 11 | } 12 | 13 | .task-item:hover { 14 | background-color: #f1f3f5; 15 | } 16 | 17 | .priority-badge { 18 | padding: 0.25rem 0.5rem; 19 | border-radius: 0.25rem; 20 | font-size: 0.75rem; 21 | font-weight: bold; 22 | margin-right: 1rem; 23 | } 24 | 25 | .priority-badge.high { 26 | background-color: #f8d7da; 27 | color: #721c24; 28 | } 29 | 30 | .priority-badge.medium { 31 | background-color: #fff3cd; 32 | color: #856404; 33 | } 34 | 35 | .priority-badge.low { 36 | background-color: #d1ecf1; 37 | color: #0c5460; 38 | } 39 | 40 | .priority-high { 41 | border-left: 4px solid #dc3545; 42 | } 43 | 44 | .priority-medium { 45 | border-left: 4px solid #ffc107; 46 | } 47 | 48 | .priority-low { 49 | border-left: 4px solid #17a2b8; 50 | } 51 | 52 | .input-group .form-control:first-child { 53 | border-top-right-radius: 0; 54 | border-bottom-right-radius: 0; 55 | } 56 | 57 | #prioritySelect { 58 | max-width: 150px; 59 | border-radius: 0; 60 | } 61 | 62 | #taskCount { 63 | font-size: 0.9rem; 64 | } 65 | 66 | @media (max-width: 768px) { 67 | .input-group { 68 | flex-direction: column; 69 | } 70 | 71 | .input-group>* { 72 | margin-bottom: 0.5rem; 73 | width: 100%; 74 | } 75 | 76 | #prioritySelect { 77 | max-width: 100%; 78 | } 79 | 80 | .input-group-append { 81 | width: 100%; 82 | } 83 | 84 | .input-group-append button { 85 | width: 100%; 86 | } 87 | } -------------------------------------------------------------------------------- /16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bar Chart 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 |
22 | 23 |
24 | 26 | Watch Instagram Video 27 | 28 | 29 | Visit YouTube Channel 30 | 31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Countdown Timer 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

Countdown Timer

21 |

00:00:00

22 |
23 | 24 |
25 | 26 |
27 | 29 | Watch Instagram Video 30 | 31 | 32 | Visit YouTube Channel 33 | 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Network Detection 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 22 | 23 |
24 | 25 |
26 | 28 | Watch Instagram Video 29 | 30 | 31 | Visit YouTube Channel 32 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /27/style.css: -------------------------------------------------------------------------------- 1 | .food-filter-container { 2 | padding-bottom: 2rem; 3 | } 4 | 5 | .filter-buttons { 6 | margin-bottom: 1.5rem; 7 | } 8 | 9 | .filter-buttons .btn { 10 | margin-right: 0.5rem; 11 | margin-bottom: 0.5rem; 12 | } 13 | 14 | .food-card { 15 | border: 1px solid #e0e0e0; 16 | border-radius: 8px; 17 | overflow: hidden; 18 | height: 100%; 19 | position: relative; 20 | transition: transform 0.3s, box-shadow 0.3s; 21 | } 22 | 23 | .food-card:hover { 24 | transform: translateY(-5px); 25 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 26 | } 27 | 28 | .food-type-indicator { 29 | position: absolute; 30 | top: 10px; 31 | right: 10px; 32 | width: 20px; 33 | height: 20px; 34 | border-radius: 50%; 35 | z-index: 1; 36 | } 37 | 38 | .veg-indicator { 39 | background-color: #48c774; 40 | border: 2px solid #fff; 41 | } 42 | 43 | .non-veg-indicator { 44 | background-color: #f14668; 45 | border: 2px solid #fff; 46 | } 47 | 48 | .food-image { 49 | height: 200px; 50 | overflow: hidden; 51 | } 52 | 53 | .food-image img { 54 | width: 100%; 55 | height: 100%; 56 | object-fit: cover; 57 | transition: transform 0.3s; 58 | } 59 | 60 | .food-card:hover .food-image img { 61 | transform: scale(1.05); 62 | } 63 | 64 | .food-info { 65 | padding: 15px; 66 | } 67 | 68 | .food-name { 69 | margin-bottom: 8px; 70 | font-weight: 600; 71 | } 72 | 73 | .food-description { 74 | color: #666; 75 | font-size: 14px; 76 | height: 60px; 77 | overflow: hidden; 78 | margin-bottom: 0.5rem; 79 | } 80 | 81 | .food-price { 82 | font-weight: bold; 83 | color: #e67e22; 84 | font-size: 18px; 85 | } 86 | 87 | @media (max-width: 767px) { 88 | .food-description { 89 | height: auto; 90 | max-height: 60px; 91 | } 92 | } -------------------------------------------------------------------------------- /22/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Color Picker 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

Select a Color

21 | 22 |
23 |
24 | 25 |
26 | 27 |
28 | 30 | Watch Instagram Video 31 | 32 | 33 | Visit YouTube Channel 34 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /9/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Change Background Color 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 |
22 |
23 | 24 |
25 | 26 |
27 | 29 | Watch Instagram Video 30 | 31 | 32 | Visit YouTube Channel 33 | 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Copy to Clipboard 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 | 22 |
23 | 24 |
25 | 26 |
27 | 29 | Watch Instagram Video 30 | 31 | 32 | Visit YouTube Channel 33 | 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Toggle Section 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 |
22 |

This is the collapsible content. It can be expanded or collapsed by clicking the button above.

23 |
24 |
25 | 26 |
27 | 28 |
29 | 31 | Watch Instagram Video 32 | 33 | 34 | Visit YouTube Channel 35 | 36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Progress Bar 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |
22 |
23 | 24 | 25 |
26 | 27 |
28 | 30 | Watch Instagram Video 31 | 32 | 33 | Visit YouTube Channel 34 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /33/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Product Stock Level Indicator 7 | 8 | 9 | 13 | 14 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 | 26 |
27 | 28 |
29 | 30 |
31 | 36 | Watch Instagram Video 37 | 38 | 43 | Visit YouTube Channel 44 | 45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Font Size - Increase and Decrease 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 | 22 |

This is a paragraph with changeable font size.

23 |
24 | 25 |
26 | 27 |
28 | 30 | Watch Instagram Video 31 | 32 | 33 | Visit YouTube Channel 34 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Character Counter 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 |

Characters remaining: 50

23 | 24 |
25 | 26 |
27 | 29 | Watch Instagram Video 30 | 31 | 32 | Visit YouTube Channel 33 | 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /20/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Add to Cart 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |

Cart

20 | 23 |
24 | Total: ₹0 25 |
26 | 27 |

Products

28 |
29 | 30 |
31 | 32 |
33 | 34 |
35 | 37 | Watch Instagram Video 38 | 39 | 40 | Visit YouTube Channel 41 | 42 |
43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Light and dark mode 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 |
22 |
23 |
Card Title
24 |

This is a card example to demonstrate light and dark mode.

25 | Go somewhere 26 |
27 |
28 | 29 |
30 | 31 |
32 | 34 | Watch Instagram Video 35 | 36 | 37 | Visit YouTube Channel 38 | 39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /20/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | const products = [ 3 | { id: 1, name: "Laptop", price: 50000 }, 4 | { id: 2, name: "Shoes", price: 2500 }, 5 | { id: 3, name: "Watch", price: 3000 }, 6 | ]; 7 | 8 | const productsContainer = document.getElementById("products"); 9 | const cartContainer = document.getElementById("cart"); 10 | const totalContainer = document.getElementById("total"); 11 | let cart = []; 12 | 13 | // Function to add product to cart 14 | function addToCart(productId) { 15 | const product = products.find((p) => p.id === productId); 16 | cart.push(product); 17 | renderCart(); 18 | } 19 | 20 | // Attach event listeners in renderProducts 21 | function renderProducts() { 22 | products.forEach((product) => { 23 | const productElement = document.createElement("div"); 24 | productElement.className = "col-md-4"; 25 | productElement.innerHTML = ` 26 |
27 |
28 |
${product.name}
29 |

₹${product.price}

30 | 31 |
32 |
33 | `; 34 | productElement 35 | .querySelector("button") 36 | .addEventListener("click", () => addToCart(product.id)); 37 | productsContainer.appendChild(productElement); 38 | }); 39 | } 40 | 41 | // Function to render cart 42 | function renderCart() { 43 | cartContainer.innerHTML = ""; 44 | let total = 0; 45 | cart.forEach((item) => { 46 | const cartItem = document.createElement("li"); 47 | cartItem.className = "list-group-item"; 48 | cartItem.textContent = `${item.name} - ₹${item.price}`; 49 | cartContainer.appendChild(cartItem); 50 | total += item.price; 51 | }); 52 | totalContainer.textContent = total; 53 | } 54 | 55 | // Initial render 56 | renderProducts(); 57 | }); 58 | -------------------------------------------------------------------------------- /13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drag and Drop 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |

Draggable List Items

20 | 27 | 28 |
29 | 30 |
31 | 33 | Watch Instagram Video 34 | 35 | 36 | Visit YouTube Channel 37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fetching data from an API 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

Users List

21 |
22 | 25 |
26 | 27 | 28 |
29 | 30 |
31 | 32 |
33 | 35 | Watch Instagram Video 36 | 37 | 38 | Visit YouTube Channel 39 | 40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /19/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltips 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 |
22 | 23 | 24 | Link with Tooltip 25 |
26 | 27 |
28 | 29 |
30 | 31 |
32 | 34 | Watch Instagram Video 35 | 36 | 37 | Visit YouTube Channel 38 | 39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Highlight Matching Items 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 30 | 31 |
32 | 33 |
34 | 36 | Watch Instagram Video 37 | 38 | 39 | Visit YouTube Channel 40 | 41 |
42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /26/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Add To Cart - Live Product Updates 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 28 | 29 |

Our Products

30 | 31 |
32 | 33 |
34 | 35 |
36 | 37 |
38 | 40 | Watch Instagram Video 41 | 42 | 43 | Visit YouTube Channel 44 | 45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /29/style.css: -------------------------------------------------------------------------------- 1 | /* Scroll container styles */ 2 | .scroll-container { 3 | height: 400px; 4 | overflow-y: auto; 5 | padding: 20px; 6 | border: 1px solid #e0e0e0; 7 | border-radius: 5px; 8 | background-color: #f8f9fa; 9 | margin-bottom: 30px; 10 | position: relative; 11 | /* Positioning context for children */ 12 | } 13 | 14 | /* Button container that holds the floating button */ 15 | .button-container { 16 | position: sticky; 17 | bottom: 20px; 18 | /* Distance from bottom of viewport */ 19 | left: 100%; 20 | /* Position at right edge */ 21 | margin-left: -60px; 22 | /* Pull back left to show button (button width + margin) */ 23 | margin-top: -40px; 24 | /* Negative margin to prevent taking space in flow */ 25 | width: 40px; 26 | /* Same as button width */ 27 | height: 40px; 28 | /* Same as button height */ 29 | z-index: 1000; 30 | /* Ensure button stays on top */ 31 | pointer-events: none; 32 | /* Let events pass through container */ 33 | } 34 | 35 | /* The actual button styling */ 36 | .scroll-btn { 37 | width: 40px; 38 | height: 40px; 39 | border-radius: 50%; 40 | background-color: #007bff; 41 | color: white; 42 | border: none; 43 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); 44 | display: flex; 45 | justify-content: center; 46 | align-items: center; 47 | cursor: pointer; 48 | opacity: 0; 49 | visibility: hidden; 50 | transition: all 0.3s ease; 51 | pointer-events: auto; 52 | /* Re-enable events for the button itself */ 53 | } 54 | 55 | .scroll-btn:hover { 56 | background-color: #0056b3; 57 | transform: scale(1.1); 58 | } 59 | 60 | .scroll-btn.visible { 61 | opacity: 1; 62 | visibility: visible; 63 | } 64 | 65 | /* Content styling */ 66 | .scroll-container h3 { 67 | margin-top: 0; 68 | margin-bottom: 15px; 69 | } 70 | 71 | .scroll-container h4 { 72 | margin-top: 20px; 73 | margin-bottom: 10px; 74 | } 75 | 76 | .scroll-container p { 77 | margin-bottom: 15px; 78 | } 79 | 80 | .scroll-container ul { 81 | margin-bottom: 15px; 82 | padding-left: 20px; 83 | } -------------------------------------------------------------------------------- /18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Progress Steps 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |
21 |
1
22 |
2
23 |
3
24 |
4
25 |
26 |
27 |
28 |
29 |
30 | 31 | 32 |
33 |
34 | 35 |
36 | 37 |
38 | 40 | Watch Instagram Video 41 | 42 | 43 | Visit YouTube Channel 44 | 45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login Form 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 |
22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 | 30 |
31 | 32 |
33 | 34 |
35 | 37 | Watch Instagram Video 38 | 39 | 40 | Visit YouTube Channel 41 | 42 |
43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /42/style.css: -------------------------------------------------------------------------------- 1 | /* Product Card Styling */ 2 | .product-card { 3 | border-radius: 8px; 4 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 5 | overflow: hidden; 6 | transition: transform 0.3s, box-shadow 0.3s; 7 | background-color: white; 8 | margin-bottom: 20px; 9 | } 10 | 11 | .product-card:hover { 12 | transform: translateY(-5px); 13 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 14 | } 15 | 16 | /* Image Container & Zoom Effect */ 17 | .product-image-container { 18 | position: relative; 19 | height: 250px; 20 | overflow: hidden; 21 | } 22 | 23 | .product-image { 24 | width: 100%; 25 | height: 100%; 26 | object-fit: cover; 27 | transition: transform 0.8s ease; 28 | } 29 | 30 | /* Main Zoom Effect */ 31 | .product-card:hover .product-image { 32 | transform: scale(1.2); 33 | } 34 | 35 | /* Overlay Styling */ 36 | .product-overlay { 37 | position: absolute; 38 | bottom: 0; 39 | left: 0; 40 | width: 100%; 41 | height: 100%; 42 | background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%); 43 | opacity: 0; 44 | transition: opacity 0.5s; 45 | display: flex; 46 | align-items: flex-end; 47 | padding: 20px; 48 | color: white; 49 | text-align: center; 50 | } 51 | 52 | .product-card:hover .product-overlay { 53 | opacity: 1; 54 | } 55 | 56 | .overlay-content { 57 | width: 100%; 58 | transform: translateY(20px); 59 | transition: transform 0.3s ease; 60 | } 61 | 62 | .product-card:hover .overlay-content { 63 | transform: translateY(0); 64 | } 65 | 66 | /* Product Info Styling */ 67 | .product-info { 68 | padding: 15px; 69 | } 70 | 71 | .product-price { 72 | font-weight: bold; 73 | color: #e63946; 74 | margin-bottom: 5px; 75 | } 76 | 77 | .product-rating { 78 | color: #f8c043; 79 | font-size: 0.9rem; 80 | } 81 | 82 | .rating-count { 83 | color: #6c757d; 84 | font-size: 0.8rem; 85 | } 86 | 87 | /* Parallax Effect */ 88 | @media (pointer: fine) { 89 | .product-card { 90 | transform-style: preserve-3d; 91 | perspective: 1000px; 92 | } 93 | 94 | .product-image { 95 | transform-style: preserve-3d; 96 | transition: transform 0.6s ease; 97 | } 98 | } -------------------------------------------------------------------------------- /12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Form Validation 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |
21 | 22 | 23 |
Please enter a valid email address.
24 |
25 |
26 | 27 | 28 |
Password must be at least 6 characters.
29 |
30 | 31 |
32 | 33 |
34 | 35 |
36 | 38 | Watch Instagram Video 39 | 40 | 41 | Visit YouTube Channel 42 | 43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /24/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Apply Coupon Codes 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

Product Catalog

21 |

Fetching products from Fake Store API

22 | 23 | 26 |
27 | 28 |
29 | 30 |
31 | 32 | 35 | 36 |
37 | 38 |
39 | 41 | Watch Instagram Video 42 | 43 | 44 | Visit YouTube Channel 45 | 46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /41/style.css: -------------------------------------------------------------------------------- 1 | /* Tag input container styling */ 2 | .tag-input-container { 3 | display: flex; 4 | flex-wrap: wrap; 5 | align-items: center; 6 | min-height: 46px; 7 | padding: 5px; 8 | border: 1px solid #ced4da; 9 | border-radius: 4px; 10 | background-color: #fff; 11 | } 12 | 13 | .tag-input-container:focus-within { 14 | border-color: #80bdff; 15 | box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); 16 | } 17 | 18 | /* Tags container */ 19 | .tags-container { 20 | display: flex; 21 | flex-wrap: wrap; 22 | align-items: center; 23 | gap: 5px; 24 | } 25 | 26 | /* YouTube-style tag styling */ 27 | .tag { 28 | display: inline-flex; 29 | align-items: center; 30 | background-color: #f0f0f0; 31 | color: #444; 32 | border-radius: 16px; 33 | padding: 5px 10px; 34 | margin: 2px; 35 | font-size: 14px; 36 | line-height: 1; 37 | animation: tagAppear 0.2s ease-out forwards; 38 | } 39 | 40 | /* Tag text */ 41 | .tag-text { 42 | margin-right: 5px; 43 | } 44 | 45 | /* Delete button styling */ 46 | .tag-delete { 47 | display: flex; 48 | align-items: center; 49 | justify-content: center; 50 | width: 16px; 51 | height: 16px; 52 | border-radius: 50%; 53 | background-color: #ddd; 54 | color: #666; 55 | font-size: 10px; 56 | cursor: pointer; 57 | transition: all 0.2s; 58 | } 59 | 60 | .tag-delete:hover { 61 | background-color: #e54d42; 62 | color: white; 63 | } 64 | 65 | /* Input styling */ 66 | .tag-input { 67 | flex: 1; 68 | border: none; 69 | outline: none; 70 | padding: 6px 8px; 71 | font-size: 14px; 72 | min-width: 60px; 73 | background: transparent; 74 | } 75 | 76 | /* Animation for tag creation and deletion */ 77 | @keyframes tagAppear { 78 | from { 79 | transform: scale(0.8); 80 | opacity: 0; 81 | } 82 | 83 | to { 84 | transform: scale(1); 85 | opacity: 1; 86 | } 87 | } 88 | 89 | @keyframes tagRemove { 90 | to { 91 | transform: scale(0.8); 92 | opacity: 0; 93 | } 94 | } 95 | 96 | .tag.removing { 97 | animation: tagRemove 0.15s ease-out forwards; 98 | } 99 | 100 | /* Selected tags display */ 101 | .selected-tags-container .badge { 102 | font-weight: normal; 103 | } -------------------------------------------------------------------------------- /17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tab Panels 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |
21 | 22 | 23 | 24 |
25 |
26 |
27 |

Content 1

28 |

This is the content for tab 1.

29 |
30 |
31 |

Content 2

32 |

This is the content for tab 2.

33 |
34 |
35 |

Content 3

36 |

This is the content for tab 3.

37 |
38 |
39 |
40 | 41 |
42 | 43 |
44 | 46 | Watch Instagram Video 47 | 48 | 49 | Visit YouTube Channel 50 | 51 |
52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Skeleton Loader 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

Users List

21 | 22 |
23 |
24 |
25 | 26 |
27 |
28 |
29 | 30 |
31 |
32 |
33 | 34 |
35 |
36 | 37 | 38 |
39 | 40 |
41 | 42 |
43 | 45 | Watch Instagram Video 46 | 47 | 48 | Visit YouTube Channel 49 | 50 |
51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /39/style.css: -------------------------------------------------------------------------------- 1 | /* Toast container styling */ 2 | #toast-container { 3 | position: fixed; 4 | bottom: 20px; 5 | right: 20px; 6 | z-index: 1050; 7 | display: flex; 8 | flex-direction: column-reverse; 9 | /* Stack from bottom up */ 10 | gap: 10px; 11 | max-width: 350px; 12 | } 13 | 14 | /* Base toast styling */ 15 | .toast { 16 | color: white; 17 | padding: 15px; 18 | border-radius: 4px; 19 | display: flex; 20 | align-items: center; 21 | justify-content: space-between; 22 | box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); 23 | margin: 0; 24 | animation: slide-in 0.5s ease-out forwards; 25 | max-width: 350px; 26 | max-height: 100px; 27 | opacity: 0; 28 | } 29 | 30 | /* Toast types */ 31 | .toast-success { 32 | background-color: #28a745; 33 | border-left: 5px solid #1e7e34; 34 | } 35 | 36 | .toast-error { 37 | background-color: #dc3545; 38 | border-left: 5px solid #bd2130; 39 | } 40 | 41 | .toast-warning { 42 | background-color: #ffc107; 43 | border-left: 5px solid #d39e00; 44 | color: #212529; 45 | } 46 | 47 | .toast-info { 48 | background-color: #17a2b8; 49 | border-left: 5px solid #138496; 50 | } 51 | 52 | /* Toast content layout */ 53 | .toast-content { 54 | flex: 1; 55 | display: flex; 56 | align-items: center; 57 | } 58 | 59 | .toast-icon { 60 | margin-right: 10px; 61 | font-size: 1.5rem; 62 | } 63 | 64 | .toast-message { 65 | flex: 1; 66 | padding-right: 10px; 67 | } 68 | 69 | .toast-close { 70 | cursor: pointer; 71 | font-size: 1.2rem; 72 | opacity: 0.7; 73 | transition: opacity 0.2s; 74 | align-self: flex-start; 75 | background: none; 76 | border: none; 77 | color: inherit; 78 | padding: 0; 79 | } 80 | 81 | .toast-close:hover { 82 | opacity: 1; 83 | } 84 | 85 | /* Animations */ 86 | @keyframes slide-in { 87 | 0% { 88 | transform: translateX(100%); 89 | opacity: 0; 90 | } 91 | 92 | 100% { 93 | transform: translateX(0); 94 | opacity: 1; 95 | } 96 | } 97 | 98 | @keyframes fade-out { 99 | 0% { 100 | opacity: 1; 101 | } 102 | 103 | 100% { 104 | opacity: 0; 105 | } 106 | } 107 | 108 | /* Toast that is being removed */ 109 | .toast-removing { 110 | animation: fade-out 0.5s forwards; 111 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # The Real World JavaScript: Master Practical Skills for Everyday Coding 2 | 3 | Welcome to "The Real World JavaScript" repository! This series is designed to help you master JavaScript through practical exercises that are directly applicable to real-world coding challenges. Whether you're a beginner looking to strengthen your foundation or an intermediate developer ready to level up your skills, this series provides hands-on projects that will help you build confidence in JavaScript. 4 | 5 | Each video will guide you through building functional, real-world applications while explaining key JavaScript concepts and techniques. The code for each project is available here, allowing you to follow along and practice the concepts in your own time. 6 | 7 | ## What You’ll Find in This Repository: 8 | 9 | - Step-by-step code examples for each exercise. 10 | - Practical solutions to common JavaScript challenges. 11 | - Real-world project templates for personal and professional use. 12 | - Clean and well-documented code to help you understand the logic behind each project. 13 | 14 | ## Getting Started: 15 | 16 | 1. Clone or fork the repository to your local machine. 17 | 2. Follow the videos and work through each project. 18 | 3. Feel free to modify and extend the code as you learn. 19 | 20 | ## Folder Wise Links: 21 | 22 | 1. [Login Form](./1) 23 | 2. [Character Counter](./2) 24 | 3. [Highlight Matching Items](./3) 25 | 4. [4](./4) 26 | 5. [5](./5) 27 | 6. [6](./6) 28 | 7. [7](./7) 29 | 8. [8](./8) 30 | 9. [9](./9) 31 | 10. [10](./10) 32 | 11. [11](./11) 33 | 12. [12](./12) 34 | 13. [13](./13) 35 | 14. [14](./14) 36 | 15. [15](./15) 37 | 16. [16](./16) 38 | 17. [17](./17) 39 | 18. [18](./18) 40 | 19. [19](./19) 41 | 20. [20](./20) 42 | 21. [21](./21) 43 | 22. [22](./22) 44 | 23. [23](./23) 45 | 24. [24](./24) 46 | 25. [25](./25) 47 | 26. [26](./26) 48 | 27. [27](./27) 49 | 28. [28](./28) 50 | 29. [29](./29) 51 | 30. [30](./30) 52 | 31. [31](./31) 53 | 32. [32](./32) 54 | 33. [33](./33) 55 | 34. [34](./34) 56 | 35. [35](./35) 57 | 36. [36](./36) 58 | 37. [37](./37) 59 | 38. [38](./38) 60 | 39. [39](./39) 61 | 40. [40](./40) 62 | 41. [41](./41) 63 | 42. [42](./42) 64 | 43. [43](./43) 65 | 44. [44](./44) 66 | 45. [45](./45) 67 | 46. [46](./46) 68 | 47. [47](./47) 69 | 48. [48](./48) 70 | 49. [49](./49) 71 | 50. [50](./50) 72 | 73 | By the end of this series, you'll have a portfolio of JavaScript projects and a deeper understanding of how JavaScript is used in real-world applications. 74 | 75 | Let's get coding! 76 | -------------------------------------------------------------------------------- /27/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Filter Food items 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

Food Menu

21 | 22 |
23 | 24 | 27 | 30 |
31 | 32 |
33 | 34 |
35 | 36 | 39 |
40 | 41 |
42 | 43 |
44 | 46 | Watch Instagram Video 47 | 48 | 49 | Visit YouTube Channel 50 | 51 |
52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /28/style.css: -------------------------------------------------------------------------------- 1 | .product-filter-container { 2 | padding-bottom: 2rem; 3 | } 4 | 5 | .filter-section { 6 | border: 1px solid #e0e0e0; 7 | border-radius: 5px; 8 | padding: 15px; 9 | background-color: #f8f9fa; 10 | margin-bottom: 20px; 11 | } 12 | 13 | .price-filter { 14 | padding: 10px 0; 15 | } 16 | 17 | .price-inputs input { 18 | width: 100px; 19 | } 20 | 21 | .range-slider { 22 | padding: 0 5px; 23 | } 24 | 25 | input[type="range"] { 26 | width: 100%; 27 | height: 6px; 28 | border-radius: 5px; 29 | -webkit-appearance: none; 30 | background: #dee2e6; 31 | outline: none; 32 | } 33 | 34 | input[type="range"]::-webkit-slider-thumb { 35 | -webkit-appearance: none; 36 | width: 18px; 37 | height: 18px; 38 | border-radius: 50%; 39 | background: #007bff; 40 | cursor: pointer; 41 | } 42 | 43 | input[type="range"]::-moz-range-thumb { 44 | width: 18px; 45 | height: 18px; 46 | border-radius: 50%; 47 | background: #007bff; 48 | cursor: pointer; 49 | border: none; 50 | } 51 | 52 | .price-labels { 53 | margin-top: 5px; 54 | font-size: 0.8rem; 55 | color: #6c757d; 56 | } 57 | 58 | .product-card { 59 | border: 1px solid #e0e0e0; 60 | border-radius: 8px; 61 | overflow: hidden; 62 | height: 100%; 63 | position: relative; 64 | transition: transform 0.3s, box-shadow 0.3s; 65 | } 66 | 67 | .product-card:hover { 68 | transform: translateY(-5px); 69 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 70 | } 71 | 72 | .product-image { 73 | height: 200px; 74 | overflow: hidden; 75 | } 76 | 77 | .product-image img { 78 | width: 100%; 79 | height: 100%; 80 | object-fit: cover; 81 | transition: transform 0.3s; 82 | } 83 | 84 | .product-card:hover .product-image img { 85 | transform: scale(1.05); 86 | } 87 | 88 | .product-info { 89 | padding: 15px; 90 | } 91 | 92 | .product-name { 93 | margin-bottom: 8px; 94 | font-weight: 600; 95 | } 96 | 97 | .product-description { 98 | color: #666; 99 | font-size: 14px; 100 | height: 60px; 101 | overflow: hidden; 102 | margin-bottom: 0.5rem; 103 | } 104 | 105 | .product-price { 106 | font-weight: bold; 107 | color: #e67e22; 108 | font-size: 18px; 109 | } 110 | 111 | @media (max-width: 767px) { 112 | .product-description { 113 | height: auto; 114 | max-height: 60px; 115 | } 116 | 117 | .price-inputs { 118 | flex-direction: column; 119 | } 120 | 121 | .price-inputs>div { 122 | margin-bottom: 10px; 123 | } 124 | } -------------------------------------------------------------------------------- /38/style.css: -------------------------------------------------------------------------------- 1 | 2 | .flip-card { 3 | background-color: transparent; 4 | height: 400px; 5 | perspective: 1000px; 6 | cursor: pointer; 7 | } 8 | 9 | .flip-card-inner { 10 | position: relative; 11 | width: 100%; 12 | height: 100%; 13 | transition: transform 0.8s; 14 | transform-style: preserve-3d; 15 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 16 | border-radius: 10px; 17 | } 18 | 19 | .flip-card:hover .flip-card-inner, 20 | .flip-card.flipped .flip-card-inner { 21 | transform: rotateY(180deg); 22 | } 23 | 24 | .flip-card-front, 25 | .flip-card-back { 26 | position: absolute; 27 | width: 100%; 28 | height: 100%; 29 | -webkit-backface-visibility: hidden; 30 | backface-visibility: hidden; 31 | border-radius: 10px; 32 | overflow: hidden; 33 | } 34 | 35 | .flip-card-front { 36 | background-color: #f8f9fa; 37 | display: flex; 38 | flex-direction: column; 39 | } 40 | 41 | .flip-card-front img { 42 | width: 100%; 43 | height: 300px; 44 | object-fit: cover; 45 | } 46 | 47 | .card-caption { 48 | padding: 15px; 49 | text-align: center; 50 | background-color: white; 51 | flex-grow: 1; 52 | display: flex; 53 | flex-direction: column; 54 | justify-content: center; 55 | } 56 | 57 | .card-caption h5 { 58 | margin-bottom: 5px; 59 | } 60 | 61 | .card-caption p { 62 | margin-bottom: 0; 63 | color: #6c757d; 64 | } 65 | 66 | .flip-card-back { 67 | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 68 | color: white; 69 | transform: rotateY(180deg); 70 | padding: 20px; 71 | text-align: center; 72 | display: flex; 73 | flex-direction: column; 74 | justify-content: center; 75 | align-items: center; 76 | } 77 | 78 | .flip-card-back .title { 79 | font-style: italic; 80 | margin-bottom: 20px; 81 | color: rgba(255, 255, 255, 0.8); 82 | } 83 | 84 | .social-icons { 85 | margin-top: 15px; 86 | } 87 | 88 | .social-icons a { 89 | color: white; 90 | font-size: 1.2rem; 91 | margin: 0 10px; 92 | transition: transform 0.3s ease; 93 | } 94 | 95 | .social-icons a:hover { 96 | transform: scale(1.2); 97 | } 98 | 99 | /* Add bounce effect on hover */ 100 | @keyframes bounce { 101 | 102 | 0%, 103 | 100% { 104 | transform: translateY(0); 105 | } 106 | 107 | 50% { 108 | transform: translateY(-10px); 109 | } 110 | } 111 | 112 | .flip-card:hover { 113 | animation: bounce 1s ease infinite; 114 | animation-duration: 2s; 115 | } 116 | 117 | /* Stop animation while flipped */ 118 | .flip-card:hover .flip-card-inner { 119 | animation: none; 120 | } -------------------------------------------------------------------------------- /45/style.css: -------------------------------------------------------------------------------- 1 | /* Accordion container styling */ 2 | .accordion-container { 3 | max-width: 800px; 4 | margin: 0 auto; 5 | } 6 | 7 | /* Accordion item styling */ 8 | .accordion-item { 9 | margin-bottom: 15px; 10 | border: 1px solid #e9ecef; 11 | border-radius: 6px; 12 | overflow: hidden; 13 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); 14 | transition: all 0.3s ease; 15 | } 16 | 17 | .accordion-item:hover { 18 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 19 | } 20 | 21 | /* Header styling */ 22 | .accordion-header { 23 | display: flex; 24 | justify-content: space-between; 25 | align-items: center; 26 | padding: 15px 20px; 27 | background-color: #f8f9fa; 28 | cursor: pointer; 29 | user-select: none; 30 | transition: background-color 0.3s ease; 31 | } 32 | 33 | .accordion-header h3 { 34 | margin: 0; 35 | font-size: 18px; 36 | font-weight: 500; 37 | color: #343a40; 38 | } 39 | 40 | .accordion-item.active .accordion-header { 41 | background-color: #e9ecef; 42 | border-bottom: 1px solid #dee2e6; 43 | } 44 | 45 | /* Icon styling */ 46 | .accordion-icon { 47 | font-size: 14px; 48 | color: #6c757d; 49 | transition: transform 0.3s ease; 50 | } 51 | 52 | .accordion-item.active .accordion-icon { 53 | transform: rotate(180deg); 54 | color: #007bff; 55 | } 56 | 57 | /* Content panel styling */ 58 | .accordion-content { 59 | max-height: 0; 60 | padding: 0 20px; 61 | overflow: hidden; 62 | background-color: #fff; 63 | transition: max-height 0.3s ease, padding 0.3s ease; 64 | } 65 | 66 | .accordion-item.active .accordion-content { 67 | max-height: 1000px; 68 | /* Large enough to contain content */ 69 | padding: 20px; 70 | } 71 | 72 | /* Content styling */ 73 | .accordion-content p { 74 | margin-bottom: 10px; 75 | line-height: 1.6; 76 | } 77 | 78 | .accordion-content p:last-child, 79 | .accordion-content ul:last-child, 80 | .accordion-content ol:last-child { 81 | margin-bottom: 0; 82 | } 83 | 84 | .accordion-content ul, 85 | .accordion-content ol { 86 | padding-left: 20px; 87 | margin-bottom: 15px; 88 | } 89 | 90 | .accordion-content li { 91 | margin-bottom: 5px; 92 | } 93 | 94 | /* Responsive adjustments */ 95 | @media (max-width: 576px) { 96 | .accordion-header { 97 | padding: 12px 15px; 98 | } 99 | 100 | .accordion-header h3 { 101 | font-size: 16px; 102 | } 103 | 104 | .accordion-item.active .accordion-content { 105 | padding: 15px; 106 | } 107 | } -------------------------------------------------------------------------------- /32/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function() { 2 | // DOM Elements 3 | const qrForm = document.getElementById("qrForm"); 4 | const qrText = document.getElementById("qrText"); 5 | const qrSize = document.getElementById("qrSize"); 6 | const qrDarkColor = document.getElementById("qrDarkColor"); 7 | const qrLightColor = document.getElementById("qrLightColor"); 8 | const qrCodeContainer = document.getElementById("qrcode"); 9 | const emptyMessage = document.getElementById("emptyMessage"); 10 | const downloadContainer = document.getElementById("downloadContainer"); 11 | const downloadBtn = document.getElementById("downloadBtn"); 12 | 13 | // QR Code Instance 14 | let qrCodeInstance = null; 15 | 16 | // Generate QR Code 17 | qrForm.addEventListener("submit", function(e) { 18 | e.preventDefault(); 19 | 20 | // Get values from form 21 | const text = qrText.value.trim(); 22 | const size = parseInt(qrSize.value); 23 | const darkColor = qrDarkColor.value; 24 | const lightColor = qrLightColor.value; 25 | 26 | if (!text) { 27 | alert("Please enter text or URL to generate QR code"); 28 | return; 29 | } 30 | 31 | // Clear previous QR code 32 | qrCodeContainer.innerHTML = ""; 33 | 34 | // Create new QR code 35 | qrCodeInstance = new QRCode(qrCodeContainer, { 36 | text: text, 37 | width: size, 38 | height: size, 39 | colorDark: darkColor, 40 | colorLight: lightColor, 41 | correctLevel: QRCode.CorrectLevel.H 42 | }); 43 | 44 | // Show download button and hide empty message 45 | downloadContainer.style.display = "block"; 46 | emptyMessage.style.display = "none"; 47 | }); 48 | 49 | // Download QR Code as Image 50 | downloadBtn.addEventListener("click", function() { 51 | if (!qrCodeInstance) return; 52 | 53 | // Find the image created by QRCode.js 54 | const img = qrCodeContainer.querySelector("img"); 55 | 56 | if (img) { 57 | // Create a temporary anchor element 58 | const downloadLink = document.createElement("a"); 59 | 60 | // Get image data as base64 string 61 | const imageData = img.src; 62 | 63 | // Set download link attributes 64 | downloadLink.href = imageData; 65 | downloadLink.download = "qrcode.png"; 66 | 67 | // Simulate click to trigger download 68 | document.body.appendChild(downloadLink); 69 | downloadLink.click(); 70 | document.body.removeChild(downloadLink); 71 | } else { 72 | alert("Unable to download QR code. Please try again."); 73 | } 74 | }); 75 | }); -------------------------------------------------------------------------------- /23/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Apply Coupon Codes 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

Order Summary

21 |
22 | Subtotal: 23 | $100.00 24 |
25 |
26 | Shipping: 27 | $5.00 28 |
29 |
30 |
31 | 32 | 33 |
34 |
35 |
36 | 40 |
41 | Total: 42 | $105.00 43 |
44 | 45 |
46 | 47 |
48 | 49 |
50 | 52 | Watch Instagram Video 53 | 54 | 55 | Visit YouTube Channel 56 | 57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /47/style.css: -------------------------------------------------------------------------------- 1 | .hashtag-display-container { 2 | background-color: #f8f9fa; 3 | border-radius: 5px; 4 | } 5 | 6 | .hashtag-display { 7 | min-height: 100px; 8 | border: 1px solid #dee2e6; 9 | border-radius: 5px; 10 | background-color: white; 11 | line-height: 1.6; 12 | } 13 | 14 | /* Hashtag styling */ 15 | .hashtag { 16 | font-weight: bold; 17 | border-radius: 3px; 18 | padding: 0 3px; 19 | transition: all 0.2s ease; 20 | } 21 | 22 | .hashtag:hover { 23 | transform: scale(1.05); 24 | } 25 | 26 | .hashtag.primary { 27 | color: #007bff; 28 | background-color: rgba(0, 123, 255, 0.1); 29 | } 30 | 31 | .hashtag.success { 32 | color: #28a745; 33 | background-color: rgba(40, 167, 69, 0.1); 34 | } 35 | 36 | .hashtag.danger { 37 | color: #dc3545; 38 | background-color: rgba(220, 53, 69, 0.1); 39 | } 40 | 41 | .hashtag.warning { 42 | color: #ffc107; 43 | background-color: rgba(255, 193, 7, 0.1); 44 | } 45 | 46 | .hashtag.info { 47 | color: #17a2b8; 48 | background-color: rgba(23, 162, 184, 0.1); 49 | } 50 | 51 | .hashtag.dark { 52 | color: #343a40; 53 | background-color: rgba(52, 58, 64, 0.1); 54 | } 55 | 56 | /* Color options styling */ 57 | .color-option { 58 | width: 60px; 59 | margin-right: 5px; 60 | border: 1px solid #ced4da; 61 | } 62 | 63 | .color-option[data-color="primary"] { 64 | background-color: rgba(0, 123, 255, 0.1); 65 | color: #007bff; 66 | } 67 | 68 | .color-option[data-color="success"] { 69 | background-color: rgba(40, 167, 69, 0.1); 70 | color: #28a745; 71 | } 72 | 73 | .color-option[data-color="danger"] { 74 | background-color: rgba(220, 53, 69, 0.1); 75 | color: #dc3545; 76 | } 77 | 78 | .color-option[data-color="warning"] { 79 | background-color: rgba(255, 193, 7, 0.1); 80 | color: #ffc107; 81 | } 82 | 83 | .color-option[data-color="info"] { 84 | background-color: rgba(23, 162, 184, 0.1); 85 | color: #17a2b8; 86 | } 87 | 88 | .color-option[data-color="dark"] { 89 | background-color: rgba(52, 58, 64, 0.1); 90 | color: #343a40; 91 | } 92 | 93 | .color-option.active { 94 | box-shadow: 0 0 0 2px #007bff; 95 | } 96 | 97 | /* Hashtag list styling */ 98 | .hashtag-list { 99 | display: flex; 100 | flex-wrap: wrap; 101 | gap: 8px; 102 | } 103 | 104 | .hashtag-count { 105 | display: inline-flex; 106 | align-items: center; 107 | padding: 5px 10px; 108 | border-radius: 20px; 109 | font-size: 14px; 110 | } 111 | 112 | /* Animation for new hashtags */ 113 | @keyframes hashtag-appear { 114 | from { 115 | opacity: 0; 116 | transform: translateY(10px); 117 | } 118 | 119 | to { 120 | opacity: 1; 121 | transform: translateY(0); 122 | } 123 | } 124 | 125 | .hashtag-count { 126 | animation: hashtag-appear 0.3s ease forwards; } -------------------------------------------------------------------------------- /39/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Toast Notifications 7 | 8 | 9 | 13 | 14 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 |
26 |

Toast Notification System

27 |

28 | Click the buttons below to show different types of toast 29 | notifications 30 |

31 | 32 |
33 | 36 | 39 | 42 | 45 |
46 |
47 |
48 | 49 | 50 |
51 |
52 | 53 |
54 | 59 | Watch Instagram Video 60 | 61 | 66 | Visit YouTube Channel 67 | 68 |
69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /41/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tag Input Field 7 | 8 | 9 | 13 | 14 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 |
26 |

Tag Input Field

27 |
28 |
29 |
30 | 31 |

32 | Type and press Enter or comma to add a tag 33 |

34 | 35 |
36 |
37 | 38 |
39 | 46 |
47 |
48 | 49 |
50 |
Selected Tags:
51 |
52 |

No tags selected

53 |
54 |
55 |
56 |
57 | 58 |
59 | 60 |
61 | 66 | Watch Instagram Video 67 | 68 | 73 | Visit YouTube Channel 74 | 75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /45/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | // Select all accordion items 3 | const accordionItems = document.querySelectorAll('.accordion-item'); 4 | 5 | // Add click event to each header 6 | accordionItems.forEach(item => { 7 | const header = item.querySelector('.accordion-header'); 8 | 9 | header.addEventListener('click', function() { 10 | // Check if this item is already active 11 | const isActive = item.classList.contains('active'); 12 | 13 | // Close all accordion items 14 | accordionItems.forEach(accordionItem => { 15 | accordionItem.classList.remove('active'); 16 | }); 17 | 18 | // If the clicked item wasn't active, open it 19 | if (!isActive) { 20 | item.classList.add('active'); 21 | } 22 | 23 | // Add accessibility attributes 24 | updateAriaAttributes(); 25 | }); 26 | 27 | // Initialize with ARIA attributes 28 | setInitialAriaAttributes(item, header); 29 | }); 30 | 31 | // Set initial ARIA attributes for accessibility 32 | function setInitialAriaAttributes(item, header) { 33 | const content = item.querySelector('.accordion-content'); 34 | 35 | // Set ID for the content panel 36 | const contentId = 'accordion-content-' + (Array.from(accordionItems).indexOf(item) + 1); 37 | content.id = contentId; 38 | 39 | // Set ARIA attributes for the header 40 | header.setAttribute('role', 'button'); 41 | header.setAttribute('aria-expanded', 'false'); 42 | header.setAttribute('aria-controls', contentId); 43 | header.setAttribute('tabindex', '0'); 44 | 45 | // Set ARIA attributes for the content 46 | content.setAttribute('role', 'region'); 47 | content.setAttribute('aria-labelledby', header.id || 'accordion-header-' + (Array.from(accordionItems).indexOf(item) + 1)); 48 | content.setAttribute('aria-hidden', 'true'); 49 | } 50 | 51 | // Update ARIA attributes when state changes 52 | function updateAriaAttributes() { 53 | accordionItems.forEach(item => { 54 | const header = item.querySelector('.accordion-header'); 55 | const content = item.querySelector('.accordion-content'); 56 | const isActive = item.classList.contains('active'); 57 | 58 | header.setAttribute('aria-expanded', isActive ? 'true' : 'false'); 59 | content.setAttribute('aria-hidden', isActive ? 'false' : 'true'); 60 | }); 61 | } 62 | 63 | // Add keyboard support 64 | accordionItems.forEach(item => { 65 | const header = item.querySelector('.accordion-header'); 66 | 67 | header.addEventListener('keydown', function(e) { 68 | // Toggle on Enter or Space 69 | if (e.key === 'Enter' || e.key === ' ') { 70 | e.preventDefault(); 71 | header.click(); 72 | } 73 | }); 74 | }); 75 | 76 | // Open the first panel by default 77 | if (accordionItems.length > 0) { 78 | accordionItems[0].classList.add('active'); 79 | updateAriaAttributes(); 80 | } 81 | }); -------------------------------------------------------------------------------- /25/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Auto Fill Addresses 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

Shipping Address

21 | 22 |
23 | 24 |
25 | 26 |
27 | 28 |
29 |
30 |
31 |
32 | 33 |
34 |
35 | 36 | 37 |
38 |
39 | 40 | 41 |
42 |
43 |
44 | 45 | 46 |
47 |
48 | 49 | 50 |
51 |
52 | 53 |
54 |
55 | 56 |
57 | 58 |
59 | 61 | Watch Instagram Video 62 | 63 | 64 | Visit YouTube Channel 65 | 66 |
67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /28/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Price Range Filter 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

Products

21 | 22 |
23 |

Filter by Price

24 |
25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 |
36 | 37 |
38 |
39 | $0 40 | $100 41 |
42 |
43 | 44 |
45 | 46 |
47 | 48 |
49 | 50 | 53 |
54 | 55 |
56 | 57 |
58 | 60 | Watch Instagram Video 61 | 62 | 63 | Visit YouTube Channel 64 | 65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /43/style.css: -------------------------------------------------------------------------------- 1 | /* Main container styling */ 2 | .trending-movies { 3 | padding: 0 20px; 4 | } 5 | 6 | .section-header h2 { 7 | font-size: 24px; 8 | margin-bottom: 0; 9 | } 10 | 11 | /* Carousel styling */ 12 | .movies-carousel { 13 | overflow: hidden; 14 | position: relative; 15 | display: none; 16 | /* Hidden initially until movies load */ 17 | } 18 | 19 | .movies-track { 20 | display: flex; 21 | transition: transform 0.5s ease; 22 | } 23 | 24 | /* Movie card styling */ 25 | .movie-card { 26 | flex: 0 0 auto; 27 | width: 220px; 28 | margin-right: 20px; 29 | border-radius: 8px; 30 | overflow: hidden; 31 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 32 | transition: transform 0.3s ease, box-shadow 0.3s ease; 33 | cursor: pointer; 34 | background-color: #fff; 35 | } 36 | 37 | .movie-card:hover { 38 | transform: translateY(-5px) scale(1.02); 39 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 40 | } 41 | 42 | .movie-poster { 43 | position: relative; 44 | height: 330px; 45 | overflow: hidden; 46 | } 47 | 48 | .movie-poster img { 49 | width: 100%; 50 | height: 100%; 51 | object-fit: cover; 52 | transition: transform 0.5s ease; 53 | } 54 | 55 | .movie-card:hover .movie-poster img { 56 | transform: scale(1.1); 57 | } 58 | 59 | .movie-rating { 60 | position: absolute; 61 | top: 10px; 62 | right: 10px; 63 | background-color: rgba(0, 0, 0, 0.7); 64 | color: white; 65 | border-radius: 4px; 66 | padding: 3px 6px; 67 | font-size: 12px; 68 | font-weight: bold; 69 | } 70 | 71 | .rating-high { 72 | background-color: #4caf50; 73 | } 74 | 75 | .rating-medium { 76 | background-color: #ff9800; 77 | } 78 | 79 | .rating-low { 80 | background-color: #f44336; 81 | } 82 | 83 | .movie-info { 84 | padding: 12px; 85 | } 86 | 87 | .movie-title { 88 | font-size: 14px; 89 | font-weight: 600; 90 | margin-bottom: 4px; 91 | display: -webkit-box; 92 | -webkit-line-clamp: 2; 93 | -webkit-box-orient: vertical; 94 | overflow: hidden; 95 | text-overflow: ellipsis; 96 | min-height: 42px; 97 | } 98 | 99 | .movie-year { 100 | font-size: 12px; 101 | color: #6c757d; 102 | } 103 | 104 | /* Star rating styling */ 105 | .stars { 106 | display: inline-block; 107 | font-size: 12px; 108 | color: #ffc107; 109 | } 110 | 111 | /* Modal styling */ 112 | #modalPoster { 113 | box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); 114 | } 115 | 116 | #modalRating { 117 | color: #ffc107; 118 | } 119 | 120 | #modalGenres .badge { 121 | margin-right: 5px; 122 | margin-bottom: 5px; 123 | } 124 | 125 | /* Responsive adjustments */ 126 | @media (max-width: 767px) { 127 | .movie-card { 128 | width: 160px; 129 | margin-right: 15px; 130 | } 131 | 132 | .movie-poster { 133 | height: 240px; 134 | } 135 | 136 | .section-header { 137 | flex-direction: column; 138 | align-items: flex-start !important; 139 | } 140 | 141 | .carousel-controls { 142 | margin-top: 10px; 143 | } 144 | } -------------------------------------------------------------------------------- /36/style.css: -------------------------------------------------------------------------------- 1 | .credit-card-form { 2 | max-width: 1000px; 3 | margin: 0; 4 | } 5 | 6 | .card { 7 | border: none; 8 | border-radius: 10px; 9 | overflow: hidden; 10 | } 11 | 12 | .card-header { 13 | border-radius: 0 !important; 14 | padding: 15px 20px; 15 | } 16 | 17 | .credit-card-wrapper { 18 | perspective: 1000px; 19 | height: 220px; 20 | } 21 | 22 | .credit-card-inner { 23 | width: 100%; 24 | height: 100%; 25 | } 26 | 27 | .credit-card-front { 28 | width: 100%; 29 | height: 100%; 30 | background: linear-gradient(45deg, #0a0a0a, #3a4452); 31 | border-radius: 15px; 32 | padding: 25px; 33 | box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); 34 | color: white; 35 | position: relative; 36 | } 37 | 38 | .card-type { 39 | position: absolute; 40 | top: 20px; 41 | right: 25px; 42 | font-size: 30px; 43 | } 44 | 45 | .card-number { 46 | font-size: 24px; 47 | margin-top: 55px; 48 | letter-spacing: 2px; 49 | font-family: 'Courier New', monospace; 50 | } 51 | 52 | .card-details { 53 | display: flex; 54 | justify-content: space-between; 55 | margin-top: 35px; 56 | } 57 | 58 | .card-holder, 59 | .card-expires { 60 | font-size: 14px; 61 | } 62 | 63 | .card-holder .label, 64 | .card-expires .label { 65 | font-size: 11px; 66 | text-transform: uppercase; 67 | opacity: 0.7; 68 | margin-bottom: 5px; 69 | } 70 | 71 | /* Card type icons */ 72 | .visa { 73 | color: #0157a2; 74 | } 75 | 76 | .mastercard { 77 | color: #eb001b; 78 | } 79 | 80 | .amex { 81 | color: #007bc1; 82 | } 83 | 84 | .discover { 85 | color: #ff6600; 86 | } 87 | 88 | /* Form styling */ 89 | .form-group label { 90 | font-weight: 500; 91 | } 92 | 93 | .input-group-text { 94 | background-color: #f8f9fa; 95 | } 96 | 97 | .form-control.is-valid, 98 | .was-validated .form-control:valid { 99 | border-color: #28a745; 100 | padding-right: calc(1.5em + 0.75rem); 101 | background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); 102 | background-repeat: no-repeat; 103 | background-position: right calc(0.375em + 0.1875rem) center; 104 | background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); 105 | } 106 | 107 | .form-control.is-invalid, 108 | .was-validated .form-control:invalid { 109 | border-color: #dc3545; 110 | padding-right: calc(1.5em + 0.75rem); 111 | background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); 112 | background-repeat: no-repeat; 113 | background-position: right calc(0.375em + 0.1875rem) center; 114 | background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); 115 | } 116 | 117 | @media (max-width: 576px) { 118 | .credit-card-front { 119 | padding: 15px; 120 | } 121 | 122 | .card-number { 123 | font-size: 20px; 124 | margin-top: 40px; 125 | } 126 | 127 | .card-details { 128 | margin-top: 25px; 129 | } 130 | } -------------------------------------------------------------------------------- /37/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | // DOM Elements 3 | const fontSelect = document.getElementById('font-family'); 4 | const previewText = document.getElementById('preview-text'); 5 | const sizeButtons = document.querySelectorAll('[data-size]'); 6 | const styleButtons = document.querySelectorAll('[data-style]'); 7 | 8 | // Display elements 9 | const currentFont = document.getElementById('current-font'); 10 | const currentSize = document.getElementById('current-size'); 11 | const currentStyles = document.getElementById('current-styles'); 12 | 13 | // Tracking active styles 14 | const activeStyles = { 15 | bold: false, 16 | italic: false, 17 | underline: false 18 | }; 19 | 20 | // Initialize with default values 21 | updateFontFamily(); 22 | 23 | // Font family change event 24 | fontSelect.addEventListener('change', function() { 25 | updateFontFamily(); 26 | highlightChange(); 27 | }); 28 | 29 | // Font size buttons 30 | sizeButtons.forEach(button => { 31 | button.addEventListener('click', function() { 32 | const size = this.getAttribute('data-size'); 33 | 34 | // Remove all size classes 35 | previewText.classList.remove('font-small', 'font-medium', 'font-large'); 36 | 37 | // Add selected size class 38 | previewText.classList.add('font-' + size); 39 | 40 | // Update display 41 | currentSize.textContent = capitalizeFirstLetter(size); 42 | 43 | highlightChange(); 44 | }); 45 | }); 46 | 47 | // Font style buttons 48 | styleButtons.forEach(button => { 49 | button.addEventListener('click', function() { 50 | const style = this.getAttribute('data-style'); 51 | 52 | // Toggle active state visually 53 | this.classList.toggle('active'); 54 | 55 | // Toggle style 56 | activeStyles[style] = !activeStyles[style]; 57 | 58 | // Update classes 59 | previewText.classList.toggle('font-' + style, activeStyles[style]); 60 | 61 | // Update display 62 | updateStylesDisplay(); 63 | 64 | highlightChange(); 65 | }); 66 | }); 67 | 68 | // Helper functions 69 | function updateFontFamily() { 70 | const fontFamily = fontSelect.value; 71 | previewText.style.fontFamily = fontFamily; 72 | 73 | // Get readable name from option text 74 | const selectedOption = fontSelect.options[fontSelect.selectedIndex]; 75 | currentFont.textContent = selectedOption.text; 76 | } 77 | 78 | function updateStylesDisplay() { 79 | const activeStyleNames = []; 80 | 81 | if (activeStyles.bold) activeStyleNames.push('Bold'); 82 | if (activeStyles.italic) activeStyleNames.push('Italic'); 83 | if (activeStyles.underline) activeStyleNames.push('Underline'); 84 | 85 | currentStyles.textContent = activeStyleNames.length > 0 ? 86 | activeStyleNames.join(', ') : 87 | 'None'; 88 | } 89 | 90 | function capitalizeFirstLetter(string) { 91 | return string.charAt(0).toUpperCase() + string.slice(1); 92 | } 93 | 94 | function highlightChange() { 95 | previewText.classList.add('preview-change'); 96 | setTimeout(() => { 97 | previewText.classList.remove('preview-change'); 98 | }, 500); 99 | } 100 | }); -------------------------------------------------------------------------------- /34/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Task Tracker 7 | 8 | 9 | 13 | 14 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 |

Task Tracker

26 | 27 |
28 |
29 | 36 | 41 |
42 | 45 |
46 |
47 |
48 | 49 |
50 |
51 | 54 | 57 | 60 |
61 |
62 | 63 |
64 | 0 tasks remaining 65 |
66 | 67 | 70 |
71 | 72 |
73 | 74 |
75 | 80 | Watch Instagram Video 81 | 82 | 87 | Visit YouTube Channel 88 | 89 |
90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /46/style.css: -------------------------------------------------------------------------------- 1 | /* Product card styling */ 2 | .product-card { 3 | transition: transform 0.3s ease, box-shadow 0.3s ease; 4 | height: 100%; 5 | display: flex; 6 | flex-direction: column; 7 | } 8 | 9 | .product-card:hover { 10 | transform: translateY(-5px); 11 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 12 | } 13 | 14 | .product-image-container { 15 | height: 200px; 16 | overflow: hidden; 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | background-color: #f8f9fa; 21 | } 22 | 23 | .product-image { 24 | max-height: 100%; 25 | max-width: 100%; 26 | object-fit: contain; 27 | } 28 | 29 | .product-card .card-body { 30 | display: flex; 31 | flex-direction: column; 32 | flex-grow: 1; 33 | } 34 | 35 | .product-name { 36 | display: -webkit-box; 37 | -webkit-line-clamp: 2; 38 | -webkit-box-orient: vertical; 39 | overflow: hidden; 40 | height: 48px; 41 | } 42 | 43 | .product-price { 44 | font-weight: 600; 45 | color: #007bff; 46 | } 47 | 48 | .product-card .btn { 49 | margin-top: auto; 50 | } 51 | 52 | /* Cart badge styling */ 53 | .cart-badge { 54 | position: absolute; 55 | top: -8px; 56 | right: -8px; 57 | background-color: #dc3545; 58 | color: white; 59 | font-size: 12px; 60 | padding: 0 6px; 61 | border-radius: 50%; 62 | min-width: 18px; 63 | height: 18px; 64 | line-height: 18px; 65 | text-align: center; 66 | transition: all 0.3s ease; 67 | } 68 | 69 | @keyframes cartUpdate { 70 | 71 | 0%, 72 | 100% { 73 | transform: scale(1); 74 | } 75 | 76 | 50% { 77 | transform: scale(1.5); 78 | } 79 | } 80 | 81 | .cart-badge.updating { 82 | animation: cartUpdate 0.5s ease; 83 | } 84 | 85 | /* Stock indicators */ 86 | .in-stock { 87 | color: #28a745; 88 | } 89 | 90 | .low-stock { 91 | color: #ffc107; 92 | } 93 | 94 | .out-of-stock { 95 | color: #dc3545; 96 | } 97 | 98 | /* Cart item styling */ 99 | .cart-item { 100 | padding: 10px 0; 101 | border-bottom: 1px solid #e9ecef; 102 | } 103 | 104 | .cart-item-title { 105 | font-size: 14px; 106 | margin-bottom: 4px; 107 | } 108 | 109 | .cart-item-price { 110 | font-size: 13px; 111 | color: #6c757d; 112 | } 113 | 114 | .cart-item-quantity { 115 | font-size: 12px; 116 | background-color: #f8f9fa; 117 | padding: 2px 6px; 118 | border-radius: 3px; 119 | } 120 | 121 | .cart-item-remove { 122 | color: #dc3545; 123 | cursor: pointer; 124 | transition: all 0.2s ease; 125 | } 126 | 127 | .cart-item-remove:hover { 128 | transform: scale(1.2); 129 | } 130 | 131 | /* Status message animations */ 132 | @keyframes fadeInOut { 133 | 0% { 134 | opacity: 0; 135 | transform: translateY(-10px); 136 | } 137 | 138 | 10% { 139 | opacity: 1; 140 | transform: translateY(0); 141 | } 142 | 143 | 90% { 144 | opacity: 1; 145 | transform: translateY(0); 146 | } 147 | 148 | 100% { 149 | opacity: 0; 150 | transform: translateY(-10px); 151 | } 152 | } 153 | 154 | .status-message { 155 | animation: fadeInOut 3s ease forwards; 156 | } 157 | 158 | /* Loading pulse animation */ 159 | @keyframes pulse { 160 | 0% { 161 | opacity: 1; 162 | } 163 | 164 | 50% { 165 | opacity: 0.5; 166 | } 167 | 168 | 100% { 169 | opacity: 1; 170 | } 171 | } 172 | 173 | .loading-pulse { 174 | animation: pulse 1s infinite ease-in-out; 175 | } -------------------------------------------------------------------------------- /48/style.css: -------------------------------------------------------------------------------- 1 | /* Container for textarea and dropdown */ 2 | .comment-container { 3 | position: relative; 4 | } 5 | 6 | /* Mention dropdown styling */ 7 | .mention-dropdown { 8 | position: absolute; 9 | background-color: white; 10 | border: 1px solid #e1e4e8; 11 | border-radius: 6px; 12 | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); 13 | width: 300px; 14 | max-height: 200px; 15 | overflow-y: auto; 16 | z-index: 1000; 17 | display: none; 18 | } 19 | 20 | .dropdown-header { 21 | padding: 8px 12px; 22 | background-color: #f6f8fa; 23 | border-bottom: 1px solid #e1e4e8; 24 | font-weight: 500; 25 | font-size: 13px; 26 | color: #586069; 27 | } 28 | 29 | .mention-list { 30 | max-height: 168px; 31 | overflow-y: auto; 32 | } 33 | 34 | /* User suggestion item */ 35 | .user-suggestion { 36 | padding: 8px 12px; 37 | display: flex; 38 | align-items: center; 39 | cursor: pointer; 40 | border-bottom: 1px solid #f1f1f1; 41 | transition: background-color 0.2s; 42 | } 43 | 44 | .user-suggestion:hover, 45 | .user-suggestion.active { 46 | background-color: #f1f8ff; 47 | } 48 | 49 | .user-suggestion:last-child { 50 | border-bottom: none; 51 | } 52 | 53 | .user-avatar { 54 | width: 24px; 55 | height: 24px; 56 | border-radius: 50%; 57 | margin-right: 10px; 58 | object-fit: cover; 59 | } 60 | 61 | .user-info { 62 | flex: 1; 63 | } 64 | 65 | .user-name { 66 | font-weight: 500; 67 | font-size: 14px; 68 | margin-bottom: 2px; 69 | } 70 | 71 | .user-handle { 72 | color: #6a737d; 73 | font-size: 12px; 74 | } 75 | 76 | /* Comment styling */ 77 | .comment-item { 78 | padding: 15px; 79 | border-bottom: 1px solid #e1e4e8; 80 | margin-bottom: 15px; 81 | } 82 | 83 | .comment-header { 84 | display: flex; 85 | align-items: center; 86 | margin-bottom: 8px; 87 | } 88 | 89 | .commenter-avatar { 90 | width: 32px; 91 | height: 32px; 92 | border-radius: 50%; 93 | margin-right: 10px; 94 | } 95 | 96 | .commenter-name { 97 | font-weight: 600; 98 | margin-bottom: 0; 99 | } 100 | 101 | .comment-timestamp { 102 | color: #586069; 103 | font-size: 12px; 104 | margin-left: auto; 105 | } 106 | 107 | .comment-content { 108 | line-height: 1.5; 109 | } 110 | 111 | /* Mention styling in comments */ 112 | .user-mention { 113 | display: inline-block; 114 | background-color: #e1f3ff; 115 | color: #0366d6; 116 | border-radius: 3px; 117 | padding: 0 3px; 118 | font-weight: 500; 119 | transition: background-color 0.2s; 120 | } 121 | 122 | .user-mention:hover { 123 | background-color: #cce7ff; 124 | text-decoration: none; 125 | } 126 | 127 | /* User cards */ 128 | .user-card { 129 | margin-bottom: 20px; 130 | text-align: center; 131 | } 132 | 133 | .user-card-img { 134 | width: 60px; 135 | height: 60px; 136 | border-radius: 50%; 137 | margin: 0 auto 10px; 138 | object-fit: cover; 139 | border: 3px solid #f1f1f1; 140 | transition: all 0.3s ease; 141 | } 142 | 143 | .user-card:hover .user-card-img { 144 | transform: scale(1.05); 145 | border-color: #007bff; 146 | } 147 | 148 | /* Animation for dropdown */ 149 | @keyframes fadeIn { 150 | from { 151 | opacity: 0; 152 | transform: translateY(-10px); 153 | } 154 | 155 | to { 156 | opacity: 1; 157 | transform: translateY(0); 158 | } 159 | } 160 | 161 | .mention-dropdown.show { 162 | display: block; 163 | animation: fadeIn 0.2s ease forwards; } -------------------------------------------------------------------------------- /39/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | // Toast configuration 3 | const toastDuration = 5000; // Duration in milliseconds before auto-dismiss 4 | 5 | // Toast container 6 | const toastContainer = document.getElementById('toast-container'); 7 | 8 | // Example toast messages 9 | const toastMessages = { 10 | success: { 11 | title: 'Success!', 12 | message: 'Your action was completed successfully.', 13 | icon: 'fas fa-check-circle' 14 | }, 15 | error: { 16 | title: 'Error!', 17 | message: 'Something went wrong. Please try again.', 18 | icon: 'fas fa-times-circle' 19 | }, 20 | warning: { 21 | title: 'Warning!', 22 | message: 'Please be careful with this action.', 23 | icon: 'fas fa-exclamation-triangle' 24 | }, 25 | info: { 26 | title: 'Information', 27 | message: 'Here is some information you might find useful.', 28 | icon: 'fas fa-info-circle' 29 | } 30 | }; 31 | 32 | // Function to create and show a toast notification 33 | function showToast(type) { 34 | // Get toast data 35 | const toast = toastMessages[type]; 36 | 37 | // Create toast element 38 | const toastElement = document.createElement('div'); 39 | toastElement.className = `toast toast-${type}`; 40 | toastElement.innerHTML = ` 41 |
42 |
43 | 44 |
45 |
46 | ${toast.title} 47 |
${toast.message}
48 |
49 |
50 | 51 | `; 52 | 53 | // Add to container 54 | toastContainer.appendChild(toastElement); 55 | 56 | // Give time for the DOM to update before animating in 57 | setTimeout(() => { 58 | toastElement.style.opacity = 1; 59 | }, 10); 60 | 61 | // Set up auto-dismiss 62 | const dismissTimeout = setTimeout(() => { 63 | removeToast(toastElement); 64 | }, toastDuration); 65 | 66 | // Set up click-to-dismiss 67 | const closeButton = toastElement.querySelector('.toast-close'); 68 | closeButton.addEventListener('click', () => { 69 | clearTimeout(dismissTimeout); 70 | removeToast(toastElement); 71 | }); 72 | 73 | // Return the toast element for potential later use 74 | return toastElement; 75 | } 76 | 77 | // Function to remove a toast with animation 78 | function removeToast(toastElement) { 79 | toastElement.classList.add('toast-removing'); 80 | 81 | // Remove from DOM after animation completes 82 | setTimeout(() => { 83 | if (toastElement.parentNode === toastContainer) { 84 | toastContainer.removeChild(toastElement); 85 | } 86 | }, 500); // Match this to the CSS animation duration 87 | } 88 | 89 | // Set up event listeners for the buttons 90 | document.getElementById('success-toast').addEventListener('click', () => { 91 | showToast('success'); 92 | }); 93 | 94 | document.getElementById('error-toast').addEventListener('click', () => { 95 | showToast('error'); 96 | }); 97 | 98 | document.getElementById('warning-toast').addEventListener('click', () => { 99 | showToast('warning'); 100 | }); 101 | 102 | document.getElementById('info-toast').addEventListener('click', () => { 103 | showToast('info'); 104 | }); 105 | 106 | // Show an initial toast when the page loads (optional) 107 | setTimeout(() => { 108 | showToast('info'); 109 | }, 1000); 110 | }); -------------------------------------------------------------------------------- /29/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Scroll to Bottom Button 7 | 8 | 9 | 13 | 14 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |

Long Content Example

25 |

26 | Scroll down to read the content, then scroll up to see the bottom button 27 | appear. 28 |

29 | 30 |
31 |

Stay Motivated!

32 | 33 |

34 | Welcome to our website. We believe in the power of positivity and 35 | motivation... 36 |

37 | 38 | 39 |

1. Believe in Yourself

40 |

41 | By accessing this website, you are taking the first step towards a 42 | more motivated and inspired life... 43 |

44 | 45 | 46 |

2. Set Goals

47 |

48 | Setting clear and achievable goals is crucial for maintaining 49 | motivation and tracking progress... 50 |

51 | 52 |

3. Stay Positive

53 |

54 | Maintaining a positive mindset can help you overcome challenges and 55 | stay focused on your objectives... 56 |

57 | 58 |

4. Take Action

59 |

60 | Consistent action towards your goals is essential for achieving 61 | success and staying motivated... 62 |

63 | 64 |

5. Reflect and Improve

65 |

66 | Regularly reflecting on your progress and making necessary adjustments 67 | can help you stay on track... 68 |

69 | 70 | 71 |
72 | 79 |
80 |
81 | 82 |
83 | 84 |
85 | 90 | Watch Instagram Video 91 | 92 | 97 | Visit YouTube Channel 98 | 99 |
100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /40/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Confetti Celebration 7 | 8 | 9 | 13 | 14 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 |
26 |
27 |
28 |

Registration Form

29 |
30 |
31 |
32 |
33 | 34 | 35 |
36 |
37 | 38 | 44 |
45 |
46 | 47 | 53 |
54 | 57 |
58 |
59 |
60 |
61 | 69 |
70 |
71 |
72 | 73 | 74 |
75 | 76 |
77 | 78 |
79 | 84 | Watch Instagram Video 85 | 86 | 91 | Visit YouTube Channel 92 | 93 |
94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /49/style.css: -------------------------------------------------------------------------------- 1 | /* Comment Styling */ 2 | .comment-item { 3 | margin-bottom: 15px; 4 | border-left: 2px solid transparent; 5 | transition: all 0.2s ease; 6 | } 7 | 8 | .comment-item:hover { 9 | border-left-color: #007bff; 10 | } 11 | 12 | .comment-content { 13 | background-color: #f8f9fa; 14 | border-radius: 8px; 15 | padding: 15px; 16 | position: relative; 17 | } 18 | 19 | .comment-header { 20 | display: flex; 21 | align-items: center; 22 | margin-bottom: 10px; 23 | } 24 | 25 | .avatar { 26 | width: 40px; 27 | height: 40px; 28 | border-radius: 50%; 29 | margin-right: 10px; 30 | object-fit: cover; 31 | } 32 | 33 | .avatar-small { 34 | width: 30px; 35 | height: 30px; 36 | border-radius: 50%; 37 | object-fit: cover; 38 | } 39 | 40 | .user-name { 41 | font-weight: 600; 42 | margin-bottom: 0; 43 | color: #343a40; 44 | } 45 | 46 | .comment-time { 47 | font-size: 12px; 48 | color: #6c757d; 49 | margin-left: 10px; 50 | } 51 | 52 | .comment-text { 53 | margin-bottom: 10px; 54 | line-height: 1.5; 55 | } 56 | 57 | /* Nested Comments */ 58 | .replies { 59 | margin-left: 25px; 60 | padding-left: 15px; 61 | border-left: 1px solid #dee2e6; 62 | margin-top: 10px; 63 | } 64 | 65 | .hidden-replies { 66 | display: none; 67 | } 68 | 69 | /* Toggle buttons */ 70 | .reply-toggle { 71 | font-size: 13px; 72 | color: #007bff; 73 | cursor: pointer; 74 | padding: 5px 0; 75 | display: inline-flex; 76 | align-items: center; 77 | } 78 | 79 | .reply-toggle:hover { 80 | text-decoration: underline; 81 | } 82 | 83 | .toggle-icon { 84 | transition: transform 0.2s ease; 85 | } 86 | 87 | .collapsed .toggle-icon { 88 | transform: rotate(-90deg); 89 | } 90 | 91 | /* Reply form */ 92 | .reply-form { 93 | margin-top: 10px; 94 | margin-bottom: 15px; 95 | display: none; 96 | } 97 | 98 | /* Vote buttons */ 99 | .vote-buttons { 100 | display: flex; 101 | align-items: center; 102 | margin-right: 15px; 103 | } 104 | 105 | .vote-btn { 106 | background: none; 107 | border: none; 108 | color: #6c757d; 109 | padding: 0 5px; 110 | cursor: pointer; 111 | font-size: 16px; 112 | transition: all 0.2s ease; 113 | } 114 | 115 | .vote-btn:hover { 116 | color: #007bff; 117 | } 118 | 119 | .vote-btn.upvoted { 120 | color: #28a745; 121 | } 122 | 123 | .vote-btn.downvoted { 124 | color: #dc3545; 125 | } 126 | 127 | .vote-count { 128 | margin: 0 5px; 129 | font-weight: 600; 130 | min-width: 20px; 131 | text-align: center; 132 | } 133 | 134 | /* Comment actions */ 135 | .comment-actions { 136 | display: flex; 137 | align-items: center; 138 | font-size: 13px; 139 | } 140 | 141 | .action-btn { 142 | margin-right: 15px; 143 | color: #6c757d; 144 | cursor: pointer; 145 | display: inline-flex; 146 | align-items: center; 147 | } 148 | 149 | .action-btn:hover { 150 | color: #007bff; 151 | text-decoration: none; 152 | } 153 | 154 | .action-btn i { 155 | margin-right: 5px; 156 | } 157 | 158 | /* Animation for new comments */ 159 | @keyframes fade-in { 160 | from { 161 | opacity: 0; 162 | transform: translateY(10px); 163 | } 164 | 165 | to { 166 | opacity: 1; 167 | transform: translateY(0); 168 | } 169 | } 170 | 171 | .new-comment { 172 | animation: fade-in 0.3s ease-out forwards; 173 | } 174 | 175 | /* Highlight effect for new replies */ 176 | @keyframes highlight-pulse { 177 | 0% { 178 | background-color: #f8f9fa; 179 | } 180 | 181 | 50% { 182 | background-color: #e8f4ff; 183 | } 184 | 185 | 100% { 186 | background-color: #f8f9fa; 187 | } 188 | } 189 | 190 | .highlight { 191 | animation: highlight-pulse 1.5s ease; } -------------------------------------------------------------------------------- /26/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | // Product data 3 | const products = [ 4 | { 5 | id: 1, 6 | name: "Classic T-Shirt", 7 | price: 19.99, 8 | image: "https://nobero.com/cdn/shop/files/white_855177b5-5621-4a4b-a0d1-9060b89a6a69.jpg?v=1711979035" 9 | }, 10 | { 11 | id: 2, 12 | name: "Denim Jeans", 13 | price: 49.99, 14 | image: "https://frenchcrown.in/cdn/shop/files/J342_2.jpg?v=1710414836&width=1750" 15 | }, 16 | { 17 | id: 3, 18 | name: "Sneakers", 19 | price: 79.99, 20 | image: "https://img.tatacliq.com/images/i21//437Wx649H/MP000000024522787_437Wx649H_202411270050461.jpeg" 21 | }, 22 | { 23 | id: 4, 24 | name: "Baseball Cap", 25 | price: 24.99, 26 | image: "https://imagescdn.simons.ca/images/8106-712020-23-A1_2/ny-9twenty-baseball-cap.jpg?__=55" 27 | }, 28 | { 29 | id: 5, 30 | name: "Backpack", 31 | price: 39.99, 32 | image: "https://nestasia.in/cdn/shop/files/DSC0330.jpg?v=1683546932&width=600" 33 | }, 34 | { 35 | id: 6, 36 | name: "Watch", 37 | price: 129.99, 38 | image: "https://justintime.in/cdn/shop/products/A1850_1.jpg?v=1682013772&width=1946" 39 | } 40 | ]; 41 | 42 | // DOM Elements 43 | const productContainer = document.getElementById('productContainer'); 44 | const cartBadge = document.getElementById('cartBadge'); 45 | 46 | // Cart state 47 | let cartItems = []; 48 | 49 | // Render products 50 | function renderProducts() { 51 | products.forEach(product => { 52 | const productCard = document.createElement('div'); 53 | productCard.className = 'col-md-4 col-sm-6'; 54 | 55 | productCard.innerHTML = ` 56 |
57 |
58 | ${product.name} 59 |
60 |
${product.name}
61 |
$${product.price.toFixed(2)}
62 | 65 |
66 | `; 67 | 68 | productContainer.appendChild(productCard); 69 | }); 70 | 71 | // Add click events to all add-to-cart buttons 72 | document.querySelectorAll('.btn-add-to-cart').forEach(button => { 73 | button.addEventListener('click', addToCart); 74 | }); 75 | } 76 | 77 | // Add to cart function 78 | function addToCart(e) { 79 | const button = e.target; 80 | const productId = parseInt(button.getAttribute('data-product-id')); 81 | 82 | // Find the product 83 | const product = products.find(p => p.id === productId); 84 | 85 | if (product) { 86 | // Add to cart array 87 | cartItems.push(product); 88 | 89 | // Update cart badge with animation 90 | updateCartBadge(); 91 | 92 | // Button feedback animation 93 | button.innerText = "Added ✓"; 94 | button.classList.add('added'); 95 | 96 | // Reset button after 1 second 97 | setTimeout(() => { 98 | button.innerText = "Add to Cart"; 99 | button.classList.remove('added'); 100 | }, 1000); 101 | } 102 | } 103 | 104 | // Update cart badge 105 | function updateCartBadge() { 106 | cartBadge.textContent = cartItems.length; 107 | 108 | // Add animation class 109 | cartBadge.classList.add('cart-badge-update'); 110 | 111 | // Remove animation class after animation completes 112 | setTimeout(() => { 113 | cartBadge.classList.remove('cart-badge-update'); 114 | }, 500); 115 | } 116 | 117 | // Initialize the page 118 | renderProducts(); 119 | }); -------------------------------------------------------------------------------- /24/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | // DOM Elements 3 | const fetchButton = document.getElementById("fetchProducts"); 4 | const productContainer = document.getElementById("productContainer"); 5 | const loadingSpinner = document.getElementById("loadingSpinner"); 6 | const errorContainer = document.getElementById("errorContainer"); 7 | 8 | // Event listener for fetch button 9 | fetchButton.addEventListener("click", fetchProducts); 10 | 11 | // Function to fetch products from API 12 | async function fetchProducts() { 13 | // Show loading spinner and hide any previous errors 14 | loadingSpinner.style.display = "block"; 15 | errorContainer.style.display = "none"; 16 | productContainer.innerHTML = ""; 17 | 18 | try { 19 | // Fetch data from API 20 | const response = await fetch("https://fakestoreapi.com/products?limit=5"); 21 | 22 | // Check if the response is ok 23 | if (!response.ok) { 24 | throw new Error(`HTTP error! Status: ${response.status}`); 25 | } 26 | 27 | // Parse JSON response 28 | const products = await response.json(); 29 | 30 | // Display products 31 | displayProducts(products); 32 | } catch (error) { 33 | // Handle errors 34 | console.error("Error fetching products:", error); 35 | errorContainer.textContent = `Failed to fetch products: ${error.message}`; 36 | errorContainer.style.display = "block"; 37 | } finally { 38 | // Hide loading spinner 39 | loadingSpinner.style.display = "none"; 40 | } 41 | } 42 | 43 | // Function to display products 44 | function displayProducts(products) { 45 | // Clear previous products 46 | productContainer.innerHTML = ""; 47 | 48 | // Check if products array is empty 49 | if (!products || products.length === 0) { 50 | errorContainer.textContent = "No products found."; 51 | errorContainer.style.display = "block"; 52 | return; 53 | } 54 | 55 | // Create HTML for each product 56 | products.forEach((product) => { 57 | // Create stars based on rating 58 | const rating = product.rating.rate; 59 | const fullStars = Math.floor(rating); 60 | const hasHalfStar = rating % 1 >= 0.5; 61 | 62 | let starsHTML = ""; 63 | for (let i = 0; i < fullStars; i++) { 64 | starsHTML += ''; 65 | } 66 | if (hasHalfStar) { 67 | starsHTML += ''; 68 | } 69 | const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0); 70 | for (let i = 0; i < emptyStars; i++) { 71 | starsHTML += ''; 72 | } 73 | 74 | // Create product card 75 | const productCard = document.createElement("div"); 76 | productCard.className = "col-md-4 mb-4"; 77 | productCard.innerHTML = ` 78 |
79 |
80 | ${ 81 | product.title 82 | } 83 |
84 |
85 |
${product.title}
86 |

${product.description}

87 |
88 | $${product.price.toFixed(2)} 89 |
90 | ${starsHTML} 91 | (${product.rating.count}) 92 |
93 |
94 | 95 |
96 |
97 | `; 98 | 99 | productContainer.appendChild(productCard); 100 | }); 101 | } 102 | }); 103 | -------------------------------------------------------------------------------- /48/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | User Mention Auto Complete 7 | 8 | 9 | 13 | 14 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 |
26 |

27 | User Mention System 28 |

29 |
30 |
31 |
32 | 35 |
36 | 42 | 43 | 44 |
45 |
46 | Suggested Users 47 |
48 |
49 | 50 |
51 |
52 |
53 | Tip: Use up/down arrow keys to navigate suggestions 56 |
57 | 58 | 61 | 62 |
63 | 64 |
65 |
Previous Comments:
66 |
67 |

68 | No comments yet. Be the first to post! 69 |

70 |
71 |
72 |
73 |
74 | 75 |
76 |
77 |
Available Users
78 |
79 |
80 |
81 | 82 |
83 |
84 |
85 | 86 |
87 |
88 | 93 | Watch Instagram Video 94 | 95 | 100 | Visit YouTube Channel 101 | 102 |
103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /25/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function() { 2 | // DOM Elements 3 | const addressSearch = document.getElementById("addressSearch"); 4 | const searchBtn = document.getElementById("searchBtn"); 5 | const addressSuggestions = document.getElementById("addressSuggestions"); 6 | const streetAddress = document.getElementById("streetAddress"); 7 | const city = document.getElementById("city"); 8 | const state = document.getElementById("state"); 9 | const zipCode = document.getElementById("zipCode"); 10 | const addressForm = document.getElementById("addressForm"); 11 | 12 | // Mock address database (in a real app, this would come from an API) 13 | const addressDatabase = [ 14 | { 15 | id: 1, 16 | street: "123 Main St", 17 | city: "New York", 18 | state: "NY", 19 | zipCode: "10001" 20 | }, 21 | { 22 | id: 2, 23 | street: "456 Park Ave", 24 | city: "Los Angeles", 25 | state: "CA", 26 | zipCode: "90001" 27 | }, 28 | { 29 | id: 3, 30 | street: "789 Oak Dr", 31 | city: "Chicago", 32 | state: "IL", 33 | zipCode: "60007" 34 | }, 35 | { 36 | id: 4, 37 | street: "101 Pine St", 38 | city: "Seattle", 39 | state: "WA", 40 | zipCode: "98101" 41 | }, 42 | { 43 | id: 5, 44 | street: "202 Maple Rd", 45 | city: "Austin", 46 | state: "TX", 47 | zipCode: "73301" 48 | } 49 | ]; 50 | 51 | // Event listeners 52 | searchBtn.addEventListener("click", searchAddresses); 53 | addressSearch.addEventListener("keyup", function(e) { 54 | if (e.key === "Enter") { 55 | searchAddresses(); 56 | } 57 | }); 58 | 59 | addressForm.addEventListener("submit", function(e) { 60 | e.preventDefault(); 61 | alert("Address submitted successfully!"); 62 | }); 63 | 64 | // Search addresses function 65 | function searchAddresses() { 66 | const query = addressSearch.value.toLowerCase().trim(); 67 | 68 | // Clear previous suggestions 69 | addressSuggestions.innerHTML = ""; 70 | 71 | // Return if query is empty 72 | if (query === "") return; 73 | 74 | // Filter addresses based on search query 75 | const filteredAddresses = addressDatabase.filter(address => 76 | address.street.toLowerCase().includes(query) || 77 | address.city.toLowerCase().includes(query) || 78 | address.state.toLowerCase().includes(query) || 79 | address.zipCode.includes(query) 80 | ); 81 | 82 | // Display suggestions 83 | if (filteredAddresses.length > 0) { 84 | filteredAddresses.forEach(address => { 85 | const suggestionItem = document.createElement("div"); 86 | suggestionItem.className = "suggestion-item"; 87 | suggestionItem.textContent = `${address.street}, ${address.city}, ${address.state} ${address.zipCode}`; 88 | 89 | suggestionItem.addEventListener("click", function() { 90 | fillAddressForm(address); 91 | addressSuggestions.innerHTML = ""; // Clear suggestions after selection 92 | }); 93 | 94 | addressSuggestions.appendChild(suggestionItem); 95 | }); 96 | } else { 97 | const noResults = document.createElement("div"); 98 | noResults.className = "no-results"; 99 | noResults.textContent = "No addresses found"; 100 | addressSuggestions.appendChild(noResults); 101 | } 102 | } 103 | 104 | // Fill the address form with selected address 105 | function fillAddressForm(address) { 106 | streetAddress.value = address.street; 107 | city.value = address.city; 108 | state.value = address.state; 109 | zipCode.value = address.zipCode; 110 | 111 | // Highlight the fields that were auto-filled 112 | [streetAddress, city, state, zipCode].forEach(field => { 113 | field.classList.add("auto-filled"); 114 | 115 | // Remove highlight after a delay 116 | setTimeout(() => { 117 | field.classList.remove("auto-filled"); 118 | }, 1500); 119 | }); 120 | } 121 | }); -------------------------------------------------------------------------------- /23/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | // DOM Elements 3 | const couponCodeInput = document.getElementById("couponCodeInput"); 4 | const applyCouponBtn = document.getElementById("applyCoupon"); 5 | const couponMessage = document.getElementById("couponMessage"); 6 | const discountRow = document.getElementById("discountRow"); 7 | const discountElement = document.getElementById("discount"); 8 | const subtotalElement = document.getElementById("subtotal"); 9 | const shippingElement = document.getElementById("shipping"); 10 | const totalElement = document.getElementById("total"); 11 | 12 | // Cart data 13 | let cart = { 14 | subtotal: 100.0, 15 | shipping: 5.0, 16 | discount: 0, 17 | total: 105.0, 18 | appliedCoupon: null, 19 | }; 20 | 21 | // Available coupon codes with their discounts 22 | const coupons = { 23 | WELCOME10: { 24 | type: "percentage", 25 | value: 10, 26 | description: "10% off your order", 27 | }, 28 | SAVE20: { 29 | type: "percentage", 30 | value: 20, 31 | description: "20% off your order", 32 | }, 33 | FREESHIP: { 34 | type: "shipping", 35 | value: 100, 36 | description: "Free shipping on your order", 37 | }, 38 | FLAT25: { 39 | type: "fixed", 40 | value: 25, 41 | description: "$25 off your order", 42 | }, 43 | }; 44 | 45 | // Initialize display 46 | updateCartDisplay(); 47 | 48 | // Event listeners 49 | applyCouponBtn.addEventListener("click", applyCoupon); 50 | couponCodeInput.addEventListener("keyup", function (event) { 51 | if (event.key === "Enter") { 52 | applyCoupon(); 53 | } 54 | }); 55 | 56 | function applyCoupon() { 57 | const couponCode = couponCodeInput.value.trim().toUpperCase(); 58 | 59 | // Reset previous coupon 60 | resetCoupon(); 61 | 62 | // Empty coupon code check 63 | if (!couponCode) { 64 | showCouponMessage("Please enter a coupon code", "error"); 65 | return; 66 | } 67 | 68 | // Check if coupon exists 69 | if (!coupons[couponCode]) { 70 | showCouponMessage("Invalid coupon code", "error"); 71 | return; 72 | } 73 | 74 | // Apply the coupon 75 | const coupon = coupons[couponCode]; 76 | cart.appliedCoupon = couponCode; 77 | 78 | // Calculate discount based on coupon type 79 | switch (coupon.type) { 80 | case "percentage": 81 | cart.discount = ((cart.subtotal * coupon.value) / 100).toFixed(2); 82 | break; 83 | case "fixed": 84 | cart.discount = Math.min(coupon.value, cart.subtotal).toFixed(2); 85 | break; 86 | case "shipping": 87 | cart.discount = Math.min(cart.shipping, coupon.value).toFixed(2); 88 | break; 89 | } 90 | 91 | // Update cart total 92 | updateCartTotal(); 93 | 94 | // Update UI 95 | updateCartDisplay(); 96 | showCouponMessage(`Coupon applied: ${coupon.description}`, "success"); 97 | } 98 | 99 | function resetCoupon() { 100 | cart.discount = 0; 101 | cart.appliedCoupon = null; 102 | couponMessage.textContent = ""; 103 | couponMessage.className = "coupon-message"; 104 | updateCartTotal(); 105 | } 106 | 107 | function updateCartTotal() { 108 | cart.total = ( 109 | parseFloat(cart.subtotal) + 110 | parseFloat(cart.shipping) - 111 | parseFloat(cart.discount) 112 | ).toFixed(2); 113 | } 114 | 115 | function updateCartDisplay() { 116 | subtotalElement.textContent = `$${cart.subtotal.toFixed(2)}`; 117 | shippingElement.textContent = `$${cart.shipping.toFixed(2)}`; 118 | totalElement.textContent = `$${cart.total}`; 119 | 120 | if (cart.discount > 0) { 121 | discountElement.textContent = `-$${cart.discount}`; 122 | discountRow.style.display = "flex"; 123 | } else { 124 | discountRow.style.display = "none"; 125 | } 126 | } 127 | 128 | function showCouponMessage(message, type) { 129 | couponMessage.textContent = message; 130 | couponMessage.className = `coupon-message ${type}`; 131 | } 132 | }); 133 | -------------------------------------------------------------------------------- /47/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | // DOM Elements 3 | const textInput = document.getElementById('textInput'); 4 | const displayArea = document.getElementById('displayArea'); 5 | const colorOptions = document.querySelectorAll('.color-option'); 6 | const hashtagList = document.getElementById('hashtagList'); 7 | 8 | // Current settings 9 | let currentColor = 'primary'; 10 | 11 | // Initialize 12 | textInput.focus(); 13 | 14 | // Event listener for input 15 | textInput.addEventListener('input', function() { 16 | processText(); 17 | }); 18 | 19 | // Event listeners for color options 20 | colorOptions.forEach(option => { 21 | option.addEventListener('click', function() { 22 | // Remove active class from all options 23 | colorOptions.forEach(opt => opt.classList.remove('active')); 24 | 25 | // Add active class to selected option 26 | this.classList.add('active'); 27 | 28 | // Update current color 29 | currentColor = this.getAttribute('data-color'); 30 | 31 | // Reprocess text with the new color 32 | processText(); 33 | }); 34 | }); 35 | 36 | // Main function to process text and highlight hashtags 37 | function processText() { 38 | const text = textInput.value; 39 | 40 | if (text.trim() === '') { 41 | displayArea.innerHTML = 'Your highlighted text will appear here...'; 42 | hashtagList.innerHTML = '

No hashtags detected yet.

'; 43 | return; 44 | } 45 | 46 | // Find all hashtags in the text 47 | const hashtags = findHashtags(text); 48 | 49 | // Highlight hashtags in the display area 50 | let processedText = text; 51 | 52 | // Sort hashtags by length (to avoid replacing partial hashtags) 53 | const sortedHashtags = [...hashtags].sort((a, b) => b.length - a.length); 54 | 55 | sortedHashtags.forEach(hashtag => { 56 | // Create a regex that matches the hashtag but not when it's part of a larger word 57 | const regex = new RegExp(`${escapeRegExp(hashtag)}\\b`, 'g'); 58 | 59 | // Replace the hashtag with a highlighted version 60 | processedText = processedText.replace( 61 | regex, 62 | `${hashtag}` 63 | ); 64 | }); 65 | 66 | // Replace line breaks with
for HTML display 67 | processedText = processedText.replace(/\n/g, '
'); 68 | 69 | // Update display area 70 | displayArea.innerHTML = processedText; 71 | 72 | // Update hashtag stats 73 | updateHashtagStats(hashtags); 74 | } 75 | 76 | // Function to find all hashtags in a text 77 | function findHashtags(text) { 78 | const hashtagRegex = /#[a-zA-Z0-9_]+\b/g; 79 | const matches = text.match(hashtagRegex); 80 | return matches || []; 81 | } 82 | 83 | // Function to escape special regex characters in a string 84 | function escapeRegExp(string) { 85 | return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); 86 | } 87 | 88 | // Function to update hashtag statistics 89 | function updateHashtagStats(hashtags) { 90 | if (hashtags.length === 0) { 91 | hashtagList.innerHTML = '

No hashtags detected yet.

'; 92 | return; 93 | } 94 | 95 | // Count occurrences of each hashtag 96 | const hashtagCounts = {}; 97 | hashtags.forEach(hashtag => { 98 | hashtagCounts[hashtag] = (hashtagCounts[hashtag] || 0) + 1; 99 | }); 100 | 101 | // Create HTML for hashtag list 102 | let listHTML = ''; 103 | 104 | // Sort hashtags by count (descending) 105 | const sortedHashtags = Object.keys(hashtagCounts).sort((a, b) => 106 | hashtagCounts[b] - hashtagCounts[a] 107 | ); 108 | 109 | sortedHashtags.forEach(hashtag => { 110 | listHTML += ` 111 |
112 | ${hashtag} 113 | ${hashtagCounts[hashtag]} 114 |
115 | `; 116 | }); 117 | 118 | // Update hashtag list 119 | hashtagList.innerHTML = listHTML; 120 | } 121 | }); -------------------------------------------------------------------------------- /40/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | // Form element and success message 3 | const form = document.getElementById('celebrationForm'); 4 | const successMessage = document.getElementById('successMessage'); 5 | const confettiContainer = document.getElementById('confetti-container'); 6 | 7 | // Confetti colors 8 | const colors = [ 9 | '#f94144', '#f3722c', '#f8961e', '#f9c74f', 10 | '#90be6d', '#43aa8b', '#4d908e', '#577590', 11 | '#277da1', '#ff66c4', '#9b5de5' 12 | ]; 13 | 14 | // Confetti shapes 15 | const shapes = ['square', 'triangle', 'circle']; 16 | 17 | // Form submission event 18 | form.addEventListener('submit', function(event) { 19 | event.preventDefault(); 20 | 21 | // Show success message 22 | successMessage.style.display = 'block'; 23 | 24 | // Create confetti celebration 25 | createConfetti(); 26 | 27 | // Reset form after delay 28 | setTimeout(() => { 29 | form.reset(); 30 | }, 3000); 31 | }); 32 | 33 | // Function to create confetti 34 | function createConfetti() { 35 | // Number of confetti pieces 36 | const confettiCount = 150; 37 | 38 | // Clear any existing confetti 39 | confettiContainer.innerHTML = ''; 40 | 41 | // Create confetti pieces 42 | for (let i = 0; i < confettiCount; i++) { 43 | setTimeout(() => { 44 | const confetti = document.createElement('div'); 45 | 46 | // Random position, color, shape and size 47 | const size = Math.random() * 10 + 6; // Between 6-16px 48 | const shape = shapes[Math.floor(Math.random() * shapes.length)]; 49 | const color = colors[Math.floor(Math.random() * colors.length)]; 50 | const left = Math.random() * 100; // Random horizontal position 51 | 52 | // Apply styles 53 | confetti.className = `confetti ${shape}`; 54 | confetti.style.width = `${size}px`; 55 | confetti.style.height = `${size}px`; 56 | confetti.style.backgroundColor = color; 57 | confetti.style.left = `${left}%`; 58 | confetti.style.top = '-20px'; 59 | confetti.style.opacity = '1'; 60 | 61 | // Set random rotation 62 | const rotation = Math.random() * 360; 63 | confetti.style.transform = `rotate(${rotation}deg)`; 64 | 65 | // Add to container 66 | confettiContainer.appendChild(confetti); 67 | 68 | // Animate falling 69 | animateConfetti(confetti); 70 | }, i * 20); // Stagger creation for better effect 71 | } 72 | } 73 | 74 | // Function to animate a single confetti piece 75 | function animateConfetti(element) { 76 | // Random horizontal movement 77 | const horizontalMovement = (Math.random() - 0.5) * 15; 78 | 79 | // Set random fall speed 80 | const fallSpeed = Math.random() * 3 + 2; 81 | 82 | // Set random spin speed 83 | const spinSpeed = Math.random() * 15 - 7.5; 84 | 85 | // Starting position 86 | let top = -20; 87 | let rotation = Math.random() * 360; 88 | let opacity = 1; 89 | let horizontalPos = parseFloat(element.style.left); 90 | 91 | // Animation function 92 | function fall() { 93 | // Update position 94 | top += fallSpeed; 95 | rotation += spinSpeed; 96 | horizontalPos += horizontalMovement / 10; 97 | 98 | // Update element style 99 | element.style.top = `${top}px`; 100 | element.style.transform = `rotate(${rotation}deg)`; 101 | element.style.left = `${horizontalPos}%`; 102 | 103 | // Fade out as it falls past 70% of screen height 104 | if (top > window.innerHeight * 0.7) { 105 | opacity -= 0.03; 106 | element.style.opacity = opacity; 107 | } 108 | 109 | // Continue animation until off-screen or fully transparent 110 | if (top < window.innerHeight + 100 && opacity > 0) { 111 | requestAnimationFrame(fall); 112 | } else { 113 | // Remove confetti from DOM when animation completes 114 | if (element.parentNode) { 115 | element.parentNode.removeChild(element); 116 | } 117 | } 118 | } 119 | 120 | // Start animation 121 | requestAnimationFrame(fall); 122 | } 123 | }); -------------------------------------------------------------------------------- /50/style.css: -------------------------------------------------------------------------------- 1 | /* Main discussion list styling */ 2 | .discussion-list { 3 | display: flex; 4 | flex-direction: column; 5 | gap: 20px; 6 | } 7 | 8 | .discussion-item { 9 | padding: 15px; 10 | border-radius: 8px; 11 | background-color: #f8f9fa; 12 | border-left: 3px solid #e9ecef; 13 | transition: border-color 0.2s ease; 14 | } 15 | 16 | .discussion-item:hover { 17 | border-left-color: #007bff; 18 | } 19 | 20 | .discussion-header { 21 | display: flex; 22 | align-items: center; 23 | margin-bottom: 10px; 24 | } 25 | 26 | .avatar-small { 27 | width: 32px; 28 | height: 32px; 29 | border-radius: 50%; 30 | margin-right: 10px; 31 | object-fit: cover; 32 | } 33 | 34 | .username { 35 | font-weight: 600; 36 | color: #007bff; 37 | margin-right: 10px; 38 | cursor: pointer; 39 | position: relative; 40 | display: inline-block; 41 | transition: color 0.2s ease; 42 | } 43 | 44 | .username:hover { 45 | color: #0056b3; 46 | text-decoration: underline; 47 | } 48 | 49 | .timestamp { 50 | font-size: 12px; 51 | } 52 | 53 | .discussion-content { 54 | margin-bottom: 10px; 55 | line-height: 1.5; 56 | } 57 | 58 | .discussion-footer { 59 | display: flex; 60 | gap: 15px; 61 | } 62 | 63 | .action-link { 64 | font-size: 14px; 65 | color: #6c757d; 66 | cursor: pointer; 67 | transition: color 0.2s ease; 68 | } 69 | 70 | .action-link:hover { 71 | color: #007bff; 72 | } 73 | 74 | /* Profile card styling */ 75 | .profile-card { 76 | position: absolute; 77 | width: 300px; 78 | border-radius: 8px; 79 | background-color: white; 80 | box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); 81 | z-index: 1000; 82 | opacity: 0; 83 | visibility: hidden; 84 | pointer-events: none; 85 | transform: translateY(10px); 86 | transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; 87 | } 88 | 89 | .profile-card.visible { 90 | opacity: 1; 91 | visibility: visible; 92 | transform: translateY(0); 93 | pointer-events: auto; 94 | } 95 | 96 | .profile-card-header { 97 | padding: 20px; 98 | border-radius: 8px 8px 0 0; 99 | position: relative; 100 | } 101 | 102 | .profile-card-header.blue-gradient { 103 | background: linear-gradient(135deg, #3a7bd5, #3498db); 104 | } 105 | 106 | .profile-card-header.green-gradient { 107 | background: linear-gradient(135deg, #11998e, #38ef7d); 108 | } 109 | 110 | .profile-card-header.purple-gradient { 111 | background: linear-gradient(135deg, #9733ee, #da22ff); 112 | } 113 | 114 | .profile-card-header.orange-gradient { 115 | background: linear-gradient(135deg, #f46b45, #eea849); 116 | } 117 | 118 | .profile-avatar { 119 | width: 80px; 120 | height: 80px; 121 | border-radius: 50%; 122 | border: 4px solid white; 123 | position: absolute; 124 | bottom: -40px; 125 | left: 20px; 126 | object-fit: cover; 127 | } 128 | 129 | .profile-card-body { 130 | padding: 55px 20px 20px; 131 | } 132 | 133 | .profile-name { 134 | font-size: 20px; 135 | font-weight: 600; 136 | margin-bottom: 3px; 137 | } 138 | 139 | .profile-username { 140 | font-size: 14px; 141 | color: #6c757d; 142 | margin-bottom: 15px; 143 | } 144 | 145 | .profile-bio { 146 | font-size: 14px; 147 | color: #495057; 148 | margin-bottom: 15px; 149 | line-height: 1.5; 150 | } 151 | 152 | .profile-stats { 153 | display: flex; 154 | justify-content: space-between; 155 | margin-bottom: 15px; 156 | } 157 | 158 | .stat-item { 159 | text-align: center; 160 | } 161 | 162 | .stat-value { 163 | font-weight: 600; 164 | font-size: 16px; 165 | display: block; 166 | } 167 | 168 | .stat-label { 169 | font-size: 12px; 170 | color: #6c757d; 171 | } 172 | 173 | .profile-card-footer { 174 | padding: 15px 20px; 175 | border-top: 1px solid #e9ecef; 176 | text-align: center; 177 | } 178 | 179 | .profile-card-footer .btn { 180 | border-radius: 50px; 181 | padding: 5px 15px; 182 | font-size: 14px; 183 | } 184 | 185 | .arrow-up { 186 | position: absolute; 187 | width: 0; 188 | height: 0; 189 | border-left: 10px solid transparent; 190 | border-right: 10px solid transparent; 191 | border-bottom: 10px solid white; 192 | top: -10px; 193 | left: 20px; 194 | } -------------------------------------------------------------------------------- /41/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | // DOM Elements 3 | const tagInput = document.getElementById('tagInput'); 4 | const tagsContainer = document.getElementById('tagsContainer'); 5 | const selectedTags = document.getElementById('selectedTags'); 6 | const noTagsMessage = document.getElementById('noTagsMessage'); 7 | 8 | // Store all tags 9 | let tags = []; 10 | 11 | // Focus input on container click 12 | document.querySelector('.tag-input-container').addEventListener('click', function() { 13 | tagInput.focus(); 14 | }); 15 | 16 | // Add tag on Enter, comma, or space 17 | tagInput.addEventListener('keydown', function(e) { 18 | if ((e.key === 'Enter' || e.key === ',' || e.key === ' ') && tagInput.value.trim() !== '') { 19 | e.preventDefault(); 20 | addTag(); 21 | } 22 | 23 | // Remove last tag on Backspace if input is empty 24 | if (e.key === 'Backspace' && tagInput.value === '' && tags.length > 0) { 25 | removeTag(tags[tags.length - 1]); 26 | } 27 | }); 28 | 29 | // Also add tag on blur (when input loses focus) 30 | tagInput.addEventListener('blur', function() { 31 | if (tagInput.value.trim() !== '') { 32 | addTag(); 33 | } 34 | }); 35 | 36 | // Add tag function 37 | function addTag() { 38 | // Clean up tag text - remove commas and trim 39 | let tagText = tagInput.value.trim(); 40 | tagText = tagText.replace(/,/g, '').trim(); 41 | 42 | if (tagText === '') return; // Skip empty tags 43 | 44 | // Check for duplicates 45 | if (tags.includes(tagText)) { 46 | highlightTag(tagText); 47 | tagInput.value = ''; 48 | return; 49 | } 50 | 51 | // Add to array 52 | tags.push(tagText); 53 | 54 | // Create tag element (YouTube style) 55 | const tagElement = document.createElement('div'); 56 | tagElement.className = 'tag'; 57 | tagElement.innerHTML = ` 58 | ${tagText} 59 | 60 | 61 | 62 | `; 63 | 64 | // Add delete functionality 65 | const deleteBtn = tagElement.querySelector('.tag-delete'); 66 | deleteBtn.addEventListener('click', function(e) { 67 | e.stopPropagation(); // Prevent bubble up to container 68 | const tagToRemove = this.getAttribute('data-tag'); 69 | removeTag(tagToRemove); 70 | }); 71 | 72 | // Add to container before the input 73 | tagsContainer.appendChild(tagElement); 74 | 75 | // Clear input 76 | tagInput.value = ''; 77 | 78 | // Update display 79 | updateSelectedTags(); 80 | } 81 | 82 | // Remove tag function 83 | function removeTag(tagText) { 84 | // Find index of tag 85 | const index = tags.indexOf(tagText); 86 | if (index !== -1) { 87 | // Remove from array 88 | tags.splice(index, 1); 89 | 90 | // Find and remove element with animation 91 | const tagElements = document.querySelectorAll('.tag'); 92 | tagElements.forEach(el => { 93 | if (el.querySelector('.tag-text').textContent === tagText) { 94 | el.classList.add('removing'); 95 | setTimeout(() => { 96 | el.remove(); 97 | }, 150); 98 | } 99 | }); 100 | 101 | updateSelectedTags(); 102 | } 103 | } 104 | 105 | // Highlight existing tag 106 | function highlightTag(tagText) { 107 | const tagElements = document.querySelectorAll('.tag'); 108 | tagElements.forEach(el => { 109 | if (el.querySelector('.tag-text').textContent === tagText) { 110 | // Flash effect 111 | el.style.backgroundColor = '#ffc107'; 112 | setTimeout(() => { 113 | el.style.backgroundColor = ''; 114 | }, 600); 115 | } 116 | }); 117 | } 118 | 119 | // Update selected tags display 120 | function updateSelectedTags() { 121 | if (tags.length === 0) { 122 | noTagsMessage.style.display = 'block'; 123 | selectedTags.innerHTML = ''; 124 | selectedTags.appendChild(noTagsMessage); 125 | } else { 126 | noTagsMessage.style.display = 'none'; 127 | 128 | // Create a badge for each tag 129 | selectedTags.innerHTML = tags.map(tag => 130 | `${tag}` 131 | ).join(''); 132 | } 133 | } 134 | }); --------------------------------------------------------------------------------