Login Issue on website continued

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>
      &copy; 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"
  }
}```

2 posts were merged into an existing topic: Login issue on website

Please do not create duplicate topics for the same challenge/project question(s). This duplicate topic has been unlisted.

Thank you.

I also made sure to merge this topic to the previous one.