I want to create a simple text game of choices of sorts where you always have two choices and depending on your choice, something is displayed and the current content disappears. My problem is each of the choices are different so i can't figure out a way to not repeat myself again and again in the javascript code.
HTML :
<!Doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>Game</title>
</head>
<body>
<div id="console">
<div class="storyCard" id="start">
<p class="q">Some stuff.
<p class="a">getup</p>
<p class="a">sleep</p>
</div>
<div class="storyCard" id="getup">
<p class="q">Something happened</p>
<p class="a">do this</p>
<p class="a">do that</p>
</div>
<div class="storyCard" id="sleep">
<p class="q">something else happened</p>
<p class="a">do something</p>
<p class="a">do something else</p>
</div>
<!--and there will be a lot of such storyCards based on the choices.-->
</div>
<script type="text/javascript" src="js.js"></script>
</body>
</html>
CSS :
body {
margin: 0 auto;
align-content: center;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
#console {
width: 100%;
}
.storyCard {
min-width: 100px;
max-width: 600px;
background-color: rgba(0, 0, 0, 0.51);
box-shadow: 1px 1px 7px;
padding: 50px;
color: white;
margin: 0 auto;
border-radius: 4px;
display: none;
}
#start {
display: block;
}
.storyCard .a {
background-color: dodgerblue;
border-bottom-color: dodgerblue;
border-top-color: white;
border-left-color: white;
border-right-color: dodgerblue;
padding: 10px;
text-align: center;
color: white;
width: 30%;
display: inline;
margin: 0 auto;
box-shadow: 1px 1px 7px black;
float: right;
cursor: pointer;
}
.storyCard .a:hover {
background-color: white;
color: black;
}
}
Javascript :
document.querySelector('#console').addEventListener('click', function (e) {
var answer = e.target.textContent;
switch (answer) {
case 'getup':
e.target.parentNode.style.display = 'none';
document.querySelector('#getup').style.display = 'block';
break;
case 'sleep':
e.target.parentNode.style.display = 'none';
document.querySelector('#sleep').style.display = 'block';
break;
case 'do this':
e.target.parentNode.style.display = 'none';
/*display another content like above*/
case 'do that':
/*hide the current content again and display another content and add more cases*/
}, false);
I assume that the question must defined in html like your sample. There are many others way to do this better.
You can use class name to specify next question.
document.addEventListener('click', function (e) {
var target = e.target;
if (target.className.match('answer')) {
var nextQuestionId = target.className.replace('answer ', '');
hideAllStoryCards();
showStoryCard(nextQuestionId);
}
});
function hideAllStoryCards () {
var i, elm, elms = document.getElementsByClassName('storyCard');
for (i = 0; i < elms.length; i++) {
elm = elms[i];
elm.style.display = 'none';
}
}
function showStoryCard (id) {
var storyCard = document.getElementById(id);
storyCard.style.display = 'block';
}
hideAllStoryCards();
showStoryCard('first-question');
<div id="console">
<div class="storyCard" id="first-question">
<p class="q">Are you hungry?</p>
<p class="answer what-do-you-want-to-eat">yes</p>
<p class="answer may-i-help-you">no</p>
</div>
<div class="storyCard" id="what-do-you-want-to-eat">
<p class="q">Some stuff.</p>
<p class="answer NEXT_QUESTION_ID">a pie</p>
<p class="answer ANOTHER_QUESTION_ID">a buger</p>
</div>
<div class="storyCard" id="may-i-help-you">
<p class="q">Some stuff.</p>
<p class="answer NEXT_QUESTION_ID">bye</p>
<p class="answer ANOTHER_QUESTION_ID">bye again</p>
</div>
</div>
You can try something like performAction(e, '#getup'); - a generalized method with parameters, in this link.
Please refer below for the code:
HTML:
<div id="console">
<div class="storyCard" id="start">
<p class="q">Some stuff.</p>
<p class="a">getup</p>
<p class="a">sleep</p>
</div>
<div class="storyCard" id="getup">
<p class="q">Something happened</p>
<p class="a">do this</p>
<p class="a">do that</p>
</div>
<div class="storyCard" id="sleep">
<p class="q">something else happened</p>
<p class="a">do something</p>
<p class="a">do something else</p>
</div>
<!--and there will be a lot of such storyCards based on the choices.-->
</div>
CSS:
body {
margin: 0 auto;
align-content: center;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
#console {
width: 100%;
}
.storyCard {
min-width: 100px;
max-width: 600px;
background-color: rgba(0, 0, 0, 0.51);
box-shadow: 1px 1px 7px;
padding: 50px;
color: white;
margin: 0 auto;
border-radius: 4px;
display: none;
}
#start {
display: block;
}
.storyCard .a {
background-color: dodgerblue;
border-bottom-color: dodgerblue;
border-top-color: white;
border-left-color: white;
border-right-color: dodgerblue;
padding: 10px;
text-align: center;
color: white;
width: 30%;
display: inline;
margin: 0 auto;
box-shadow: 1px 1px 7px black;
float: right;
cursor: pointer;
}
.storyCard .a:hover {
background-color: white;
color: black;
}
JS:
document.querySelector('#console').addEventListener('click', function(e) {
var answer = e.target.textContent;
switch (answer) {
case 'getup':
performAction(e, '#getup');
break;
case 'sleep':
performAction(e, '#sleep');
break;
case 'do this':
performAction(e, '#getup'); /**Use any 'id' or target of your choice.*/
/*display another content like above*/
break;
case 'do that':
performAction(e, '#getup'); /*Use any 'id' or target of your choice.*/
/*hide the current content again and display another content and add more cases*/
break;
}
}, false);
function performAction(event, target) {
event.target.parentNode.style.display = 'none';
document.querySelector(target).style.display = 'block';
}
You need to separate your data from your UI.
Your data could be something simple like this:
var stories;
function StoryCard(q, option1, option2) {
this.q = q
this.option1 = option1;
this.option2 = option2;
}
function displayStory(storyCard) {
document.getElementById('q').innerHTML = storyCard.q;
document.getElementById('option1').innerHTML = storyCard.option1;
document.getElementById('option2').innerHTML = storyCard.option2;
}
Your "console" UI could change to something more like this:
<div id="console">
<div class="storyCard" id="start">
<p class="q" id="q"> </p>
<p class="a" id="option1"> </p>
<p class="a" id="option2"> </p>
</div>
</div>
Your click function may be more like this:
document.querySelector('#console').addEventListener('click', function (e) {
var answer = e.target.id;
switch (answer) {
default: // for when they click within the div, but not on an option
break;
case 'option1':
case 'option2':
var story = stories[e.target.innerHTML];
if (null != story) {
displayStory(story);
}
break;
}
}, false);
You would set up your stories perhaps in an onload:
function init() {
stories = { "start": new StoryCard("Some stuff", "getup", "sleep")
, "getup": new StoryCard("Something happened", "do this", "do that")
, "sleep": new StoryCard("something else happened", "do something", "do something else")
};
displayStory(stories["start"]);
}
Related
This question already has answers here:
Can I have a <pre> Tag inside a <p> tag in Tumblr?
(3 answers)
Closed last year.
Currently I have a "quiz section" for my webpage. At the bottom of the information on the lesson there is a quiz.
Currently I have been able to show/hide standard text. But I want to know show a code block when I click "Show solution".
I have tried changing class names, but I can't seem to get it right.
function show_hide(element)
{
var myAnswer = element.nextElementSibling;
var displaySetting = myAnswer.style.display;
var quizButton = element;
if(displaySetting=="inline-block"){
myAnswer.style.display = 'none';
quizButton.innerHTML = 'Show Solution';
}
else
{
myAnswer.style.display = 'inline-block';
quizButton.innerHTML = 'Hide Solution';
}
}
.quiz-question{
margin-bottom: 10px;
text-align: left;
font-size: 15px;
color: #f44336;
font-weight: 400;
}
.quiz-button{
display: inline-block;
text-decoration: none;
color: #111;
border: 1px solid #f44336;
padding: 5px 5px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.quiz-button:hover{
color: #fff;
background: #f44336;
transition: 0.5s;
}
#answer{
display: none;
}
<head>
<script src="https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS#latest/prism.min.js"></script>
</head>
<body>
<!-- Working Code -->
<h4 class="quiz-question">1. What is the difference between a statement and an expression?</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<p id="answer">
<b>Statements</b> are used when we want the program to perform an action. Expressions are used when
we want the program to calculate a value.
</p>
<br><br><hr>
<!-- Not Working Code -->
<h4>C - Question</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<p id="answer">
<pre>
<code class="language-cpp line-numbers">
2 //2 is a literal that evaluates to value 2
"Hello World!" //"Hello World!" is a literal that evaluates to text "Hello"
</code>
</pre>
</p>
</body>
You have multiple error in this code:
id must be unique use class instead.
use <div> for contain <pre> instead of <p>
function show_hide(element) {
const myAnswer = element.nextElementSibling;
const displaySetting = myAnswer.style.display;
if (displaySetting === "inline-block") {
myAnswer.style.display = 'none';
element.innerHTML = 'Show Solution';
} else {
myAnswer.style.display = 'inline-block';
element.innerHTML = 'Hide Solution';
}
}
.quiz-question {
margin-bottom: 10px;
text-align: left;
font-size: 15px;
color: #f44336;
font-weight: 400;
}
.quiz-button {
display: inline-block;
text-decoration: none;
color: #111;
border: 1px solid #f44336;
padding: 5px 5px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.quiz-button:hover {
color: #fff;
background: #f44336;
transition: 0.5s;
}
.answer {
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS#latest/prism.min.js"></script>
<!-- Working Code -->
<h4 class="quiz-question">1. What is the difference between a statement and an expression?</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<p class="answer">
<b>Statements</b> are used when we want the program to perform an action. Expressions are used when we want the program to calculate a value.
</p>
<br><br>
<hr>
<h4>C - Question</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<div class='answer'>
<pre>
<code class="language-cpp line-numbers">
2 //2 is a literal that evaluates to value 2
"Hello World!" //"Hello World!" is a literal that evaluates to text "Hello"
</code>
</pre>
</div>
You can use prettify library
function show_hide(element)
{
var myAnswer = element.nextElementSibling
var displaySetting = myAnswer.style.display;
var quizButton = element;
if(displaySetting=="inline-block"){
myAnswer.style.display = 'none';
quizButton.innerHTML = 'Show Solution';
}
else
{
myAnswer.style.display = 'inline-block';
quizButton.innerHTML = 'Hide Solution';
}
}
.quiz-question{
margin-bottom: 10px;
text-align: left;
font-size: 15px;
color: #f44336;
font-weight: 400;
}
.quiz-button{
display: inline-block;
text-decoration: none;
color: #111;
border: 1px solid #f44336;
padding: 5px 5px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.quiz-button:hover{
color: #fff;
background: #f44336;
transition: 0.5s;
}
#answer{
display: none;
}
code
{
padding: 2px 4px;
color: #000000;
background-color: #eeeeee;
border-radius: 3px;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" integrity="sha512-PW9BfYtoXV6XYb/4FTkBoJEBM92TrGk7N324cCmF5i2dY02YvBg6ZPEAnSOZ5i2/nGPbsYFQwVzDxVVoWEKWww==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js" integrity="sha512-/9uQgrROuVyGVQMh4f61rF2MTLjDVN+tFGn20kq66J+kTZu/q83X8oJ6i4I9MCl3psbB5ByQfIwtZcHDHc2ngQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script></head>
<body onload="prettyPrint()">
<!-- Working Code -->
<h4 class="quiz-question">1. What is the difference between a statement and an expression?</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<p id="answer">
<b>Statements</b> are used when we want the program to perform an action. Expressions are used when
we want the program to calculate a value.
</p>
<br><br><hr>
<!-- Not Working Code -->
<h4>C - Question</h4>
<button onclick="show_hide(this)" class="quiz-button">Show Solution</button>
<p id="answer">
<code class="language-cpp prettyprint line-numbers">
2 //2 is a literal that evaluates to value 2
"Hello World!" //"Hello World!" is a literal that evaluates to text "Hello"
</code>
</p>
</body>
i'm presently working on a gitHub battle game with JavaScript manipulations. Please, how can i make the "PLAY AGAIN" button restart the game. (Starting All Over Again)
I also want to make the "DIV WITH CONTROL-BUTTON ID" display as block only if data fetch from API was successful.... Thanks
MY CODE IS BELOW:
"use strict";
let user = document.getElementsByClassName('github-username'),
player1 = document.getElementById('player-one'),
player2 = document.getElementById('player-two'),
form1 = document.getElementById('form1'),
form2 = document.getElementById('form2'),
cont1 = document.getElementById('continue1'),
cont2 = document.getElementById('continue2'),
reSelect = document.getElementById('reselect-players'),
playAgain = document.getElementById('play-again'),
initiate = document.getElementById('initiate-battle');
// Function that activate the start button
function getStarted() {
let startPage = document.getElementById('startPage'),
startBtn = document.getElementById('get-started-button');
startBtn.onclick = function() {
startPage.style.display = "none";
player1.style.display = "block";
};
};
getStarted();
// Function that initiates player 1 input
function firstForm() {
player1.style.display = "none";
player2.style.display = "block";
return false;
};
// Function that initiates player 2 input
function secondForm() {
let confirmPage = document.getElementById('confirm-page');
player2.style.display = "none";
confirmPage.style.display = "block";
// Function that fetches users data from input
function fetchUsers() {
let user1, user2;
fetch("https://api.github.com/users/" + user[0].value)
.then(function(response) {
return response.json();
})
.then(function(data) {
// Log the data to the console
console.log(data);
// Cache the data to a variable
user1 = data;
let myUser1 = document.getElementById('user1-container'),
totalScore = (1 * user1.followers + 1 * user1.following + 0.5 * user1.public_repos);
myUser1.innerHTML = `<ul class="user-info">
<p id="firstPlayer"> Player 1 </p>
<li id="score">Score: <span class="totalScr"> ${totalScore}</span> </li>
<li><img class="avatar" src="${user1.avatar_url}"></li>
<li>Name: ${user1.name} </li>
<li>Username: ${user1.login} </li>
<li>Following: ${user1.following} </li>
<li>Followers: ${user1.followers} </li>
<li>Repository: ${user1.public_repos} </li>
</ul>`;
//Make another API call and pass it into the stream
return fetch("https://api.github.com/users/" + user[1].value)
.then(function(response) {
//Get a JSON object from the response
return response.json();
})
})
.then(function(data) {
//Log the data to the console
console.log(data);
// Cache the data to a variable
user2 = data;
//Now that you have both APIs back, you can do something with the data
let myUser2 = document.getElementById('user2-container'),
totalScore2 = (1 * user2.followers + 1 * user2.following + 0.5 * user2.public_repos);
myUser2.innerHTML = `<ul class="user-info">
<p id="secondPlayer"> Player 2 </p>
<li id="score2">Score: <span class="totalScr"> ${totalScore2}</span> </li>
<li><img class="avatar" src="${user2.avatar_url}"></li>
<li>Name: ${user2.name} </li>
<li>Username: ${user2.login} </li>
<li>Following: ${user2.following} </li>
<li>Followers: ${user2.followers} </li>
<li>Repository: ${user2.public_repos} </li>
</ul>`;
})
};
fetchUsers();
setTimeout(function() {
document.getElementById('control-buttons').style.display = "block";
playAgain.style.display = "none";
}, 1500);
return false;
};
//Function that assign users score and winner
initiate.onclick = function() {
document.getElementById("confirm-players").innerHTML = "Winner";
document.getElementById('score').style.display = "block";
document.getElementById('score2').style.display = "block";
initiate.style.display = "none";
reSelect.style.display = "none";
playAgain.style.display = "block";
let totalScr = document.getElementsByClassName("totalScr"),
totalScr1 = parseFloat(totalScr[0].innerText),
totalScr2 = parseFloat(totalScr[1].innerText);
if (totalScr1 > totalScr2) {
document.getElementById("firstPlayer").innerHTML = "Winner";
document.getElementById("secondPlayer").innerHTML = "Loser";
} else if (totalScr1 < totalScr2) {
document.getElementById("firstPlayer").innerHTML = "Loser";
document.getElementById("secondPlayer").innerHTML = "Winner";
} else {
confirm("IT'S A TIE, PLAY AGAIN");
};
};
reSelect.onclick = function() {
confirmPage.style.display = "none";
player1.style.display = "block";
user[0].value = null;
user[1].value = null;
};
playAgain.onclick = function() {
//Make this function start the game again, following the usual pattern
};
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, cursive;
background-image: url('images/photo.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
input[type=text] {
-moz-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
border: 1px solid #999;
margin: 50px 0 15px;
}
.body-container {
margin: 0;
text-align: center;
}
.body-container p {
font-size: 16px;
padding-bottom: 5px;
}
.head-text {
padding-top: 60px;
margin-bottom: -10px;
font-size: 36px;
}
#confirm-players {
font-size: 30px;
margin: 10px 0 5px;
}
#get-started-button {
font-size: 18px;
font-weight: 10%;
border: none;
width: 150px;
word-spacing: 2px;
border-radius: 5px;
height: 40px;
background-color: green;
color: white
}
.continue-button {
font-size: 18px;
word-spacing: 2px;
border: none;
width: 200px;
border-radius: 5px;
height: 40px;
background-color: green;
color: white
}
#get-started-button:hover,
.continue-button:hover,
#initiate-battle:hover {
background-color: darkgreen;
}
.github-username {
width: 65%;
height: 35px;
padding: 10px;
margin: 20px 0 15px;
}
#score,
#score2 {
font-size: 18px;
font-weight: bolder;
display: none;
text-align: center;
}
#player-one,
#player-two {
display: none;
}
#confirm-page,
#winner {
display: none;
margin: 20px 0 10px;
}
#initiate-battle,
#play-again {
font-size: 18px;
border: none;
width: 200px;
border-radius: 5px;
word-spacing: 2px;
letter-spacing: 0.4px;
height: 40px;
background-color: green;
color: white;
margin: 15px auto 5px;
}
#reselect-players {
font-size: 18px;
border: none;
word-spacing: 2px;
letter-spacing: 0.4px;
width: 240px;
border-radius: 5px;
height: 35px;
background-color: cornflowerblue;
color: white;
margin: 10px auto;
}
#control-buttons {
display: none;
}
#reselect-players:hover {
background-color: darkslateblue;
}
.avatar {
border-radius: 50%;
height: 200px;
width: 200px;
}
.myUsers {
display: inline-block;
margin: 0 5px 0 10px;
}
ul {
margin-left: -30px;
}
li {
list-style: none;
padding: 5px;
text-align: left;
border: 1px solid grey;
}
#firstPlayer,
#secondPlayer {
margin-bottom: 0;
}
<DOCTYPE! html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="githstyle.css" type="text/css">
</head>
<body>
<div id="startPage" class="body-container">
<h1 class="head-text">GitHub Challenge</h1>
<p>Some challenges are worth engaging 🤓</p>
<button id="get-started-button">Get Started</button>
</div>
<div id="player-one" class="body-container">
<h1 class="head-text">Player One</h1>
<div class="form-container">
<form id="form1" onsubmit="return firstForm();">
<div>
<input type="text" class="github-username" placeholder="Enter Player's GitHub Username" required>
</div>
<div>
<input type="submit" value="Continue" id="continue1" class="continue-button">
</div>
</form>
</div>
</div>
<div id="player-two" class="body-container">
<h1 class="head-text">Player Two</h1>
<div class="form-container">
<form id="form2" onsubmit="return secondForm()">
<div>
<input type="text" name="" class="github-username" placeholder="GitHub Username" required>
</div>
<div>
<input type="submit" value="Continue" id="continue1" class="continue-button">
</div>
</form>
</div>
</div>
<div id="confirm-page" class="body-container">
<h1 id="confirm-players">Confirm players</h1>
<div id="user1-container" class="myUsers">
</div>
<div id="user2-container" class="myUsers">
</div>
<div id="control-buttons">
<div>
<button id="initiate-battle">Initiate Battle</button>
</div>
<div>
<button id="reselect-players">Reselect Players</button>
</div>
<div>
<button id="play-again">Play Again</button>
</div>
</div>
</div>
<script src="gith.js" type="text/javascript">
</script>
</body>
</html>
Reloading the page using JavaScript is very easy.
You can achieve this by using location.reload()
If you want to achieve reloading using a button, then be sure to add a return false; right after you call location.reload() to prevent bubbling (parents of the button won't know the event occurred).
So, your code will look something like this :
document.getElementById('yourButton').addEventListener('click', function(){
location.reload();
return false;
});
Hope this helps ! :)
I'm constructing a tree-view that slides out based on the buttons the user clicks in the preceding column. I get this error when I click on the first column of buttons:
Uncaught TypeError: $(...).effect is not a function
at runEffect1 (test:39)
at HTMLDivElement.<anonymous> (test:66)
at HTMLDivElement.dispatch (jquery-dbg.js:4737)
at HTMLDivElement.c3.handle (jquery-dbg.js:4549)
How do I fix it? These functions worked when I used vanilla JavaScript and without the SAPUI5 imported, but using jQuery now gives problems. I need to use SAPUI5 with jQuery. Also, the snippet doesn't work due to adding SAPUI5.
$(document).ready(function() {
$(function() {
// run the currently selected effect
function runEffect1() {
var selectedEffect = "slide";
var options = {};
/* Hide the columns so that they can slide into display*/
$("#column_2").hide();
$("#column_3").hide();
$("#column_4").hide();
// Run the effect
$("#column_2").effect(selectedEffect, options, 450, function() {
$("#column_3").effect(selectedEffect, options, 450, function() {
$("#column_4").effect(selectedEffect, options, 450, callback);
});
});
};
// Callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$("#effect").removeAttr("style").hide().fadeIn();
}, 100);
};
// Set effect from select menu value
$("#column_1").on("click", function() {
runEffect1();
return false;
});
$("#column_2").on("click", function() {
runEffect2();
return false;
});
});
});
function myFunction2(e) {
test = e;
console.log(e);
jQuery("#column_2").html("");
jQuery("#column_2").html("<span style='color:#FFFFFF'> GL Accounts </span>");
jQuery("#column_3").html("");
jQuery("#column_3").html("<span style='color:#FFFFFF'> GL Name </span>");
jQuery("#column_4").html("");
jQuery("#column_4").html("<span style='color:#FFFFFF'> GL Balance </span>");
jQuery("#column_5").html("");
for (var prop3 in array0) {
jQuery("#column_2").append('<div class="col-md-auto"> <button type="button" id=' + prop3 + ' class="list-group-item" onclick="myFunction4(this.id)">test</button></div>');
jQuery("#column_3").append('<div class="col-md-auto"> <button type="button" id=' + prop3 + ' class="list-group-item" onclick="myFunction4(this.id)">test1</button></div>');
jQuery("#column_4").append('<div class="col-md-auto"> <button type="button" id=' + prop3 + ' class="list-group-item" onclick="myFunction4(this.id)">test2</button></div>');
}
for (var prop2 in array17) {
jQuery("#column_4").append('<div class="col-md-auto"> <button type="button" id=' + prop2 + ' class="list-group-item" onclick="myFunction2(this.id)">test3</button></div>');
}
}
function myFunction4(e) {
test = e;
console.log(e);
jQuery("#column_5").html("");
jQuery("#column_5").html("<span style='color:#FFFFFF'> Breakdown </span>");
for (var prop5 in array11) {
jQuery("#column_5").append('<div class="col-md-auto"> <button type="button" id=' + prop5 + ' class="list-group-item" onclick="myFunction5(this.id)">test4</button></div>');
}
}
function myFunction5(e) {
test = e;
console.log(e);
window.open("", "", "width=500,height=500");
}
sap.ui.getCore().attachInit(function() {
console.log("SAPUI5 modules loaded....")
jQuery("#column_1").html("");
jQuery("#column_1").html("<span style='color:#FFFFFF'> Account Group </span>");
for (var prop in array2) {
jQuery("#column_1").append('<div class="col-md-auto"> <button type="button" id=' + prop + ' class="list-group-item" onclick="myFunction2(this.id)">test0</button></div>');
}
});
#import url(https://fonts.googleapis.com/css?family=Roboto:300);
.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #4778b7;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,
.form button:active,
.form button:focus {
background: #7ac1db;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before,
.container:after {
content: "";
display: block;
clear: both;
}
.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #4778b7;
/* fallback for old browsers */
background: -webkit-linear-gradient(right, #4778b7, #4778b7);
background: -moz-linear-gradient(right, #4778b7, #4778b7);
background: -o-linear-gradient(right, #4778b7, #4778b7);
background: linear-gradient(to left, #4778b7, #4778b7);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal">
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
<div id="grid" class="container-fluid">
<div class="row no-gutter">
<div class="col-md-2">
<div id="column_1">
<div class="list-group"></div>
<div class='col-md-auto'>
<button type='button' id=1 class='list-group-item'>test</button>
</div>
</div>
</div>
<div class="col-md-2 ">
<div id="column_2">
<div class="list-group"></div>
</div>
</div>
<div class="col-md-2 ">
<div id="column_3">
<div class="list-group"></div>
</div>
</div>
<div class="col-md-2 ">
<div id="column_4">
<div class="list-group"></div>
</div>
</div>
<div class="col-md-2">
<div id="column_5">
<div class="list-group"></div>
</div>
</div>
</div>
</div>
</body>
</html>
it was sap-ui-core.js causing problem; using jQuery noConflict.
$.noConflict();
$(document).ready(function() {
...
});
Normally you don't need the following code in your HTML, because they are duplicated
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
And where did you place the js code? The $(document).ready(function(){ one. It must be place after the all of the js library.
i have a Sidebar on the left of the Screen. I can toggle it by pressing a button. On the right I have the content.
I want to place the button on a horizontal bar on the top. The sidebar seems to cover this bar so I can not see the button.
This is my current code:
The Html File:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">
<body onload="InitDocument()">
<div id="topBar">
<button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
</div>
<div id="container">
<div id="sideNav">
<button type="button" onclick="NewEntry()">+</button>
<p>test</p>
</div>
<div id="mainArea">
<p>Title:</p>
<input id="titleInputField" type="text">
<p>Text:</p>
<textarea id="textArea"> </textarea>
<p></p>
<button type="button" onclick="SaveEntry()">Save</button>
</div>
</div>
</body>
</html>
The Css File:
body{
background-color: #EEEEEE;
color: #000000;
}
* {
margin: 0;
padding: 0;
}
#sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
background-color: #333333;
color: #EEEEEE;
}
The Js File:
var navIsOpen = true;
function InitDocument(){ // Initialization
ToggleNavbar();
}
function ToggleNavbar(){ // show - hide the navbar
var sideNavWidth = "0px";
var mainAreaWidth = "0px";
if (navIsOpen)
{
sideNavWidth = "200px";
mainAreaWidth = "200px";
}
$("#sideNav").width(sideNavWidth);
$("#mainArea").css('margin-left',mainAreaWidth);
navIsOpen = !navIsOpen;
}
function SaveEntry(){ // save the entry
var txtTitle = $("#titleInputField").val();
var txtField = $("#textArea").val();
alert(txtTitle + "#" + txtField);
}
function NewEntry() { // create a new entry
alert("neuer Eintrag");
}
This is what I want to archieve
It seems I just have to fix the CSS to get it done.
I added margin-top:0; to your topBar and removed top: 0; from your sideNav.
Try this:
var navIsOpen = true;
function InitDocument(){ // Initialization
ToggleNavbar();
}
function ToggleNavbar(){ // show - hide the navbar
var sideNavWidth = "0px";
var mainAreaWidth = "0px";
if (navIsOpen)
{
sideNavWidth = "200px";
mainAreaWidth = "200px";
}
$("#sideNav").width(sideNavWidth);
$("#mainArea").css('margin-left',mainAreaWidth);
navIsOpen = !navIsOpen;
}
function SaveEntry(){ // save the entry
var txtTitle = $("#titleInputField").val();
var txtField = $("#textArea").val();
alert(txtTitle + "#" + txtField);
}
function NewEntry() { // create a new entry
alert("neuer Eintrag");
}
body{
background-color: #EEEEEE;
color: #000000;
}
*{
margin: 0;
padding: 0;
}
#topBar {
margin-top:0;
background-color: navy;
}
#sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
overflow-x: hidden;
background-color: #333333;
color: #EEEEEE;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">
<body onload="InitDocument()">
<div id="topBar">
<button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
</div>
<div id="container">
<div id="sideNav">
<button type="button" onclick="NewEntry()">+</button>
<p>test</p>
</div>
<div id="mainArea">
<p>Title:</p>
<input id="titleInputField" type="text">
<p>Text:</p>
<textarea id="textArea"> </textarea>
<p></p>
<button type="button" onclick="SaveEntry()">Save</button>
</div>
</div>
</body>
</html>
Try this:
var navIsOpen = true;
function InitDocument(){ // Initialization
ToggleNavbar();
}
function ToggleNavbar(){ // show - hide the navbar
var sideNavWidth = "0px";
var mainAreaWidth = "0px";
if (navIsOpen)
{
sideNavWidth = "200px";
mainAreaWidth = "200px";
}
$("#sideNav").width(sideNavWidth);
$("#mainArea").css('margin-left',mainAreaWidth);
navIsOpen = !navIsOpen;
}
function SaveEntry(){ // save the entry
var txtTitle = $("#titleInputField").val();
var txtField = $("#textArea").val();
alert(txtTitle + "#" + txtField);
}
function NewEntry() { // create a new entry
alert("neuer Eintrag");
}
body{
background-color: #EEEEEE;
color: #000000;
}
* {
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
}
#sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 50px;
left: 0;
overflow-x: hidden;
background-color: #333333;
color: #EEEEEE;
}
#topBar {
position: fixed;
display: inline-block;
width: 100%;
height: 50px;
background-color: red;
}
#container {
display: flex;
padding-top: 50px;
flex: 1;
flex-direction: row;
}
<html>
<head>
<meta charset="utf-8" />
<title>
</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">
<body onload="InitDocument()">
<div id="main">
<div id="topBar">
<button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
</div>
<div id="container">
<div id="sideNav">
<button type="button" onclick="NewEntry()">+</button>
<p>test</p>
</div>
<div id="mainArea">
<p>Title:</p>
<input id="titleInputField" type="text">
<p>Text:</p>
<textarea id="textArea"> </textarea>
<p></p>
<button type="button" onclick="SaveEntry()">Save</button>
</div>
</div>
</div>
</body>
</html>
Take a look flex-box concepts
Checkout this example of using the new HTML5 semantic elements.
http://www.w3schools.com/html/html5_semantic_elements.asp
I have taken most of the example elements from the link above and created a simple HTML5 page.
You can add/remove/modify any of the section below by removing the HTML or removing/adding additional CSS properties.
var toggleButton = document.getElementById('toggle-button');
var pageWrapper = document.getElementsByClassName('wrapper')[0];
toggleButton.addEventListener('click', function() {
toggleClass(pageWrapper, 'toggle-hidden')
});
function toggleClass(el, className) {
if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
}
header, footer {
width: 100%;
text-align: center;
background: #DDD;
padding: 0.25em !important;
}
.title {
font-weight: bold;
font-size: 2.25em;
margin-bottom: 0.5em;
}
.subtitle {
font-size: 1.5em;
font-style: italic;
}
.wrapper {
background: #EEE;
}
nav {
text-align: center;
background: #CCC;
padding: 0.25em !important;
}
aside {
float: left;
top: 0;
width: 12em;
height: 100%;
padding: 0.25em !important;
}
aside a {
display: block;
text-decoration: none;
margin-bottom: 0.5em;
}
aside a:before {
content: '➢ ';
}
article, section {
margin-left: 12em !important;
background: #FFF;
padding: 0.25em !important;
}
/* Default HTML4 typography styles */
h1 { font-size: 2.00em !important; margin: 0.67em 0 !important; }
h2 { font-size: 1.50em !important; margin: 0.75em 0 !important; }
h3 { font-size: 1.17em !important; margin: 0.83em 0 !important; }
h5 { font-size: 0.83em !important; margin: 1.50em 0 !important; }
h6 { font-size: 0.75em !important; margin: 1.67em 0 !important; }
h1, h2, h3, h4, h5, h6 { font-weight: bolder !important; }
p { font-size: 1.00em !important; margin: 1em 0 !important; }
#toggle-button {
display: block;
position: absolute;
width: 5em;
height: 5em;
line-height: 1.5em;
text-align: center;
}
.wrapper.toggle-hidden aside {
display: none;
width: 0;
}
.wrapper.toggle-hidden article, .wrapper.toggle-hidden section {
margin-left: 0 !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<header>
<button id="toggle-button">Toggle<br />Sidebar</button>
<div class="title">What Does WWF Do?</div>
<div class="subtitle">WWF's mission:</div>
</header>
<div class="wrapper">
<nav>
HTML |
CSS |
JavaScript |
jQuery
</nav>
<aside>
<h1>Links</h1>
HTML
CSS
JavaScript
jQuery
</aside>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
</div>
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: someone#example.com.</p>
</footer>
Went through a few questions on stackoverflow but could not solve the error.
The intention is to modify and add html to the main document reading a JSON structure.
Uncaught TypeError: Cannot read property 'appendChild' of undefined
Update 1:-
Typo was corrected, marked in code.
Defer was introduced at script load in head section, this makes sure the entire document is loaded before the script starts execution.
Here I am trying to read a JSON, and then looping across its content to add to my main html document.
var json={
"fruit":[
{
"fruitname":"Apple",
"location":"data/png/apple.png",
"quantity":"25",
"price":"2"
},
{
"fruitname":"Mango",
"location":"data/png/mango.png",
"quantity":"35",
"price":"3"
}
]
};
//var cards = document.getElementsByClassName("content"); -- corrected typo
var cards = document.getElementById("content");
var fruits = json.fruit;
//alert(fruits.length);
//alert(fruits[1].fruitname);
for (var i = 0; i < fruits.length; i++) {
var cardelement=document.createElement('div');
cardelement.className = 'card';
// alert(cardelement);
cards.appendChild(cardelement);
var object = document.createElement('div');
object.className = 'object';
// alert(object);
cardelement.appendChild(object);
var image = document.createElement('img');
image.setAttribute("src", fruits[i].location);
object.appendChild(image);
var objectback = document.createElement('div');
objectback.className = 'object-back';
cardelement.appendChild(objectback);
var backfruit = document.createElement('div');
backfruit.className = 'back-fruit';
backfruit.innerHTML = fruits[i].fruitname;
objectback.appendChild(backfruit);
var backprice = document.createElement('div');
backprice.className = 'back-price';
backprice.innerHTML = fruits[i].price + "$ per unit";
objectback.appendChild(backprice);
var backquantity = document.createElement('div');
backquantity.className = 'back-quantity';
backquantity.innerHTML = "In Stock " + fruits[i].quantity + " units";
objectback.appendChild(backquantity);
}
*
{
margin: 0 0;
border: none;
text-align:center
}
#header
{
background-color: #F44336;
font-family: 'Bungee Shade', cursive;
font-size: 30px;
height: 20%
}
#footer
{
font-family: 'Roboto', sans-serif;
position: fixed;
height: 80%;
width: 100%
}
#content
{
width: 75%;
height: 100%;
border-right: thick solid #F44336;
float: left;
text-align: left;
overflow: scroll
}
#cart
{
background-color:#3F51B5;
width: 25%;
border-bottom: thick dashed #F44336;
float: right
}
.card
{
display:inline-block;
width: 100px;
height: 100px;
margin: 40px;
padding: 20px;
box-shadow: -1px 9px 20px 4px #000000;
border: 5px solid #F44336;
border-radius: 26px 26px 26px 26px;
transition: all .2s ease-in-out
}
.object .object-back
{
display:block;
position:static
}
.object-back
{
display: none
}
.object img
{
height: 100px;
width: 100px
}
.back-fruit
{
font-size: 20px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: thin solid
}
.back-price
{
font-size: 12px;
padding-bottom: 5px
}
.back-quantity
{
font-size: 10px;
padding-bottom: 10px
}
.back-pluscart
{
font-size: 15px;
background-color: #F44336;
width: auto
}
.back-pluscart img
{
height: 30px;
width: 30px
}
.card:hover
{
box-shadow: -1px 9px 46px 11px #000000
}
.card:hover .object
{
display: none
}
.card:hover .object-back
{
display:inline-block;
opacity: 1
}
<!DOCTYPE html>
<html>
<head>
<title> The Shopkeeper </title>
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "style/style.css" />
<script type="text/javascript" src="logic/core.js" defer></script>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="base">
<div id="header">
<h1> Fruitkart </h1>
</div>
<div id="footer">
<div id="content">
<!--
<div class="card">
<div class="object">
<img src="data/png/apple.png" />
</div>
<div class="object-back">
<div class="back-fruit">Apple</div>
<div class="back-price">2$ per unit</div>
<div class="back-quantity">In Stock 25 pieces </div>
<div class="back-pluscart"> <img src="data/png/cart.png" /> </div>
</div>
</div>
-->
</div>
<div id="cart">
django
is a big boy
</div>
</div>
</div>
</body>
</html>
Why was content undefined
You try to get content by ClassName
var cards = document.getElementsByClassName("content")[0];
But find content in your html:
<div id="content">
Notice that the ID is content. Either change it to class="content" or change the previous code to document.getElementByID("content");
Two issues:
There is no element with class content. On the other hand there is an element with that id. So you probably want to do:
document.getElementById("content");
The script runs too soon -- the elements are not loaded yet when it runs. Either put the script just before the closing </body> tag, or put the code inside an event handler, like
window.addEventListener('DOMContentLoaded', function() {
// your code
});
You are trying to access an element with class name content var cards =document.getElementsByClassName("content")[0]; & there is no class named content
You can modify your code like this ,
var cards = document.getElementById("content");
var json={
"fruit":[
{
"fruitname":"Apple",
"location":"data/png/apple.png",
"quantity":"25",
"price":"2"
},
{
"fruitname":"Mango",
"location":"data/png/mango.png",
"quantity":"35",
"price":"3"
}
]
};
var cards = document.getElementById("content");
var fruits = json.fruit;
//alert(fruits.length);
//alert(fruits[1].fruitname);
for (var i = 0; i < fruits.length; i++) {
var cardelement=document.createElement('div');
cardelement.className = 'card';
// alert(cardelement);
cards.appendChild(cardelement);
var object = document.createElement('div');
object.className = 'object';
// alert(object);
cardelement.appendChild(object);
var image = document.createElement('img');
image.setAttribute("src", fruits[i].location);
object.appendChild(image);
var objectback = document.createElement('div');
objectback.className = 'object-back';
cardelement.appendChild(objectback);
var backfruit = document.createElement('div');
backfruit.className = 'back-fruit';
backfruit.innerHTML = fruits[i].fruitname;
objectback.appendChild(backfruit);
var backprice = document.createElement('div');
backprice.className = 'back-price';
backprice.innerHTML = fruits[i].price + "$ per unit";
objectback.appendChild(backprice);
var backquantity = document.createElement('div');
backquantity.className = 'back-quantity';
backquantity.innerHTML = "In Stock " + fruits[i].quantity + " units";
objectback.appendChild(backquantity);
}
*
{
margin: 0 0;
border: none;
text-align:center
}
#header
{
background-color: #F44336;
font-family: 'Bungee Shade', cursive;
font-size: 30px;
height: 20%
}
#footer
{
font-family: 'Roboto', sans-serif;
position: fixed;
height: 80%;
width: 100%
}
#content
{
width: 75%;
height: 100%;
border-right: thick solid #F44336;
float: left;
text-align: left;
overflow: scroll
}
#cart
{
background-color:#3F51B5;
width: 25%;
border-bottom: thick dashed #F44336;
float: right
}
.card
{
display:inline-block;
width: 100px;
height: 100px;
margin: 40px;
padding: 20px;
box-shadow: -1px 9px 20px 4px #000000;
border: 5px solid #F44336;
border-radius: 26px 26px 26px 26px;
transition: all .2s ease-in-out
}
.object .object-back
{
display:block;
position:static
}
.object-back
{
display: none
}
.object img
{
height: 100px;
width: 100px
}
.back-fruit
{
font-size: 20px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: thin solid
}
.back-price
{
font-size: 12px;
padding-bottom: 5px
}
.back-quantity
{
font-size: 10px;
padding-bottom: 10px
}
.back-pluscart
{
font-size: 15px;
background-color: #F44336;
width: auto
}
.back-pluscart img
{
height: 30px;
width: 30px
}
.card:hover
{
box-shadow: -1px 9px 46px 11px #000000
}
.card:hover .object
{
display: none
}
.card:hover .object-back
{
display:inline-block;
opacity: 1
}
<!DOCTYPE html>
<html>
<head>
<title> The Shopkeeper </title>
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "style/style.css" />
<script type="text/javascript" src="logic/core.js" ></script>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="base">
<div id="header">
<h1> Fruitkart </h1>
</div>
<div id="footer">
<div id="content">
<!--
<div class="card">
<div class="object">
<img src="data/png/apple.png" />
</div>
<div class="object-back">
<div class="back-fruit">Apple</div>
<div class="back-price">2$ per unit</div>
<div class="back-quantity">In Stock 25 pieces </div>
<div class="back-pluscart"> <img src="data/png/cart.png" /> </div>
</div>
</div>
-->
</div>
<div id="cart">
django
is a big boy
</div>
</div>
</div>
</body>
</html>