Hi Randell,
var express = require('express');
var app = express();
var port = 3001;
app.use(express.static(_dirname + '/'));
app.listen(port);
console.log('Server started at : ' + port);
app.post('/api/login', function(req, res) {
var results = [{
title: "Java",
instructor: "Saurabh",
level: "Beginner"
total_videos: 10
},{
title: "C++",
instructor: "Saurabh",
level: "Beginner"
total_videos: 15
},{
title: "C",
instructor: "Saurabh",
level: "Beginner"
total_videos: 12
},{
title: "Web Development",
instructor: "Shahid",
level: "Beginner"
total_videos: 20
},
{
title: "Web Development",
instructor: "Shahid",
level: "Beginner"
total_videos: 20
}];
res.json(results);
} )```
```Here is what my file on index.html file:-
<!DOCTYPE html>
<html>
<head>
<title>MySirG.com</title>
<!-- [if lt IE 9] -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<header>
<nav>
<ul>
<li><a href="/index.html">Home</a> </li>
<li><a href="/courses.html">Courses</a> </li>
<li><a href="/about.html">About</a> </li>
<li><a href="/contact.html">Contact</a> </li>
</ul>
</nav>
<img src="images/logo.png" />
</header>
<section id="main" class="boxed">
<p>This is <en>Home </en> page of <strong>MySirg.com</strong></p>
<div class="login-form boxed">
<form action="/api/login" method="POST" id="loginForm">
<label for="username">Username :</label>
<input type="text" name="username" id="username" /> <br />
<label for="Password">Password :</label>
<input type="password" name="password" id="password" /> <br />
<input type="checkbox" name="remember" id="remember">
<label for="remember">Remember Me</label> <br />
<br/>
<div id="errorMsg"></div>
<br/>
<input type="submit" name="loginbutton" value="Login" />
<input type="reset" name="cancelbutton" value="Cancel"/>
</form>
<div id ="logoutSection">
<p> You are logged in.</p>
<button id="logoutButton">Logout</button>
</div>
</div>
<div id="results" class="boxed">
<button id="toggleButton1">Hide</button>
<div id="resultList">
Here we will display all the courses.
</div>
</div>
</section>
<footer>
© 2017 MySirG.com
</footer>
</div>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>```
```Here is what my file is on app.js:-
"use strict"
/*var msg = "Hello";
console.log(msg);
var resultsDiv = document.getElementById("results");
resultsDiv.innerHTML = "<p> Message injected by JS </p>";*/
$(document).ready(function(){
var resultList = $("#resultList");
resultList.text("Injected using jquery");
var toggleButton = $("#toggleButton1");
toggleButton.on("click", function () {
console.log("Button clicked");
resultList.toggle(500);
if(toggleButton.text() === "Hide"){
toggleButton.text("Show");
}
else {
toggleButton.text("Hide");
}
});
var results = [];
function displayResults(results) {
resultList.empty();
$.each(results, function(i, item){
var newResult = $("<div class='result'>" +
"<div class='title'>" + item.title + "</div>" +
"<div>" + "Level : " + item.level + "</div>" +
"<div>" + "Total Videos : " + item.total_videos + "</div>" +
"<div>" + "Instructor : " + item.instructor + "</div>" +
"</div>");
resultList.append(newResult);
newResult.hover(function (){
$(this).css("background-color", "lightgray");
$(this).css("color", "darkblue");
$(this).css("border-color", "blue");
}, function (){
$(this).css("background-color", "transparent");
$(this).css("color", "black");
$(this).css("border-color", "#999");
}
)
});
}
$("#loginForm").on("submit", function () {
var username =$("#username").val();
var password =$("#password").val();
if(username && password){
$.post("/api/login", {}, function(data) {
console.log("Success :: " + data);
displayResults(data);
$("#loginForm").hide();
$("#logoutSection").show();
$("#errorMsg").empty();
})
.fail(function(data){
$("#errorMsg").text("Something BAD happened!")
})
.done(function() {
})
} else {
$("#errorMsg").text("Username and Password are mandatory.");
}
return false;
});
$("#logoutButton").on('click', function(){
$("#loginForm").show();
$("#logoutSection").hide();
resultList.empty();
resultList.text("Please login to see all courses.")
})
});```
```Here is what my file on style.css file:-
html, body {
padding: 0px;
margin: 0px;
}
body{
font-family: Helvetica, Arial, sans-serif;
background-color: #007FC0;
}
.container {
width: 990px;
margin: 0 auto;
background-color: white;
padding: 5px;
}
.bordered {
border: 1px solid #ccc ;
border-radius: 2px;
}
header, footer{
background-color: #7ECBF3;
border: 1px solid black;
}
footer {
padding: 10px;
border-radius: 5px;
}
header nav{
float: right;
}
header nav li {
display: inline;
font-size: 12px;
padding-right: 10px;
}
a {
color: #007FC0;
}
.boxed {
box-shadow: 0 4px 4px 0 rgba(0,0,0,0.24),0 0 4px 0 rgba(0,0,0,0.14);
}
#main
{
min-height: 600px;
border-radius: 5px;
color: #202020;
margin: 10px 0px;
padding: 5px;
}
#results {
padding: 2px;
width: 300px;
display: inline-block;
vertical-align: top;
border: 1px solid #ccc;
}
.result{
margin: 5px;
border: 1px solid #999;
}
.login-form {
display: inline-block;
vertical-align: top;
width: 400px;
padding: 2px;
}
.login-form label{
width: 120px;
display: inline-block;
padding-bottom: 10px;
}
.login-form input[type=text],
.login-form input[type=password]
{
width: 150px;
}
.login-form input[type=submit],
.login-form input[type=reset] {
background-color: #007FC0;
color: #fff;
border-radius: 10px;
padding: 3px;
margin-top: 5px;
width: 75px;
}
.login-form input[type=reset]
{
background-color: gray;
}
#errorMsg {
color: #f00;
font-size: 12px;
}
#logoutSection{
display: none;
}```
```Here is my code on package.json file:-
{
"name": "node1",
"version": "1.0.0",
"description": "simple knowledgebase app",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Raman Sahi",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"jquery": "^3.4.1"
}
}```