A simple Todo app to add list of books a user has read using HTML, CSS, Webpack, JavaScript and modular architecture

Related tags

Learning resource javascript html5 css3 webpack5
Overview

Minimalist

A simple Todo app to add list of books a user has read. It is implemented using HTML, CSS, Webpack, JavaScript and modular architecture. A todo is saved and displayed in Realtime. A todo can be removed from the list of to-dos. Data persistence is implemented using local Storage API.

screenshot

Additional description about the project and its features.

Built With

  • HTML
  • CSS
  • Webhint
  • Stylelint
  • Javascript
  • Webpack

Live Demo

Site is live. Visit now!

Getting Started

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

Prerequisites

  • Knowledge on basic html and css
  • Text Editor (VScode, Atom, Sublime text, etc)
  • Basic knowledge of node.js

Setup

  • clone repository using git clone
  • git clone https://github.com/Amedzro-Elikplim/Minimalist
  • cd Minimalist.
  • run npm install
  • run npm run start to start webpack dev server

Author

👤 Amedzro Elikplim Emmanuel

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.

Comments
  • PROJECT STRUCTURE

    PROJECT STRUCTURE

    MINIMALIST APP

    • Display to do in index.html
    • Bundle javascript using webpack
    • Style todo list using flex layout
    • Implement modular architecture
    • Dynamically iterate over todo array and display each todo list
    • Add input field to accept todo from user
    opened by Amedzro-Elikplim 3
  • TESTING MINIMALIST 2

    TESTING MINIMALIST 2

    Create a test file(s) ([..].test.js) for a file(s) containing the following functions:

    • a function for editing the task description.
    • a function for updating an item's 'completed' status.
    • the "Clear all completed" function.
    • Mock the HTML elements to test DOM manipulation functions.
    opened by Amedzro-Elikplim 0
  • CRUD FEATURES

    CRUD FEATURES

    ADD & REMOVE

    • Add function to delete list
    • Add function to update the list
    • Add function to sort the list
    • Change the background colour of li when dragged
    • Update checkbox to strike a line through respective descriptions
    opened by Amedzro-Elikplim 0
  • object destructuring

    object destructuring

    https://github.com/Amedzro-Elikplim/Minimalist/blob/6d74fa0cafbe04921bfb463271c5327594ec4fe2/src/index.js#L10

    destructure value from input with declaring a new variable const { value } = input;

    opened by Amedzro-Elikplim 0
  • HTML/CSS best practicess

    HTML/CSS best practicess

    https://github.com/Amedzro-Elikplim/Minimalist/blob/6d74fa0cafbe04921bfb463271c5327594ec4fe2/src/index.html#L28-L39

    use Html semantics such as sections to organize code

    opened by Amedzro-Elikplim 1
  • DRY principle

    DRY principle

    https://github.com/Amedzro-Elikplim/Minimalist/blob/6d74fa0cafbe04921bfb463271c5327594ec4fe2/modules/Task.js#L63-L68 Change boring for loops into using forEach()

    opened by Amedzro-Elikplim 2
Owner
Elikplim
full stack developer🤠|| JavaScript || react || ruby || node js || mongoDB and sql || tech enthusiast👀 || obsessed with clean code✍🏾
Elikplim
GitHub https://amedzro-elikplim.github.io/Minimalist/dist/
TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list.

Todo TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list. App Screenshot Live Demo Todo Ap

Ishmael Kargbo 3 May 12, 2022
Awesome Books is a basic website that allows users to add/remove books from a list (including the title and author). It has threee different sections: 1. books list, 2. add new book, 3. contact.

awesomeBooks-modules Awesome Books is a basic website that allows users to add/remove books from a list (including the title and author). It has three

Juan Diaz 6 Aug 26, 2022
A todo-list app designed to help users manage their tasks. Users can create a task, read tasks, update tasks, delete task, check completed tasks and delete all checked tasks. Also contains basic tests. Built with WebPack,, Modular JavaScript, Jest Libary and LocalStorage.

todolist This project is created to understand the use of ES6 with Webpack Built With HTML, CSS and Javascript. Webpack. Live Demo (if available) http

Shotola Ololade 3 Oct 13, 2022
"Awesome books" is a simple website that displays a list of books and allows you to add ang remove books from that list. Also you can store your data in your local storage. Build with JavaScript, HTML and CSS.

Awesome Books Creating an app that adds and delete books from a list. Built With HTML CSS JavaScript Application Page url https://TimmyChan99.github.i

Fatima Ezzahra elmenoun 5 Jan 28, 2022
A simple todo list app written in javascript and html with basic CSS styling This project makes use of webpack to bundle the code. I implemented 3 functionalities on the this project namely: Add task edit task delete task using Js

My To-Do List A simple todo list app written in javascript and html with basic CSS styling This project makes use of webpack to bundle the code. I imp

Richard Chileya 5 Nov 11, 2022
This is an educational and simple website that displays a list of books and allows you to add and remove books from that list built with HTML, CSS, JavaScript. The goal is to make it more organized by using modules and practice the ES6 syntax in the first Module

Awesome books ES6 This is a website that allows users to add and remove books from a list. This project is build using JavaScript objects Built With H

Mustafa Fahimy 7 Jul 21, 2022
The to-do list project is an app that allows users to successfully organize their day by inputting prioritized tasks. The project also allows users to carry out the CRUD operations for (add, edit and delete). Two special features of the app are that it saves tasks in the local storage of the user's browser, so when the user reloads or revisits the app, the user can view a list of tasks formerly inputted, and it allows users to prioritize their tasks by dragging up and down the list section.

TO-DO-LIST This is a To Do List Project that dynamically displays tasks to be done with interactions for removing and adding task when completed or no

Francis Ugorji 9 Nov 1, 2021
This project is an Awesome Books web page where users can add or remove books from the site. It also displays a list of the books added to the collection. This Awesome books webpage was created using ES6.

Awesome books App using Module Awesome books App using Module This book list was built using modules and other ES6 syntax. It allows users to add/remo

Esther Udondian 6 Jul 25, 2022
A simple todo list app that allows users to add, delete, edit, and clear all completed tasks, built with HTML, CSS, Javascript and webpack.

todo list In this website you will add books and also watch the lists of books. Built With HTML CSS JavaScript See Live click here Authors ?? HaaDiiii

Hamid Ali 10 Oct 7, 2022
An online library for adding and removing a different number of books from a user collection, keeping track of the books you've read and the one's you are yet to read

Awesmoe Books A Website demo for our project of book store, The website has ability of adding and removing you books from yor library, Thats reflects

zieeco 11 Jul 8, 2022
"Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list. By building this application with JavaScript, the website is more interactive!

Awesome-books Description "Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list. By

Cindy Dorantes 11 Oct 18, 2022
Todo-List is an online website where users can add a todo tasks. tasks can be removed , added, and edited. Built with Webpack and JavaScript.

To-do List Description To-do-list is an online website where users can add a todo tasks. tasks can be removed , added, and edited.Built with Webpack a

tarike bouari 9 Sep 9, 2022
Microverse Module 02 Project: This is education project that allow user to add desire books to the list and also delete books. It makes use of local storage to preserve the data on the web browser.Built with HTML, CSS, JavaScript

Project Demo Live Demo AWESOME BOOK PROJECT Project allow user to add desire books to the list and also delete books. It makes use of local storage to

Ajayi Ridwan 8 Dec 3, 2022
Awesome books is a simple website that displays a list of books and allows you to add and remove books from that list

Awesome books is a simple website that displays a list of books and allows you to add and remove books from that list. By building this application, you will learn how to manage data using JavaScript. Thanks to that your website will be more interactive. built with modern JavaScript and uses SPA technology.

Aniekan udo 9 Mar 29, 2022
"Awesome books" is a simple website that displays a list of books and allows you to add and remove books from that list.

Hello! I am a software developer! I can help you build a product, feature or website. Take a look of my works. If you like what you see and have a pro

Roberto A. Baños Alvarez 8 May 9, 2022
This is a single page web application that keeps tracks of books. Book details captured are the book title, author and ISBN. User can add a book, view a list of books and also remove any un wanted books.

Project Name This is a single page web application that keeps tracks of books. Book details captured are the book title, author and ISBN. User can add

Olivier 6 Nov 20, 2022
In this project, I built a basic website that allows users to add/remove books from a list using HTML/CSS to build the app and JavaScript to add functionalities. This project was organized using modules and ES6 syntax implemented.

Awesome books: with ES6 Description the project. Built With HTML CSS JAVASCRIPT Live Demo (if available) Live Demo Link Getting Started This is an exa

Emem Ekpo 7 Sep 9, 2022
A Todo list app that allows the user to add tasks, delete, edit, chage, and clear all completed tasks. Built with JavaScript, CSS and Html.

To Do list: interactive list description: A todo list app that allow users to add new task, delete, edit, and clear all completed.Built with JavaScrip

IBRAHIM AHMAT 7 Aug 4, 2022
Module '2' Week two '2' project. The following technologies are used: HTML, CSS , Webpack, and JavaScript. Features of this app are rendered dynamically. It allows user to pinned or add task the will be doing on it. Local storage session is implemented. Task stay on app when user refresh or reload page. Task can be checked when completed.

To Do list: Description the project. Built With Major languages Frameworks Technologies used Screenshot of project Built With HTML, JAVASCRIPT, CSS, a

Evans Kupour 8 Nov 4, 2022