Title Bar (advanced task with jQuery)

Write a JS class that generates an HTML title bar for a webpage. You will be supplied a title and a list of links for a navigation menu. Compose the markup for the title bar, attach the needed events and when requested, append the element to the document.

A title bar is composed of title text, a button and a menu list of navigation links. Clicking the button toggles the visibility of the menu. See the sample HTML for more details.

The constructor of your class needs to take one string argument – the title of the webpage. The class needs to have the following functions:

addLink(href, name) – takes two string arguments and adds a link to the menu list
appendTo(selector) – takes one string argument, generates HTML element and adds it to the passed in selector

The HTML shown below has the following elements:

<span> with class "title" which holds the title passed in to the constructor
<a> with class "button" which toggles the visibility of the menu; you need to attach a click event to this element
<div> with class "drawer" which contains the navigation links; it’s display css property needs to be toggled between block and none via the button listed above
<a>’s with class "menu-link" for each of the navigation links

The generated HTML needs to match this structure exactly.

<header class="header">
  <div class="header-row">
    <a class="button">&#9776;</a>
    <span class="title">Title</span>
  </div>
  <div class="drawer">
    <nav class="menu">
      <a class="menu-link" href="href">Link name</a>
      <a class="menu-link" href="href">Link name</a>
      <a class="menu-link" href="href">Link name</a>
      <a class="menu-link" href="href">Link name</a>
    </nav>
  </div>
</header>

HTML Skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titlebar</title>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <style>
        .header {
            background-color: #5555ff;
            color: white;
            height: 60px;
            position: relative;
            left: 0;
            top: 0;
        }

        .button {
            cursor: pointer;
            display: block;
            width: 50px;
            height: 50px;
            margin: 4px;
            position: absolute;
            text-align: center;
            line-height: 50px;
            font-size: 24px;
        }

        .title {
            display: block;
            position: absolute;
            left: 80px;
            font-size: 32px;
            font-family: "Helvetica", sans-serif;
            line-height: 60px;
        }

        .drawer {
            left: 0;
            top: 55px;
            float: left;
            position: absolute;
            background-color: #eeeeff;
            width: 180px;
            display: block;
        }

        .menu-link {
            color: black;
            font-family: "Helvetica", sans-serif;
            text-decoration: none;
            font-weight: 600;
            display: block;
            padding: 4px;
            padding-left: 12px;
        }

        .menu-link:hover {
            color: white;
            background-color: #5555ff;
        }

        .post {
            margin: 48px;
        }
    </style>
</head>
<body>
<div id="container">
    <header class="header">
        <div class="header-row">
            <a class="button">&#9776;</a>
            <span class="title">Title Bar Problem</span>
        </div>
        <div class="drawer">
            <nav class="menu">
                <a class="menu-link" href="/">Home</a>
                <a class="menu-link" href="about">About</a>
                <a class="menu-link" href="results">Results</a>
                <a class="menu-link" href="faq">FAQ</a>
            </nav>
        </div>
    </header>
    <div id="content">
        <article class="post"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
            qui officia deserunt mollit anim id est laborum.</p>

            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
                explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
                dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
                incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
                exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
                vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum
                qui dolorem eum fugiat quo voluptas nulla pariatur?</p></article>
    </div>
</div>
</body>
</html>

Examples:

The title bar from the example can be generated using the following code:

Sample JavaScript:

let header = new TitleBar('Title Bar Problem');
header.addLink('/', 'Home');
header.addLink('about', 'About');
header.addLink('results', 'Results');
header.addLink('faq', 'FAQ');
header.appendTo('#container');

Use the provided HTML skeleton as an example and for testing. Note there are no events in the example – the menu will always be visible. jQuery is automatcally available in the Judge, but if you want to use it locally, you’ll have to add it to the HTML yourself.

title bar task with jquery and html and javascript

1 Answer

Here is the HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titlebar</title>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="04.TitleBar.js"></script>
    <style>
        .header {
            background-color: #5555ff;
            color: white;
            height: 60px;
            position: relative;
            left: 0;
            top: 0;
        }

        .button {
            cursor: pointer;
            display: block;
            width: 50px;
            height: 50px;
            margin: 4px;
            position: absolute;
            text-align: center;
            line-height: 50px;
            font-size: 24px;
        }

        .title {
            display: block;
            position: absolute;
            left: 80px;
            font-size: 32px;
            font-family: "Helvetica", sans-serif;
            line-height: 60px;
        }

        .drawer {
            left: 0;
            top: 55px;
            float: left;
            position: absolute;
            background-color: #eeeeff;
            width: 180px;
            display: block;
        }

        .menu-link {
            color: black;
            font-family: "Helvetica", sans-serif;
            text-decoration: none;
            font-weight: 600;
            display: block;
            padding: 4px;
            padding-left: 12px;
        }

        .menu-link:hover {
            color: white;
            background-color: #5555ff;
        }

        .post {
            margin: 48px;
        }
    </style>
</head>
<body>
<div id="container">
    <header class="header">
        <div class="header-row">
            <a class="button">&#9776;</a>
            <span class="title">Title Bar Problem</span>
        </div>
        <div class="drawer">
            <nav class="menu">
                <a class="menu-link" href="/">Home</a>
                <a class="menu-link" href="about">About</a>
                <a class="menu-link" href="results">Results</a>
                <a class="menu-link" href="faq">FAQ</a>
            </nav>
        </div>
    </header>
    <div id="content">
        <article class="post"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
            qui officia deserunt mollit anim id est laborum.</p>

            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
                explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
                dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
                incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
                exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
                vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum
                qui dolorem eum fugiat quo voluptas nulla pariatur?</p></article>
    </div>
</div>
<script>
    $(document).ready(function (){
        let header = new TitleBar('Title Bar Problem');
        header.addLink('/', 'Home');
        header.addLink('about', 'About');
        header.addLink('results', 'Results');
        header.addLink('faq', 'FAQ');
        header.appendTo('#container');
        console.log($(header.links[0]));
    });
</script>
</body>
</html>

and this is the JavaScript file:

class TitleBar {
    constructor(title) {
        this.title = title;
        this.links = [];
    }

    //takes two string arguments and adds a link to the menu list
    addLink(href, name) {
        let link = $('<a>');
        link.addClass('menu-link');
        link.attr('href', href);
        link.text(name);

        this.links.push(link);
    }

    //takes one string argument, generates HTML element and adds it to the passed in selector
    appendTo(selector) {

        let header = $('<header>').addClass('header');
        let headerRow = $('<div>').addClass('header-row');
        let button = $('<a>').addClass('button').html('&#9776;');
        button.on('click', function () {
            $('div.drawer').toggle()
        });
        let span = $('<span>').addClass('title').text(this.title);

        let drawer = $('<div>').addClass('drawer');
        let navMenu = $('<nav>').addClass('menu');
        for (let link of this.links) {
            navMenu.append(link);
        }

        headerRow.append(button);
        headerRow.append(span);

        drawer.append(navMenu);

        header.append(headerRow);
        header.append(drawer);
        $(selector).prepend(header);
    }
}

answered by user mitko
edited by user golearnweb

Q: Title Bar (advanced task with jQuery)

Examples:

Log in (click HERE) or Register (click HERE) to answer this question

1 Answer

Please Log in (click HERE) or Register (click HERE) to add a comment.

Q: Title Bar (advanced task with jQuery)

Examples:

Log in (click HERE) or Register (click HERE) to answer this question

1 Answer

Please Log in (click HERE) or Register (click HERE) to add a comment.

Related questions