https://github.com/tusho7/interactive-pricing-component
https://github.com/tusho7/interactive-pricing-component
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/tusho7/interactive-pricing-component
- Owner: Tusho7
- Created: 2022-11-07T14:23:27.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-07T14:25:50.000Z (over 3 years ago)
- Last Synced: 2025-03-22T20:30:03.573Z (about 1 year ago)
- Language: CSS
- Size: 108 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
In this project I mainly needed to focus on page layout,page responsiveness and pricing functionality.
### The challenge
Users should be able to:
- View the optimal layout for each page depending on their device's screen size
- Input view count
- 10K pageviews / $8 per month
- 50K pageviews / $12 per month
- 100K pageviews / $16 per month
- 500k pageviews / $24 per month
- 1M pageviews / $36 per month
If the visitor switches the toggle to yearly billing, a 25% discount should be applied to all prices.
### Screenshot
### Links
- Solution URL: [GitHub Code](https://github.com/Tusho7/Interactive-Pricing-Component)
- Live Site URL: [GitHub Live](https://tusho7.github.io/Interactive-Pricing-Component/)
## My process
Create Header
Add logo
Create divs
Add texts
Create hover effects in CSS
Add slider
Add views result section
Add pricing result section
Add Javascript code to make functional pricing app
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Mobile first approach
- Flexbox
- Media Queries
- Javascript
### What I learned
While working on this project, I gained more practise of using Javascript, the main challenge that I overcame was to create Js Functionality for the app.After research and practicing different ways for resolving this step, I wrote the Javascript code which worked eventually, Javascripts code calculates pricing for particular view amount and if payment is annual, calculates price with 25% discount.
### Continued development
I want to create other projects like this to finally master coding and make more dynamic, interactive and functional projects
## Author
- GitHub - [Sandro Tushurashvili](https://github.com/Tusho7)
- LinkedIn - [Sandro Tushurashvili](https://www.linkedin.com/in/sandro-tushurashvili/)