Skip to content

Commit da537dd

Browse files
KMMRCapKMMRCap
committed
first initialize
1 parent e9f60eb commit da537dd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+3304
-0
lines changed

‎1-countdown-timer/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Countdown Timer</title>
8+
<link rel="stylesheet" href="./style.css" />
9+
</head>
10+
11+
<body>
12+
<label>Choose The Year</label>
13+
<input type='number' value="2022" />
14+
<button>Calculate</button>
15+
16+
<h1>Days Left :</h1>
17+
18+
<div class="countdown-container">
19+
<div class="countdown-el days-c">
20+
<p class="big-text" id="days">0</p>
21+
<span>days</span>
22+
</div>
23+
<div class="countdown-el hours-c">
24+
<p class="big-text" id="hours">0</p>
25+
<span>hours</span>
26+
</div>
27+
<div class="countdown-el mins-c">
28+
<p class="big-text" id="mins">0</p>
29+
<span>mins</span>
30+
</div>
31+
<div class="countdown-el seconds-c">
32+
<p class="big-text" id="seconds">0</p>
33+
<span>seconds</span>
34+
</div>
35+
</div>
36+
37+
<a href='../index.html'>Back to Home</a>
38+
39+
<script src="./script.js" defer></script>
40+
</body>
41+
42+
</html>

‎1-countdown-timer/script.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const daysEl = document.getElementById("days");
2+
const hoursEl = document.getElementById("hours");
3+
const minsEl = document.getElementById("mins");
4+
const secondsEl = document.getElementById("seconds");
5+
const button = document.querySelector('button');
6+
7+
let newYears = '';
8+
9+
button.addEventListener("click", () => {
10+
const inputValue = document.querySelector('input').value;
11+
newYears = `1 Jan ${inputValue}`;
12+
13+
countdown();
14+
setInterval(countdown, 1000);
15+
})
16+
17+
18+
function countdown() {
19+
const newYearsDate = new Date(newYears);
20+
const currentDate = new Date();
21+
22+
const totalSeconds = (newYearsDate - currentDate) / 1000;
23+
24+
const days = Math.floor(totalSeconds / 3600 / 24);
25+
const hours = Math.floor(totalSeconds / 3600) % 24;
26+
const mins = Math.floor(totalSeconds / 60) % 60;
27+
const seconds = Math.floor(totalSeconds) % 60;
28+
29+
daysEl.innerHTML = days;
30+
hoursEl.innerHTML = formatTime(hours);
31+
minsEl.innerHTML = formatTime(mins);
32+
secondsEl.innerHTML = formatTime(seconds);
33+
}
34+
35+
function formatTime(time) {
36+
return time < 10 ? `0${time}` : time;
37+
}

‎1-countdown-timer/snow.jpg‎

1.44 MB
Loading

‎1-countdown-timer/style.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-image: url("./snow.jpg");
9+
background-size: cover;
10+
background-position: center center;
11+
display: flex;
12+
flex-direction: column;
13+
align-items: center;
14+
min-height: 100vh;
15+
font-family: "Poppins", sans-serif;
16+
margin: 0;
17+
}
18+
19+
h1 {
20+
font-weight: normal;
21+
font-size: 2rem;
22+
margin-top: 5rem;
23+
}
24+
25+
.countdown-container {
26+
display: flex;
27+
flex-wrap: wrap;
28+
justify-content: center;
29+
}
30+
31+
.big-text {
32+
font-weight: bold;
33+
font-size: 6rem;
34+
line-height: 1;
35+
margin: 1rem 2rem;
36+
}
37+
38+
.countdown-el {
39+
text-align: center;
40+
}
41+
42+
.countdown-el span {
43+
font-size: 1.3rem;
44+
}
45+
46+
label {
47+
padding-top: 2rem;
48+
}
49+
50+
input {
51+
padding: 10px;
52+
font-size: 20px;
53+
border-radius: 10px;
54+
margin: 1rem 0;
55+
width: 7rem;
56+
}
57+
58+
button {
59+
padding: 10px 20px;
60+
font-size: 13px;
61+
border-radius: 10px;
62+
border: 1px solid black;
63+
cursor: pointer;
64+
background-color: aqua;
65+
transition: 0.3s ease;
66+
font-weight: bold;
67+
}
68+
69+
button:hover {
70+
transform: scale(1.1);
71+
}
72+
73+
a {
74+
text-decoration: none;
75+
width: 10rem;
76+
font-size: 1rem;
77+
color: red;
78+
background: gold;
79+
border-radius: 10px;
80+
padding: 8px 15px;
81+
position: fixed;
82+
bottom: 10px;
83+
right: 0;
84+
left: 0;
85+
margin: auto;
86+
text-align: center;
87+
}

‎10-weather-app/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Weather App</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
11+
<body>
12+
<form id="form">
13+
<input type="text" id="search" placeholder="Search by location" autocomplete="off" />
14+
</form>
15+
<main id="main"></main>
16+
17+
<a href="../index.html">Back To Home</a>
18+
19+
<script src="script.js" defer></script>
20+
</body>
21+
22+
</html>

‎10-weather-app/script.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
const apikey = "3265874a2c77ae4a04bb96236a642d2f";
2+
3+
const main = document.getElementById("main");
4+
const form = document.getElementById("form");
5+
const search = document.getElementById("search");
6+
7+
const url = (city) =>
8+
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apikey}`;
9+
10+
async function getWeatherByLocation(city) {
11+
try {
12+
const resp = await fetch(url(city), { origin: "cors" });
13+
const respData = await resp.json();
14+
// console.log(respData);
15+
addWeatherToPage(respData);
16+
}
17+
catch {
18+
const weather = document.createElement("div");
19+
weather.classList.add("weather");
20+
21+
weather.innerHTML = `Couldn't find it`
22+
23+
main.innerHTML = "";
24+
main.appendChild(weather);
25+
}
26+
}
27+
28+
function addWeatherToPage(data) {
29+
const weather = document.createElement("div");
30+
weather.classList.add("weather");
31+
32+
const temp = KtoC(data.main.temp);
33+
34+
weather.innerHTML = `
35+
<h3>${data.sys.country + ' - ' + data.name}</h3>
36+
<div>
37+
<img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" />
38+
<h5>Temperature : ${temp}°C </h5>
39+
<img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" />
40+
</div>
41+
<small>Clouds : ${data.weather[0].main}</small>
42+
<h6>Humidity : ${data.main.humidity}%</h6>
43+
<h6>Pressure : ${data.main.pressure} mb</h6>
44+
`;
45+
46+
// cleanup
47+
main.innerHTML = "";
48+
49+
main.appendChild(weather);
50+
}
51+
52+
function KtoC(K) {
53+
return Math.floor(K - 273.15);
54+
}
55+
56+
form.addEventListener("submit", (e) => {
57+
e.preventDefault();
58+
59+
const city = search.value;
60+
61+
if (city) {
62+
getWeatherByLocation(city);
63+
}
64+
});

‎10-weather-app/style.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: linear-gradient(300deg, #ced1d6, #bfc0c0);
9+
font-family: "Poppins", sans-serif;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
margin: 0;
14+
min-height: 100vh;
15+
}
16+
17+
input {
18+
background-color: #fff;
19+
border: none;
20+
border-radius: 25px;
21+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
22+
font-family: inherit;
23+
font-size: 1rem;
24+
padding: 1rem;
25+
min-width: 300px;
26+
margin-top: 3rem;
27+
}
28+
29+
input:focus {
30+
outline: none;
31+
}
32+
33+
.weather {
34+
font-size: 2rem;
35+
text-align: center;
36+
}
37+
38+
.weather h2 {
39+
display: flex;
40+
align-items: center;
41+
margin-bottom: 0;
42+
}
43+
44+
.weather div{
45+
display: flex;
46+
}
47+
48+
a {
49+
text-decoration: none;
50+
width: 8rem;
51+
font-size: 0.8rem;
52+
color: red;
53+
background: gold;
54+
border-radius: 10px;
55+
padding: 8px 15px;
56+
position: fixed;
57+
bottom: 10px;
58+
right: 10px;
59+
text-align: center;
60+
}
61+

‎11-browser-info/images/chrome.png‎

321 KB
Loading

‎11-browser-info/images/esge.png‎

19.7 KB
Loading

‎11-browser-info/images/firefox.png‎

397 KB
Loading

0 commit comments

Comments
 (0)