https://github.com/teotimepacreau/progress-steps-day2-of-100daysofcode

Progress Steps built with Vanilla JS, CSS, HTML
https://github.com/teotimepacreau/progress-steps-day2-of-100daysofcode

100daysofcode css html progress-bar progress-steps vanillajs

Last synced: 3 months ago
JSON representation

Progress Steps built with Vanilla JS, CSS, HTML

• Host: GitHub
• URL: https://github.com/teotimepacreau/progress-steps-day2-of-100daysofcode
• Owner: teotimepacreau
• Created: 2023-02-18T07:49:28.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-19T14:57:40.000Z (over 2 years ago)
• Last Synced: 2025-01-15T10:32:43.557Z (4 months ago)
• Topics: 100daysofcode, css, html, progress-bar, progress-steps, vanillajs
• Language: CSS
• Homepage: https://teotimepacreau.github.io/Progress-Steps-Day2-of-100DaysOfCode/
• Size: 730 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Progress-Bar

![Progress-Bar-demo](https://github.com/teotimepacreau/Progress-Steps-Day2-of-100DaysOfCode/blob/main/Progress%20Steps.gif)

# Project goal

- position relative and position absolute to create the progress bar

- disabling and enabling buttons

- CSS animation + transition to give it the smooth effect

- Font-awesome icons

- Cursor not-allowed and cursor pointer

- use Flexbox to create component and align

- Vanilla JS eventListener, loops, class handling, IF logic to count the progress upward and backward

# 🛠️

HTML, CSS, Vanilla JavaScript