How do I submit a new item onto page? (jQuery) - javascript

Doing a project for school. I have to be able to add a grocery item onto a list with the controls "check" and "delete" inside the box with the new item. There is already 4 items on the list for reference. Ive gotten as far as being able to add the box, with the food item inside, but i cant seem to get the buttons inside, along with the same font and style as the others on the list.
jQuery
function addItem(){
$('#js-shopping-list-form').submit(function(event){
event.preventDefault();
const textInput = $('#shopping-list-entry').val();
$('ul').append('<li>' + textInput + '</li>')
});
};
$(addItem);
CSS
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
button, input[type="text"] {
padding: 5px;
}
button:hover {
cursor: pointer;
}
#shopping-list-item {
width: 250px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.shopping-list {
list-style: none;
padding-left: 0;
}
.shopping-list > li {
margin-bottom: 20px;
border: 1px solid grey;
padding: 20px;
}
.shopping-item {
display: block;
color: grey;
font-style: italic;
font-size: 20px;
margin-bottom: 15px;
}
.shopping-item__checked {
text-decoration: line-through;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shopping List</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>Shopping List</h1>
<form id="js-shopping-list-form">
<label for="shopping-list-entry">Add an item</label>
<input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
<button type="submit">Add item</button>
</form>
<ul class="shopping-list">
<li>
<span class="shopping-item">apples</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">oranges</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item shopping-item__checked">milk</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">bread</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>


Your addItem() method needs to include all of the HMTL to generate a new formatted item, not just the <li> element.
function addItem(){
$('#js-shopping-list-form').submit(function(event){
event.preventDefault();
const textInput = $('#shopping-list-entry').val();
$('ul').append('<li><span class="shopping-item">' + textInput + '</li></span> <div class="shopping-item-controls"> <button class="shopping-item-toggle"> <span class="button-label">check</span> </button> <button class="shopping-item-delete"> <span class="button-label">delete</span> </button> </div>')
});


You are missing code in jquery. replace the code and check
function addItem(){
$('#js-shopping-list-form').submit(function(event){
event.preventDefault();
const textInput = $('#shopping-list-entry').val();
$('ul').append('<li><span class="shopping-item ">' + textInput +'</span><div class="shopping-item-controls"><button class="shopping-item-toggle"><span class="button-label">check</span></button><button class="shopping-item-delete"><span class="button-label">delete</span></button></div></li>')
});
}
$(addItem);``


Here is the working example of you code. You have to add your li code to your jquery code.
html = '<li>';
html += ' <span class="shopping-item">' + textInput + '</span>';
html += ' <div class="shopping-item-controls">';
html += ' <button class="shopping-item-toggle">';
html += ' <span class="button-label">check</span>';
html += ' </button>';
html += ' <button class="shopping-item-delete">';
html += ' <span class="button-label">delete</span>';
html += ' </button>';
html += ' </div>';
html += '</li>';
$('ul').append(html)
Below is complete example of your code
function addItem(){
$('#js-shopping-list-form').submit(function(event){
event.preventDefault();
const textInput = $('#shopping-list-entry').val();
html = '<li>';
html += ' <span class="shopping-item">' + textInput + '</span>';
html += ' <div class="shopping-item-controls">';
html += ' <button class="shopping-item-toggle">';
html += ' <span class="button-label">check</span>';
html += ' </button>';
html += ' <button class="shopping-item-delete">';
html += ' <span class="button-label">delete</span>';
html += ' </button>';
html += ' </div>';
html += '</li>';
$('ul').append(html)
});
};
$(addItem);
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
button, input[type="text"] {
padding: 5px;
}
button:hover {
cursor: pointer;
}
#shopping-list-item {
width: 250px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.shopping-list {
list-style: none;
padding-left: 0;
}
.shopping-list > li {
margin-bottom: 20px;
border: 1px solid grey;
padding: 20px;
}
.shopping-item {
display: block;
color: grey;
font-style: italic;
font-size: 20px;
margin-bottom: 15px;
}
.shopping-item__checked {
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shopping List</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>Shopping List</h1>
<form id="js-shopping-list-form">
<label for="shopping-list-entry">Add an item</label>
<input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
<button type="submit">Add item</button>
</form>
<ul class="shopping-list">
<li>
<span class="shopping-item">apples</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">oranges</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item shopping-item__checked">milk</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
<li>
<span class="shopping-item">bread</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>

Related

how to clear search result while click in search button

I made a song and a lyric searching page. The first time search is working well but while I click in the search button the previous result remains and also search results also shown on the page.
Now I want to disappear the result while searching for another song or lyric.
And also I want to make the search the result same style but I don't get results as I wanted.
const text = document.getElementById('text');
const search = document.getElementById('search');
const result = document.getElementById('result');
// api url
const api= 'https://api.lyrics.ovh';
// song lyrics
function getLyrics (artist, title) {
let url = `${api}/v1/${artist}/${title}`
fetch(url)
.then(res => res.json())
.then(singerLyrics => {
const lyrics = singerLyrics.lyrics;
const getLyric = document.getElementById('getLyric');
getLyric.innerHTML = `<h2 class="text-success mb-4">${artist} - ${title}</h2>
<pre class="lyric text-white">${lyrics}</pre>`;
});
result.innerHTML= '';
}
// search by song or artist
function searchSongs(term){
fetch(`${api}/suggest/${term}`)
.then(res => res.json())
.then (showData);
};
// search result
function showData (data) {
result.innerHTML = `<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9"> ${data.data.map(song => `<h3 class="lyrics-name">${song.title}</h3>
<p class="author lead">${song.type} by <span>${song.artist.name}</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button onclick="getLyrics('${song.artist.name}','${song.title}')" class="btn btn-success">Get Lyrics</button>
</div>
</div>`)};
`;
};
//event listeners
search.addEventListener('click', function searchResult (){
const inputText = text.value.trim();
if (!inputText){
alert('this is not a song or artist')
}else {
searchSongs(inputText);
}
});
body{
background-color: #13141b;
color: #ffffff;
background-image: url(images/bg-image.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: top;
}
.form-control{
background-color:rgba(255, 255, 255, 0.2);
padding: 22px;
border: none;
border-radius: 25px;
}
.btn{
border-radius: 1.5rem;
padding: 9px 20px;
}
.btn-privious{
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.navbar-toggler {
border: none;
}
.search-box{
position: relative;
}
.search-btn {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.single-result{
background: rgba(255, 255, 255, 0.2);
border-radius: 15px;
}
<!doctype html>
<html lang="en">
<head>
<title>Hard Rock Solution - Song Lyric App</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-dark my-3">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="Hard Rock Solution">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
<img src="images/toggler-icon.svg" alt="">
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownId">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
</div>
</li>
</ul>
</div>
</nav>
<main class="content-area">
<div class="search-bar col-md-6 mx-auto">
<h1 class="text-center">Lyrics Search</h1>
<div class="search-box my-5">
<input id="text" type="text" class="form-control" placeholder="Enter your artist song name">
<button id="search" class="btn btn-success search-btn">Search</button>
</div>
</div>
<!-- === Simple results === -->
<div class="d-flex justify-content-center">
<div id="result" class="">
</div>
<!-- Single Lyrics -->
<div id="getLyric" id="artistTitle" class="single-lyrics text-center">
</div>
</div>
</main>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom Script Here -->
<script src ="javascrpt.js"> </script>
</body>
</html>

try to use autocomplete="off" like
<input type="text" name="foo" autocomplete="off" />

Every time, search is clicked, the lyrics container should be emtpied:
document.querySelector("#getLyric").childNodes.forEach(el => el.remove())
to fix the issue, add this to your script:
document.querySelector("#search").addEventListener('click', function () {
document.querySelector("#getLyric").innerHTML = '';
})

Tooltip position apperance issue

I have Used Bootstrap here....My popover tootip position is not correct. As I want it to appear in the extreme right corner with the Glyphicon but it still appears at the left Position.
So, what I Tried earlier :
1) I just changed the CSS and tried to align the popover on the right but it did not work.
$("[data-toggle=popover]").popover({
html: "true",
container: 'body',
title : 'Contact Us ×',
content: function() {
return $('#popover-content').html();
}
});
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
.form-control {width:120px;}
.popover {
max-width:300px; }
#contact_query.btn.btn-primary
{
background-color:#74a5d0;
}
#call_icon.glyphicon.glyphicon-earphone {
position: fixed;
top: 8px;
right: 16px;
font-size: 30px;
}
#media (max-width: 767px) {
#contact_query.btn.btn-primary
{
font-size:13px;
}
#query-pos
{
font-size:13px;
}
#email-pos
{
font-size:13px;
}
#ph_1,#ph_2
{
font-size:13px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<ul class="list-unstyled">
<li><a data-placement="right" data-toggle="popover" data-title="" data-container="body" type="button" data-html="true" href="#contact" id="login_try"><span id="call_icon" class="glyphicon glyphicon-earphone"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-xs-12" ><div>123123121231 <a id="ph_1" href="tel:+9112313313123" type="submit" class="btn btn-primary" ><span class="glyphicon glyphicon-earphone"></span></a></div><br/></div>
<div class="col-xs-12" ><div>1231231223 <a id="ph_2" href="tel:+91121312312" type="submit" class="btn btn-primary" ><span class="glyphicon glyphicon-earphone"></span></a></div></div>
</div><hr>
<div class="row">
<div class="col-xs-12"><p><b>Unable to Contact us? </b><br/>
<p id="query-pos"><a id="contact_query" href="#" class="btn btn-primary">Send your Query</a> and our team will get back to you at the earliest.</p></p></div></div>
<div ><hr><p><b>Or you can</b><br/><p id="email-pos">E-mail us # example#example.com</p></p></div>
</div>
</form>
</div>
</ul>
</div>
</body>
</html>

Add position: fixed on the anchor that opens the popup instead of the icon. Because popover is trying the align the popover relative to the anchor that opens it. And the position of the anchor is still at left as its not position: fixed to the right.
.phone_icon {
position: fixed;
top: 8px;
right: 16px;
}
#call_icon.glyphicon.glyphicon-earphone {
font-size: 30px;
}
Also changed the data-placement to left, as there is no space on right.
$("[data-toggle=popover]").popover({
html: "true",
container: 'body',
title: 'Contact Us ×',
content: function() {
return $('#popover-content').html();
}
});
$(document).on("click", ".popover .close", function() {
$(this).parents(".popover").popover('hide');
});
.form-control {
width: 120px;
}
.popover {
max-width: 300px;
}
#contact_query.btn.btn-primary {
background-color: #74a5d0;
}
.phone_icon {
position: fixed;
top: 8px;
right: 16px;
}
#call_icon.glyphicon.glyphicon-earphone {
font-size: 30px;
}
#media (max-width: 767px) {
#contact_query.btn.btn-primary {
font-size: 13px;
}
#query-pos {
font-size: 13px;
}
#email-pos {
font-size: 13px;
}
#ph_1,
#ph_2 {
font-size: 13px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<ul class="list-unstyled">
<li><a class="phone_icon" data-placement="left" data-toggle="popover" data-title="" data-container="body" type="button" data-html="true" href="#contact" id="login_try"><span id="call_icon" class="glyphicon glyphicon-earphone"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<div>123123121231 <a id="ph_1" href="tel:+9112313313123" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-earphone"></span></a></div><br/></div>
<div class="col-xs-12">
<div>1231231223 <a id="ph_2" href="tel:+91121312312" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-earphone"></span></a></div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<p><b>Unable to Contact us? </b><br/>
<p id="query-pos"><a id="contact_query" href="#" class="btn btn-primary">Send your Query</a> and our team will get back to you at the earliest.</p>
</p>
</div>
</div>
<div>
<hr>
<p><b>Or you can</b><br/>
<p id="email-pos">E-mail us # example#example.com</p>
</p>
</div>
</div>
</form>
</div>
</ul>
</div>
</body>
</html>

How to change glyph icon color on hover inside div tag?

I want to show different color to glyph icon on hover.
This is my code:
<div class="col-xs-3 col-lg-3 text-center span-hover" style="height:50px;border-right: 1px solid #fff;" data-target="#myCarousel" data-slide-to="1">
<span class="glyphicon glyphicon-globe"></span>
<span class="hidden-xs"> TRADING</span>
</div>
css
.span-hover:hover {
background-color: rgba(0,0,0,0.4);
color:white;
}
.glyphicon
{
font-size: 25px;
color:red;
}
.glyphicon:hover
{
color:#44c5ff;
}
When user place the cursor on div tag,Now it's only changing text color.But I want to change text color:white and at the same time glyph icon color:#44c5ff;
.glyphicon:hover it's working when user exactyly place cursor on glyphicon. But not in div tag.
Thanks

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.glyphicon:hover{
color:#44c5ff;
font-size:30px;
}
</style>
</head>
<body>
<div class="container">
<h2>Glyphicon Examples</h2>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
<a href="#">
<span class="glyphicon glyphicon-envelope"></span>
</a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
</div>
</body>
</html>
Try It Once

.span-hover:hover {
background-color: rgba(0,0,0,0.4);
color:white;
}
.glyphicon
{
font-size: 25px;
color:red;
}
.glyphicon:hover
{
color:#44c5ff;
}
.span-hover:hover .glyphicon{
color:#44c5ff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-3 col-lg-3 text-center span-hover" style="height:50px;border-right: 1px solid #fff;" data-target="#myCarousel" data-slide-to="1">
<span class="glyphicon glyphicon-globe"></span>
<span class="hidden-xs"> TRADING</span>
</div>
try this snippet. and you can use this type of hover
.span-hover:hover .glyphicon{
color:#44c5ff;
}

HTML, CSS and JS not linking properly

I am trying to build a quiz using the code from this codepen (code posted in snippet below).
$(document).ready(function() {
//get total of questions
var $questionNumber = $('h2').length;
console.log($questionNumber);
//caching final score
var $totalScore = 0;
$('li').click(function() {
//caching variables
var $parent = $(this).parent();
var $span = $(this).find('.fa');
//deactivate options on click
$parent.find('li').off("click");
//check for .correct class
//if yes
if ($(this).hasClass('correct')) {
//add .correctAnswer class
$(this).addClass('correctAnswer');
//find next span and change icon
$span.removeClass('fa fa-square-o').addClass('fa fa-check-square-o');
//reduce opacity of siblings
$(this).siblings().addClass('fade');
//show answer
var $answerReveal = $parent.next('.answerReveal').show();
var $toShowCorrect = $answerReveal.find('.quizzAnswerC');
var $toShowFalse = $answerReveal.find('.quizzAnswerF');
$toShowCorrect.show();
$toShowFalse.remove();
//add 1 to total score
$totalScore += 1;
//console.log($totalScore);
} else {
//add .wrongAnswer class
$(this).addClass('wrongAnswer').addClass('fade');
//change icon
$span.removeClass('fa fa-square-o').addClass('fa fa-check-square-o');
//reduce opacity of its siblings
$(this).siblings().addClass('fade');
//show wrong Message
var $answerReveal = $parent.next('.answerReveal').show();
var $toShowCorrect = $answerReveal.find('.quizzAnswerC');
var $toShowFalse = $answerReveal.find('.quizzAnswerF');
$toShowCorrect.remove();
$toShowFalse.show();
//locate correct answer and highlight
$parent.find('.correct').addClass('correctAnswer');
};
}); //end click function
//print Results
function printResult() {
var resultText = '<p>';
if ($totalScore === $questionNumber) {
resultText += 'You got ' + $totalScore + ' out of ' + $questionNumber + '! </p>';
$('.resultContainer').append(resultText);
$('#halfText').append('<p>This is awesome!</p>');
$('#halfImage').append('<img src="http://placehold.it/350x150" width="100%"><img>');
} else if ($totalScore >= 3 && $totalScore < $questionNumber) {
resultText += 'You got ' + $totalScore + ' out of ' + $questionNumber + '! </p>';
$('.resultContainer').append(resultText);
$('#halfText').append('<p>So and so...better luck next time</p>');
$('#halfImage').append('<img src="http://placehold.it/350x150" width="100%"><img>');
} else if ($totalScore < 3) {
resultText += 'You got ' + $totalScore + ' out of ' + $questionNumber + ' </p>';
$('.resultContainer').append(resultText);
$('#halfText').append('<p>No..no...no...you have to try harder</p>');
$('#halfImage').append('<img src="http://placehold.it/350x150" width="100%"><img>');
}
}; //end function
//final score
$('ul').last().click(function() {
//prevent further clicks on this
$(this).off('click');
//show result after last li is clicked
var $height = $('.finalResult').height();
printResult();
$('.finalResult').show();
$('html, body').animate({
scrollTop: $(document).height() - $height
},
1400);
});
}); //end dom ready
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
body {
background: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
}
.container {
width: 100%;
}
.inner {
width: 60%;
margin: 0 auto;
}
ul {
list-style-type: none;
margin-left: -40px;
}
h2 {
margin-top: 50px;
}
/*********************** LIST ***********************/
.simpleListAnswer:hover {
/*background:#fff195;*/
cursor: pointer;
}
.simpleListAnswer,
.quizzAnswer {
width: 100%;
background: #f2f2f2;
padding: 9px;
margin-top: 12px;
border: 1px solid #d8d8d8;
}
.simpleListText {
margin-left: 8px;
font-size: 19px;
color: #3d3d3d;
}
/***************************ANSWER REVEAL******************/
.quizzAnswerC,
.quizzAnswerF,
.finalResult {
background: #fefefe;
border: 1px solid #ddd;
}
.answerReveal {
display: none;
width: 100%;
}
.answerHeader div {
color: #84f272;
margin-top: 10px;
}
#bravo,
#sorry {
width: 100%;
margin-left: 20px;
margin-top: 30px;
}
.answerHeader {
margin-left: 20px;
width: 100%;
}
h3.correctMessage {
color: #88f078;
font-size: 30px;
}
h3.wrongMessage {
color: #ff1f1f;
font-size: 30px;
}
.fa.fa-check-circle,
.fa.fa-times-circle {
padding-right: 10px;
}
.correctAnswer {
background: #88f078;
}
.wrongAnswer {
background: #ff1f1f;
}
.fade {
opacity: .6;
cursor: default;
}
/*************************FINAL RESULT******************************/
.finalResult {
width: 100%;
height: 300px;
padding: 0 10px;
margin-top: 30px;
display: none;
}
.finalResult h4 {
color: #797979;
}
.resultContainer p {
font-size: 25px;
}
#halfText,
#halfImage {
width: 50%;
float: left;
}
#halfImage {
margin-top: -40px;
}
#halfImage img {
width: 100%;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="font-awesome-4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="jquery-1.11.2.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container">
<div class="inner">
<h1>How much do you think you know about stuff?</h1>
<h2>Who discovered America?</h2>
<ul class="simpleList">
<li class="simpleListAnswer correct">
<span class="fa fa-square-o"></span>
<span class="simpleListText">Christopher Columbus</span>
</li>
<li class="simpleListAnswer">
<span class="fa fa-square-o"></span>
<span class="simpleListText">My grandma</span>
</li>
<li class="simpleListAnswer">
<span class="fa fa-square-o"></span>
<span class="simpleListText">Yes,please</span>
</li>
<li class="simpleListAnswer">
<span class="fa fa-square-o"></span>
<span class="simpleListText">Who's this on the phone again?</span>
</li>
</ul>
<!--end simpleList-->
<div class="answerReveal">
<div class="quizzAnswerC">
<div class="answerHeader">
<h3 class="correctMessage"><i class="fa fa-check-circle "></i>Correct! </h3>
</div>
<!--end answer header-->
<div class="answerText">
<p id="bravo">Your answer is correct on so many levels! Well done!</p>
</div>
<!--end asnwerText-->
</div>
<!--end quizzAnswerC-->
<div class="quizzAnswerF">
<div class="answerHeader">
<h3 class="wrongMessage"><i class="fa fa-times-circle"></i>Sorry</h3>
</div>
<!--end answer header-->
<div class="answerText">
<p id="sorry">This is not the answer we were looking for...</p>
</div>
<!--end asnwerText-->
</div>
<!--end quizzAnswerF-->
</div>
<!--end answerReveal-->
<h2>What is 2 x 4?</h2>
<ul class="simpleList">
<li class="simpleListAnswer">
<span class="fa fa-square-o"></span>
<span class="simpleListText">Pasta</span>
</li>
<li class="simpleListAnswer correct">
<span class="fa fa-square-o"></span>
<span class="simpleListText">8</span>
</li>
<li class="simpleListAnswer">
<span class="fa fa-square-o"></span>
<span class="simpleListText">232.456</span>
</li>
<li class="simpleListAnswer">
<span class="fa fa-square-o"></span>
<span class="simpleListText">1</span>
</li>
</ul>
<!--end simpleList-->
<div class="answerReveal">
<div class="quizzAnswerC">
<div class="answerHeader">
<h3 class="correctMessage"><i class="fa fa-check-circle "></i>Correct! </h3>
</div>
<!--end answer header-->
<div class="answerText">
<p id="bravo">Your answer is correct on so many levels! Well done!</p>
</div>
<!--end asnwerText-->
</div>
<!--end quizzAnswerC-->
<div class="quizzAnswerF">
<div class="answerHeader">
<h3 class="wrongMessage"><i class="fa fa-times-circle "></i>Sorry</h3>
</div>
<!--end answer header-->
<div class="answerText">
<p id="sorry">This is not the answer we were looking for...</p>
</div>
<!--end asnwerText-->
</div>
<!--end quizzAnswerF-->
</div>
<!--end answerReveal-->
<h2>How many tires do you have to buy if you have 2 cars in the family?</h2>
<ul class="simpleList">
<li class="simpleListAnswer">
<span class="fa fa-square-o"></span>
<span class="simpleListText">10</span>
</li>
<li class="simpleListAnswer">
<span class="fa fa-square-o"></span>
<span class="simpleListText">We don't have a car</span>
</li>
<li class="simpleListAnswer correct">
<span class="fa fa-square-o"></span>
<span class="simpleListText">8</span>
</li>
<li class="simpleListAnswer">
<span class="fa fa-square-o"></span>
<span class="simpleListText">12</span>
</li>
</ul>
<!--end simpleList-->
<div class="answerReveal">
<div class="quizzAnswerC">
<div class="answerHeader">
<h3 class="correctMessage"><i class="fa fa-check-circle "></i>Correct! </h3>
</div>
<!--end answer header-->
<div class="answerText">
<p id="bravo">Your answer is correct on so many levels! Well done!</p>
</div>
<!--end asnwerText-->
</div>
<!--end quizzAnswerC-->
<div class="quizzAnswerF">
<div class="answerHeader">
<h3 class="wrongMessage"><i class="fa fa-times-circle "></i>Sorry</h3>
</div>
<!--end answer header-->
<div class="answerText">
<p id="sorry">This is not the answer we were looking for...</p>
</div>
<!--end asnwerText-->
</div>
<!--end quizzAnswerF-->
</div>
<!--end answerReveal-->
<h2>If a jar of marmelade costs $3 how much do 12 jars of marmelade cost?</h2>
<ul class="simpleList">
<li class="simpleListAnswer">
<span class="fa fa-square-o"></span>
<span class="simpleListText">Batman</span>
</li>
<li class="simpleListAnswer">
<span class="fa fa-square-o"></span>
<span class="simpleListText">$30</span>
</li>
<li class="simpleListAnswer">
<span class="fa fa-square-o"></span>
<span class="simpleListText">Can I have Nutella instead?</span>
</li>
<li class="simpleListAnswer correct">
<span class="fa fa-square-o"></span>
<span class="simpleListText">$36</span>
</li>
</ul>
<!--end simpleList-->
<div class="answerReveal">
<div class="quizzAnswerC">
<div class="answerHeader">
<h3 class="correctMessage"><i class="fa fa-check-circle "></i>Correct! </h3>
</div>
<!--end answer header-->
<div class="answerText">
<p id="bravo">Your answer is correct on so many levels! Well done!</p>
</div>
<!--end asnwerText-->
</div>
<!--end quizzAnswerC-->
<div class="quizzAnswerF">
<div class="answerHeader">
<h3 class="wrongMessage"><i class="fa fa-times-circle "></i>Sorry</h3>
</div>
<!--end answer header-->
<div class="answerText">
<p id="sorry">This is not the answer we were looking for...</p>
</div>
<!--end asnwerText-->
</div>
<!--end quizzAnswerF-->
</div>
<!--end answerReveal-->
<h2>Which planet is nearest the sun?</h2>
<ul class="simpleList">
<li class="simpleListAnswer">
<span class="fa fa-square-o"></span>
<span class="simpleListText">Venus</span>
</li>
<li class="simpleListAnswer correct">
<span class="fa fa-square-o"></span>
<span class="simpleListText">Mercury</span>
</li>
<li class="simpleListAnswer">
<span class="fa fa-square-o"></span>
<span class="simpleListText">The Moon</span>
</li>
<li class="simpleListAnswer">
<span class="fa fa-square-o"></span>
<span class="simpleListText">Earth</span>
</li>
</ul>
<!--end simpleList-->
<div class="answerReveal">
<div class="quizzAnswerC">
<div class="answerHeader">
<h3 class="correctMessage"><i class="fa fa-check-circle "></i>Correct! </h3>
</div>
<!--end answer header-->
<div class="answerText">
<p id="bravo">Your answer is correct on so many levels! Well done!</p>
</div>
<!--end asnwerText-->
</div>
<!--end quizzAnswerC-->
<div class="quizzAnswerF">
<div class="answerHeader">
<h3 class="wrongMessage"><i class="fa fa-times-circle "></i>Sorry</h3>
</div>
<!--end answer header-->
<div class="answerText">
<p id="sorry">This is not the answer we were looking for...</p>
</div>
<!--end asnwerText-->
</div>
<!--end quizzAnswerF-->
</div>
<!--end answerReveal-->
<div class="finalResult">
<h4>How much do you think you know about stuff?</h4>
<div class="resultContainer"></div>
<div id="halfText"></div>
<div id="halfImage"></div>
</div>
<!--end finalResult-->
</div>
<!--end inner-->
</div>
<!--end container-->
</body>
And I have put it into a separate HTML, CSS and JavaScript file and linked them all however when I upload it to my server, none of the buttons actually let me click on them, and it doesn't show the right or wrong answers.
Is there any obvious reason I'm missing here?

Codepen automatically sources jQuery for you, however if you are copying the code directly you will be missing the jQuery reference.
All you need to do is modify the HTML where it reads:
<script src="jquery-1.11.2.js"></script>
and change the entire element to:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

dropdown value is not selected (jquery function is not firing)

I somehow can't seem to figure this one out.
I have set of radio buttons and on click of each, I am populating a dropdown (bootstrap dropdown) with different data. On click of dropdown, i select the text at top. The code works just fine till i don't select a different radio button. Once i click on the radio button and re-populate the first dropdown, the click event stops firing.....any ideas will be helpful. Here's my simplified code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<style>
body{overflow-y:scroll}input.search-text{height:30px}ul.listBig{list-style-type:none;margin:0 0 0 10%;padding:0;width:80%}ul.listSmall{list-style-type:none;margin:0;padding:0;width:26%;float:left;text-align:left}ul.listBig li{display:inline-block;width:24%;margin:0 0 20px;padding:0}ul.listSmall li{display:block;margin:0 0 8px;padding:0}ul.listSmall li a{font-family:Calibri,"Open Sans",sans-serif;font-size:1.1em;color:#e1e1e1}ul.listSmall li a:hover{text-decoration:underline}div.listBigDiv{width:200px;height:230px;margin:0 auto;box-shadow:1px 1px 3px #888;border:1px solid #AAA}div.listBigDiv img{width:200px;height:200px}div.listBigDiv a{line-height:20px;font-weight:700;color:#606b7a}div.listSection{width:100%;padding:20px 0;text-align:center;background:#efefef;border-bottom:1px solid #dbdbdb}div.listSection.light{background:#f7f7f7}div.listSection h2{font-family:Calibri,"Open Sans",sans-serif;font-size:2.5em;margin-bottom:.3em;font-weight:700}a.bttn.custom{font-size:1.3em;height:54px;font-weight:700;line-height:40px}a.bttn.custom:hover{text-decoration:none;color:#fbfbfb}p.textBig{font-family:Calibri,"Open Sans",sans-serif;font-size:1.4em;color:#e1e1e1}p.sectionDesc{font-family:Calibri,"Open Sans",sans-serif;font-size:1.3em;text-align:center;color:#393c3d;margin-top:0;margin-bottom:30px;width:60%;margin-left:20%}h1.definition{position:relative;margin-bottom:20px}div.elemContainer{position:relative;top:0}a.feedbackBox{border:1px solid #e1e1e1;padding:5px;text-decoration:none}.popupCollectionBackground{z-index:10;background:rgba(0,0,0,.8);height:100%;width:100%;position:absolute;top:0}.popupCollection{z-index:11;background:rgba(255,255,255,.99);overflow-y:scroll;height:96%;width:80%;position:absolute;top:4%;left:10%;box-sizing:border-box;border:1px solid #F86960}h2.collectionName{margin:0;text-align:center;position:relative;top:30%;font-family:Calibri;font-size:3em;color:#fff;text-shadow:2px 2px #333}ul.collectionList{list-style-type:none;margin:0 0 0 10%;padding:0;width:80%}ul.collectionList li{display:inline-block;width:32%;margin:0 0 20px;padding:0}div.listCollection{width:90%;height:290px;margin:0 auto;box-shadow:1px 1px 3px #888;border:1px solid #AAA;text-align:center}div.listCollection img{width:100%;height:250px}div.listCollection a{line-height:25px;font-weight:700;color:#606b7a}img.mediaImage{margin:0 10px 20px}a.connectText:hover{text-decoration:none!important}#popupCollectionBackgroundImage{height:40%;width:100%;margin-bottom:20px;}.btn-group .btn img,.dropdown-menu li a img{height:25px;margin-right:7px}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
// The functions to be executed on loading the document
$(function () {
$(window).trigger('scroll');
$("body").scroll(function () { $(window).trigger('scroll'); });
$(document).on('click', 'a', function (e) {
if ('#' == $(this).attr('href'))
e.preventDefault();
});
$(".dropdown-menu li a").click(function (e) {
$(this).parent().parent().select("li a").each(function () { $(this).attr("data-selected", "no"); });
$(this).attr("data-selected", "yes");
$(this).parent().parent().parent()
.find("button").html($(this).html() + ' <span class="caret"></span>');
});
$('input[name=exploreOrWeekend]:radio').change(function () {
switchExploreWeekend($('input[name=exploreOrWeekend]:radio:checked').val());
});
$(".btn-group button").each(function () {
$(this).css("min-width", $(this).width() + 40 + "px");
});
});
</script>
<script>
function switchExploreWeekend(sectionURL) {
if (sectionURL == "/explore") {
var regionButtonHtml = 'Anywhere in India <span class="caret"></span>';
$("#regionButton").html(regionButtonHtml);
$("#regionDropdown").html($("#exploreRegionHtml").html());
}
else {
var regionButtonHtml = 'Near Me... <span class="caret"></span>';
$("#regionButton").html(regionButtonHtml);
$("#regionDropdown").html($("#weekendRegionHtml").html());
}
}
$("#regionDropdown li a").click(function (e) {
alert('b');
$(this).parent().parent().select("li a").each(function () { $(this).attr("data-selected", "no"); });
$(this).attr("data-selected", "yes");
$(this).parent().parent().parent()
.find("button").html($(this).html() + ' <span class="caret"></span>');
});
</script>
</head>
<body style="margin: 0px;">
<div id="container" style="width: 100%; height: 100%;">
<div class="searchBg">
<div style="position: relative; top: 28%; width: 100%; text-align: center;">
<h1 class="definition">Discover Your Next Holiday Destination</h1>
<div class="elemContainer">
<label class="radio">
<input type="radio" name="exploreOrWeekend" checked="checked" value="/explore" />
Explore All Destinations
</label>
<label class="radio">
<input type="radio" name="exploreOrWeekend" class="second" value="/weekend-getaways" />
Find Weekend Getaways
</label>
<br />
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="regionButton" style="min-width: 220px">
Anywhere in World <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="regionDropdown">
<li>Anywhere in World</li>
<li>North America</li>
<li>Europe</li>
<li>Asia</li>
<li>Australia</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="categoryButton" style="min-width: 220px">
All Places<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="categoryDropdown">
<li>All Places</li>
<li>Beaches</li>
<li>Deserts</li>
<li>Wildlife</li>
<li>Heritage</li>
<li>Adventure</li>
</ul>
</div>
<button type="button" class="btn bttn custom btn-default" id="goButton" onclick="showPage()">
Find Destinations
</button>
</div>
</div>
</div>
<div id="exploreRegionHtml" style="display: none;">
<li>Anywhere in World</li>
<li>North America</li>
<li>Europe</li>
<li>Asia</li>
<li>Australia</li>
</div>
<div id="weekendRegionHtml" style="display: none;">
<li>Near Me...</li>
<li>London</li>
<li>Delhi</li>
<li>Sydney</li>
<li>New York</li>
</div>
</div>
</body>
</html>

Thanks for the ideas guys. As it happens, with .html() call the DOM refreshes and all events get lost. Based on your suggestions I changed to code to reattach the event handlers and it worked! Here's the code anyone who might be facing similar problems.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<style>
body{overflow-y:scroll}input.search-text{height:30px}ul.listBig{list-style-type:none;margin:0 0 0 10%;padding:0;width:80%}ul.listSmall{list-style-type:none;margin:0;padding:0;width:26%;float:left;text-align:left}ul.listBig li{display:inline-block;width:24%;margin:0 0 20px;padding:0}ul.listSmall li{display:block;margin:0 0 8px;padding:0}ul.listSmall li a{font-family:Calibri,"Open Sans",sans-serif;font-size:1.1em;color:#e1e1e1}ul.listSmall li a:hover{text-decoration:underline}div.listBigDiv{width:200px;height:230px;margin:0 auto;box-shadow:1px 1px 3px #888;border:1px solid #AAA}div.listBigDiv img{width:200px;height:200px}div.listBigDiv a{line-height:20px;font-weight:700;color:#606b7a}div.listSection{width:100%;padding:20px 0;text-align:center;background:#efefef;border-bottom:1px solid #dbdbdb}div.listSection.light{background:#f7f7f7}div.listSection h2{font-family:Calibri,"Open Sans",sans-serif;font-size:2.5em;margin-bottom:.3em;font-weight:700}a.bttn.custom{font-size:1.3em;height:54px;font-weight:700;line-height:40px}a.bttn.custom:hover{text-decoration:none;color:#fbfbfb}p.textBig{font-family:Calibri,"Open Sans",sans-serif;font-size:1.4em;color:#e1e1e1}p.sectionDesc{font-family:Calibri,"Open Sans",sans-serif;font-size:1.3em;text-align:center;color:#393c3d;margin-top:0;margin-bottom:30px;width:60%;margin-left:20%}h1.definition{position:relative;margin-bottom:20px}div.elemContainer{position:relative;top:0}a.feedbackBox{border:1px solid #e1e1e1;padding:5px;text-decoration:none}.popupCollectionBackground{z-index:10;background:rgba(0,0,0,.8);height:100%;width:100%;position:absolute;top:0}.popupCollection{z-index:11;background:rgba(255,255,255,.99);overflow-y:scroll;height:96%;width:80%;position:absolute;top:4%;left:10%;box-sizing:border-box;border:1px solid #F86960}h2.collectionName{margin:0;text-align:center;position:relative;top:30%;font-family:Calibri;font-size:3em;color:#fff;text-shadow:2px 2px #333}ul.collectionList{list-style-type:none;margin:0 0 0 10%;padding:0;width:80%}ul.collectionList li{display:inline-block;width:32%;margin:0 0 20px;padding:0}div.listCollection{width:90%;height:290px;margin:0 auto;box-shadow:1px 1px 3px #888;border:1px solid #AAA;text-align:center}div.listCollection img{width:100%;height:250px}div.listCollection a{line-height:25px;font-weight:700;color:#606b7a}img.mediaImage{margin:0 10px 20px}a.connectText:hover{text-decoration:none!important}#popupCollectionBackgroundImage{height:40%;width:100%;margin-bottom:20px;}.btn-group .btn img,.dropdown-menu li a img{height:25px;margin-right:7px}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$(window).trigger('scroll');
$("body").scroll(function () { $(window).trigger('scroll'); });
$(document).on('click', 'a', function (e) {
if ('#' == $(this).attr('href'))
e.preventDefault();
});
bindClick();
$('input[name=exploreOrWeekend]:radio').change(function () {
switchExploreWeekend($('input[name=exploreOrWeekend]:radio:checked').val());
});
$(".btn-group button").each(function () {
$(this).css("min-width", $(this).width() + 40 + "px");
});
});
function bindClick() {
//unbind all event handlers - for safety sake, usually removed by html() call
$(".dropdown-menu li a").unbind();
//bind again
$(".dropdown-menu li a").click(function (e) {
$(this).parent().parent().select("li a").each(function () { $(this).attr("data-selected", "no"); });
$(this).attr("data-selected", "yes");
$(this).parent().parent().parent()
.find("button").html($(this).html() + ' <span class="caret"></span>');
});
}
function switchExploreWeekend(sectionURL) {
if (sectionURL == "/explore") {
var regionButtonHtml = '<img src="images/filter_logos/icon-compass.png" class="filterIcon" />' +
'Anywhere in India <span class="caret"></span>';
$("#regionButton").html(regionButtonHtml);
$("#regionDropdown").html($("#exploreRegionHtml").html());
}
else {
var regionButtonHtml = '<img src="images/filter_logos/icon-compass.png" class="filterIcon" />' +
'Near Me... <span class="caret"></span>';
$("#regionButton").html(regionButtonHtml);
$("#regionDropdown").html($("#weekendRegionHtml").html());
}
bindClick();
}
</script>
</head>
<body style="margin: 0px;">
<div id="container" style="width: 100%; height: 100%;">
<div class="searchBg">
<div style="position: relative; top: 28%; width: 100%; text-align: center;">
<h1 class="definition">Discover Your Next Holiday Destination</h1>
<div class="elemContainer">
<label class="radio">
<input type="radio" name="exploreOrWeekend" checked="checked" value="/explore" />
Explore All Destinations
</label>
<label class="radio">
<input type="radio" name="exploreOrWeekend" class="second" value="/weekend-getaways" />
Find Weekend Getaways
</label>
<br />
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="regionButton" style="min-width: 220px">
Anywhere in World <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="regionDropdown">
<li>Anywhere in World</li>
<li>North America</li>
<li>Europe</li>
<li>Asia</li>
<li>Australia</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="categoryButton" style="min-width: 220px">
All Places<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="categoryDropdown">
<li>All Places</li>
<li>Beaches</li>
<li>Deserts</li>
<li>Wildlife</li>
<li>Heritage</li>
<li>Adventure</li>
</ul>
</div>
<button type="button" class="btn bttn custom btn-default" id="goButton" onclick="showPage()">
Find Destinations
</button>
</div>
</div>
</div>
<div id="exploreRegionHtml" style="display: none;">
<li>Anywhere in World</li>
<li>North America</li>
<li>Europe</li>
<li>Asia</li>
<li>Australia</li>
</div>
<div id="weekendRegionHtml" style="display: none;">
<li>Near Me...</li>
<li>London</li>
<li>Delhi</li>
<li>Sydney</li>
<li>New York</li>
</div>
</div>
</body>
</html>

Categories

Resources