Git Product home page Git Product logo

ichsansandy / webpack-todo-list-microverse Goto Github PK

View Code? Open in Web Editor NEW
4.0 1.0 0.0 468 KB

Effortlessly manage your daily tasks with our powerful to-do list website, Built using HTML/CSS/JS, bundle using Webpack with Unit test using Jest

Home Page: https://ichsansandy.github.io/webpack-todo-list-microverse/dist

License: MIT License

HTML 3.97% JavaScript 85.39% CSS 10.64%
hmtl-css-javascript jest-tests webpack

webpack-todo-list-microverse's Introduction

Webpack To Do List - Microverse Project

๐Ÿ“— Table of Contents

๐Ÿ“– Webpack To Do List - Microverse Project

Webpack To Do List is a milestone project for microverse student in JavaScript Module to learn about Webpack and ES6

๐Ÿ›  Built With

Tech Stack

Client

Key Features

  • Fast and Optimized by Webpack

(back to top)

๐Ÿš€ Live Demo

(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:

    node

Setup

Clone this repository to your desired folder:

  git clone https://github.com/ichsansandy/webpack-todo-list-microverse.git

Install

Install this project with:

  cd webpack-todo-list-microverse
  npm install

it will install the required package for running the project

Usage

In this project , its included linter for HTML, CSS and JavaScript To use them, execute the following command:

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

To build the webpack bundle you can run this command

    npm run build

Deployment

You can deploy this on your local dev server

    npm run start

Once success it will automaticly running, you should see your application working at: http://localhost:8080/. Every change you make in js or css files now should be reflected in a browser a few seconds later.

Run Test

You can run test using this command

    npm run test

This project use jest to test some function in the javascript modules

(back to top)

๐Ÿ‘ฅ Author

๐Ÿ‘ค Ichsan Sandy

๐Ÿ‘ค Andry Narson

๐Ÿ‘ค Diana Beki

(back to top)

๐Ÿ”ญ Future Features

  • Add Account System

(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 you can share this project to your friend

(back to top)

๐Ÿ™ Acknowledgments

I would like to thank microverse for this project

(back to top)

๐Ÿ“ License

This project is MIT licensed.

(back to top)

webpack-todo-list-microverse's People

Contributors

dianabeki avatar ichsansandy avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

webpack-todo-list-microverse's Issues

Peer to Peer Code Review

Great job so far ๐Ÿ‘ , nice implementation of ES6 and DRY code, i'd suggest you place the savingData and loadToDoList functions in one function since they are both called multiple time together

Peer to peer code review

Nice Design ๐Ÿ‘ ๐Ÿ’ฏ

Here are a few recommended reviews that you can consider incorporating:

  • Incorporate a submit button
  • Transform your website into a mobile-friendly version
  • In the input field I'd suggest that you make the input value (required) to limit submission of empty tasks.
  • Can you addressed the issue of the scrolling tab that appears when an action is performed on the website.

Morning Session Peer to Peer Code Review ( Yan, Ichsan, Fatima)

Ichsansandy ToDoList Agree Feedback

You did a great job so far ๐Ÿ‘
Nice Design ๐Ÿ‘ ๐Ÿ’ฏ
Kindly consider to replace your array declaration todoList by using a sing line of code like this:
let todoList = JSON.parse(localStorage.getItem('todolist')) || []; (Fatima) ๐Ÿ’ฏ

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.