Use an external CSS & JS file, no internal or inline styles & scripts Please comment...

Use an external CSS & JS file, no internal or inline styles & scripts
- Please comment your JS to break down your understanding of what is happening
- You can use a CDN link for your jQuery (Links to an external site.) library reference
Create a web page that includes these HTML 5 semantic elements:
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer>
- <header>
- <nav>
- <section>
Your web page should have at least 3 images and they should all use the figure/fig caption elements
All other content can be generated, but it would be more meaningful if you created content that meant something to you
Create 2 completely different styles for your web page based on your theme but only apply one
- Font, color, spacing and layout should be intentional and not default for all other elements on the page
- Use classes for styling
- As always no CSS frameworks all custom creations from your original self
Create a button that uses jQuery to toggle between the two styles for your web page
Confirm that the code is properly indented & formatted.
Validate your code, there should be no errors

Solutions

Expert Solution

Here is the HTML code for UI. The UI is made with an assumption of hospital's website

<!DOCTYPE html>
<html>
<head>
        <title>Home work</title>
        <script src="theme_changer.js"></script>
        <link rel="stylesheet" type="text/css" href="theme 1.css" id="theme">
</head>
<body>
        <header>XYZ Clinic</header>
        <nav><a href="#">Home</a> | <a href="#">Contact Us</a> | <a href="#" onclick="change_theme()">Change Theme</a></nav>
        <section id="main_section">
                
                <aside>
                        we are delivering the quality services in the filed of hospitality and helth care.
                </aside>
                <article id="first_article">
                        <figure>
                                <h1>Cardiologist</h1>
                                <img src="image1.jpg"  style="width:30%">
                                <figcaption>Dr. John</figcaption>
                        </figure>
                </article>
                <article id="second_article">
                        <figure>
                                <h1>Neurologist</h1>
                                <img src="image2.jpg"  style="width:30%">
                                <figcaption>Dr. Alberto</figcaption>
                        </figure>
                </article>
                <article id="third_article">
                        <figure>
                                <h1>Dentist</h1>
                                <img src="image3.jpg"  style="width:30%">
                                <figcaption>Dr. Marita</figcaption>
                        </figure>
                </article>
                <footer>Thank you</footer>
        </section>
</body>
</html>

Explaination:

as mantioned we have putted

<article>
<aside>
<figcaption>
<figure>
<footer>
<header>
<nav>
<section>

along with external stylesheet and javascript.

Here is the them 1.css

header{
        text-align: center;
        background-color: #ccbbff;      
}

nav > a{
        text-decoration: none;
        color: white;
}
nav{
        background-color: #981267;
        color: white;
}

aside {
        width: 30%;
        float: right;
        background-color: yellow;
        font-style: italic;
        margin-left: 15px;
        padding-left: 15px;
}
#first_article{
        background-color: #982134;
}

#second_article{
        background-color: #986734;
}

#third_article{
        background-color: #981267;
}

figure{
        align-content: center;
}

section{
        background-color: #345677;
}

footer{
        text-align: center;
}

and the code for theme 2.css

header{
        text-align: center;
        background-color: #ccbbff;      
}

nav > a{
        text-decoration: none;
        color: white;
}
nav{
        background-color: #981267;
        color: white;
}

aside {
        width: 30%;
        float: right;
        background-color: yellow;
        font-style: italic;
        margin-left: 15px;
        padding-left: 15px;
}
#first_article{
        background-color: #986734;
}

#second_article{
        background-color: #981267;
}

#third_article{
        background-color: #982134;
}

figure{
        align-content: center;
}

section{
        background-color: #345677;
}

footer{
        text-align: center;
}

and here is the final functional code for changing them using Javascript theme_changer.js with explanation in with it.

//Fisr we have Define a function which will handle my themes 
//Lets consider it change_theme()

function change_theme() {

        //Now we have to find the link element in wich we have define our style sheet.
        element = document.getElementById("theme");

        //After that we have to check that which theme or style sheet our web page is using for that we will use the Ternary operator 
        //If our web page is using theme 1 then the variable elemet.p will be theme 2
        //If web page is using theme 2 the the variable elemet.p will carry the value theme 1
        element.p = 'theme 2' == element.p ? 'theme 1' : 'theme 2';

        // After that we have to set alternate style sheet to our web page 
        // For that we will use the value stored in elemet.p and append .css in it
        // and finaly assign the value to href atribute of link elemet.
        element.href = element.p + '.css';
}

venereology answered 1 month ago

Next > < Previous

Related Solutions

What are inline styles, embedded styles, and external style sheets? Which would you use to define...

What are inline styles, embedded styles, and external style sheets? Which would you use to define a design for an entire Web site and why? Please type out in text so I can read. Also please be as detailed as possible. Thank you in advance!!!

Use external CSS and Javascript files. Use the HTML5 elements to layout the page. In a...

Use external CSS and Javascript files. Use the HTML5 elements to layout the page. In a sidebar include an advertisement that changes its image every three seconds. The can be created in paint and be very simple or more detailed.

Use external CSS and Javascript files Use the HTML5 elements to layout the page. Have a...

Use external CSS and Javascript files Use the HTML5 elements to layout the page. Have a bulleted list and 3 paragraphs this can be loren ipsum. Have the information text fade in when the page is done loading. Stagger the animations so that the text that is higher up on the page fades in before. Add three more animations in addition to the ones above including an interval timer based animation, an event based animation click or hover, and an...

Please take the code below and add some javascript to it. Please use javascript inline. Please...

Please take the code below and add some javascript to it. Please use javascript inline. Please be sure to specify within the webpage with something like 'Click here' too show what was done and how to activate it. Please post in a format that can be directly copied. Thank you in advance HINT: add some fun widgets to the page index-css.html: <!DOCTYPE html> <html lang="en"> <head>  <title>Index-CSS Page</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">...

Create shell scripts, each in its own .sh file. Please include a shebang line at the...

Create shell scripts, each in its own .sh file. Please include a shebang line at the top of the script as well as appropriate comments through out. Write a script that reads sunspot data from data-shell/data/sunspot.txt and uses awk to print a list of the total number of sunspots for each year on record as well as the twelve monthly averages across the record. Note: "awk allows you to index arrays using strings, so as you traverse the data file,...

Part 1(15%): Please write the Boolean expressions below in the file, part5_1.js, in the appropriate functions....

Part 1(15%): Please write the Boolean expressions below in the file, part5_1.js, in the appropriate functions. part5_1.js script will execute if you load the part5_1.html file into the browser. Write a Boolean expression that checks that number num, has n digits. Assume that num is an integer.( consider both the positive and negative case for num) Assuming the following are the ingredients for Jamie Oliver's fried rice: 1/2 dozen green onion 1 teaspoon chilli jam 2 cups rice 2 tablespoon...

Please Provide an External and Internal Environment table for the Deere & Company

What are the internal and external factors that influence the pricing decisions? Please this is a...

What are the internal and external factors that influence the pricing decisions? Please this is a marketing question

Please use HTML and CSS - Create the overlay and popup: Note: this is my original...

Please use HTML and CSS - Create the overlay and popup: Note: this is my original code just add it to to make the next steps please: HTML: <nav> <ul class="Login-button"> LOG IN</ul> </nav> CSS: *{ margin: 0; padding: 0; list-style-type: none; } nav { height: 50px; background: #DEDFE0; display: flex; align-items: center; padding: 0 20px; } .login-button { padding: 5px 8px; cursor: pointer;} .login-button: hover { background: #BCBDC0; } PLEASE do the following: Create a transparent grey overlay over...

a) Use the swan diagram to illustrate the problem of achieving internal and external balance in...

a) Use the swan diagram to illustrate the problem of achieving internal and external balance in the economy. b) Explain why expenditure-switching and expenditure-changing policies may need to be used in combination to simultaneously achieve internal and external balance.

Subjects