Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

nav buttons fix, mobile visibilty fix,invert image fix,2x2 grid fix sigp valdiation feature #28

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

nav buttons fix, mobile visibilty fix,invert image fix,2x2 grid fix sigp valdiation feature #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b358317
nav buttons fix, mobile visibilty fix,invert image fix,2x2 grid fix,s…
PrymeTyme Mar 30, 2023
84f869f
fixed navigation from onclick to href
PrymeTyme Mar 30, 2023
a974b2c
refire test
PrymeTyme Mar 31, 2023
ca27241
grid fix
PrymeTyme Mar 31, 2023
0e6c38e
refire test
PrymeTyme Mar 31, 2023
4a726a4
css grid
PrymeTyme Mar 31, 2023
37bd582
refire test
PrymeTyme Apr 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,23 @@
<nav class="top">
<div class="bar blue card left-align large">
<a
class="bar-item button hide-medium hide-large right padding-large hover-white large blue"
class="bar-item button hide-large right padding-large hover-white large blue"
href="javascript:void(0);"
id="hamburger-button"
onclick="toggleNav()"
title="Toggle Navigation Menu"
><i class="fa fa-bars"></i
></a>
<!-- TODO: Fix Issue, Desktop Nav Is Visible on Mobile -->
<a id="nav-logo" class="bar-item button padding-large white">JobSimulator.Dev</a>
<a id="nav-challenges" class="bar-item button padding-large hover-white">Browse Challenges</a>
<a id="nav-signup" class="bar-item button padding-large hover-white">Sign Up</a>
<a id="nav-logo" class="bar-item button padding-large white " href='#header'>JobSimulator.Dev</a>
<a id="nav-challenges" class="bar-item button hide-small padding-large hover-white " href='#challenges'>Browse Challenges</a>
<a id="nav-signup" class="bar-item button hide-small padding-large hover-white " href='#signup'>Sign Up</a>
</div>

<!-- Navbar on small screens -->
<div id="mobile-nav" class="bar-block white hide hide-large hide-medium large">
<a id="mobile-nav-challenges" class="bar-item button padding-large">Browse Challenges</a>
<a id="mobile-nav-signup" class="bar-item button padding-large">Sign Up</a>
<div id="mobile-nav" class="bar-block white hide hide-large large" >
<a id="mobile-nav-challenges" class="bar-item button padding-large" href='#challenges'>Browse Challenges</a>
<a id="mobile-nav-signup" class="bar-item button padding-large" href='#signup'>Sign Up</a>
</div>
</nav>

Expand Down
21 changes: 20 additions & 1 deletion src/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,30 @@ let resetMessage = () => {
document.getElementById("empty-error-message").hidden = true;
};

function pushUserToArray(usersTable,email){
usersTable.push({username:email})
renderSuccess()

}



addEventListener("submit", (event) => {
event.preventDefault();
resetMessage();
resetMessage()

let email = document.getElementById("email").value;

if(email === ''){
renderEmailEmptyError()
}else{
var index = usersTable.findIndex(x => x.username == email)
index === -1 ? pushUserToArray(usersTable,email): renderEmailTakenError()

}


console.log(usersTable)

// TODO: Show Correct Status Messages on Signup Form
// 1. successful signup
Expand Down
7 changes: 4 additions & 3 deletions src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -669,10 +669,12 @@ form > span {

#jumbo-image {
max-height: 20rem;
filter: invert(1)

/* TODO: Invert banner colors using CSS */
}

@media (max-width: 600px) {
@media (max-width: 980px) {
.modal-content {
margin: 0 10px;
width: auto !important;
Expand Down Expand Up @@ -876,8 +878,7 @@ form > span {

#challenge-grid {
display: grid;
/* TODO: Fix Issue, Tiles Need to be 2x2 Grid. Change only grid-template-columns */
grid-template-columns: none;
grid-template-columns: auto auto;
grid-auto-rows: 10rem;
gap: 1rem;
padding-top: 2rem;
Expand Down