From 8655f9c0abf9e5fa271b52e1449d95bd399b5a43 Mon Sep 17 00:00:00 2001 From: Ivan Glushkov Date: Sat, 15 Jun 2024 22:05:13 +0300 Subject: [PATCH] feat: init --- .idea/.gitignore | 5 ++ .idea/Progress Steps.iml | 12 +++++ .idea/modules.xml | 8 ++++ .idea/vcs.xml | 6 +++ README.md | 43 +++++++++++++++++ demo/img.png | Bin 0 -> 15035 bytes index.html | 26 ++++++++++ script.js | 41 ++++++++++++++++ style.css | 99 +++++++++++++++++++++++++++++++++++++++ 9 files changed, 240 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 .idea/Progress Steps.iml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 README.md create mode 100644 demo/img.png create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/Progress Steps.iml b/.idea/Progress Steps.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/Progress Steps.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..1a07f10 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..96b1bae --- /dev/null +++ b/README.md @@ -0,0 +1,43 @@ +# Progress Steps Project + +Welcome to the Progress Steps Project! This project demonstrates the creation of progress steps using CSS, HTML, and JavaScript. Progress steps are commonly seen in multi-level forms, shopping carts, and similar applications. + +![Progress Steps](https://example.com/progress-steps.png) + +## Features + +- **CSS Styling**: Elegant and responsive design. +- **HTML Structure**: Semantic and accessible markup. +- **JavaScript Functionality**: Interactive steps with progress bar. + +## Installation + +To get started, simply clone the repository and open the `index.html` file in your browser. + +```bash +git clone https://github.com/yourusername/progress-steps.git +cd progress-steps +open index.html +``` + +## Usage + +Modify the HTML, CSS, and JavaScript files to fit your needs. The basic structure includes: + +- `index.html`: The main HTML file containing the structure of the progress steps. +- `styles.css`: The CSS file for styling the progress steps. +- `scripts.js`: The JavaScript file for adding interactivity to the progress steps. + +## Code Structure + +Here's an overview of the project structure: + +``` +progress-steps/ +│ +├── index.html +├── styles.css +└── scripts.js +``` + +This project is a great starting point for implementing progress steps in your web applications. Enjoy building! 😄 \ No newline at end of file diff --git a/demo/img.png b/demo/img.png new file mode 100644 index 0000000000000000000000000000000000000000..aec996c4217c0dee5b24c77fc4a724a8fe6a4120 GIT binary patch literal 15035 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..f9c857d --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + + + Progress Steps + + +
+
+
+
1
+
2
+
3
+
4
+
+ + + +
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..e783416 --- /dev/null +++ b/script.js @@ -0,0 +1,41 @@ +const progress = document.getElementById('progress'); +const prev = document.getElementById('prev'); +const next = document.getElementById('next'); +const circles = document.querySelectorAll('.circle'); + +let currentActive = 1; + +next.addEventListener('click', () => { + currentActive++; + if (currentActive > circles.length) { + currentActive = circles.length; + } + + update(); +}); + +prev.addEventListener('click', () => { + currentActive--; + if (currentActive < 1) { + currentActive = 1; + } + + update(); +}); + + +function update() { + circles.forEach((circle, index) => { + if (index < currentActive) { + circle.classList.add('active') + } else { + circle.classList.remove('active') + } + }); + + const actives = document.querySelectorAll('.active'); + progress.style.width = ((actives.length - 1) / (circles.length - 1)) * 99.9 + '%'; + + prev.disabled = currentActive === 1; + next.disabled = currentActive === circles.length; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..d5538d2 --- /dev/null +++ b/style.css @@ -0,0 +1,99 @@ +@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400&display=swap'); + +* { + box-sizing: border-box; +} + +:root { + --line-border-fill: #6600ff; + --line-border-empty: rgba(102, 0, 255, 0.09); +} + +body { + background-color: #ffffff; + font-family: 'Fira Sans', 'sans-serif'; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +.container { + text-align: center; +} + +.progress-container { + display: flex; + justify-content: space-between; + position: relative; + margin-bottom: 30px; + max-width: 100%; + width: 350px; +} + +.progress-container::before { + content: ''; + background-color: var(--line-border-empty); + position: absolute; + top: 50%; + left: 0; + height: 4px; + width: 100%; + transform: translateY(-50%); + z-index: -1; +} + +.progress { + background-color: var(--line-border-fill); + position: absolute; + top: 50%; + left: 0; + height: 4px; + width: 0; + transform: translateY(-50%); + z-index: -1; + transition: 0.4s ease; +} + +.circle { + background-color: #fff; + color: #999; + border-radius: 50%; + height: 30px; + width: 30px; + display: flex; + align-items: center; + justify-content: center; + border: 3px solid var(--line-border-empty); + transition: 0.4s ease; +} + +.circle.active { + border-color: var(--line-border-fill); +} + +.btn { + background-color: var(--line-border-fill); + color: #fff; + border: 0; + border-radius: 6px; + cursor: pointer; + padding: 8px 30px; + margin: 5px; + font-size: 14px; +} + +.btn:active { + transform: scale(0.98); +} + +.btn:focus { + outline: 0; +} + +.btn:disabled { + background-color: var(--line-border-empty); + cursor: not-allowed; +} \ No newline at end of file