You are currently offline. Please check your internet connection.
15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /day3-progressive-web-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day3-progressive-web-app/public/serviceWorker.js: -------------------------------------------------------------------------------- 1 | const CACHE_NAME = 'drag-drop-cache'; 2 | const OFFLINE_URL = '/offline.html' 3 | const CAHCE_URLS = [ 4 | '/', 5 | '/index.html', 6 | OFFLINE_URL 7 | ] 8 | 9 | 10 | // eslint-disable-next-line no-restricted-globals 11 | self.addEventListener('install', (event) => { 12 | event.waitUntil( 13 | caches.open(CACHE_NAME) 14 | .then((cache) => { 15 | return cache.addAll(CAHCE_URLS); 16 | }) 17 | ); 18 | }); 19 | 20 | // eslint-disable-next-line no-restricted-globals 21 | self.addEventListener('fetch', (event) => { 22 | 23 | if (event.request.mode === 'navigate') { 24 | // Handle navigation requests 25 | event.respondWith( 26 | fetch(event.request) 27 | .catch(() => caches.match(OFFLINE_URL)) 28 | ); 29 | 30 | } else { 31 | event.respondWith( 32 | caches.match(event.request) 33 | .then((response) => { 34 | if (response) { 35 | return response; 36 | } 37 | return fetch(event.request); 38 | }) 39 | ); 40 | } 41 | 42 | }); 43 | 44 | // Activate event - clean up old caches 45 | // eslint-disable-next-line no-restricted-globals 46 | self.addEventListener('activate', (event) => { 47 | event.waitUntil(caches.keys().then((cacheNames) => { 48 | return Promise.all( 49 | cacheNames.filter((cacheName) => cacheName !== CACHE_NAME) 50 | .map((cacheName) => caches.delete(cacheName)) 51 | ); 52 | })) 53 | }) -------------------------------------------------------------------------------- /day3-progressive-web-app/src/App.css: -------------------------------------------------------------------------------- 1 | .board { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | padding: 20px; 6 | min-height: 100vh; 7 | background-color: #f0f0f0; /* added a light gray background */ 8 | } 9 | 10 | .columns { 11 | display: flex; 12 | flex-wrap: wrap; 13 | justify-content: center; 14 | margin-top: 50px; 15 | } 16 | 17 | 18 | .column { 19 | background-color: #f7f7f7; 20 | border: 1px solid #ddd; 21 | border-radius: 5px; 22 | padding: 10px; 23 | margin: 10px; 24 | width: 250px; 25 | display: flex; 26 | flex-direction: column; 27 | justify-content: space-between; 28 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* added a subtle box shadow */ 29 | } 30 | 31 | .column h2 { 32 | margin-top: 0; 33 | font-weight: bold; /* made the column title bold */ 34 | } 35 | 36 | .column h2 .heading { 37 | color: lightcoral; 38 | } 39 | 40 | .column h2 .count { 41 | color: darkgray; 42 | margin-left: 10px; 43 | } 44 | 45 | 46 | .list-parent { 47 | padding: 0; 48 | } 49 | 50 | .item { 51 | list-style-type: none; 52 | background-color: #fff; 53 | padding: 10px; 54 | border: 1px solid #ddd; 55 | border-radius: 5px; 56 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 57 | margin-block: 5px; 58 | cursor: move; /* a/* added a move cursor to indicate draggability */ 59 | } 60 | 61 | .item:last-child { 62 | border-bottom: none; 63 | } 64 | 65 | .new-item-input-form { 66 | margin-top: 5rem; 67 | } 68 | 69 | .new-item-input { 70 | padding: 10px; 71 | border: 1px solid #ccc; 72 | border-radius: 5px; 73 | width: 100%; 74 | box-sizing: border-box; /* added box-sizing to prevent overflow */ 75 | } 76 | 77 | .add-item-btn:hover { 78 | background-color: #3e8e41; 79 | } 80 | 81 | 82 | .add-column-btn { 83 | background-color: #4CAF50; 84 | color: #fff; 85 | border: none; 86 | padding: 10px 20px; 87 | font-size: 16px; 88 | cursor: pointer; 89 | transition: background-color 0.2s; /* added a transition for the button hover effect */ 90 | position: absolute; 91 | right: 20px; 92 | } 93 | 94 | .add-column-btn:hover { 95 | background-color: #3e8e41; 96 | } 97 | 98 | /* added animation for dragging and dropping */ 99 | .dragging { 100 | opacity: 0.3; 101 | transform: scale(0); 102 | transition: transform 0.2s, opacity 0.2s; 103 | } 104 | 105 | .dropping { 106 | transform: scale(1.1); 107 | transition: transform 0.2s; 108 | } -------------------------------------------------------------------------------- /day3-progressive-web-app/src/App.js: -------------------------------------------------------------------------------- 1 | import { Fragment, useState } from 'react'; 2 | import { Column } from './Column'; 3 | import './App.css'; 4 | 5 | function App() { 6 | const [columns, setColumns] = useState({ 7 | column1: ['item1', 'item2'], 8 | column2: ['item3', 'item4'] 9 | }); 10 | 11 | const swapItems = (fromColumn, fromIndex, toColumn, toIndex) => { 12 | const fromData = columns[fromColumn]; 13 | const toData = columns[toColumn]; 14 | 15 | if (fromColumn === toColumn) { 16 | [fromData[toIndex], fromData[fromIndex]] = [fromData[fromIndex], fromData[toIndex]]; 17 | } else { 18 | const [item] = fromData.splice(fromIndex, 1); 19 | toData.splice(toIndex, 0, item); 20 | } 21 | 22 | setColumns((prev) => ({ 23 | ...prev, 24 | [fromColumn]: fromData, 25 | [toColumn]: toData 26 | })); 27 | }; 28 | 29 | 30 | const onDrop = (event, toColumn, toIndex) => { 31 | event.stopPropagation(); 32 | const item = event.dataTransfer.getData('item'); 33 | const fromColumn = event.dataTransfer.getData('fromColumn'); 34 | const fromIndex = parseInt(event.dataTransfer.getData('fromIndex'), 10); 35 | 36 | //animation 37 | event.target.classList.add('dropping'); 38 | setTimeout(() => { 39 | event.target.classList.remove('dropping'); 40 | }, 200); 41 | 42 | if (typeof toIndex !== 'number') { 43 | // Drop on column, append to end and remove from original column 44 | setColumns((prev) => { 45 | const newColumns = { ...prev }; 46 | newColumns[toColumn] = [...newColumns[toColumn], item]; 47 | newColumns[fromColumn] = newColumns[fromColumn].filter((_, i) => i !== fromIndex); 48 | return newColumns; 49 | }); 50 | } else { 51 | // swap if same column or swapping from another column 52 | swapItems(fromColumn, fromIndex, toColumn, toIndex); 53 | } 54 | 55 | }; 56 | 57 | const onDragOver = (event) => { 58 | event.preventDefault(); 59 | }; 60 | 61 | const onDragEnd = (event) => { 62 | event.target.classList.remove('dragging'); 63 | } 64 | 65 | const onDragStart = (event, item, fromColumn, fromIndex) => { 66 | event.dataTransfer.setData('item', item); 67 | event.dataTransfer.setData('fromColumn', fromColumn); 68 | event.dataTransfer.setData('fromIndex', fromIndex); 69 | event.target.classList.add('dragging'); 70 | }; 71 | 72 | const onCreateNewItem = (event, column) => { 73 | event.preventDefault(); 74 | const data = Object.fromEntries(new FormData(event.target)); 75 | setColumns((prev) => ({ 76 | ...prev, 77 | [column]: [...prev[column], data[column]] 78 | })); 79 | event.target.reset(); 80 | }; 81 | 82 | const createColumn = () => { 83 | const totalColumns = Object.keys(columns).length; 84 | const newColumnName = `column${totalColumns + 1}`; 85 | setColumns((prev) => ({ 86 | ...prev, 87 | [newColumnName]: [] 88 | })); 89 | }; 90 | 91 | return ( 92 |Username: {formData.username}
} 68 | {formData.email &&Email: {formData.email}
} 69 | {formData.phone &&Phone Number: {formData.phone}
} 70 |