Skip to content

Commit 333b10b

Browse files
sahilataharsahilatahar
committed
Skill Bar Added
1 parent 33e9587 commit 333b10b

File tree

4 files changed

+261
-35
lines changed

4 files changed

+261
-35
lines changed

‎README.md

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,48 @@
11
# HTML-CSS-JavaScript
22

33
## Technologies used:
4+
45
[![Skills](https://skillicons.dev/icons?i=html,css,javascript,bootstrap)](https://github.com/sahilatahar/HTML-CSS-JavaScript#html-css-javascript)
56

6-
| SN | Project | Live Demo |
7-
| :-: | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
8-
| 01 | [Age Calculator](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/age-calculator) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/age-calculator/) |
9-
| 02 | [Card Flip](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/card-flip) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/card-flip/) |
10-
| 03 | [CSS Animated Buttons](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/css-animated-buttons) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/css-animated-buttons/) |
7+
| SN | Project | Live Demo |
8+
| :-: | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
9+
| 01 | [Age Calculator](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/age-calculator) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/age-calculator/) |
10+
| 02 | [Card Flip](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/card-flip) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/card-flip/) |
11+
| 03 | [CSS Animated Buttons](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/css-animated-buttons) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/css-animated-buttons/) |
1112
| 04 | [CSS Animation](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/css-animation) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/css-animation/) |
12-
| 05 | [Calender](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/Calender) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/Calender/) |
13-
| 06 | [Decimal to Binary](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/decimal-to-binary) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/decimal-to-binary) |
14-
| 07 | [Eye Motion](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/eyes-motion) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/eyes-motion/) |
15-
| 08 | [File Downloader](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/file-downloader) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/file-downloader/) |
16-
| 09 | [Icon Drawer Animation](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/icon-drawer-animation) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/icon-drawer-animation/) |
17-
| 10 | [Icon Hover Animation](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/icon-hover-animation) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/icon-hover-animation/) |
18-
| 11 | [Image 3D Animation](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/image-3d-animation) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/image-3d-animation/) |
19-
| 12 | [Image Frame](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/image-frame) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/image-frame/) |
20-
| 13 | [Image Slider](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/image-slider) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/image-slider/) |
21-
| 14 | [Internet Connection Checker](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/internet-connection-checker) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/internet-connection-checker/) |
22-
| 15 | [Loaders](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/loaders) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/loaders/) |
23-
| 16 | [Profile Card](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/profile-card) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/profile-card/) |
24-
| 17 | [QR Code Generator](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/qr-code-generator) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/qr-code-generator/) |
25-
| 18 | [Quetes Generator](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/quetes-generator) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/quetes-generator/) |
26-
| 19 | [React Logo](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/react-logo) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/react-logo/) |
27-
| 20 | [Responsive Navbar](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/responsive-navbar) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/responsive-navbar/) |
28-
| 21 | [Signin Page](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/signin-page) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/signin-page/) |
29-
| 22 | [Snake Game](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/snake-game) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/snake-game) |
30-
| 23 | [Survey Form](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/survey-form) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/survey-form/) |
31-
| 24 | [Survey Form 2](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/survey-form2) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/survey-form2/) |
32-
| 25 | [Technical Documentation](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/technical-documentation) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/technical-documentation/) |
33-
| 26 | [Twitter Sidebar](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/twitter-sidebar) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/twitter-sidebar/) |
13+
| 05 | [Calender](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/Calender) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/Calender/) |
14+
| 06 | [Decimal to Binary](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/decimal-to-binary) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/decimal-to-binary) |
15+
| 07 | [Eye Motion](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/eyes-motion) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/eyes-motion/) |
16+
| 08 | [File Downloader](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/file-downloader) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/file-downloader/) |
17+
| 09 | [Icon Drawer Animation](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/icon-drawer-animation) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/icon-drawer-animation/) |
18+
| 10 | [Icon Hover Animation](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/icon-hover-animation) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/icon-hover-animation/) |
19+
| 11 | [Image 3D Animation](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/image-3d-animation) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/image-3d-animation/) |
20+
| 12 | [Image Frame](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/image-frame) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/image-frame/) |
21+
| 13 | [Image Slider](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/image-slider) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/image-slider/) |
22+
| 14 | [Internet Connection Checker](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/internet-connection-checker) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/internet-connection-checker/) |
23+
| 15 | [Loaders](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/loaders) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/loaders/) |
24+
| 16 | [Profile Card](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/profile-card) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/profile-card/) |
25+
| 17 | [QR Code Generator](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/qr-code-generator) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/qr-code-generator/) |
26+
| 18 | [Quetes Generator](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/quetes-generator) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/quetes-generator/) |
27+
| 19 | [React Logo](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/react-logo) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/react-logo/) |
28+
| 20 | [Responsive Navbar](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/responsive-navbar) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/responsive-navbar/) |
29+
| 21 | [Signin Page](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/signin-page) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/signin-page/) |
30+
| 22 | [Snake Game](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/snake-game) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/snake-game) |
31+
| 23 | [Survey Form](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/survey-form) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/survey-form/) |
32+
| 24 | [Survey Form 2](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/survey-form2) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/survey-form2/) |
33+
| 25 | [Technical Documentation](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/technical-documentation) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/technical-documentation/) |
34+
| 26 | [Twitter Sidebar](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/twitter-sidebar) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/twitter-sidebar/) |
3435
| 27 | [Typing Effect](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/typing-effect) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/typing-effect/) |
35-
| 28 | [Word Counter](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/word-counter) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/word-counter/) |
36-
| 29 | [Git Logo](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/git-logo) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/git-logo/) |
37-
| 30 | [Image Expansion](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/image-expansion) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/image-expansion/) |
38-
| 31 | [Lorem Ipsum Generator](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/lorem-ipsum-generator) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/lorem-ipsum-generator/) |
36+
| 28 | [Word Counter](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/word-counter) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/word-counter/) |
37+
| 29 | [Git Logo](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/git-logo) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/git-logo/) |
38+
| 30 | [Image Expansion](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/image-expansion) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/image-expansion/) |
39+
| 31 | [Lorem Ipsum Generator](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/lorem-ipsum-generator) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/lorem-ipsum-generator/) |
3940
| 32 | [Search Widget](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/search-widget) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/search-widget/) |
40-
| 33 | [Feedback UI](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/feedback-ui) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/feedback-ui/) |
41-
| 34 | [Hover Board](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/hover-board) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/hover-board/) |
42-
| 35 | [Login Form](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/login-form) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/login-form/) |
43-
41+
| 33 | [Feedback UI](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/feedback-ui) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/feedback-ui/) |
42+
| 34 | [Hover Board](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/hover-board) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/hover-board/) |
43+
| 35 | [Login Form](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/login-form) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/login-form/) |
44+
| 36 | [Skill Bar](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/skill-bar) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/skill-bar/) |
4445

4546
### Disclaimer Regarding Ownership of this repository
47+
4648
To be clear, some of the projects in this repository were created during my learning process using different web resources, including YouTube tutorials. There may occasionally be situations in which I've taken ideas or portions of code from other sources. I want to be open and honest about this.

‎skills-bar/app.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const skillInput = document.getElementById('skill-input');
2+
const skillPerInput = document.getElementById('skill-per-input');
3+
const addSkillBtn = document.getElementById('add-skill-btn');
4+
const removeSkillBtn = document.getElementById('remove-skill-btn');
5+
const container = document.querySelector('.container');
6+
7+
const colors = ['#f3442a', '#4481eb', '#feb300', '#9488ef', '#5cd8c0'];
8+
9+
let index = -1;
10+
11+
addSkillBtn.addEventListener("click", (e) => {
12+
13+
if (skillPerInput.value > 100) {
14+
skillPerInput.value = 100;
15+
}
16+
if (skillInput.value.length <= 0 || skillPerInput.value < 10) {
17+
return;
18+
}
19+
20+
if (index === colors.length - 1) {
21+
index = 0;
22+
} else {
23+
index++;
24+
}
25+
container.innerHTML += `<div class="group">
26+
<label>${skillInput.value} <span>${skillPerInput.value}%</span></label>
27+
<div class="bar" style='box-shadow: 0px 0px 2px ${colors[index]};'>
28+
<div class="per-level" style="width: ${skillPerInput.value}%; background-color: ${colors[index]};"></div>
29+
</div>
30+
</div>`;
31+
})
32+
33+
34+
removeSkillBtn.addEventListener('click', () => {
35+
container.innerHTML = '<h2 class="heading">Skills</h2>';
36+
})

‎skills-bar/index.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Skills bar</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<div class="input-container">
14+
<div class="inputs">
15+
<input type="text" name="skill" id="skill-input" placeholder="Enter your skill here">
16+
<input type="number" name="percentage" id="skill-per-input" value="50" step="10" min="10" max="100"
17+
placeholder="%">
18+
</div>
19+
<div class="buttons">
20+
<button id="remove-skill-btn">Remove All Skills</button>
21+
<button id="add-skill-btn">Add To Skills</button>
22+
</div>
23+
</div>
24+
25+
<div class="container">
26+
<h2 class="heading">Skills</h2>
27+
<div class="group">
28+
<label>HTML<span>90%</span></label>
29+
<div class="bar" style='box-shadow: 0px 0px 2px #f3442a;'>
30+
<div class="per-level" style="width: 90%; background-color: #f3442a;"></div>
31+
</div>
32+
</div>
33+
<div class="group">
34+
<label>CSS<span>80%</span></label>
35+
<div class="bar" style='box-shadow: 0px 0px 2px #4481eb;'>
36+
<div class="per-level" style="width: 80%; background-color: #4481eb;"></div>
37+
</div>
38+
</div>
39+
<div class="group">
40+
<label>JavaScript<span>50%</span></label>
41+
<div class="bar" style='box-shadow: 0px 0px 2px #feb300;'>
42+
<div class="per-level" style="width: 50%; background-color: #feb300;"></div>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
<script src="app.js"></script>
48+
</body>
49+
50+
</html>

0 commit comments

Comments
 (0)