Shopping Mood Generator: Using Javascript to create a shopping list with a random linear-gradient theme

🎗️ Badges

🚀 Overview

This is my very first Javascript page in my coding journey to create a simple shopping list by implementing DOM Manipulation.

Shopping list page is created with HyperText Markup Language, Cascading Style Sheets and Javascript

🔑 Key Topic

The following content will be covered in this README.md:

1. Learning Objectives
2. Requirements
3. Installation & Usage
4. Author
5. References & Helpful Links
6. Contributing
7. License

🧑‍💻 Learning Objectives

After fulfilling the project, I acquire knowledge to:

• Build and style static webpages with semantic HTML and CSS, along with Javascript
• Implement best practices and standards when structuring HTML files using nested elements, indentation, comments, and line breaks
• Implement DOM Manipulation and linear-gradient() syntax to present the content of the project
• Implement CSS styling via class, id and element selectors using external stylesheets and inline styles
• Implement Font Awesome and CSS breakpoints
• Use Git workflow to initialize projects, track changes, and host via remote server
• Execute live deployment using GitHub Pages

📋 Requirements

Build an app that operate as a shopping list with a theme color generator

User Stories:

1. Adding new element to the list
2. Adding li after click / key press
3. Toggling a strike throught after click
4. Adding button "delete" to list item
5. Removing item after clicking the "delete" button
6. Making a linear-gradient() theme based on chosen colors
7. Making a random linear-gradient() theme for the page

⚡ Installation & Usage

1. Cloning the project & rendering on your local browser

• The respository can be cloned as other github repository
• Then drag the index.html to your local browser

2. Using the live code

• Open your webbrowser
• Then add this link to your internet browser

👥 Author & Credit

Author:

• Nio Phan

Credit:

• (Shopping Title) element credited by Rafael Castrocouto

💡 References & Helpful Links

• Version Control
• HTML
• CSS
• Javascript
• Font Awesome
• Pro Git

💭 Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to follow Common Guidlines as appropriate.

📝 License

MIT