Giter VIP home page Giter VIP logo

nextlevel's Introduction

Next Level JavaScript Course Project: Nintendo Console and Games E-shop

-This project is an online store that offers Nintendo consoles and games, both new and retro. -The development has been done using HTML, Tailwind CSS, with a touch of custom CSS, and Vanilla JavaScript.

Seamless Cross-Device Experience

-Access the site from a computer, tablet, or mobile for a consistent browsing experience. -On desktop, the cart sidebar opens automatically when you move to the right, and there's also an accessibility button.

Catalog

-Add items from various sections, including search results, category sliders, or filtered items below. -The cart includes partial total, total items, and options to remove individual items or clear the entire cart.

User Accounts with Local Storage

-Register and create an account, and user data is stored in local storage, just like cart contents.

Search

-Utilize a database array for the search functionality across all pages (dataBase). It provides partial results beneath the input, including the item and its price, and it's case-sensitive. We recommend using keywords like "Mario," "Zelda," or "Joystick."

JS Implemented Features

-Automatic image and card sliders for a dynamic browsing experience. -Real-time search functionality with partial results and dynamic drawing. -Cart navigation and scrolling actions. -Actions on cart, login, and sign-in icons. -Buttons to add items to the cart from any part of the web app. -Full cart functionality, including buy, clear, and hide. -Real-time cart updates after clicking "Add to Cart." -"X" button to individually remove items from the cart. -Function to calculate the cart total using forEach loop for individual items and the overall total. -Real-time updating of the total value in HTML when adding, removing, or clearing items. -Restoring stock when removing an item, whether by clearing the cart or individually removing by index. -Real-time search with partial results below the input, displaying item name and price. -On desktop, the cart slides in when moving the mouse within 2% of the right margin and hides when the mouse is outside the cart. On mobile, tap within 5% to open the cart -or use the nav button. -Functional login with welcome or error alerts for data import. -Real-time item filtering by type with the option to purchase directly. -Storage of account creation data and cart content in local storage. -Dynamic database loading and real-time item rendering in each section with filters. -Addition of class lists and button functions with real-time events once drawn. -Slider movement and card divs in categories with automatic movement. -Drawing search results in divs, adapting a specific div for that purpose with individual size modification. -Aesthetic use of the Alerts library. -Asynchrony. -Ajax and fetch. -Expandable terms and conditions section in the main for an initial attempt at SAP. -All decision input functions have verification, whether it's login without content, sign-in, or attempting to buy with an empty cart.

Author

  • Mauri Arbelaiz

Final Note: 10

Libraries Used:

Thank you for visiting our project!

nextlevel's People

Contributors

billiejoe1988 avatar

Stargazers

 avatar

Watchers

 avatar

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.