Issue
I have made a skill bar and I want it to decrease its width by 10% every time the button is clicked below is the html and css I used :-
<!DOCTYPE html>
<html>
<head>
<title>
skill bar
</title>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<script src="./js/bar.js"></script>
<link type="text/css" rel="stylesheet" href=
"./css/bar.css">
</head>
<body>
<h1 style="color:white;text-align:center;">
My Skills
</h1>
<div class="box">
<p>
Skills
</p>
<div class="back">
<div class="container skills set">
<span id="percent">100%</span>
</div>
</div>
<button class="button" onclick="cli()">click me</button>
</div>
</body>
</html>
Above is the html and below is the css :-
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');*
{
box-sizing : border-box;
}
p
{
color : #524c4c;
text-align : center;
font-size : 30px;
}
::selection
{
background : royalblue;
color : white;
}
body
{
background : #fbf3f3;
font-family : poppins;
}
.box
{
border-radius : 10px;
background-color : #f2f2f2;
padding : 10px;
box-shadow : rgba(0, 0, 0, 0.35) 0px 5px 15px;
text-align: center;
}
.container
{
width : 100%;
background-color : #ddd;
border-radius : 25px;
}
.skills
{
text-align : right;
padding-top : 6px;
border-radius : 25px;
padding-bottom : 10px;
color : white;
}
.set
{
width : 100%;
background-color : #04AA6D;
transition: all 1s ease-in-out;
}
.button
{
background-color : #4CAF50;
border : none;
color : white;
padding : 15px 32px;
text-align : center;
display : inline-block;
font-size : 16px;
margin : 40px 20px;
cursor : pointer;
}
.back{
background-color : #ddd9d9;
border-radius : 25px;
}
How do I do everytime the button click me is clicked to decrease the width of
by 10%. Hoping to get some responses. I tried it using the offsetwidth but I wasn't able to get any results I want it to decrease on percentage not on pixels. Here https://codepen.io/Gairo717/pen/qBpqqed you can view the live previewfunction cli(){
var on=document.getElementById("percent");
var content = document.getElementsByClassName("set");
on.innerHTML ="90%";
content.style.width = '90%';
}
Here is the js I am using but it's not giving any results
Solution
So what I did here was change the "set" to be an id as when you try to grab "elementS" with the get elements it tries to get more than one item. I also put the percentage sign in its own span, this way the current value can be snagged. I then make it an integer, reduce it by 10 an then replace the visible number along with using a template literal string to change the percentage.
function cli(){
var on=document.getElementById("percent");
var content = document.getElementById("set");
let val = parseInt(document.getElementById("percent").innerText) - 10;
on.innerHTML = val
content.style.width = `${val}%`;
}@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');*
{
box-sizing : border-box;
}
p
{
color : #524c4c;
text-align : center;
font-size : 30px;
}
::selection
{
background : royalblue;
color : white;
}
body
{
background : #fbf3f3;
font-family : poppins;
}
.box
{
border-radius : 10px;
background-color : #f2f2f2;
padding : 10px;
box-shadow : rgba(0, 0, 0, 0.35) 0px 5px 15px;
text-align: center;
}
.container
{
width : 100%;
background-color : #ddd;
border-radius : 25px;
}
.skills
{
text-align : right;
padding-top : 6px;
border-radius : 25px;
padding-bottom : 10px;
color : white;
}
.set
{
width : 100%;
background-color : #04AA6D;
transition: all 1s ease-in-out;
}
.button
{
background-color : #4CAF50;
border : none;
color : white;
padding : 15px 32px;
text-align : center;
display : inline-block;
font-size : 16px;
margin : 40px 20px;
cursor : pointer;
}
.back{
background-color : #ddd9d9;
border-radius : 25px;
}<!DOCTYPE html>
<html>
<head>
<title>
skill bar
</title>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<script src="./js/bar.js"></script>
<link type="text/css" rel="stylesheet" href=
"./css/bar.css">
</head>
<body>
<h1 style="color:white;text-align:center;">
My Skills
</h1>
<div class="box">
<p>
Skills
</p>
<div class="back">
<div class="container skills set" id="set">
<span id="percent">100</span><span>%</span>
</div>
</div>
<button class="button" onclick="cli()">click me</button>
</div>
</body>
</html>If you wanted to ensure it did not go below zero just put in a check like this
function cli(){
var on=document.getElementById("percent");
var content = document.getElementById("set");
let val = parseInt(document.getElementById("percent").innerText) - 10;
if (val >= 0) {
on.innerHTML = val
content.style.width = `${val}%`;
}
}
Answered By - ConnerWithAnE
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.