Treating the two web pages as two views of a Single Page Application (SPA), create the...

Treating the two web pages as two views of a Single Page Application (SPA), create the SPA with two views, one shows what the page in any one question displays and the other shows what the page in other questions displays

Solutions

Expert Solution

<--Create a template for your main page, the one that will be loaded first and we will build on this one only. Lets call it index.html-->
<--Use Whatever you want to insert. You have not provided the proper information so I am giving you a model so do the necessary chnages which will be very easy nad fun>
<-- in index.html -->
<html>
  <head>
    <meta charset="utf-8">
    <title>Navigation Example</title>
  </head>
  <body>
    <a href="">Home</a>
    <a href="">About</a>
    <a href="">Contact</a>

  </body>
</html>

<--We can add what we call a Fragment Identifier to a URL, and this will be added onto the end of the query string without the page reload. Lets do the following:-->
<-- in index.html -->
<html>
  <head>
    <meta charset="utf-8">
    <title>Navigation Example</title>
  </head>
  <body>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>

  </body>
</html>
<--Now comes the JavaScript. We can use an event listener to listen out for these changes, and when they happen, we can modify the page accordingly.
Create a new file called main.js, and link the index.html to it with the script tags.-->

// in main.js

console.log(location.hash)
<--The location.hash is the fragment identifier that we talked about earlier. If we put a hash at the end of the query string (the url), and press enter, the console will print out the fragment identifier. Cool, but this is not helpful.-->
// This will listen for the fragment identifier change
window.addEventListener("hashchange", function() {
  console.log(location.hash);
});

<--Now console.log is a bit boring but always good for trying something out — but lets actually output it onto the page for everyone to see. Firstly, let’s go back to the index.html and actually build a placeholder for future text.-->
<-- in index.html -->

<html>
  <head>
    <meta charset="utf-8">
    <title>Navigation Example</title>
  </head>
  <body>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>

    <div id="app"></div>
    <script src="main.js"></script>
  </body>
</html>

<--I added a div element with the id of app. This is blank at first, and we will push stuff into it later. Think of it as an empty box, it’s empty now but you can always pack it and unpack it with whatever you like. Lets pack it with some text using JS-->
// in main.js

window.addEventListener("hashchange", function (){
  var contentDiv = document.getElementById("app");
  contentDiv.innerHTML = location.hash;
});

<--We want the page to load content based on the fragment identifier even without the use of the event listener. Take a look at the following.-->
// in main.js
function loadContent(){
  var contentDiv = document.getElementById("app");
  contentDiv.innerHTML = location.hash;
}

window.addEventListener("hashchange", function (){
  loadContent();
});

loadContent();

// in main.js
function loadContent(){
  var contentDiv = document.getElementById("app");
  contentDiv.innerHTML = location.hash;
}


window.addEventListener("hashchange", loadContent);

loadContent();
<--We are making progress but we still have a little problem, the first page without the fragment identifier is left blank, but it should be home, right? Do the following:-->
// in main.js
function loadContent(){
  var contentDiv = document.getElementById("app");
  contentDiv.innerHTML = location.hash;
}

if(!location.hash) {
  location.hash = "#home";
}

loadContent();

window.addEventListener("hashchange", loadContent)

if(!location.hash){
    location.hash = "#home";
}

<--This basically says ‘If there is no location hash, make the location hash #home.’ The ! at the front of the location.hash negates the expression.
We also have another thing to solve: we don’t want to print out the hash symbol with the page. Let’s take it out with a JS method called substr.-->

// in main.js
function loadContent(){
  var contentDiv = document.getElementById("app"),

      // This gets rid of the first character of the string
      fragmentId = location.hash.substr(1);

  contentDiv.innerHTML = fragmentId;
}

if(!location.hash) {
  location.hash = "#home";
}


loadContent();

window.addEventListener("hashchange", loadContent)

<--Its all very well printing out the fragment identifier but its a bit boring, no exciting content to really showcase your website.-->
function getContent(fragmentId){

// lets do some custom content for each page of your website
  var pages = {
    home: "This is the Home page. Welcome to my site.",
    about: "This page will describe what my site is about",
    contact: "Contact me on this page if you have any questions"
  };

// look up what fragment you are searching for in the object
  return pages[fragmentId];
}

function loadContent(){

  var contentDiv = document.getElementById("app"),
      fragmentId = location.hash.substr(1);

  contentDiv.innerHTML = getContent(fragmentId);
}

if(!location.hash) {
  location.hash = "#home";
}

loadContent();

window.addEventListener("hashchange", loadContent)

<--Don’t worry if you don’t understand right now. In short, you want to make your program as efficient as possible. We would prefer to run functions asynchronously (at the same time), minimising wasted time. This is a little bit of a complex concept to understand — so don’t worry if you don’t immediately understand, do some research if you want to find out more.-->
function getContent(fragmentId, callback){

  var pages = {
    home: "This is the Home page. Welcome to my site.",
    about: "This page will describe what my site is about",
    contact: "Contact me on this page if you have any questions"
  };

  callback(pages[fragmentId]);
}



function loadContent(){

  var contentDiv = document.getElementById("app"),
      fragmentId = location.hash.substr(1);

  getContent(fragmentId, function (content) {
    contentDiv.innerHTML = content;
  });

}

if(!location.hash) {
  location.hash = "#home";
}

loadContent();

window.addEventListener("hashchange", loadContent)

venereology answered 1 year ago

Next > < Previous

Question

Treating the two web pages as two views of a Single Page Application (SPA), create the...

Solutions

Expert Solution

Related Solutions

For your final project, you are to create a two-page web application of your choice. ASP.NET...

The number of views of a page on a Web site follows a Poisson distribution with...

Create an empty Web Site application named Bakery. Add a new Web page named Default.aspx to the application. Change the DOCUMENT object's Title property to Meyer's.

1. An HTML document that’s generated by a web application is a ________________________ web page. 2....

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...

Create a 2 page analyses on the relevant Financial Regulations relevant to a spa business or...

1 -Create the code to generate a default web page. The contents of this page should...

Create a web page using PHP that allows the users to create an account (a username...

Create a web page that contains a simple math test. The page should have the following...

Create a simple web page with two(2) AJAX interactions with a mySQL Database AJAX 1 should...