100 Days of Code: Day 6

Home / Technology / Web Development / 100 Days of Code: Day 6
Today was a productive day in the development of the MysticMail landing page. I was able to fix many of the issues that I had yesterday and even managed to add my JavaScript / jQuery script to validate the login information. Tomorrow I will be finishing this project up before adding it to my portfolio.

[vc_row][vc_column][vc_progress_bar values=”%5B%7B%22label%22%3A%22Progress%22%2C%22value%22%3A%226%22%2C%22color%22%3A%22blue%22%7D%5D” title=”100 Days of Code, Round 1″ percentage_value=”27″ title_color=”#3e3e3e” bar_color=”#1b7da9″ track_height=”20px” track_color=”#e7f6fc” m=”20″ extra_class=”” units=”%”][vc_column_text]

Goals For Today:

  • Continue working on the landing page

The Good:

First of all, I would just like to point out that I was right in assuming that I would figure out that navigation menu and alert container if I just took a step back and gave myself a break from it.

It took less than an hour today to modify my code so the alert is now shown above the menu bar – which was actually what I wanted to do from the beginning but couldn’t figure it out. It turns out that there was an issue because my navigation menu is fixed to the top. That was causing my alert menu to not show up above the menu, which is the entire reason I started trying to put it inside the collapsible area.

In any case, I just changed it so now I have a nav container with the menu and alert area, and the nav container is the thing that is fixed to the top of the page instead of the menu.

I also was able to add my footer content as well as create the feature cards in the Features section. I will add the remaining content and download images tomorrow. Then I can make any last-minute changes and add the project to my portfolio. I don’t think it’s too bad for my first Bootstrap project.

Note: this is an embedded view of the current landing page as it is today. As a result, you may be seeing updates that haven’t been discussed yet, and some of the issues/notes may no longer apply.

The Bad:

I really don’t have any issues or complaints today. Except maybe about the weather. Where did spring go?

Notes/Comments:

I was torn about whether to fully integrate login functionality for this site. I added JavaScript /  jQuery functions to check for a valid email address and password and display the appropriate alert(s) at the top of the page. I think that is about as far as I am going to take the page for now. I may come back later on and finish the page, but it doesn’t make sense to right now.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

HTML
<body data-spy="scroll" data-target=".navbar" data-offset="100">

<div id="navContainer" class="fixed-top">

<div id="alert-container" class="d-none float-none">

<p>
<span id="invalidEmail" class="d-none">
Your username is not valid - use your registered email address.
</span>

<span id="invalidPassword" class="d-none">
Your password is required to log in.
</span>

<span id="invalidLogin" class="d-none">
The username/password cannot be found. Try again.
</span>

</p>

</div>

<nav id="nav" class="navbar navbar-expand-xl navbar-light">

<a class="navbar-brand" href="#"><img src="images/Mystic_Mail_Horizontal.png" alt="MysticMail" height="50px"></a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarToggle">

<ul class="nav mx-auto">

<li class="nav-item-active">

<a class="nav-link" href="#">Home</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#featuresContainer">Features</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#downloadContainer">Download</a>

</li>

</ul>

<form class="form-row col-5">

<div class="col">

<label class="sr-only" for="loginUsername">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="loginUsername" placeholder="Username (Email)">

</div>

<div class="col">

<label class="sr-only" for="password">Password</label>
<input type="password" class="form-control mb-2 mr-sm-2" id="password" placeholder="Password">

</div>

<div class="btn-group">

<button id="btnLogin" type="submit" class="btn btn-primary mb-2 ml-2">Login</button>

<button id="btnRegister" type="button" class="btn btn-secondary mb-2 ml-2">Register</button>

</div> <!-- End Button Group -->

</form>

</div> <!-- End collapse container -->

</nav>

</div> <!-- end navContainer -->

<div id="topContainer" class="container-fluid grad1 offsetContainer">

<div class="container">

<div class="row">

<div id="heroText" class="col-sm-12 col-md-12 col-lg-4 align-self-center p-3 text-center h-100">

<h1>A New Way To Reach Inbox Zero</h1>

<h5>MysticMail is a brand new conceptual mail app that will revolutionize the way you think about your inbox. </h5>

<button id="callButton" type="button" class="btn btn-lg btn-dark mb-2" onclick="#downloadContainer">Download</button>

</div>

<div class="col-sm-12 col-md-12 col-lg-8">

<img class="img-fluid" id="topheroimg" src="images/phone2.png" alt="phone mockup 2">

</div>

</div>

</div>

</div>

<div id="featuresContainer" class="container-fluid offsetContainer">

<div class="card-deck align-self-center m-5">

<div class="card">

<div class="card-body purpleCard">

<h3>Feature Title</h3>
<p class="card-text">A Description of the feature will be added in this section. An icon demonstrating the feature will also be added above the title.</p>

</div>

</div> <!-- End Card 1-->

<div class="card">

<div class="card-body purpleCard">

<h3>Feature Title</h3>
<p class="card-text">A Description of the feature will be added in this section. An icon demonstrating the feature will also be added above the title.</p>

</div>

</div> <!-- End Card 2-->

<div class="card">

<div class="card-body purpleCard">

<h3>Feature Title</h3>
<p class="card-text">A Description of the feature will be added in this section. An icon demonstrating the feature will also be added above the title.</p>

</div>

</div> <!-- End Card 3-->

</div> <!-- End Card Deck-->

</div> <!-- End Features Container-->

<div id="downloadContainer" class="container-fluid offsetContainer">

...

</div>

<footer id="footerContainer" class="container">

<p>This landing page was created for demonstration purposes by Aimie Clouse.</p>
<p>MysticMail is a conceptual mail app for Android and iOS devices. To learn more about the development of this landing page, <a href="https://www.blissfullemon.com/portfolio/MysticMail-Landing-Page" target="_blank"> click here </a> to view the project portfolio listing.</p>

</footer>

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

jQuery / JavaScript
function validEmail(userEmail) {

var regex = /^([a-zA-Z0-9_.+-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;

return regex.test(userEmail);

}

$("#btnLogin").click(function() {

var email = $("#loginUsername").val();

if ((email == "" || validEmail(email) == false) && ($("#password").val() == "")) {

$("#alert-container").removeClass("d-none");
$("#alert-container").addClass("d-block");
$("#invalidEmail").removeClass("d-none");
$("#invalidPassword").removeClass("d-none");

} else if ( email == "" || validEmail(email) == false) {

$("#alert-container").removeClass("d-none");
$("#alert-container").addClass("d-block");
$("#invalidEmail").removeClass("d-none");

} else if ( $("#password").val() == "" ) {

$("#alert-container").removeClass("d-none");
$("#alert-container").addClass("d-block");
$("#invalidEmail").addClass("d-none");
$("#invalidPassword").removeClass("d-none");

} else {

$("#alert-container").removeClass("d-block");
$("#alert-container").addClass("d-none");
$("#invalidEmail").addClass("d-none");
$("#invalidPassword").addClass("d-none");

alert ("You have entered a valid username and password. However, this login form is for testing purposes only.");

}

});

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

CSS
@charset "utf-8";
/* CSS Document */

.grad1 {
background: #e6368b; /* Old browsers */
background: -moz-linear-gradient(top, #e6368b 1%, #56c3f0 100%); /* Old Firefox */
background: -webkit-linear-gradient(top, #e6368b 1%,#56c3f0 100%); /* Old Chrome & Old Safari*/
background: linear-gradient(to bottom, #e6368b 1%,#56c3f0 100%); /* Newer Browsers */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6368b', endColorstr='#56c3f0',GradientType=0 ); /* IE */
}

.grad2 {
background: #56c3f0; /* Old browsers */
background: -moz-linear-gradient(top, #56c3f0 1%, #AAC928 100%); /* Old Firefox */
background: -webkit-linear-gradient(top, #56c3f0 1%,#AAC928 100%); /* Old Chrome & Old Safari*/
background: linear-gradient(to bottom, #56c3f0 1%,#AAC928 100%); /* Newer Browsers */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#56c3f0', endColorstr='#AAC928',GradientType=0 ); /* IE */
}

#topContainer {
background-color: #e6368b;
height: 500px;
margin-top: 80px;
}

#descriptionContainer {
background-color: #56c3f0;
height: 500px;
}

#featuresContainer {
background-color: #AAC928;
height: 500px;
}

#downloadContainer {
background-color: #F2E426;
height: 500px;
}

Important Links

[/vc_column_text][/vc_column][/vc_row]

Let's chat!

%d bloggers like this: