Product/Payment interactive interface (html/css/js)

Create the front-end of a product (shopping cart) and payment page (HTML, CSS and JS) using the mockup/prototype provided in Figma.

[login to view URL]

In this interface the user can add products in the product list in the right side and see the products that are added in the left side.

OBS: All the products and parameters need to be with some value defined in variables that we can easily change and update the prices without broke the calcs of shopping cart.

Beyond the price of the product, all the products have some extra paraments that the user can select.

He can select/choose these extra parameters inside the chosen products (some sliders/options or checkbox) that influence directly in the total price of the shopping cart. It is necessary to create some formulas to update this to total price when the user change some parameters inside the products. The logic is simple, every unity of some parameter increases some value (example 0.01 ) but if more quantity the user increase, more discounts the user gets so the price per quantity is reduced. This logic needs to be easy to customize the ranges and the limits of discounts)

In the final of the page, close to the pay button, appears the total price that is the result of the value of all the products added and the value of the extra parameters that they have.

OBS: The mouse over in the “i” icons, open a pop-up with an embedded video that explain the functionality.

On the top of the page the users can switch the duration of the product subscriptions into 6 or 12 months. This gets all the monthly prices and multiply for the quantity of months that is chosen. In the 12 months subscriptions user get 5% of discount.

After the products and parameters has been chosen, the user finally can finish his shopping cart going to checkout step. In the checkout step, (payment step) we want that the interface list all the added products: the name of the item, quantity and parameters choose, item prices, discount, Tax (All products have 23% tax), and calc the total about all the products and the total prices too. OBS: The tax is calc after discount.

In the payment step, it is important that the user have an enjoyable experience with typing the cred card number. So, we want to avoid theirs mistakes doing some validations:

[login to view URL] will be only allowed to put numbers on the Credicard number field.

2. Limit the number of characters in Credicard number field.

3. in the credit card number field create auto space between a sequence of 4 numbers while the user is typing. See the example [login to view URL]

4. Create Feedback of error when the fields it's not filled (red) and if it's without the right format.

5. Validate and show what is the credit card supplier whiling the user is typing. See the example: [login to view URL]

6. On the name field: Limit the quantity of characters

7. On CVV field: the limit the quantity of characters .

8 In the month and year field (MM / YY): Create the validation to help the user to filed. Create auto space between the " / " while the user is typing.

9. Create the feedback if the Credicard is expired: feedback above the month and year filed.

10. Create feedback when the payment gateway returns error.

11. Active the PAY button when the fields of the cred card are filed and any of it are without error feedbacks.

||Technical details||

The HTML5 and CSS3 part wants to be done using the best practices. With good names for the classes to be easy to maintain and the less lines of code as possible.

Grid system: CSS grid.

||JavaScript part||


You can use pure JavaScript, jQuery or AngularJS (not Angular) to do the job.

Evner: JavaScript, HMLT5, CSS3

Om arbejdsgiveren:
( 0 bedømmelser ) Lisboa, Portugal

Projekt ID: #28202472

10 freelancere byder i gennemsnit €246 timen for dette job

(6 bedømmelser)
(55 bedømmelser)

Hello, I am very interested in assisting you with your Products and payments pages. I have few clarification needed for the products - I see there are Pioneer web plataform, Webplataform, Inbox, Mobile application, IP Flere

€250 EUR in 3 dage
(54 bedømmelser)

Hello I have carefully read your project description and realized that I can do all of them perfectly. I am a senior Web developer with over 5 years of experience in Javascript, HTML and CSS. I worked on many projects Flere

€300 EUR in 7 dage
(10 bedømmelser)

Hello, I've seen your brief and I understood your specs of converting Figma to HTML using HTML As professional developer with 5+ years experience, I'm sure that I'll be able to provide you a project that will capture Flere

€70 EUR in 5 dage
(10 bedømmelser)

Hi, I’m Certified Expert in the following platforms Larvel, WordPress, HTML, PHP, HTML5, magento and other CMS as well as. I’m having 7+ years of experience in IT Industry can u please discuss in details so that we c Flere

€167 EUR in 8 dage
(4 bedømmelser)

Hi, after reading over your post, I have come to know you want to make traing web site by AngularJS. I have rich experiences with payment task and I think it is perfect fit for my skill sets. While I am certain there Flere

€140 EUR in 7 dage
(5 bedømmelser)

||javascript Part|| ✨⭐⭐Dear Employer⭐⭐✨ This is ilya and I have just read your job posting and read your requirements with care, I have been working as a software developer for over 5 years and have many exp Flere

€30 EUR in 4 dage
(3 bedømmelser)

Hello, How are you today? Thank you for posting this project, and I'm very happy to bid your project. I've read carefully your project details. I have rich experiences related with your project. I can be a good cand Flere

€140 EUR in 4 dage
(7 bedømmelser)

Hello sir, I check your requirements carefully and I am absolutely sure that I can do the project very well. I am highly interested to work for you. I am a developer at one of the best Digital Services provider in ME Flere

€111 EUR in 7 dage
(0 bedømmelser)