Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
WebDev
epic-journey-display
Commits
353ebc3e
Commit
353ebc3e
authored
Apr 16, 2020
by
Porter Libby
Browse files
radio feedback
parent
d8b7c58e
Changes
7
Hide whitespace changes
Inline
Side-by-side
index.html
View file @
353ebc3e
...
...
@@ -179,7 +179,7 @@
});
// create virtual keyboard if touchscreen is detected
}
</script>
<iframe
width=
"560"
height=
"315
"
<iframe
id=
'modal-video'
allow_embedding=
true
width=
"560"
height=
"315"
src=
"https://www.youtube.com/embed/vjsbZiBVFRM
"
frameborder=
"0"
allow=
"accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen
></iframe>
</div>
...
...
public/css/input.css
View file @
353ebc3e
...
...
@@ -56,6 +56,10 @@ input {
color
:
white
;
}
input
[
type
=
"radio"
]
{
margin-top
:
-1px
;
vertical-align
:
middle
;
}
#radio-form
{
margin
:
0
auto
;
}
...
...
@@ -64,20 +68,11 @@ input {
text-align
:
center
;
}
.block-selection
{
display
:
flex
;
margin-bottom
:
36px
;
overflow
:
hidden
;
justify-content
:
center
;
margin-top
:
35
px
;
margin-top
:
60
px
;
}
.block-selection
input
{
...
...
@@ -86,13 +81,16 @@ input {
height
:
1px
;
width
:
1px
;
border
:
0
;
overflow
:
hidden
;
overflow
:
hidden
;
vertical-align
:
middle
;
}
.block-selection
label
{
background-color
:
#e4e4e4
;
color
:
rgba
(
0
,
0
,
0
,
0.6
);
font-size
:
14px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
color
:
white
;
font-family
:
Sentinel-Light
;
line-height
:
1
;
text-align
:
center
;
padding
:
8px
16px
;
...
...
@@ -102,16 +100,18 @@ input {
transition
:
all
0.1s
ease-in-out
;
height
:
100px
;
width
:
200px
;
font-size
:
2
4
px
;
font-size
:
2
0
px
;
}
.block-selection
label
:hover
{
cursor
:
pointer
;
background-color
:
#aaaaaa
;
background-color
:
white
!important
;
color
:
black
!important
;
}
.block-selection
input
:checked
+
label
{
background-color
:
#a5dc86
;
box-shadow
:
none
;
background-color
:
white
!important
;
color
:
black
!important
;
text-decoration
:
underline
}
.block-selection
label
:first-of-type
{
...
...
public/css/main.css
View file @
353ebc3e
...
...
@@ -94,30 +94,31 @@ body{
#block1
{
background-color
:
white
;
height
:
400px
;
}
#block2
{
background-color
:
#6F263D
;
color
:
white
;
height
:
400px
;
text-align
:
center
;
}
#block3
{
background-color
:
white
;
height
:
350px
;
text-align
:
center
;
}
#block4
{
background-color
:
#6F263D
;
color
:
white
;
text-align
:
center
;
}
#block5
{
text-align
:
center
;
background-color
:
white
;
height
:
300px
;
}
#footer
{
height
:
80px
;
background
:
#eee
;
overflow
:
hidden
;
text-align
:
center
;
}
.btn
{
padding
:
30px
65px
;
...
...
public/data/data.js
View file @
353ebc3e
...
...
@@ -334,7 +334,7 @@ var dictionary = {
""
,
"
Sample Description
"
,
"
Internships
"
,
"
https://www.youtube.com/embed/S_sZWo9-35w
"
"
https://www.youtube.com/embed/S_sZWo9-35w
"
,
],
'
research
'
:
[
""
,
...
...
public/js/index.js
View file @
353ebc3e
function
section_two
(
val
){
// load info for section two based on value
console
.
log
(
dictionary
[
"
passion_project
"
][
val
]);
var
url
=
dictionary
[
"
passion_project
"
][
val
][
0
];
var
desc
=
dictionary
[
"
passion_project
"
][
val
][
1
];
var
title
=
dictionary
[
"
passion_project
"
][
val
][
2
];
var
video
=
dictionary
[
"
passion_project
"
][
val
][
3
];
open_modal
()
set_modal_text
(
url
,
desc
,
title
,
video
)
}
function
section_three
(
val
){
// load info for section three based on value
console
.
log
(
dictionary
[
"
access_opportunities
"
][
val
]);
var
url
=
dictionary
[
"
access_opportunities
"
][
val
][
0
];
var
desc
=
dictionary
[
"
access_opportunities
"
][
val
][
1
];
var
title
=
dictionary
[
"
access_opportunities
"
][
val
][
2
];
var
video
=
dictionary
[
"
access_opportunities
"
][
val
][
3
];
open_modal
()
set_modal_text
(
url
,
desc
,
title
,
video
)
}
function
section_four
(
val
){
// load info for section two based on value
console
.
log
(
dictionary
[
"
ways_forward
"
][
val
]);
var
url
=
dictionary
[
"
ways_forward
"
][
val
][
0
];
var
desc
=
dictionary
[
"
ways_forward
"
][
val
][
1
];
var
title
=
dictionary
[
"
ways_forward
"
][
val
][
2
];
var
video
=
dictionary
[
"
ways_forward
"
][
val
][
3
];
open_modal
()
set_modal_text
(
url
,
desc
,
title
,
video
)
var
color_rotate
=
0
;
var
color_arr
=
[
"
#B9771E
"
,
"
#F9423A
"
,
"
#4A8096
"
,
"
#9B1027
"
]
function
random_ec_color
(){
current_color
=
color_arr
[
color_rotate
];
color_rotate
++
;
if
(
color_rotate
>
3
){
color_rotate
=
0
;
}
return
current_color
;
}
...
...
public/js/modal.js
View file @
353ebc3e
...
...
@@ -28,4 +28,36 @@ function set_modal_text(url, description, title, video_url) {
video_obj
.
style
.
display
=
"
block
"
;
video_obj
.
src
=
video_url
;
}
}
// OPEN MODAL FOR SPECIFIC BLOCK
function
section_two
(
val
){
// load info for section two based on value
console
.
log
(
dictionary
[
"
passion_project
"
][
val
]);
var
url
=
dictionary
[
"
passion_project
"
][
val
][
0
];
var
desc
=
dictionary
[
"
passion_project
"
][
val
][
1
];
var
title
=
dictionary
[
"
passion_project
"
][
val
][
2
];
var
video
=
dictionary
[
"
passion_project
"
][
val
][
3
];
open_modal
()
set_modal_text
(
url
,
desc
,
title
,
video
)
}
function
section_three
(
val
){
// load info for section three based on value
console
.
log
(
dictionary
[
"
access_opportunities
"
][
val
]);
var
url
=
dictionary
[
"
access_opportunities
"
][
val
][
0
];
var
desc
=
dictionary
[
"
access_opportunities
"
][
val
][
1
];
var
title
=
dictionary
[
"
access_opportunities
"
][
val
][
2
];
var
video
=
dictionary
[
"
access_opportunities
"
][
val
][
3
];
open_modal
()
set_modal_text
(
url
,
desc
,
title
,
video
)
}
function
section_four
(
val
){
// load info for section two based on value
console
.
log
(
dictionary
[
"
ways_forward
"
][
val
]);
var
url
=
dictionary
[
"
ways_forward
"
][
val
][
0
];
var
desc
=
dictionary
[
"
ways_forward
"
][
val
][
1
];
var
title
=
dictionary
[
"
ways_forward
"
][
val
][
2
];
var
video
=
dictionary
[
"
ways_forward
"
][
val
][
3
];
open_modal
()
set_modal_text
(
url
,
desc
,
title
,
video
)
}
\ No newline at end of file
public/js/populate.js
View file @
353ebc3e
// For populating each section with information from DATA.JS
$
(
document
).
ready
(
function
()
{
// populate when document is loaded
// SECTION 2
...
...
@@ -10,26 +8,28 @@ $(document).ready(function() { // populate when document is loaded
// for each item in passion project section, create a form element
count
++
;
form
.
innerHTML
+=
'
<input type="radio" id="
'
+
"
passion-project-
"
+
count
+
'
" name="passion-project" value="
'
+
property
+
'
" onchange="section_two(this.value)">
'
;
form
.
innerHTML
+=
'
<label for="
'
+
"
passion-project-
"
+
count
+
'
">
'
+
dictionary
[
"
passion_project
"
][
property
][
2
]
+
'
</label><br>
'
;
form
.
innerHTML
+=
'
<label
style="border: 1px solid black; background-color:
'
+
random_ec_color
()
+
'
;"
for="
'
+
"
passion-project-
"
+
count
+
'
">
'
+
dictionary
[
"
passion_project
"
][
property
][
2
]
+
'
</label><br>
'
;
}
// SECTION 3
var
form
=
document
.
getElementById
(
'
radio-form-3
'
);
var
count
=
0
;
color_rotate
=
0
;
// reset color cycle for next block
for
(
property
in
dictionary
[
"
access_opportunities
"
])
{
// for each item in passion project section, create a form element
count
++
;
form
.
innerHTML
+=
'
<input type="radio" id="
'
+
"
access_opportunities-
"
+
count
+
'
" name="access_opportunities" value="
'
+
property
+
'
" onchange="section_three(this.value)">
'
;
form
.
innerHTML
+=
'
<label for="
'
+
"
access_opportunities-
"
+
count
+
'
">
'
+
dictionary
[
"
access_opportunities
"
][
property
][
2
]
+
'
</label><br>
'
;
form
.
innerHTML
+=
'
<label
style="border: 1px solid black; background-color:
'
+
random_ec_color
()
+
'
;"
for="
'
+
"
access_opportunities-
"
+
count
+
'
">
'
+
dictionary
[
"
access_opportunities
"
][
property
][
2
]
+
'
</label><br>
'
;
}
// SECTION 4
var
form
=
document
.
getElementById
(
'
radio-form-4
'
);
var
count
=
0
;
color_rotate
=
0
;
// reset color cycle for next block
for
(
property
in
dictionary
[
"
ways_forward
"
])
{
// for each item in passion project section, create a form element
count
++
;
form
.
innerHTML
+=
'
<input type="radio" id="
'
+
"
ways_forward-
"
+
count
+
'
" name="ways_forward" value="
'
+
property
+
'
" onchange="section_four(this.value)">
'
;
form
.
innerHTML
+=
'
<label for="
'
+
"
ways_forward-
"
+
count
+
'
">
'
+
dictionary
[
"
ways_forward
"
][
property
][
2
]
+
'
</label><br>
'
;
form
.
innerHTML
+=
'
<label
style="border: 1px solid black; background-color:
'
+
random_ec_color
()
+
'
;"
for="
'
+
"
ways_forward-
"
+
count
+
'
">
'
+
dictionary
[
"
ways_forward
"
][
property
][
2
]
+
'
</label><br>
'
;
}
});
\ No newline at end of file
Write
Preview
Markdown
is supported
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