Commit 6faca7e0 authored by Kaloyan Bojilski's avatar Kaloyan Bojilski
Browse files

typescrypt homework

parent bf80c0b3
No related merge requests found
Showing with 371 additions and 0 deletions
+371 -0
<!DOCTYPE html>
<html>
<head>
<title>Country City State Getter</title>
<link rel="stylesheet" href="style.css">
</head>
<body onload="load()">
<div>
<a id="myLink" href="#"></a>
</div>
<div>
<h1>Address Selection</h1>
</div>
<div>
<video width="320" height="200" controls>
<source src="rec.mp4" type="video/mp4">
</video>
</div>
<div>
<select name="country" id="country" onchange="countrySet()">
<option value="none" selected>Select Country</option>
</select>
</div>
<div>
<select name="state" id="state" onchange="stateSet()">
<option value="none" selected>Select State</option>
</select>
</div>
<div>
<select name="city" id="city" onchange="citySet()">
<option value="none" selected>Select City</option>
</select>
</div>
<div>
<p id="message">
</p>
</div>
<div class="rectangle" onclick="easterEgg2()"></div>
<script src="script.js"></script>
</body>
</html>
\ No newline at end of file
script.js 0 → 100644
var getToken = async function () {
let request = new Request(
"https://www.universal-tutorial.com/api/getaccesstoken",
{
method: "GET",
headers: {
"Accept": "application/json",
"api-token": "7mopcX13UXlZwIMmwkCAkNW9cMB6LGQ8qSRM80bhAg9GeEIHsDRX7Tl6oB_xab3RoVI",
"user-email": "kaloyan.bojilski@paysafe.com"
}
}
)
let response = await fetch(request);
let jsonRespone = await response.json();
localStorage.setItem("auth_token", jsonRespone.auth_token);
};
var getApiResponse = async function (url) {
let response = await fetch(url, {
method: "GET",
headers: {
"Authorization": "Bearer " + localStorage.getItem("auth_token"),
"Accept": "application/json"
}
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
return response;
}
var getCountries = async function () {
if(localStorage.getItem("auth_key") == null) {
await getToken();
}
const countriesJson = await getApiResponse("https://www.universal-tutorial.com/api/countries/");
var countryDropdown = document.getElementById("country");
countriesJson.forEach(country => {
var option = document.createElement("option");
option.value = country["country_name"];
option.textContent = country["country_name"];
countryDropdown.appendChild(option);
});
};
var getStates = async function () {
let selectedCountry = document.getElementById("country").value;
const statesJson = await getApiResponse("https://www.universal-tutorial.com/api/states/" + selectedCountry);
var stateDropdown = document.getElementById("state");
statesJson.forEach(state => {
var option = document.createElement("option");
option.value = state["state_name"];
option.textContent = state["state_name"];
stateDropdown.appendChild(option);
});
};
var getCities = async function () {
let selectedState = document.getElementById("state").value;
const citiesJson = await getApiResponse("https://www.universal-tutorial.com/api/cities/" + selectedState);
var cityDropdown = document.getElementById("city");
citiesJson.forEach(city => {
var option = document.createElement("option");
option.value = city["city_name"];
option.textContent = city["city_name"];
cityDropdown.appendChild(option);
});
};
function showResult() {
let result= {
"country": (document.getElementById("country")).value,
"state": (document.getElementById('state')).value,
"city": (document.getElementById('city')).value
}
var message = document.getElementById("message");
message.textContent =
"Country:" + result.country +
", State:" + result.state +
", City:" + result.city;
}
var load = async function () {
showResult();
getCountries();
}
var countrySet = async function () {
document.getElementById("state").selectedIndex = 0;
document.getElementById("city").selectedIndex = 0;
showResult();
getStates();
}
var stateSet = async function () {
document.getElementById("city").selectedIndex = 0;
showResult();
getCities();
}
var citySet = function () {
showResult();
easterEgg();
}
var easterEgg = function () {
var message = document.getElementById("message");
if(document.getElementById("country").value == "Bulgaria"
&& document.getElementById("state").value == "Yablaniza"
&& document.getElementById("city").value == "Yablaniza") {
var element = document.body;
element.style.backgroundImage = "url('https://i.gifer.com/2e2J.gif')";
element.style.backgroundRepeat = "no-repeat";
}
}
var easterEgg2 = function() {
var link = document.getElementById("myLink");
var gifUrl = "https://media1.giphy.com/media/Z9hUpIXdcymyygx4Y1/giphy.gif?cid=6c09b9525xv1txoonuc2rxreilrchdb1gi0as9ylhrzehda9&ep=v1_stickers_related&rid=giphy.gif&ct=shttps://thumbs.gfycat.com/ExaltedInsistentHypacrosaurus-size_restricted.gif";
var gifImage = document.createElement("img");
gifImage.src = gifUrl;
gifImage.alt = "Animated GIF";
link.appendChild(gifImage);
}
\ No newline at end of file
scrypt.ts 0 → 100644
var getToken = async function (): Promise<void> {
let request = new Request(
"https://www.universal-tutorial.com/api/getaccesstoken",
{
method: "GET",
headers: {
"Accept": "application/json",
"api-token": "7mopcX13UXlZwIMmwkCAkNW9cMB6LGQ8qSRM80bhAg9GeEIHsDRX7Tl6oB_xab3RoVI",
"user-email": "kaloyan.bojilski@paysafe.com"
}
}
)
let response = await fetch(request);
let jsonResponse = await response.json();
localStorage.setItem("auth_token", jsonResponse.auth_token);
};
var getApiResponse = async function (url: string): Promise<any> {
let response = await fetch(url, {
method: "GET",
headers: {
"Authorization": "Bearer " + localStorage.getItem("auth_token"),
"Accept": "application/json"
}
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
return response;
}
var getCountries = async function (): Promise<void> {
if (localStorage.getItem("auth_key") == null) {
await getToken();
}
const countriesJson = await getApiResponse("https://www.universal-tutorial.com/api/countries/");
var countryDropdown = document.getElementById("country") as HTMLSelectElement;
countriesJson.forEach(country => {
var option = document.createElement("option");
option.value = country["country_name"];
option.textContent = country["country_name"];
countryDropdown.appendChild(option);
});
};
var getStates = async function (): Promise<void> {
let selectedCountry = (document.getElementById("country") as HTMLSelectElement).value;
const statesJson = await getApiResponse("https://www.universal-tutorial.com/api/states/" + selectedCountry);
var stateDropdown = document.getElementById("state") as HTMLSelectElement;
statesJson.forEach(state => {
var option = document.createElement("option");
option.value = state["state_name"];
option.textContent = state["state_name"];
stateDropdown.appendChild(option);
});
};
var getCities = async function (): Promise<void> {
let selectedState = (document.getElementById("state") as HTMLSelectElement).value;
const citiesJson = await getApiResponse("https://www.universal-tutorial.com/api/cities/" + selectedState);
var cityDropdown = document.getElementById("city") as HTMLSelectElement;
citiesJson.forEach(city => {
var option = document.createElement("option");
option.value = city["city_name"];
option.textContent = city["city_name"];
cityDropdown.appendChild(option);
});
};
export function showResult(): void {
let result = {
"country": (document.getElementById("country") as HTMLSelectElement).value,
"state": (document.getElementById('state') as HTMLSelectElement).value,
"city": (document.getElementById('city') as HTMLSelectElement).value
}
var message = document.getElementById("message");
if(message != null) {
message.textContent =
"Country:" + result.country +
", State:" + result.state +
", City:" + result.city;
}
}
var load = async function (): Promise<void> {
showResult();
getCountries();
}
var countrySet = async function (): Promise<void> {
(document.getElementById("state") as HTMLSelectElement).selectedIndex = 0;
(document.getElementById("city") as HTMLSelectElement).selectedIndex = 0;
showResult();
getStates();
}
var stateSet = async function (): Promise<void> {
(document.getElementById("city") as HTMLSelectElement).selectedIndex = 0;
showResult();
getCities();
}
var citySet = function (): void {
showResult();
easterEgg();
}
var easterEgg = function (): void {
var message = document.getElementById("message");
if ((document.getElementById("country") as HTMLSelectElement).value == "Bulgaria"
&& (document.getElementById("state") as HTMLSelectElement).value == "Yablaniza"
&& (document.getElementById("city") as HTMLSelectElement).value == "Yablaniza") {
var element = document.body;
element.style.backgroundImage = "url('https://i.gifer.com/2e2J.gif')";
element.style.backgroundRepeat = "no-repeat";
}
}
var easterEgg2 = function (): void {
var link = document.getElementById("myLink");
var gifUrl = "https://media1.giphy.com/media/Z9hUpIXdcymyygx4Y1/giphy.gif?cid=6c09b9525xv1txoonuc2rxreilrchdb1gi0as9ylhrzehda9&ep=v1_stickers_related&rid=giphy.gif&ct=shttps://thumbs.gfycat.com/ExaltedInsistentHypacrosaurus-size_restricted.gif";
var gifImage = document.createElement("img");
gifImage.src = gifUrl;
gifImage.alt = "Animated GIF";
if(link != null) {
link.appendChild(gifImage);
}
}
\ No newline at end of file
style.css 0 → 100644
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #e3e4ff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
background-image:;
background-repeat:; /* Adjust to your preference */
}
.rectangle {
width: 200px;
height: 200px;
background-color: #484969; /* Blue color */
position: absolute;
opacity: 0;
top: 100px; /* Move the rectangle 10px from the top */
left: 100px;
}
a {
float: right;
margin-left: 500px;
}
h1 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 40px;
margin-top: 20px;
font-weight: normal;
color: #2d2891;
text-align: top;
}
video {
border: 2px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
select {
padding: 10px;
border: 1px solid #0d7ec5;
border-radius: 10px;
margin-top: 10px;
width: 300px;
font-size: 16px;
text-align: center;
}
p {
font-size: 25px;
margin-top: 40px;
color: #2d23e1;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment