├── Ilas ├── README.md ├── custom-countdown-project ├── index.html ├── script.js └── style.css ├── dodo-app ├── .gitignore ├── client │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── assets │ │ ├── landing.jpg │ │ ├── login.png │ │ └── logo.png │ │ ├── components │ │ └── Navbar.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── pages │ │ ├── Auth │ │ │ ├── Login.jsx │ │ │ ├── Login.module.css │ │ │ └── Register.jsx │ │ ├── Landing │ │ │ ├── Landing.jsx │ │ │ └── Landing.module.css │ │ └── ToDo │ │ │ ├── ToDoList.jsx │ │ │ └── ToDoList.module.css │ │ ├── reportWebVitals.js │ │ ├── services │ │ ├── authServices.js │ │ └── toDoServices.js │ │ ├── setupTests.js │ │ └── util │ │ ├── GetError.js │ │ └── GetUser.js ├── controllers │ ├── authController.js │ └── toDoController.js ├── middleware │ └── authJwt.js ├── models │ ├── ToDoList.js │ └── User.js ├── package-lock.json ├── package.json ├── routes │ ├── ToDoRoutes.js │ └── authRoutes.js └── server.js ├── google-oauth-passport-js ├── auth.js ├── client │ └── index.html ├── index.js ├── package-lock.json └── package.json ├── mern-tutorial ├── backend │ ├── models │ │ ├── SingleBlog.js │ │ └── index.js │ ├── package-lock.json │ ├── package.json │ └── server.js └── frontend │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.js │ ├── Pages │ ├── Blogs.jsx │ ├── Home.jsx │ └── home.css │ ├── components │ └── Navbar.jsx │ ├── index.css │ └── index.js ├── nextjs-intro ├── .eslintrc.json ├── .gitignore ├── README.md ├── next.config.js ├── package.json ├── pages │ ├── Login.js │ ├── _app.js │ ├── api │ │ └── hello.js │ ├── courses │ │ └── web-development.js │ └── index.js ├── public │ ├── favicon.ico │ ├── nature.jpg │ └── vercel.svg ├── styles │ ├── Home.module.css │ ├── Login.module.css │ └── globals.css └── yarn.lock ├── test1 └── todo-app ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── reportWebVitals.js └── setupTests.js /Ilas: -------------------------------------------------------------------------------- 1 | https://www.ecommercetemplates.com/phphelp/ecommplus/about.asp 2 | 3 | PHP Ecommerce Plus Shopping Cart Software 4 | Our Ecommerce Plus Templates are designed to help you get a well designed ecommerce website up and running in no time at all. The ecommerce shopping cart software is available for WordPress, Dreamweaver, CSS and Responsive Design formats, all you need to do is change the template 5 | 6 | This help section is for the PHP / mySQL version of the Ecommerce Plus templates. If you have a Windows server and wish to use the ASP versions then please click here. 7 | 8 | Store Administration 9 | Full online control panel for simple admin management More details view demo 10 | Mobile friendly, tablet optimized control panel 11 | Responsive dashboard with store stats 12 | Dynamically populate product pages without the need to touch the database. 13 | Content management system integrated More details more details 14 | Password protected CSS based control panel 15 | Restrict admin pages depending on login 16 | Simple process for adding / modifying / deleting products and categories More details more details 17 | Full online order viewing by date selection and search. 18 | Product search within the admin section. 19 | Editable order details More details more details 20 | Optional Customer login for order history viewing and creating accounts. 21 | Abandoned cart email for order recovery more details more details 22 | Affiliate program included with online viewing of affiliate sales More details more details 23 | Downloadable product inventory. 24 | CSV database upload More details more details 25 | Language specific admin available More details more details 26 | Optional email notification for new orders, affiliates, reviews and customer accounts 27 | Up to 3 languages supported from the same database More details more details 28 | Turn off store with "vacation / holiday" setting more details more details 29 | In-built mailing list / newsletter feature more details more details 30 | MailChimp integration more details more details 31 | Product / category options 32 | Unlimited number of products. 33 | Table-less css layouts for category, product and detail pages more details more details 34 | Choose the order and formatting of elements on the detail page more details more details 35 | Choose the order and formatting of elements on the product page more details more details 36 | Upselling of related, bestselling, recommended products as well as suggesting products purchased by other customers More details more details 37 | Gift registry and wish lists More details more details 38 | Spry tabbed panels More details more details 39 | Show recently viewed items More details more details 40 | Product reviews and ratings feature More details more details 41 | Gift certificate feature More details more details 42 | Show multiple currencies More details more details 43 | CSS dynamic menu system More details more details 44 | Social media buttons More details more details 45 | Quick Buy feature More details more details 46 | Place products in several categories 47 | Make custom bundles / packages with individual products more details more details 48 | Rich snippets / Structured data 49 | Allow customers to filter products by keyword, price, grouping etc. 50 | Extra detail page for more detailed product descriptions with layout options. 51 | Show multiple product images. 52 | Image upload 53 | Allows for use of HTML in product descriptions to make formatting simpler More details more details 54 | Setup and assign Designers / Manufacturers / Drop Shippers to products and send them order details if required on receipt of orders More details more details 55 | Manufacturers page More details more details 56 | Donations feature More details more details 57 | Provision of coupons so clients can purchase at a discounted rate by entering their coupon code More details more details 58 | Apply discounts by product or category depending on total purchase or quantity ordered More details more details 59 | Make products storewide discount exempt 60 | Specify the number of products per page. 61 | Filter results option for products page 62 | Choice of product and category layouts, using one or multiple columns of products More details more details 63 | Optional images choice for categories. 64 | Optional category header for product pages 65 | Choice of product listing by price, id, user preference or alphabetically More details more details 66 | Product options allow for the selection of color, size etc. with price differences shown in real time - choose between drop down menus and radio buttons More details more details 67 | Product option selection can change product image displayed 68 | Products options with tool tips 69 | Date picker product option 70 | Multiple purchase feature for product options 71 | Allow clients to type in their own requirements for a particular product More details more details 72 | Product options can have their own product ID More details more details 73 | Clone products and product options for faster input. 74 | Wholesale / retail pricing depending on login More details more details 75 | Quantity pricing option More details more details 76 | Option of showing the "buy" button or an "Out of stock message". 77 | Option of maintaining a product in your inventory but not showing on the store. 78 | Stock management feature permits you to define the number of products in stock, and the store will automatically generate an "Out of stock" message once the last item in stock has been purchased More details more details 79 | Notify customer email when stock is replenished 80 | Stock management for product options More details more details 81 | Show number of products in stock on the products page 82 | Set minimum purchase total requirement More details more details 83 | Set minimum purchase quantity requirement more details more details 84 | Email to friend link option - product specific More details more details 85 | Choice of currency symbols and formatting. 86 | Change all store generated language from one place More details more details 87 | Option to remove buy / checkout buttons making the plus version compatible for other uses eg. real estate listings, online catalog etc More details more details 88 | Order categories to suit your needs. 89 | Option of showing list price / your price & you save feature. 90 | Show product ID, SKU, Manufacturer on the product pages. 91 | Shipping / checkout features 92 | Editable and flexible CCS based cart and checkout more details more details 93 | Weight based shipping by zone More details more details 94 | Flat rate shipping More details more details 95 | USPS shipping rate integration and order tracking More details more details 96 | UPS shipping and order tracking More details more details 97 | FedEx shipping and order tracking More details more details 98 | DHL shipping rates more details more details 99 | Australia Post more details more details 100 | Canada Post More details more details 101 | Soft cart feature more details more details 102 | Free shipping option (choose by country and / or total order or number of items purchased) More details more details 103 | Product exemption from free shipping 104 | Price based shipping More details more details 105 | Shipping estimator before checkout More details more details 106 | Optional Google reCaptcha More details more details 107 | Streamlined checkout process 108 | Gift wrapping choice 109 | Back order availability 110 | Saved cart for non-logged in customers 111 | Google Analytics ecommerce tracking 112 | Customer shipping carrier selector More details more details 113 | Provide a different shipping method for international customers in respect to domestic buyers. 114 | Global handling charge option. 115 | Handling charge per payment provider 116 | Handling exempt products 117 | Compatible with all major tax systems (including Canada and Australia) More details more details 118 | Complete integration with the top payment processors, and / or email notification only More details more details 119 | Manual order creation 120 | Order status look up page for customers More details more details 121 | Offer customers a tracking number. 122 | Automatic email to customers on order status change More details more details 123 | Integrates PayPal's Instant Payment Notification for secure order processing More details more details 124 | Cardinal Commerce 3D Secure system to provide Verified by VISA, Mastercard SecureCode and J/Secure functionality More details more details 125 | Email notification once an order has been placed. 126 | Printable receipt on thanks page 127 | HTML header and footer for the confirmation email 128 | Download orders to a .csv file. 129 | Print packing slips from the admin orders page. 130 | Print invoices from the admin orders page. 131 | Collect email address on checkout. 132 | Send out newsletters More details more details 133 | Filter newsletter recipients by product purchased, location, wholesaler etc. 134 | "Remember me" option for return users. 135 | Javascript and Cookie disabled detection. 136 | Block IPs or IP ranges. 137 | Search engine friendly features 138 | URL Rewriting systems for extensionless, search engine friendly URLs 139 | Per page title and meta description tags on dynamic pages 140 | Dynamic title and meta description tags 141 | Static pages available 142 | Tag products with searchable keywords 143 | ALT information for all store generated images 144 | Structured Data / Rich Snippets / schema.org support 145 | Product name or ID in page URL 146 | Product name in

tags 147 | Lightweight, fast loading pages. 148 | Design options 149 | Choice of editor - WordPress, Dreamweaver, Expression Web or design your own. 150 | Table-less css layouts for product, detail and category pages more details more details 151 | Mobile friendly features more details more details 152 | Search engine friendly options such as static pages and generated title and meta tags available More details more details 153 | Original .png files included for editing graphics in Fireworks. 154 | Global design changes made simple through Dreamweaver .dwt and .lbi files. 155 | Simple to change colors and personalize the store. 156 | Multiple CSS classes available for key display options More details more details 157 | ALT information automatically added to category and product images 158 | Aiming for XHTML 1.0 Transitional compliant and Section 508(accessibility) compliant code. 159 | General features 160 | Integrated product search page. 161 | Editable and flexible CCS based search layout more details more details 162 | Customizable filters on search page 163 | Mini search field available for all pages 164 | Built in modular fashion, allowing for free future upgrades and addition of new features. 165 | 6 month free online technical support More details more details 166 | Downloadable User Manual More details more details 167 | 30 day money back guarantee. 168 | Requirements 169 | For the PHP templates a UNIX / Linux server with a minimum of PHP 5 and a mySQL database. 170 | WordPress 3.5+, Dreamweaver 3+, or Expression Web 171 | Versions 172 | Ecommerce Plus shopping cart software in Dreamweaver version 173 | Ecommerce Plus shopping cart software in WordPress version 174 | Ecommerce Plus shopping cart software in CSS layouts and Expression Web 175 | Ecommerce Plus shopping cart software in CSS Response Design version 176 | Design your own - Generic Version 177 | Developer License 178 | BUY NOW... 179 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Web Development Projects 2 | -------------------------------------------------------------------------------- /custom-countdown-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Counter 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 |
19 | 20 |
21 | 22 | 23 |
24 | 25 |
26 |
27 | 28 | 29 | 39 | 40 | 41 | 42 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /custom-countdown-project/script.js: -------------------------------------------------------------------------------- 1 | const counterFormArea = document.querySelector ('.form-area'); 2 | const counterForm = document.getElementById ('counter-form'); 3 | const counterEl = document.getElementById ('counter'); 4 | 5 | const counterTitleEl = document.getElementById ('counter-title'); 6 | const timeElements = document.querySelectorAll ('span'); 7 | const counterResetBtn = document.getElementById ('counter-reset'); 8 | 9 | const complete = document.getElementById ('complete'); 10 | const completeInfo = document.getElementById ('complete-info'); 11 | const completeBtn = document.getElementById ('complete-button'); 12 | 13 | const datePicker = document.getElementById ('counter-date'); 14 | 15 | let countdownValue = Date; 16 | let countdownActive; 17 | 18 | const second = 1000; 19 | const minute = second * 60; 20 | const hour = minute * 60; 21 | const day = hour * 24; 22 | 23 | let title = ''; 24 | let date = ''; 25 | 26 | let today = new Date ().toISOString ().split ('T')[0]; 27 | console.log (today); 28 | 29 | datePicker.setAttribute ('min', today); 30 | 31 | function updateDom () { 32 | countdownActive = setInterval (() => { 33 | let now = new Date ().getTime (); 34 | let distance = countdownValue - now; 35 | // console.log (distance); 36 | const days = Math.floor (distance / day); 37 | const hours = Math.floor (distance % day / hour); 38 | const minutes = Math.floor (distance % hour / minute); 39 | const seconds = Math.floor (distance % minute / second); 40 | 41 | if (distance < 0) { 42 | counterEl.hidden = true; 43 | counterFormArea.hidden = true; 44 | complete.hidden = false; 45 | clearInterval (countdownActive); 46 | completeInfo.textContent = `${title} is finished on ${date}`; 47 | } else { 48 | timeElements[0].textContent = days; 49 | timeElements[1].textContent = hours; 50 | timeElements[2].textContent = minutes; 51 | timeElements[3].textContent = seconds; 52 | counterTitleEl.textContent = title; 53 | counterFormArea.hidden = true; 54 | counterEl.hidden = false; 55 | } 56 | }, 1000); 57 | } 58 | 59 | function updateCountdown (e) { 60 | e.preventDefault (); 61 | title = e.srcElement[0].value; 62 | date = e.srcElement[1].value; 63 | 64 | const savedCountdown = { 65 | title: title, 66 | date: date, 67 | }; 68 | 69 | localStorage.setItem ('countdown', JSON.stringify (savedCountdown)); 70 | 71 | console.log (title, date); 72 | if (date === '') { 73 | alert ('Please enter a date!'); 74 | } else { 75 | countdownValue = new Date (date).getTime (); 76 | console.log (countdownValue); 77 | updateDom (); 78 | } 79 | } 80 | 81 | function reset () { 82 | localStorage.removeItem ('countdown'); 83 | counterEl.hidden = true; 84 | complete.hidden = true; 85 | clearInterval (countdownActive); 86 | title = ''; 87 | date = ''; 88 | counterFormArea.hidden = false; 89 | } 90 | 91 | function restoreCountdown () { 92 | if (localStorage.getItem ('countdown')) { 93 | counterFormArea.hidden = true; 94 | let countdownData = JSON.parse (localStorage.getItem ('countdown')); 95 | title = countdownData.title; 96 | date = countdownData.date; 97 | countdownValue = new Date (date).getTime (); 98 | updateDom (); 99 | } 100 | } 101 | 102 | counterForm.addEventListener ('submit', updateCountdown); 103 | counterResetBtn.addEventListener ('click', reset); 104 | completeBtn.addEventListener ('click', reset); 105 | 106 | restoreCountdown (); 107 | -------------------------------------------------------------------------------- /custom-countdown-project/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #4c4177; 3 | background-image: linear-gradient(315deg,#4c4177 0%,#2e5470 74%); 4 | font-family: Arial, Helvetica, sans-serif; 5 | } 6 | 7 | 8 | .form-area,.counter,.complete{ 9 | padding: 20px; 10 | border-radius: 5px; 11 | box-shadow: #1d3647; 12 | background-color: white; 13 | width: fit-content; 14 | margin-left: auto; 15 | margin-right: auto; 16 | margin-top: 10%; 17 | 18 | 19 | } 20 | 21 | .form-area input{ 22 | display: block; 23 | margin: 15px; 24 | padding: 10px; 25 | margin-left: 0px; 26 | margin-right: 0px; 27 | width: 300px; 28 | } 29 | 30 | .form-area{ 31 | font-size: 14px; 32 | font-weight: bold; 33 | } 34 | 35 | button{ 36 | background-color: rgb(0, 110, 255); 37 | width: 100%; 38 | padding: 15px; 39 | border: none; 40 | color: white; 41 | font-weight: bold; 42 | font-size: 16px; 43 | border-radius: 5px; 44 | } 45 | 46 | button:hover{ 47 | background-color: rgb(0, 89, 172); 48 | cursor: pointer; 49 | } 50 | 51 | .counter h1{ 52 | text-align: center; 53 | } 54 | 55 | 56 | li{ 57 | display: inline-block; 58 | font-size: 30px; 59 | list-style-type: none; 60 | padding: 10px; 61 | text-transform: uppercase; 62 | color: rgb(27, 27, 27); 63 | } 64 | 65 | li span{ 66 | display: block; 67 | font-size: 80px; 68 | text-align: center; 69 | 70 | } 71 | 72 | 73 | .complete-title{ 74 | animation: complete 4s infinite; 75 | text-align: center; 76 | } 77 | 78 | 79 | @keyframes complete { 80 | 0%{ 81 | color: red; 82 | } 83 | 84 | 25%{ 85 | color: yellow; 86 | transform: rotate(5deg); 87 | } 88 | 89 | 50%{ 90 | color: green; 91 | transform: scale(1.2) 92 | } 93 | 94 | 75%{ 95 | color: blue; 96 | transform: rotate(-5deg); 97 | } 98 | 99 | 100%{ 100 | color: red; 101 | transform: rotate(0deg); 102 | } 103 | } 104 | 105 | 106 | -------------------------------------------------------------------------------- /dodo-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | #client dependencies 9 | /client/node_modules 10 | 11 | # testing 12 | /coverage 13 | 14 | # production 15 | /build 16 | 17 | # misc 18 | .DS_Store 19 | .env 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | 25 | npm-debug.log* 26 | yarn-debug.log* 27 | yarn-error.log* 28 | -------------------------------------------------------------------------------- /dodo-app/client/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /dodo-app/client/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /dodo-app/client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@ant-design/icons": "^5.2.6", 7 | "@testing-library/jest-dom": "^5.17.0", 8 | "@testing-library/react": "^13.4.0", 9 | "@testing-library/user-event": "^13.5.0", 10 | "antd": "^5.10.0", 11 | "axios": "^1.5.1", 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0", 14 | "react-router": "^6.16.0", 15 | "react-router-dom": "^6.16.0", 16 | "react-scripts": "5.0.1", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /dodo-app/client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodersArts/Web-Development/70835b65d16f3a2ad8615550603508000282cfb1/dodo-app/client/public/favicon.ico -------------------------------------------------------------------------------- /dodo-app/client/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /dodo-app/client/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodersArts/Web-Development/70835b65d16f3a2ad8615550603508000282cfb1/dodo-app/client/public/logo192.png -------------------------------------------------------------------------------- /dodo-app/client/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodersArts/Web-Development/70835b65d16f3a2ad8615550603508000282cfb1/dodo-app/client/public/logo512.png -------------------------------------------------------------------------------- /dodo-app/client/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /dodo-app/client/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /dodo-app/client/src/App.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --primary:rgb(0, 132, 255); 3 | --darkPrimary:rgb(4, 110, 209); 4 | --secondary:rgb(211, 233, 253); 5 | --darkSecondary:rgb(185, 214, 241); 6 | } 7 | 8 | body{ 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | 14 | nav { 15 | position: fixed; 16 | top: 0; 17 | left: 0; 18 | z-index: 100; 19 | width: 100%; 20 | background-color: white; 21 | box-shadow: 0px 0.233px 8px lightgray; 22 | display: flex; 23 | align-items: center; 24 | justify-content: space-between; 25 | padding-left: 2rem; 26 | } 27 | 28 | 29 | .logo__wrapper img{ 30 | width: 30px; 31 | } 32 | 33 | .logo__wrapper{ 34 | display: flex; 35 | align-items: center; 36 | 37 | } 38 | 39 | .logo__wrapper h4{ 40 | font-weight: bold; 41 | margin: 0px; 42 | margin-left: 10px; 43 | font-family: Arial, Helvetica, sans-serif; 44 | } 45 | .navigation-menu{ 46 | position: relative; 47 | display: flex; 48 | justify-content: space-between; 49 | align-items: center; 50 | list-style: none; 51 | padding: 0; 52 | margin: 0; 53 | padding-right: 2rem; 54 | 55 | } 56 | 57 | 58 | .navigation-menu li { 59 | position: relative; 60 | } 61 | .navigation-menu li a { 62 | position: relative; 63 | display: block; 64 | text-decoration: none; 65 | padding: 1rem 2rem; 66 | font-size: 15px; 67 | color: rgb(82, 81, 81); 68 | 69 | } 70 | 71 | .navigation-menu li a:hover:not(.activeNav){ 72 | background-color: whitesmoke; 73 | color: var(--primary); 74 | } 75 | 76 | .userInfoNav{ 77 | border: 1px solid lightgray; 78 | padding: 5px 20px; 79 | border-radius: 5px; 80 | margin-left: 10px; 81 | margin-right: 10px; 82 | display: flex; 83 | align-items: center; 84 | justify-content: space-between; 85 | cursor: pointer; 86 | font-size: 14px; 87 | } 88 | 89 | .userInfoNav img{ 90 | width: 30px; 91 | margin-right: 5px; 92 | } 93 | 94 | .activeNav{ 95 | background-color: whitesmoke; 96 | } 97 | 98 | .primaryText{ 99 | color: var(--primary); 100 | } 101 | 102 | .primaryBtn{ 103 | background-color: var(--primary); 104 | color:white; 105 | text-decoration: none; 106 | border: none; 107 | border-radius: 5px; 108 | padding: 10px 30px; 109 | margin:1rem; 110 | } 111 | 112 | 113 | 114 | .primaryBtn:hover{ 115 | background-color: var(--darkPrimary); 116 | 117 | } 118 | 119 | .secondaryBtn{ 120 | background-color: var(--secondary); 121 | color:var(--darkPrimary); 122 | text-decoration: none; 123 | border: none; 124 | border-radius: 5px; 125 | padding: 10px 30px; 126 | margin:1rem; 127 | } 128 | 129 | .secondaryBtn:hover{ 130 | background-color: var(--darkSecondary); 131 | } -------------------------------------------------------------------------------- /dodo-app/client/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {Route, Routes} from 'react-router'; 3 | import Landing from './pages/Landing/Landing'; 4 | import Login from './pages/Auth/Login'; 5 | import Register from './pages/Auth/Register'; 6 | import ToDoList from './pages/ToDo/ToDoList'; 7 | import './App.css'; 8 | import 'antd/dist/reset.css'; 9 | function App() { 10 | return ( 11 | 12 | } /> 13 | } /> 14 | } /> 15 | } /> 16 | 17 | 18 | ) 19 | } 20 | 21 | export default App -------------------------------------------------------------------------------- /dodo-app/client/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /dodo-app/client/src/assets/landing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodersArts/Web-Development/70835b65d16f3a2ad8615550603508000282cfb1/dodo-app/client/src/assets/landing.jpg -------------------------------------------------------------------------------- /dodo-app/client/src/assets/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodersArts/Web-Development/70835b65d16f3a2ad8615550603508000282cfb1/dodo-app/client/src/assets/login.png -------------------------------------------------------------------------------- /dodo-app/client/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodersArts/Web-Development/70835b65d16f3a2ad8615550603508000282cfb1/dodo-app/client/src/assets/logo.png -------------------------------------------------------------------------------- /dodo-app/client/src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import { Link, useNavigate } from 'react-router-dom' 3 | import logo from '../assets/logo.png'; 4 | import { getUserDetails } from '../util/GetUser'; 5 | import { Dropdown } from 'antd'; 6 | import avatar from '../assets/login.png'; 7 | function Navbar({active}) { 8 | const [user,setUser] = useState(""); 9 | const navigate = useNavigate(); 10 | 11 | useEffect(()=>{ 12 | const userDetails = getUserDetails(); 13 | setUser(userDetails); 14 | },[]); 15 | 16 | const handleLogout = ()=>{ 17 | localStorage.removeItem('toDoAppUser'); 18 | navigate('/login'); 19 | } 20 | 21 | const items = [ 22 | { 23 | key: '1', 24 | label: ( 25 | Logout 26 | ), 27 | }, 28 | 29 | 30 | ]; 31 | 32 | return ( 33 |
34 | 66 |
67 | ) 68 | } 69 | 70 | export default Navbar -------------------------------------------------------------------------------- /dodo-app/client/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /dodo-app/client/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import {BrowserRouter} from 'react-router-dom'; 7 | 8 | const root = ReactDOM.createRoot(document.getElementById('root')); 9 | root.render( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | // If you want to start measuring performance in your app, pass a function 18 | // to log results (for example: reportWebVitals(console.log)) 19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 20 | reportWebVitals(); 21 | -------------------------------------------------------------------------------- /dodo-app/client/src/pages/Auth/Login.jsx: -------------------------------------------------------------------------------- 1 | import React,{useState} from 'react' 2 | import styles from './Login.module.css'; 3 | import login from '../../assets/login.png'; 4 | import {Button, Input, message} from 'antd'; 5 | import { Link, useNavigate } from 'react-router-dom'; 6 | import AuthServices from '../../services/authServices'; 7 | import { getErrorMessage } from '../../util/GetError'; 8 | 9 | function Login() { 10 | const [username,setUsername] = useState(""); 11 | const [password,setPassword] = useState(""); 12 | const [loading,setLoading] = useState(false); 13 | const navigate = useNavigate(); 14 | 15 | const handleSubmit = async ()=>{ 16 | 17 | try{ 18 | setLoading(true); 19 | let data = { 20 | username, 21 | password 22 | } 23 | const response = await AuthServices.loginUser(data); 24 | console.log(response.data); 25 | localStorage.setItem('toDoAppUser',JSON.stringify(response.data)); 26 | message.success("Logged in Successfully!"); 27 | navigate('/to-do-list'); 28 | setLoading(false); 29 | }catch(err){ 30 | console.log(err); 31 | message.error(getErrorMessage(err)); 32 | setLoading(false); 33 | } 34 | } 35 | return ( 36 |
37 |
38 | .. 39 |

Login

40 |
41 | setUsername(e.target.value)} /> 45 |
46 |
47 | setPassword(e.target.value)} /> 51 |
52 |
53 | New User? Register 54 |
55 | 56 |
57 |
58 | ) 59 | } 60 | 61 | export default Login -------------------------------------------------------------------------------- /dodo-app/client/src/pages/Auth/Login.module.css: -------------------------------------------------------------------------------- 1 | .login__card{ 2 | width: 30%; 3 | margin-left: auto; 4 | margin-right: auto; 5 | margin-top: 100px; 6 | box-shadow: 0px 0.344px 12px rgb(238, 238, 238); 7 | padding: 2rem; 8 | border: 1px solid lightgray; 9 | border-radius: 5px; 10 | display: flex; 11 | justify-content: center; 12 | flex-direction: column; 13 | align-items: center; 14 | } 15 | 16 | .login__card h2{ 17 | text-align: center; 18 | font-size: 2rem; 19 | } 20 | 21 | 22 | .input__wrapper,.input__inline__wrapper{ 23 | margin-bottom: 1rem; 24 | width: 80%; 25 | 26 | } 27 | 28 | .input__inline__wrapper{ 29 | display: flex; 30 | justify-content: space-between; 31 | } 32 | 33 | 34 | .login__card img{ 35 | width: 100px; 36 | } 37 | 38 | 39 | .input__info{ 40 | text-align: center; 41 | font-size: 13px; 42 | color:gray; 43 | margin-bottom: 1rem; 44 | } 45 | 46 | .input__info a{ 47 | text-decoration: none; 48 | } 49 | 50 | .input__info a:hover{ 51 | text-decoration: underline; 52 | 53 | } -------------------------------------------------------------------------------- /dodo-app/client/src/pages/Auth/Register.jsx: -------------------------------------------------------------------------------- 1 | import React,{useState} from 'react' 2 | import styles from './Login.module.css'; 3 | import login from '../../assets/login.png'; 4 | import {Button, Input, message} from 'antd'; 5 | import { Link, useNavigate } from 'react-router-dom'; 6 | import { getErrorMessage } from '../../util/GetError'; 7 | import AuthServices from '../../services/authServices'; 8 | 9 | function Register() { 10 | const [username,setUsername] = useState(""); 11 | const [password,setPassword] = useState(""); 12 | const [firstName,setFirstName] = useState(""); 13 | const [lastName,setLastName] = useState(""); 14 | const [loading,setLoading] = useState(false); 15 | const navigate = useNavigate(); 16 | const handleSubmit = async ()=>{ 17 | try{ 18 | setLoading(true); 19 | const data = { 20 | firstName, 21 | lastName, 22 | username, 23 | password 24 | } 25 | const response = await AuthServices.registerUser(data); 26 | console.log(response.data); 27 | setLoading(false); 28 | message.success("You're Registered Successfully!"); 29 | navigate('/login'); 30 | }catch(err){ 31 | console.log(err); 32 | message.error(getErrorMessage(err)); 33 | setLoading(false); 34 | } 35 | } 36 | return ( 37 |
38 |
39 | .. 40 |

Register

41 |
42 | setFirstName(e.target.value)} /> 46 | setLastName(e.target.value)} /> 51 | 52 |
53 |
54 | setUsername(e.target.value)} /> 58 |
59 |
60 | setPassword(e.target.value)} /> 64 |
65 |
66 | Existing User? Login 67 |
68 | 69 |
70 |
71 | ) 72 | } 73 | 74 | export default Register -------------------------------------------------------------------------------- /dodo-app/client/src/pages/Landing/Landing.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Navbar from '../../components/Navbar' 3 | import { Link } from 'react-router-dom' 4 | import landing from '../../assets/landing.jpg'; 5 | import styles from './Landing.module.css'; 6 | function Landing() { 7 | return ( 8 |
9 | 10 |
11 |
12 |

Schedule Your Daily Tasks With DoDo!

13 |
14 | Register 15 | Login 16 |
17 |
18 | 19 |
20 | landing 21 |
22 |
23 |
24 | ) 25 | } 26 | 27 | export default Landing -------------------------------------------------------------------------------- /dodo-app/client/src/pages/Landing/Landing.module.css: -------------------------------------------------------------------------------- 1 | .landing__wrapper{ 2 | display:flex; 3 | flex-wrap: wrap; 4 | margin-top: 100px; 5 | padding: 2rem; 6 | } 7 | 8 | .landing__text{ 9 | width: 40%; 10 | } 11 | 12 | .landing__text h1{ 13 | font-size: 4rem; 14 | } 15 | 16 | .landing__img{ 17 | width: 50%; 18 | margin-left: 2rem; 19 | 20 | } 21 | 22 | .landing__img img{ 23 | width: 100%; 24 | } -------------------------------------------------------------------------------- /dodo-app/client/src/pages/ToDo/ToDoList.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import Navbar from '../../components/Navbar' 3 | import styles from './ToDoList.module.css'; 4 | import { Button, Divider, Empty, Input, Modal, Select, Tag, Tooltip, message } from 'antd'; 5 | import {getErrorMessage} from '../../util/GetError'; 6 | import { getUserDetails } from '../../util/GetUser'; 7 | import ToDoServices from '../../services/toDoServices'; 8 | import { useNavigate } from 'react-router'; 9 | import { CheckCircleFilled, CheckCircleOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons'; 10 | 11 | 12 | function ToDoList() { 13 | const [title,setTitle] = useState(""); 14 | const [description,setDescription] = useState(""); 15 | const [isAdding,setIsAdding] = useState(false); 16 | const [loading,setLoading] = useState(false); 17 | const [allToDo,setAllToDo] = useState([]); 18 | const [currentEditItem,setCurrentEditItem] = useState(""); 19 | const [isEditing,setIsEditing] = useState(false); 20 | const [updatedTitle,setUpdatedTitle] = useState(""); 21 | const [updatedDescription,setUpdatedDescription] = useState(""); 22 | const [updatedStatus,setUpdatedStatus] = useState(""); 23 | const [currentTaskType,setCurrentTaskType] = useState("incomplete"); 24 | const [completedTodo,setCompletedTodo] = useState([]); 25 | const [incompletedTodo,setIncompletedTodo] = useState([]); 26 | const [currentTodoTask,setCurrentToDoTask] = useState([]); 27 | const [filteredToDo,setFilteredToDo] = useState([]); 28 | 29 | const navigate = useNavigate(); 30 | 31 | const getAllToDo = async ()=>{ 32 | try{ 33 | let user = getUserDetails(); 34 | console.log(user?.userId); 35 | const response = await ToDoServices.getAllToDo(user?.userId); 36 | console.log(response.data); 37 | setAllToDo(response.data); 38 | }catch(err){ 39 | console.log(err); 40 | message.error(getErrorMessage(err)); 41 | } 42 | } 43 | 44 | useEffect(()=>{ 45 | let user = getUserDetails(); 46 | const getAllToDo = async ()=>{ 47 | try{ 48 | console.log(user?.userId); 49 | const response = await ToDoServices.getAllToDo(user?.userId); 50 | console.log(response.data); 51 | setAllToDo(response.data); 52 | }catch(err){ 53 | console.log(err); 54 | message.error(getErrorMessage(err)); 55 | } 56 | } 57 | if(user && user?.userId){ 58 | getAllToDo(); 59 | }else{ 60 | navigate('/login'); 61 | } 62 | 63 | },[navigate]); 64 | 65 | useEffect(()=>{ 66 | const incomplete = allToDo.filter((item)=>item.isCompleted===false); 67 | const complete = allToDo.filter((item)=>item.isCompleted===true); 68 | setIncompletedTodo(incomplete); 69 | setCompletedTodo(complete); 70 | if(currentTaskType==='incomplete'){ 71 | setCurrentToDoTask(incomplete); 72 | }else{ 73 | setCurrentToDoTask(complete) 74 | } 75 | },[allToDo]) 76 | 77 | const handleSubmitTask = async ()=>{ 78 | setLoading(true); 79 | try{ 80 | const userId = getUserDetails()?.userId; 81 | const data = { 82 | title, 83 | description, 84 | isCompleted:false, 85 | createdBy:userId 86 | } 87 | const response = await ToDoServices.createToDo(data); 88 | console.log(response.data); 89 | setLoading(false); 90 | message.success("To Do Task Added Successfully!"); 91 | setIsAdding(false); 92 | getAllToDo(); 93 | }catch(err){ 94 | console.log(err); 95 | setLoading(false); 96 | message.error(getErrorMessage(err)) 97 | } 98 | } 99 | 100 | const getFormattedDate = (value)=>{ 101 | let date = new Date(value); 102 | let dateString = date.toDateString(); 103 | let hh = date.getHours(); 104 | let min = date.getMinutes(); 105 | let ss = date.getSeconds(); 106 | let finalDate = `${dateString} at ${hh}:${min}:${ss}`; 107 | return finalDate; 108 | } 109 | 110 | const handleEdit = (item)=>{ 111 | console.log(item); 112 | setCurrentEditItem(item); 113 | setUpdatedTitle(item?.title); 114 | setUpdatedDescription(item?.description); 115 | setUpdatedStatus(item?.isCompleted); 116 | setIsEditing(true); 117 | }; 118 | 119 | const handleDelete = async (item)=>{ 120 | try{ 121 | const response = await ToDoServices.deleteToDo(item._id); 122 | console.log(response.data); 123 | message.success(`${item.title} is Deleted Successfully!`); 124 | getAllToDo(); 125 | }catch(err){ 126 | console.log(err); 127 | message.error(getErrorMessage(err)); 128 | } 129 | } 130 | 131 | const handleUpdateStatus = async (id,status)=>{ 132 | console.log(id); 133 | try{ 134 | const response = await ToDoServices.updateToDo(id,{isCompleted:status}); 135 | console.log(response.data); 136 | message.success("Task Status Updated Successfully!"); 137 | getAllToDo(); 138 | }catch(err){ 139 | console.log(err); 140 | message.error(getErrorMessage(err)); 141 | } 142 | } 143 | 144 | const handleUpdateTask = async ()=>{ 145 | try{ 146 | setLoading(true); 147 | const data = { 148 | title:updatedTitle, 149 | description:updatedDescription, 150 | isCompleted:updatedStatus 151 | }; 152 | console.log(data); 153 | const response = await ToDoServices.updateToDo(currentEditItem?._id,data); 154 | console.log(response.data); 155 | message.success(`${currentEditItem?.title} Updated Successfully!`); 156 | setLoading(false); 157 | setIsEditing(false); 158 | getAllToDo(); 159 | }catch(err){ 160 | console.log(err); 161 | setLoading(false); 162 | message.error(getErrorMessage(err)) 163 | } 164 | } 165 | 166 | const handleTypeChange = (value)=>{ 167 | console.log(value); 168 | setCurrentTaskType(value); 169 | if(value==='incomplete'){ 170 | setCurrentToDoTask(incompletedTodo); 171 | }else{ 172 | setCurrentToDoTask(completedTodo); 173 | } 174 | } 175 | 176 | const handleSearch = (e)=>{ 177 | let query = e.target.value; 178 | let filteredList = allToDo.filter((item)=>item.title.toLowerCase().match(query.toLowerCase())); 179 | console.log(filteredList); 180 | if(filteredList.length > 0 && query){ 181 | setFilteredToDo(filteredList); 182 | }else{ 183 | setFilteredToDo([]); 184 | } 185 | } 186 | return ( 187 | <> 188 | 189 |
190 |
191 |

Your Tasks

192 | 193 |
194 | 195 | setTitle(e.target.value)} /> 269 | setDescription(e.target.value)} /> 270 | 271 | 272 | setIsEditing(false)}> 273 | setUpdatedTitle(e.target.value)} /> 274 | setUpdatedDescription(e.target.value)} /> 275 | 62 |
63 |
64 | 65 | 72 |
73 |
74 | 75 |