GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - codedit334/ToDo_List_Webpack: To Do App created in HTML CSS and JS, i used Webpack to bundle all files. The app displays items according to the order they are created in.

BranchesTags
Open more actions menu

Latest commit

 

History

58 Commits
58 Commits

Folders and files

NameName
Last commit message
Last commit date
.github/workflows
.github/workflows
 
 
dist
dist
 
 
src
src
 
 
.eslintrc.json
.eslintrc.json
 
 
.gitignore
.gitignore
 
 
.hintrc
.hintrc
 
 
.stylelintrc.json
.stylelintrc.json
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
babel.config.js
babel.config.js
 
 
jest.config.js
jest.config.js
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
webpack.config.js
webpack.config.js
 
 

Repository files navigation

Module 2: ToDo List

📗 Table of Contents

  • 📖 About the Project
    • 🛠 Built With
      • Tech Stack
      • Key Features
  • 🚀 Live Demo
  • 💻 Getting Started
    • Setup
    • Prerequisites
    • Install
    • Usage
    • Run tests
  • 👥 Authors
  • 🔭 Future Features
  • 🤝 Contributing
  • ⭐️ Show your support
  • 🙏 Acknowledgements
  • ❓ FAQ
  • 📝 License

📖 ToDo List with Webpack

ToDo List with Webpack is a simple web app that stores a ToDo list, it uses modular architechture aswell as webpack.

🛠 Built With

HTML, CSS, NodeJS

Tech Stack

Structure
  • HTML
Style
  • CSS
Module Bundler
  • Webpack
Test
  • Jest
Linters
  • Webhint
  • Stylelint
  • ESLint

Key Features

  • Object Oriented Programming.

  • Modular JS architecture.

    • Use Modules.
  • Module Bundler.

    • Use Webpack.

(back to top)

🚀 Live Demo

-Link.

(back to top)

💻 Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

In order to run this project you need: Open terminal on the same folder of the project and run:

 npm install

Setup

Clone this repository to your desired folder:

  cd my-folder
  git clone [email protected]/codedit334/Todo_List_Webpack.git

Install

Install this project with:

  cd Todo_List_Webpack
  npm install

Usage

Run Dev Server (Port 3000)

  npm run dev

Build for production

npm run build

Run tests

  • Linter Tests

To run tests, run the following command:

To check for html errors run:

  npx hint .

To check for css errors run:

  npx stylelint "**/*.{css,scss}"

To check for js errors run:

  npx eslint .
  • Jest Tests

  npm test

👥 Authors

👤 Author1

  • GitHub: @codedit334
  • Twitter: @oussedit
  • LinkedIn: Oussama Elabdioui

👤 Dilsher Balouch

  • GitHub: @DilhserB
  • Twitter: @_brilliantMindz
  • LinkedIn: brilliantMindz

🔭 Future Features

  • Make it interactive.

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project send your feedback to encourage me to do more.

(back to top)

🙏 Acknowledgments

I would like to thank Microverse for offering me this opportunity to learn, and practice my skills.

(back to top)

❓ FAQ

-Why use linters?

  • The use of linters helps to diagnose and fix technical issues, also linters can help teams achieve a more readable and consistent style, through the enforcement of its rules.

-Why use modular programming?

  • Modular programming usually makes your code easier to read because it means separating it into functions that each only deal with one aspect of the overall functionality.

-Why use OOP?

  • With this type of programming, a program comprises objects that can interact with the user, other objects, or other programs. This makes programs more efficient and easier to understand.

(back to top)

📝 License

This project is MIT licensed. (Check the LICENSE file)

(back to top)

About

To Do App created in HTML CSS and JS, i used Webpack to bundle all files. The app displays items according to the order they are created in.

codedit334.github.io/ToDo_List_Webpack/dist/

Topics

html-css-javascriptwebpack

Resources

Readme
MIT license
Activity

Stars

19 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases

Packages

Used by

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.