Skip to content

Commit 92f0feb

Browse files
SANKET7738SANKET7738
authored
Merge pull request #287 from Tejas1510/circularimage
script to make your images circular in HTML,Javascript
2 parents a675056 + d6da0f5 commit 92f0feb

File tree

6 files changed

+67
-0
lines changed

6 files changed

+67
-0
lines changed

‎JavaScript/CircularImages/Readme.MD

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Circular Image Maker
2+
3+
4+
### How to use it
5+
```
6+
1. Download the given code
7+
2. Run the index.html file
8+
3. you will ask to enter how the image should be circular (In percentage (%))
9+
4. Hit Convert
10+
5. You will be displayed the result
11+
6. You can try with diffenrt number to see the changes
12+
13+
```
14+
## Output
15+
16+
### Main page after loading the site
17+
![endpoint](https://github.com/Tejas1510/hacking-tools-scripts/blob/circularimage/Javascript/CircularImages/images/image2.png)
18+
19+
### Output 1 for 50% Circularity
20+
![endpoint](https://github.com/Tejas1510/hacking-tools-scripts/blob/circularimage/Javascript/CircularImages/images/image1.png)
21+
22+
### Output 1 for 10% Circularity
23+
![endpoint](https://github.com/Tejas1510/hacking-tools-scripts/blob/circularimage/Javascript/CircularImages/images/image3.png)

‎JavaScript/CircularImages/images/image1.png

369 KB
Loading

‎JavaScript/CircularImages/images/image2.png

392 KB
Loading

‎JavaScript/CircularImages/images/image3.png

390 KB
Loading

‎JavaScript/CircularImages/index.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Circular Images</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<center><h1>Welcome to Circular Image Maker</h1></center>
11+
<center> <img id = "myimg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQxrnS7Uh-CuCKnxsud8Emx7IkDhKwFbXWpLA&usqp=CAU" class="img-fluid"
12+
alt="example placeholder"></center>
13+
<center><input id="myinput" type = "number" placeholder="Please Enter how much circular the image should be (in Percentage)"></center>
14+
<center><button onclick="convert()" class="mybtn">Convert</button></center>
15+
<script>
16+
function convert(){
17+
var y = document.getElementById("myimg");
18+
var x = document.getElementById("myimg").src;
19+
var myinput = document.getElementById("myinput").value;
20+
console.log(x)
21+
console.log(y)
22+
y.style.borderRadius=myinput+"%";
23+
y.src = x;
24+
}
25+
</script>
26+
</body>
27+
</html>

‎JavaScript/CircularImages/style.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
#myimg{
2+
width: 500px;
3+
height:400px;
4+
}
5+
.mybtn{
6+
margin-top: 20px;
7+
font-size: 30px;
8+
width: 150px;
9+
background-color: blue;
10+
color: white;
11+
border-radius: 5px;
12+
}
13+
#myinput{
14+
margin-top: 20px;
15+
width: 500px;
16+
padding: 10px;
17+
}

0 commit comments

Comments
 (0)