<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
,
shrink-to-fit
=
no
">
<
title
>Crack-The-Code Game</
title
>
<
link
rel
=
"stylesheet"
href
=
crossorigin
=
"anonymous"
>
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
crossorigin
=
"anonymous"
>
</
script
>
crossorigin
=
"anonymous"
>
</
script
>
<
link
href
=
rel
=
"stylesheet"
>
<
style
>
* {
font-family: 'Yeon Sung', cursive;
}
input {
width: 60px;
height: 40px;
border-radius: 5px;
text-align: center;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"modal fade"
id
=
"popup"
tabindex
=
"-1"
role
=
"dialog"
aria-labelledby
=
"popupLabel"
aria-hidden
=
"true"
>
<
div
class
=
"modal-dialog"
role
=
"document"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-header"
>
<
h5
class="modal-title text-danger
font-weight-bold"
id
=
"popupLabel"
>
Pop Up
</
h5
>
<
button
type
=
"button"
class
=
"close"
data-dismiss
=
"modal"
aria-label
=
"Close"
>
<
span
aria-hidden
=
"true"
>×</
span
>
</
button
>
</
div
>
<
div
class
=
"modal-body"
>
<
h3
id
=
"result"
class
=
"text-center"
></
h3
>
</
div
>
<
div
class
=
"modal-footer"
>
<
button
type
=
"button"
class="btn
btn-secondary"
data-dismiss
=
"modal"
>
Close
</
button
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"container my-4"
>
<
h1
class
=
"text-center my-4"
><
i
class="fas
fa-unlock-alt"></
i
> Crack The Code</
h1
>
<
div
class
=
"text-center"
>
<
input
type
=
"text"
id
=
"b1"
>
<
input
type
=
"text"
id
=
"b2"
>
<
input
type
=
"text"
id
=
"b3"
>
<
br
/>
<
button
class
=
"btn btn-secondary mt-4"
onclick
=
"myfunc();"
>
<
i
class
=
"fas fa-key"
></
i
> Check
</
button
>
</
div
>
<
hr
>
<
div
id
=
"hints"
class
=
"row m-auto"
>
<
div
id
=
"hintOne"
>
<
div
class
=
"card m-4"
style
=
"width: 18rem;"
>
<
div
class
=
"card-header card-title"
>
<
h5
class
=
"card-title text-center"
>
<
i
class
=
"far fa-lightbulb"
></
i
>
Hint #1
</
h5
>
</
div
>
<
div
class
=
"card-body"
>
<
p
id
=
"h1"
class
=
"text-center"
></
p
>
<
h5
class
=
"text-center"
>
One Number is correct and
well placed
</
h5
>
</
div
>
</
div
>
</
div
>
<
div
id
=
"hintTwo"
>
<
div
class
=
"card m-4"
style
=
"width: 18rem;"
>
<
div
class
=
"card-header card-title"
>
<
h5
class
=
"card-title text-center"
>
<
i
class
=
"far fa-lightbulb"
></
i
>
Hint #2
</
h5
>
</
div
>
<
div
class
=
"card-body"
>
<
p
id
=
"h2"
class
=
"text-center"
></
p
>
<
h5
class
=
"text-center"
>
One Number is correct but wrong placed
</
h5
>
</
div
>
</
div
>
</
div
>
<
div
id
=
"hintThree"
>
<
div
class
=
"card m-4"
style
=
"width: 18rem;"
>
<
div
class
=
"card-header card-title"
>
<
h5
class
=
"card-title text-center"
>
<
i
class
=
"far fa-lightbulb"
></
i
>
Hint #3
</
h5
>
</
div
>
<
div
class
=
"card-body"
>
<
p
id
=
"h3"
class
=
"text-center"
></
p
>
<
h5
class
=
"text-center"
>
Two numbers are correct but
wrong placed
</
h5
>
</
div
>
</
div
>
</
div
>
<
div
id
=
"hintFour"
>
<
div
class
=
"card m-4"
style
=
"width: 18rem;"
>
<
div
class
=
"card-header card-title"
>
<
h5
class
=
"card-title text-center"
>
<
i
class
=
"far fa-lightbulb"
></
i
>
Hint #4
</
h5
>
</
div
>
<
div
class
=
"card-body"
>
<
p
id
=
"h4"
class
=
"text-center"
></
p
>
<
h5
class
=
"text-center"
>
Nothing is Correct
</
h5
>
</
div
>
</
div
>
</
div
>
<
div
id
=
"hintFive"
>
<
div
class
=
"card m-4"
style
=
"width: 18rem;"
>
<
div
class
=
"card-header card-title"
>
<
h5
class
=
"card-title text-center"
>
<
i
class
=
"far fa-lightbulb"
></
i
>
Hint #5
</
h5
>
</
div
>
<
div
class
=
"card-body"
>
<
p
id
=
"h5"
class
=
"text-center"
></
p
>
<
h5
class
=
"text-center"
>
One Number is correct but
wrong placed
</
h5
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
<
script
src
=
"script.js"
></
script
>
</
html
>