Skip to content

Commit 14520b9

Browse files
soham047soham047
authored
Add files via upload
1 parent 5e1e096 commit 14520b9

12 files changed

Lines changed: 751 additions & 0 deletions

File tree

‎API-based-Weather-App/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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+
<link href="styles.css" rel="stylesheet">
7+
<title>Weather App</title>
8+
</head>
9+
<body>
10+
<div id="container">
11+
<h1><u>Weather App</u></h1>
12+
<div id="itp">
13+
<input type="text" id="cityInput" placeholder="Enter city name">
14+
<button id="srchBtn">Search</button>
15+
</div>
16+
<div id="otp" class="hidden">
17+
<p id="city"></p>
18+
<p id="temp"></p>
19+
<p id="weather"></p>
20+
</div>
21+
<p id="Error" class="hidden">Could not find entered city</p>
22+
</div>
23+
<script src="script.js"></script>
24+
</body>
25+
</html>

‎API-based-Weather-App/script.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
document.addEventListener("DOMContentLoaded", function(){
2+
const cityInput = document.getElementById("cityInput");
3+
const srchBtn = document.getElementById("srchBtn");
4+
const otp = document.getElementById("otp");
5+
const city = document.getElementById("city");
6+
// const cnt = document.getElementById("cnt");
7+
const wthr = document.getElementById("weather");
8+
const temp = document.getElementById("temp");
9+
const err = document.getElementById("Error");
10+
11+
const API_KEY = "534a71684b23c6e3c0f5901752265d0e";
12+
13+
srchBtn.addEventListener("click", async function() {
14+
otp.classList.add("hidden");
15+
err.classList.add("hidden");
16+
n = cityInput.value.trim();
17+
if (n){
18+
data = await getWeather(n);
19+
showWeather(data);
20+
}
21+
else{
22+
showError();
23+
}
24+
});
25+
26+
async function getWeather(name){
27+
url = `https://api.openweathermap.org/data/2.5/weather?q=${name}&appid=${API_KEY}`;
28+
try{
29+
const d = await fetch(url);
30+
if (d){
31+
const json_d = await d.json();
32+
return json_d;
33+
}
34+
else{
35+
showError();
36+
}
37+
}
38+
catch(er){
39+
showError();
40+
}
41+
42+
}
43+
44+
function showWeather(data){
45+
46+
console.log(data)
47+
const {main, name, weather} = data;
48+
city.textContent = `City : ${name}`;
49+
temp.textContent = `Temperature : ${main.temp - 273.15} °C`;
50+
wthr.textContent = `Weather : ${weather[0].description}`;
51+
52+
err.classList.add("hidden");
53+
otp.classList.remove("hidden");
54+
}
55+
56+
function showError(){
57+
err.classList.remove("hidden");
58+
}
59+
60+
});

‎API-based-Weather-App/styles.css‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
html, body {
2+
background: #1c1c1c;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
}
8+
h1 {
9+
color: #fff;
10+
margin-bottom: 50px;
11+
}
12+
#container{
13+
display: flex;
14+
align-items: center;
15+
background-color: #8e8b8b5d;
16+
flex-direction: column;
17+
padding: 50px;
18+
border-radius: 10px;
19+
box-shadow:0px 7px 20px #000;
20+
}
21+
22+
#cityInput{
23+
margin-bottom: 10px;
24+
padding: 10px;
25+
border: none;
26+
border-radius: 5px;
27+
font-size: 16px;
28+
/* box-shadow:0px 1px 10px #000; */
29+
margin-inline: 10px;
30+
}
31+
32+
#cityInput:focus{
33+
outline: none;
34+
border: 3px solid #364bb5;
35+
}
36+
#srchBtn {
37+
background-color: #364bb5;
38+
color: white;
39+
cursor: pointer;
40+
margin-bottom: 10px;
41+
padding: 10px;
42+
border: none;
43+
border-radius: 5px;
44+
font-size: 16px;
45+
/* box-shadow:0px 1px 10px #000; */
46+
}
47+
48+
.hidden{
49+
display: none !important;
50+
}
51+
52+
#otp{
53+
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
54+
font-size: 20px;
55+
display: flex;
56+
flex-direction: column;
57+
width: 100%;
58+
}
59+
60+
#city {
61+
color: #fff;
62+
background-color: #2a3a8ba1;
63+
border-radius: 5px;
64+
padding: 5px;
65+
margin-bottom: 0;
66+
}
67+
68+
#temp {
69+
color: #fff;
70+
background-color: #2a3a8ba1;
71+
border-radius: 5px;
72+
padding: 5px;
73+
margin: 0;
74+
}
75+
#weather {
76+
color: #fff;
77+
background-color: #2a3a8ba1;
78+
border-radius: 5px;
79+
padding: 5px;
80+
margin: 0;
81+
}
82+
#Error {
83+
color: #fff;
84+
background-color: #8b2a2aa1;
85+
border-radius: 5px;
86+
padding: 5px;
87+
margin: 0;
88+
}

‎Expense-Tracker/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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">
6+
<title>Expense Tracker</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
8+
<link href="styles.css" rel="stylesheet">
9+
</head>
10+
<body>
11+
<div class="container bg-dark shadow-lg">
12+
<h1 class="text-light"><u>Expense Tracker</u></h1>
13+
<form>
14+
<div class="mb-3">
15+
<label class="form-label text-light">Enter Expense Name : </label>
16+
<input type="text" class="form-control" id="expType">
17+
</div>
18+
<div class="mb-3">
19+
<label class="form-label text-light">Enter Expense : </label>
20+
<input type="number" class="form-control" id="prcInput">
21+
</div>
22+
<button type="submit" id="btnSub" class="btn">Submit</button>
23+
</form>
24+
<div id="expenseCnt" class="container text-light hidden">
25+
<ul id="expenseList" class="list-group">
26+
<!-- <li><span>abcd</span> : <span>4521</span></li> -->
27+
</ul>
28+
<button id="btnClr" class="btn">Clear Expenses</button>
29+
</div>
30+
</div>
31+
<script src="script.js"></script>
32+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
33+
</body>
34+
</html>

‎Expense-Tracker/script.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
document.addEventListener("DOMContentLoaded",()=>{
2+
const btn = document.getElementById("btnSub");
3+
const lst = document.getElementById("expenseList");
4+
const expCnt = document.getElementById("expenseCnt");
5+
const prc = document.getElementById("prcInput");
6+
const expType = document.getElementById("expType");
7+
const clrBtn = document.getElementById("btnClr");
8+
9+
e = JSON.parse(localStorage.getItem("expenses")) || [];
10+
11+
btn.addEventListener("click", (event)=>{
12+
event.preventDefault();
13+
let exps = {
14+
id: e.length,
15+
price: prc.value,
16+
type: expType.value
17+
}
18+
e.push(exps);
19+
saveExps(e);
20+
showExps();
21+
});
22+
23+
function saveExps(exp){
24+
localStorage.setItem("expenses", JSON.stringify(exp));
25+
26+
}
27+
28+
function showExps(){
29+
lst.innerHTML = ``;
30+
var s=0;
31+
32+
console.log(e);
33+
e.forEach(i => {
34+
li = document.createElement("li");
35+
li.innerHTML = `
36+
<span>${i.type}</span> : <span>${i.price}</span>`;
37+
s += parseInt(i.price);
38+
lst.appendChild(li);
39+
});
40+
li2 = document.createElement("li");
41+
li2.innerHTML = `
42+
<span>Total</span> : <span>${s}</span>`;
43+
lst.appendChild(li2);
44+
45+
expCnt.classList.remove("hidden");
46+
47+
};
48+
49+
clrBtn.addEventListener("click", (event)=>{
50+
event.preventDefault();
51+
localStorage.clear();
52+
e = [];
53+
lst.innerHTML = ``;
54+
expCnt.classList.add("hidden");
55+
});
56+
57+
});

‎Expense-Tracker/styles.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
html, body{
2+
background-color: rgb(21, 21, 21);
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
}
8+
9+
.container{
10+
11+
padding: 50px;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
border-radius: 10px;
16+
flex-direction: column;
17+
18+
}
19+
20+
.btn{
21+
padding: 10px 20px;
22+
background-color: rgb(15, 15, 15);
23+
color: white;
24+
border: none;
25+
border-radius: 5px;
26+
cursor: pointer;
27+
transition: background-color 0.25s ease;
28+
width: 100%;
29+
}
30+
31+
.btn:hover{
32+
background-color: rgba(113, 112, 112, 0.9);
33+
color: #000;
34+
}
35+
36+
.hidden{
37+
display: none;
38+
}
39+
40+
#expenseList{
41+
margin-top: 0px !important;
42+
margin: 20px;
43+
list-style-type: none;
44+
padding: 0;
45+
width: 100%;
46+
background-color:white ;
47+
color: rgb(21, 21, 21);
48+
padding: 20px;
49+
}
50+
51+
#expenseList li{
52+
display: flex;
53+
align-items: center;
54+
justify-content: space-between;
55+
font-family:Verdana, Geneva, Tahoma, sans-serif;
56+
font-size: 20px;
57+
}
58+

‎To-do-list/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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>To-Do List</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>To-Do List</h1>
12+
<div class="input-container">
13+
<input type="text" id="taskInput" placeholder="Add a new task...">
14+
<button id="taskSubmit">Add</button>
15+
</div>
16+
<ul id="taskList" class="task-list"></ul>
17+
</div>
18+
<script src="script.js"></script>
19+
</body>
20+
</html>

0 commit comments

Comments
 (0)