Skip to content

Commit 81bd740

Browse files
SwapnilSadhu007SwapnilSadhu007
authored
Add files via upload
1 parent bb7d93e commit 81bd740

23 files changed

Lines changed: 715 additions & 0 deletions

‎Cryptocurrency Website/Dogecoin.png‎

1.22 MB
Loading

‎Cryptocurrency Website/Ethereum.png‎

1.34 MB
Loading

‎Cryptocurrency Website/bgimage1.jpg‎

194 KB
Loading

‎Cryptocurrency Website/index.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
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>Cryptocurrency Website Design</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<nav>
13+
<img src="logo2.jpg" class="logo">
14+
<ul>
15+
<li><a href="#">Market</a></li>
16+
<li><a href="#">Features</a></li>
17+
<li><a href="#">White papers</a></li>
18+
<li><a href="#">About Us</a></li>
19+
20+
</ul>
21+
<a href="#" class="btn">EN</a>
22+
</nav>
23+
<div class="content">
24+
<h1>BUY & <br> SELL <span> Crypto</span></h1>
25+
<p>World's biggest Cryptocurrency exchange available on web <br> as well as mobile phone.</p>
26+
<a href="https://www.coingecko.com/" target="_blank" class="btn">EXPLORE MORE</a>
27+
</div>
28+
29+
<div class="coin-list">
30+
<div class="coin">
31+
<a href="https://www.coingecko.com/en/coins/bitcoin" target="_blank"></a><img src="logo.png">
32+
<div>
33+
<h3>$<span id="bitcoin"></span></h3>
34+
<p>Bitcoin</p>
35+
</div>
36+
</div>
37+
<div class="coin">
38+
<a href="https://www.coingecko.com/en/coins/ethereum" target="_blank"></a><img src="Ethereum.png">
39+
<div>
40+
<h3>$<span id="ethereum"></span></h3>
41+
<p>Ethereum</p>
42+
</div>
43+
</div>
44+
<div class="coin">
45+
<a href="https://www.coingecko.com/en/coins/dogecoin" target="_blank"></a><img src="Dogecoin.png">
46+
<div>
47+
<h3>$<span id="dogecoin"></span></h3>
48+
<p>Dogecoin</p>
49+
</div>
50+
</div>
51+
</div>
52+
53+
</div>
54+
55+
56+
57+
58+
59+
<script src="scripts.js"></script>
60+
61+
</body>
62+
</html>

‎Cryptocurrency Website/logo.png‎

1.04 MB
Loading

‎Cryptocurrency Website/logo2.jpg‎

29.8 KB
Loading

‎Cryptocurrency Website/scripts.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
var btc = document.getElementById("bitcoin");
2+
var eth = document.getElementById("ethereum");
3+
var doge = document.getElementById("dogecoin");
4+
5+
var settings = {
6+
"async": true,
7+
"scrossDomain": true,
8+
"url":"https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2CEthereum%2Cdogecoin&vs_currencies=inr","method":"GET","headers":{}
9+
}
10+
$.ajax(settings).done(function (response){
11+
btc.innerHTML = response.bitcoin.inr;
12+
eth.innerHTML = response.ethereum.inr;
13+
doge.innerHTML = response.dogecoin.inr;
14+
});

‎Cryptocurrency Website/styles.css‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
font-family: 'Poppins', sans-serif;
5+
box-sizing: border-box;
6+
}
7+
.container{
8+
width: 100%;
9+
height: 100vh;
10+
background-image: url(bgimage1.jpg);
11+
background-position: center;
12+
background-size: cover;
13+
padding: 0 7%;
14+
color: #fff;
15+
16+
}
17+
nav{
18+
width: 100%;
19+
padding: 20px 0;
20+
display: flex;
21+
align-items: center;
22+
23+
}
24+
.logo{
25+
width: 50px;
26+
cursor: pointer;
27+
}
28+
nav ul{
29+
flex: 1;
30+
31+
}
32+
nav ul li{
33+
display: inline-block;
34+
margin: 10px 20px;
35+
36+
}
37+
nav ul li a{
38+
color: #fff;
39+
text-decoration: none;
40+
41+
}
42+
nav .btn{
43+
color: #fff;
44+
text-decoration: none;
45+
border: 1px solid #fff;
46+
padding: 10px 30px ;
47+
border-radius: 20px;
48+
49+
}
50+
.content{
51+
margin-top: 12%;
52+
53+
}
54+
.content h1{
55+
font-size: 88px;
56+
margin-bottom: 15px;
57+
58+
}
59+
.content h1 span{
60+
color: #ff960b;
61+
}
62+
.content p{
63+
line-height: 22px;
64+
font-size: 14px;
65+
66+
}
67+
.content .btn{
68+
display: inline-block;
69+
margin-top: 30px;
70+
background: #ff960b;
71+
color: #fff;
72+
text-decoration: none;
73+
padding: 15px 30px;
74+
border-radius: 30px;
75+
76+
}
77+
.coin-list{
78+
position: absolute;
79+
right: 10%;
80+
bottom: 50px;
81+
display: flex;
82+
align-items: center;
83+
84+
85+
}
86+
.coin{
87+
display: flex;
88+
align-items: center;
89+
font-size: 14px;
90+
margin: 0 15px;
91+
color: #fff;
92+
border: 1px solid #fff;
93+
padding: 20px 30px;
94+
border-radius: 8px;
95+
96+
97+
}
98+
.coin img{
99+
width: 40px;
100+
margin-right: 10px;
101+
}
102+
.coin h3{
103+
color: #fff;
104+
margin-bottom: 5px;
105+
}

‎LeetMetric/index.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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>Leetmatric</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<!-- heading
12+
user
13+
stats -->
14+
<h1>Leetmatric</h1>
15+
<div class="user-container">
16+
<p>Enter your username below:</p>
17+
<div class="user-input-container">
18+
<input type="text" id="user-input" placeholder="Enter your username here" >
19+
<button id="search-btn">Search</button>
20+
</div>
21+
</div>
22+
<div class="stats-container">
23+
<div class="progress">
24+
<div class="progress-item">
25+
<div class="easy-progress circle">
26+
<span id="easy-label"></span>
27+
Easy
28+
</div>
29+
</div>
30+
<div class="progress-item">
31+
<div class="medium-progress circle">
32+
<span id="medium-label"></span>
33+
Medium
34+
</div>
35+
</div>
36+
<div class="progress-item">
37+
<div class="hard-progress circle">
38+
<span id="hard-label"></span>
39+
Hard
40+
</div>
41+
</div>
42+
</div>
43+
<div class="stats-card">
44+
<!-- directly populate card here from the JS code -->
45+
46+
</div>
47+
</div>
48+
49+
</div>
50+
51+
52+
53+
54+
<script src="script.js"></script>
55+
</body>
56+
</html>

‎LeetMetric/script.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
2+
document.addEventListener("DOMContentLoaded", function(){
3+
const searchButton = document.getElementById("search-btn");
4+
const usernameInput = document.getElementById("user-input");
5+
const statsContainer = document.querySelector(".stats-container");
6+
const easyProgressCircle = document.querySelector(".easy-progress");
7+
const mediumProgressCircle = document.querySelector(".medium-progress");
8+
const hardProgressCircle = document.querySelector(".hard-progress");
9+
const easylabel = document.getElementById("easy-label");
10+
const mediumlabel = document.getElementById("medium-label");
11+
const hardlabel = document.getElementById("hard-label");
12+
const cardStatsContainer = document.querySelector(".stats-card");
13+
14+
function validateUsername(username){
15+
if(username.trim() === ""){
16+
alert("Username should not be empty");
17+
return false;
18+
}
19+
const regex = /^[a-zA-Z0-9_-]{1,15}$/;
20+
const isMatching = regex.test(username);
21+
if(!isMatching){
22+
alert("Invalid Username");
23+
}
24+
return isMatching;
25+
}
26+
27+
async function fetchUserDetails(username){
28+
const url = `https://leetcode-stats-api.herokuapp.com/${username}`;
29+
try{
30+
searchButton.textContent = "Searching...";
31+
searchButton.disabled = true;
32+
33+
const response = await fetch(url);
34+
if(!response.ok){
35+
throw new Error("Unable to fetch the User details");
36+
}
37+
const data = await response.json();
38+
console.log("Logging data:", data);
39+
40+
displayUserData(data);
41+
updateProgress(data);
42+
43+
} catch(error){
44+
cardStatsContainer.innerHTML = "<p>No data Found for this username</p>";
45+
46+
easylabel.textContent = "0/0";
47+
mediumlabel.textContent = "0/0";
48+
hardlabel.textContent = "0/0";
49+
easyProgressCircle.style.background = "lightgray";
50+
mediumProgressCircle.style.background = "lightgray";
51+
hardProgressCircle.style.background = "lightgray";
52+
} finally {
53+
searchButton.textContent = "Search";
54+
searchButton.disabled = false;
55+
}
56+
}
57+
58+
function displayUserData(parsedData){
59+
const cardData = [
60+
{ label: "Overall Submissions", value: parsedData.totalSolved },
61+
{ label: "Easy Submissions", value: `${parsedData.easySolved}/${parsedData.totalEasy}` },
62+
{ label: "Medium Submissions", value: `${parsedData.mediumSolved}/${parsedData.totalMedium}` },
63+
{ label: "Hard Submissions", value: `${parsedData.hardSolved}/${parsedData.totalHard}` }
64+
];
65+
66+
cardStatsContainer.innerHTML = cardData.map(item => `
67+
<div class="card">
68+
<h3>${item.label}</h3>
69+
<p>${item.value}</p>
70+
</div>
71+
`).join("");
72+
}
73+
74+
function updateProgress(parsedData){
75+
easylabel.textContent = `${parsedData.easySolved}/${parsedData.totalEasy}`;
76+
let easyPercent = (parsedData.easySolved / parsedData.totalEasy) * 100;
77+
easyProgressCircle.style.background = `conic-gradient(green ${easyPercent}%, #06402B ${easyPercent}% 100%)`;
78+
79+
mediumlabel.textContent = `${parsedData.mediumSolved}/${parsedData.totalMedium}`;
80+
let mediumPercent = (parsedData.mediumSolved / parsedData.totalMedium) * 100;
81+
mediumProgressCircle.style.background = `conic-gradient(orange ${mediumPercent}%, #06402B ${mediumPercent}% 100%)`;
82+
83+
hardlabel.textContent = `${parsedData.hardSolved}/${parsedData.totalHard}`;
84+
let hardPercent = (parsedData.hardSolved / parsedData.totalHard) * 100;
85+
hardProgressCircle.style.background = `conic-gradient(red ${hardPercent}%, #06402B ${hardPercent}% 100%)`;
86+
}
87+
88+
searchButton.addEventListener('click', function(){
89+
const username = usernameInput.value;
90+
console.log("login username:", username);
91+
if(validateUsername(username)) {
92+
fetchUserDetails(username);
93+
}
94+
});
95+
});

0 commit comments

Comments
 (0)