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

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

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

For your final project, you are to create a two-page web application of your choice. ASP.NET : C# You must include the following items: At least 5 different standard server controls At least 2 validation controls At least 1 navigation control ~ one must navigate back and forth to each page One session state element Upon completion of your two-page web application, you will provide a two page report describing the functions of the web application as well as each...

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

The number of views of a page on a Web site follows a Poisson distribution with a mean of 1.5 per minute. (i) What is the probability of no views in a minute? (ii) What is the probability of two or fewer views in 10 minutes? (iii) What is the probability of two or fewer views in 2 hours?

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.

In Visual BasicCreate 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. The application should allow the user to enter two items: the number of doughnuts ordered and the number of muffins ordered. The application should should display the total number of items ordered and the total sales amount, inlcuding a 5% sales tax. A doughnut costs .50; a muffin costs .75. Save the...

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

1. An HTML document that’s generated by a web application is a ________________________ web page. 2. An easy way to log the progress of an application in Chrome’s Console panel is to insert __________________ methods at critical points in the code. 3. The childNodes property of a DOM object returns a/an ______________________ of the child nodes for that object. 4. The ___________________ method of an array can be used to concatenate the elements of the array into a single string....

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

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...

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

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

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

1 -Create the code to generate a default web page. The contents of this page should be YourName, right justified

Web Projects If you are learning a web technology, you must create a new page that...

Web Projects If you are learning a web technology, you must create a new page that is web-accessible (use your individual burrow account) that includes a form with a field that allows the user to enter a number only. ● Create an input that allows a number to be entered. Only whole numbers should be allowed. ● Add a button below the input that says "Translate". ● When the button is clicked, it should grab the current number in the...

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

Create a web page using PHP that allows the users to create an account (a username and a password). There should be a login page that allows users to create an account by entering their preferred username and password. The same page should also let users login if they already have an account. If a user is logged in successfully , they should be able to enter a comment and also read the comments entered by others previously.

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

Create a web page that contains a simple math test. The page should have the following arithmetic problems. Add a button under each problem which, when clicked, will display a prompt for the user to enter the answer. Add a swcond button which, when clicked, will check to see if the user's answer is correct. The output should be either "correct" or "incorrect" displayed in an alert box. 1. 5+9= 2. 4*6= 3. 25-14= 4. 48/3= 5. 26%6=

Question