Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Paysafe Interns Valentin-Kaloyan
Typescript
kaloyan-bojilski-typescrypt-2023
Commits
6faca7e0
Commit
6faca7e0
authored
1 year ago
by
Kaloyan Bojilski
Browse files
Options
Download
Email Patches
Plain Diff
typescrypt homework
parent
bf80c0b3
main
No related merge requests found
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
Untitled-1.html
+45
-0
Untitled-1.html
script.js
+132
-0
script.js
scrypt.ts
+136
-0
scrypt.ts
style.css
+58
-0
style.css
with
371 additions
and
0 deletions
+371
-0
Untitled-1.html
0 → 100644
+
45
-
0
View file @
6faca7e0
<!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
This diff is collapsed.
Click to expand it.
script.js
0 → 100644
+
132
-
0
View file @
6faca7e0
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
This diff is collapsed.
Click to expand it.
scrypt.ts
0 → 100644
+
136
-
0
View file @
6faca7e0
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
This diff is collapsed.
Click to expand it.
style.css
0 → 100644
+
58
-
0
View file @
6faca7e0
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
This diff is collapsed.
Click to expand it.
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
Menu
Projects
Groups
Snippets
Help