JavaScript Question: Select only the second element with the class '.container'. Assign it to a variable named `container`.
Code snippets of the sections with "container:"
<nav class="navbar navbar-expand-lg">
<div class="container">
<a title="someUniversity" class="navbar-brand order-1 mr-0"
href="#" target="_blank">Presented by someUniversity JavaScript
Course</a>
<div class="" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#home">Home <span
class="sr-only">(current)</span></a>
<a class="nav-item nav-link"
href="#about">About</a>
<a class="nav-item nav-link"
href="#speakers">Speakers</a>
<a class="nav-item nav-link"
href="#schedule">Schedule</a>
</div>
</div>
</div>
<div class="jumbotron jumbotron-fluid text-white">
<div class="container text-sm-center pt-5">
<h1 class="display-2">JavaScript Conference</h1>
<p class="lead">A One-day Conference About All Things
JavaScript!</p>
<a title="speaker list" class="btn btn-light btn-lg"
href="#speakers">See Speakers</a>
</div>
</div><!-- /jumbotron -->
<div class="container pt-4">
<!-- about -->
<div id="about" class="row">
<div class="col-lg order-lg-2">
<h3 class="mb-4">About JavaScript Conference</h3>
CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a title="someUniversity" class="navbar-brand order-1 mr-0" href="#" target="_blank">Presented by someUniversity JavaScript Course</a>
<div class="" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#about">About</a>
<a class="nav-item nav-link" href="#speakers">Speakers</a>
<a class="nav-item nav-link" href="#schedule">Schedule</a>
</div>
</div>
</div>
<div class="jumbotron jumbotron-fluid text-white">
<div class="container text-sm-center pt-5">
<h1 class="display-2">JavaScript Conference</h1>
<p class="lead">A One-day Conference About All Things JavaScript!</p>
<a title="speaker list" class="btn btn-light btn-lg" href="#speakers">See Speakers</a>
</div>
</div><!-- /jumbotron -->
</body>
<script>
// selecting the elements at index 1 with class name container
var container=document.getElementsByClassName("container")[1];
// printing it to console for testing purpose
console.log(container);
</script>
</html>
OUTPUT:
Printed the container variable to console
Please upvote if you like my answer and comment below if you have any queries.
JavaScript Question: Select only the second element with the class '.container'. Assign it to a variable...
Please edit and add all the code needed to make the images side
by side and to put the buttons in the middle of the images. Thank
you
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.0.0.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light
bg-light"> <a class="navbar-brand" href="#">Lakeside
Resort Spot</a>
<button class="navbar-toggler"
type="button" data-toggle="collapse"
data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false"
aria-label="Toggle navigation">...
Hello, I was wondering if you could possibly think of ways to
improve my home page then I would like you to do so. I know it
could be better. Thank you.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="style.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<nav class="navbar...
To do list - Javascript Javascript(only) needs to be added in order to do the following: Add a new todo item to the list, complete with trash icon Remove the item when the trash icon is clicked Clear the input when the user clicks back into it to add another item. This is already in place in the JS window: (codepen) (function(){ })(); HTML: <div class="card"> <div class="card-body"> <h3 class="card-title">Today's To Do List</h3> <form id="todo-form"> <div class="form-group"> <input type="text" class="form-control"...
HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500" border="10"> <!-----row---1----logo---> <tr><td> <img src="20150516_084745" width="700" height="200"> </td></tr> <!-----row-2-navigation-----> <tr><td> <!----start-navigation-table----> <table width="700" height="100" border="5" bgcolor="lightgreen" > <tr><td><a href="HerbFarm.html"> <center> HOME </center></a></td> <td><a href="about3.html"> <center> ABOUT </center></a></td> <td><a href="contact3.html"> <center> CONTACT </center></a></td> <td><a href="gallery3.html"> <center> GALLERY </center></a></td> </tr> </table> <!------end-navigation-table----> </td></tr> <tr><td> <h1>Contact </h1> <form action="thankyou.html"> </form> <div class="row"> <div class="col-75"> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-50"> <h3>Billing Address</h3> <label for="fname"><i...
This assignment require using different Bootstrap classes for styling. I have used some "class=" (bootstrap) in code, but they don't work. In HTML, we need to add < link > to display bootstrap, but I don't know what to do in PHP. <?php $servername = "fdb29.awardspace.net"; $username = "3515976_assignment9"; $password = "Becky516."; $database = "3515976_assignment9"; $port = "3306"; // Create connection $dbconn = mysqli_connect($servername, $username, $password, $database, $port); if($dbconn){ }else{ die("Connection Failed: ".mysqli_connect_error()); } $myQuery = "SELECT p_name, p_desc, p_img,...
I know there are a couple of answers to this question already but they don't match the sample code we where given. Overview Images, both static and dynamic, appear on most Web sites. There are many different features and functionalities that we can add through the use of JavaScript, including preloading, rollovers, and cycling banner ads. In this assignment, you will work with JavaScript, images, events, and manipulating the DOM to create an interactive image gallery. Hint: Preloading your images...
Form for a user to enter billing and shipping information. A checkbox that when clicked copies all of the billing information to the shipping information. A submit button that, when clicked, will make sure that all text fields have had data entered into them. Create your own validation in for the fields, No automatic browser validation. JavaScript/HTML <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div class="container"> <header> <h1> </h1> </header> <nav> <ul>...
Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="./bootstrap/js/bootstrap.js"></script> <meta charset="UTF-8"> <title>Perry Gerry Mobile Cellular</title> </head> <body> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom shadow-sm"> <h5 class="my-0 mr-md-auto font-weight-normal">Perry Gerry Mobile Cellular</h5> <nav class="my-2 my-md-0 mr-md-3"> <a class="p-2 text-dark" href="index.html">Home</a> <a class="p-2 text-dark" href="about.html">About Us</a> <a class="p-2 text-dark" href="products.html">Products</a> <a class="p-2 text-dark"...
As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...
Hello! I am to create a .js file that allows the paragraph on the bottom of the page to update with what the user enters. I need to modify the given HTML to recognize the javascript file that I am to make from scratch. The HTML file and other details are below: Use the given HTML to add functionality to an interactive form that generates an invitation to volunteers for an event. The file will have the following invitation message...