I'm trying to make a site that loads pages dynamically by injecting html elements with Javascript. I had it work correctly when I had all the code in one file. Now I'm learning to code in modules using webpack, but I have a problem.
So as you can see, html file only has a navigation. By clicking on the menu javascript will inject template to the wed-spa div.
Problem is that when Home is loaded on window.load javascript also runs a method setPosition from TriCouple, which is supposed to style the html template elements that are injected from Couple.js, which is of course non existent at the moment of window.load.
To clear up the explanation, the proper behavior would be:
1. window loads up and injects Home template immediately,
2. when clicking on "Couple" from navigation it should inject Couple template,
3. the styling for Couple template should be applied via methods from TriCouple.js.
Problem:
javascript is trying to do number 3 while being in number 1 where Couple elements don't appear.
HTML:
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Lato:400,900|Roboto:400,900|Tangerine&subset=latin-ext" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="./assets/styles/css/style.css">
<title>
Wedding template
</title>
</head>
<body>
<div class="container-fluid wed-home">
<nav class="wed-nav navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">John and John</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" id="home">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" id="couple">Couple</a>
<a class="nav-item nav-link" id="bridesmaid">Bridesmaid</a>
<a class="nav-item nav-link" id="groomsmen">Groomsmen</a>
<a class="nav-item nav-link" id="events">Events</a>
<a class="nav-item nav-link" id="story">Story</a>
<a class="nav-item nav-link" id="rsvp">RSVP</a>
</div>
</div>
</nav>
<div class="wed-spa"></div>
</div>
<script src="./temp/scripts/bundle.js"></script>
</body>
</html>
my main app.js:
import Home from './modules/Home';
import Couple from './modules/Couple';
import TriCouple from './modules/TriCouple';
var home = new Home();
window.addEventListener("load", function() {
var loader = new Home;
loader.loadHome();
})
var couple = new Couple();
var triCouple = new TriCouple();
Home.js
class Home {
constructor() {
this.template = `
<div class="wed-heading row">
<div class="wed-heading-wrapper col">
<h1>Angelo & Klaudia
<br>
<span class="std">Save the date</span>
<span class="wed-date">22.08.2015</span>
</h1>
</div>
</div>
`;
this.homeMenu = document.querySelector("#home");
this.spa = document.querySelector(".wed-spa");
this.homeSection = document.querySelector(".wed-home");
this.homeClick();
};
homeClick() {
var that = this;
this.homeMenu.addEventListener("click", function(){
that.loadHome();
})
};
loadHome() {
this.homeSection.classList.add('wed-front');
this.loadTemplate();
};
loadTemplate() {
this.spa.innerHTML = this.template;
}
}
export default Home;
Couple.js
class Couple {
constructor() {
//Start of HTML Template
this.template = `
<div class="message-popup"></div>
<div class="wed-couple container">
<div class="wed-couple-newlyweds wed-couple-bride">
<div class="wed-couple-newlyweds-img wed-couple-bride-img">
<div class="wed-couple-name-row row">
<div class="wed-couple-desc wed-couple-name wed-couple-name-bride col-md-auto">
<h1>Klaudia Kim</h1>
</div>
<div class="wed-couple-desc wed-couple-position wed-couple-position-bride col-md-auto">
<span>The Bride</span>
</div>
</div>
<div class="wed-couple-newlyweds-message wed-couple-newlyweds-message-bride">
<span>Message from the Bride</span>
</div>
</div>
</div>
<div class="wed-couple-newlyweds wed-couple-groom">
<div class="wed-couple-newlyweds-img wed-couple-groom-img">
<div class="wed-couple-name-row row">
<div class="wed-couple-desc wed-couple-name wed-couple-name-groom col-md-auto">
<h1>Angelo Kim</h1>
</div>
<div class="wed-couple-desc wed-couple-position wed-couple-position-groom col-md-auto">
<span>The Groom</span>
</div>
</div>
<div class="wed-couple-newlyweds-message wed-couple-newlyweds-message-groom">
<span>Message from the Groom</span>
</div>
</div>
</div>
</div>
`;
// End of HTML Template
//DOM declaration
this.spa = document.querySelector(".wed-spa");
this.coupleButton = document.querySelector('#couple');
this.homeSection = document.querySelector(".wed-home");
//initialize methods
this.loadCouple();
};
// End Constructor
// Start methods
loadCouple() {
var _this = this;
this.coupleButton.addEventListener("click", function() {
_this.homeSection.classList.remove('wed-front');
_this.spa.innerHTML = _this.template;
});
};
}
export default Couple;
Tricouple.js
class TriCouple {
constructor() {
this.wedCouple = document.querySelector('.wed-couple');
this.coupleButton = document.querySelector('#couple');
this.wedCoupleBride = document.querySelector(".wed-couple-bride");
this.wedCoupleBrideImg = document.querySelector(".wed-couple-bride-img");
this.wedCoupleGroom = document.querySelector(".wed-couple-groom");
this.wedCoupleGroomImg = document.querySelector(".wed-couple-groom-img");
this.wedCoupleNewlyweds = document.querySelectorAll(".wed-couple-newlyweds");
// Detect initial Viewport
this.initialWindowWidth = window.innerWidth;
this.initialWindowHeight = window.innerHeight;
this.diagonal = Math.sqrt(Math.pow(this.initialWindowWidth, 2) + Math.pow(this.initialWindowHeight, 2));
// Calculate sinus
this.sineX = this.initialWindowWidth / this.diagonal
// Calculate angle for rotation
this.sinDegree = Math.asin(this.sineX) * (180 / Math.PI);
//Initiate methods
this.setHeight();
this.setPosition();
};
//SET HEIGHT
setHeight() {
this.wedCoupleNewlyweds.forEach((partner) => {
console.log('log for each partner');
partner.style.height = this.diagonal + 'px';
})
};
//POSITION TO LEFT & RIGHT
setPosition(callback, obj){
this.wedCoupleBride.style.left = -this.initialWindowWidth + 'px';
this.wedCoupleBrideImg.style.left = this.initialWindowWidth + 'px';
this.wedCoupleGroom.style.right = -this.initialWindowWidth + 'px';
this.wedCoupleGroomImg.style.right = this.initialWindowWidth + 'px';
callback.call(obj, null);
}
}
export default TriCouple;
Related
Hey there I am just have trouble bringing up a modal working with bootstrap. Theoretically I have a list of pokemon that I fetched from another website. Then each pokemon is supposed to act as a button to where i can then click on and receive more information about. I would appreciate some help as I am pretty lost.
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple JS App</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header class="page-header">
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-target="#myModal" data-toggle="modal" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<h1>Pokedex</h1>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" data-target="#myModal" data-toggle="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<ul class="list-group"></ul>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</body>
</html>
JS
let pokemonRepository = (function () {
let pokemonList = [];
let apiUrl = 'https://pokeapi.co/api/v2/pokemon/?limit=150';
function add(pokemon) {
pokemonList.push(pokemon);
}
function getAll() {
return pokemonList;
}
function addListItem(pokemon) {
let pokemonList = document.querySelector('.list-group');
let listPokemon = document.createElement('li');
listPokemon.classList.add('group-list-item');
let button = document.createElement('button');
button.innerText = pokemon.name;
button.classList.add('btn');
pokemonList.appendChild(listPokemon);
listPokemon.appendChild(button);
button.addEventListener('click', function(event) {
showDetails(pokemon);
});
}
function loadList() {
return fetch(apiUrl).then(function (response) {
return response.json();
}).then(function (json) {
json.results.forEach(function (item) {
let pokemon = {
name: item.name,
detailsUrl: item.url
};
add(pokemon);
console.log(pokemon);
});
}).catch(function (e) {
console.error(e);
});
}
function loadDetails(item) {
let url = item.detailsUrl;
return fetch(url).then(function (response) {
return response.json();
}).then(function (details) {
// Now we add the details to the item
item.imageUrl = details.sprites.front_default;
item.height = details.height;
item.types = details.types;
}).catch(function (e) {
console.error(e);
});
}
function showDetails(pokemon) {
loadDetails(pokemon).then(function () {
showModal(pokemon);
});
};
function showModal(item) {
let modalContainer = document.querySelector('#myModal');
modalContainer.classList.add('is-visible');
// Clear all existing modal content
modalContainer.innerHTML = '';
modalContainer.addEventListener('click', (e) => {
// Since this is also triggered when clicking INSIDE the modal
// We only want to close if the user clicks directly on the overlay
let target = e.target;
if (target === modalContainer) {
hideModal();
}
});
let modal = document.createElement('div');
modal.classList.add('modal');
// Add the new modal content
let closeButtonElement = document.createElement('button');
closeButtonElement.classList.add('modal-close');
closeButtonElement.innerText = 'Close';
closeButtonElement.addEventListener('click', hideModal);
let titleElement = document.createElement('h1');
titleElement.innerText = item.name + (': ') + ('height = ') + item.height;
let container = document.querySelector('#image-container');
let myImage = document.createElement('img');
myImage.src = item.imageUrl;
modal.appendChild(closeButtonElement);
modal.appendChild(titleElement);
modalContainer.appendChild(modal);
modal.appendChild(myImage);
}
function hideModal() {
let modalContainer = document.querySelector('#myModal');
modalContainer.classList.remove('is-visible');
}
window.addEventListener('keydown', (e) => {
let modalContainer = document.querySelector('#myModal');
if (e.key === 'Escape' && modalContainer.classList.contains('is-visible')) {
hideModal();
}
});
return {
add: add,
getAll: getAll,
addListItem: addListItem,
loadList: loadList,
loadDetails: loadDetails,
showDetails: showDetails
};
})();
pokemonRepository.loadList().then(function () {
pokemonRepository.getAll().forEach(function (pokemon) {
pokemonRepository.addListItem(pokemon);
});
});
1 - There is few errors in your code. To open a bootstrap modal there is a method:
$('#myModal').modal('show');
2 - Then you cleaned the structure of the modal with the innerHTML instead of the modal-body and you are trying to recreate all the elements dynamically.
What you can do is just replacing the content of the modal body or do not forget to re-create every element of the modal which is not what you did.
Here is a working example:
https://codepen.io/alxtaz/pen/WNXYOrd
const navList = document.getElementById("navigation");
const hoveredHome = document.querySelector(".nav_home");
const hoveredAbout = document.querySelector(".nav_about");
const hoveredSkills = document.querySelector(".nav_skills");
const hoveredContact = document.querySelector(".nav_contact");
const texts = [' // Home'];
const text2 = [' // About']
let count = 0; // counts the individual characters in array numbers
let characters = 0; // counts the individual letters/characters
let currentWord = '';
let letter = ''; //specifies individual letter, one by one
function typing() {
// currentWord needs to change depending on what button is hovered
currentWord = texts[count];
letter = currentWord.slice(0, ++characters); //adds one character at a time
document.querySelector(".nav_home").textContent = letter; //adds letter
setTimeout(typing, 50);
};
document.querySelector(".hovered").addEventListener('mouseover', typing);
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav id="navigation">
<div class="length_size"><div class="hovered"><i class="fas fa-home"></div></i><p class="nav_home"></p></div>
<div class="length_size"><div class="hovered"><i class="fas fa-question-circle"></div></i><p class="nav_about"></p></div>
<div class="length_size"><div class="hovered"><i class="fas fa-code"></i></div><p class="nav_skills"></p></div>
<div class="length_size"><div class="hovered"><i class="fas fa-envelope"></div></i><p class="nav_contact"></p></div>
<div class="length_size"><div class="hovered"><i class="fas fa-blog"></i></div><p class="nav_blog"></p></div>
</nav>
</div>
</div>
<script src="./javaScript/navAnimate.js"></script>
</body>
Edited question, im trying to make it so when the icons are hovered text appears next to them, and eventually when they are not hovered the text dissapears.
You don't need javascript at all. You can do this with pure CSS - in only one line (once you do the initial styling). This is the one line that does the work:
a:hover .nav_text{display:block;}
a{display:flex;min-height:50px;}
.nav_text{display:none;}
.hovered{display:flex;align-items:center;padding-right:5px;}
#navigation a:hover .nav_text{display:block;}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav id="navigation">
<div class="length_size"><div class="hovered"><i class="fas fa-home"></i></div><p class="nav_text">Home</p></div>
<div class="length_size"><div class="hovered"><i class="fas fa-question-circle"></i></div><p class="nav_text">Aboot, eh?</p></div>
<div class="length_size"><div class="hovered"><i class="fas fa-code"></i></div><p class="nav_text">Skills</p></div>
<div class="length_size"><div class="hovered"><i class="fas fa-envelope"></i></div><p class="nav_text">Contact</p></div>
<div class="length_size"><div class="hovered"><i class="fas fa-blog"></i></div><p class="nav_text">Blog</p></div>
</nav>
</div>
</div>
</body>
However, if you wanted to do it with javascript, here's the code that would make this work for you:
//Look closely - this is NOT jQuery
//const $ = document.querySelector.bind(document); //<== not needed in _this_ example
const $$ = document.querySelectorAll.bind(document);
const links = $$('#navigation .hovered');
$$('#navigation a').forEach(link => {
link.addEventListener('mouseover', evt => {
const atag = evt.target.closest('a');
const ntxt = atag.getElementsByClassName('nav_text');
ntxt[0].style.display = 'block';
});
link.addEventListener('mouseout', evt => {
const atag = evt.target.closest('a');
const ntxt = atag.getElementsByClassName('nav_text');
ntxt[0].style.display = 'none';
});
});
#navigation a{display:flex;min-height:50px;}
.nav_text{display:none;}
.hovered{display:flex;align-items:center;padding-right:5px;}
.nav_show{display:block;}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav id="navigation">
<div class="length_size"><div class="hovered"><i class="fas fa-home"></i></div><p class="nav_text nav_home">Home</p></div>
<div class="length_size"><div class="hovered"><i class="fas fa-question-circle"></i></div><p class="nav_text nav_about">Aboot, eh?</p></div>
<div class="length_size"><div class="hovered"><i class="fas fa-code"></i></div><p class="nav_text nav_skills">Skills</p></div>
<div class="length_size"><div class="hovered"><i class="fas fa-envelope"></i></div><p class="nav_text nav_contact">Contact</p></div>
<div class="length_size"><div class="hovered"><i class="fas fa-blog"></i></div><p class="nav_text nav_blog">Blog</p></div>
</nav>
</div>
</div>
</body>
You might already know this, but please note that I prefixed several element tagNames/classNames with #navigation just to ensure that the correct a tags or .hovered elements were selected (in case you had others elsewhere on your page - quite likely with the a tag). If you added class names to the a tags (and used the className instead of a, and ensured that the .hovered className was truly unique, you would not need the #navigation selector.
User needs to input Bitcoin address
after bitcoin address is valid modal should open
if bitcoin adress is invalid modal should stay closed
enter image description here
enter image description here
enter image description here
And here is the code
(Bicoin validation works, i only need help with the modal)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>BItmixxer</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style media="screen">
hr.style1{
border-top: 1px solid #8c8b8b;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid" style="text-align:center" >
<div class="container">
<h1>Crypto Mixxer</h1>
<p>some more Text about crypto mixxer</p>
</div>
</div>
<div class="container" style="text-align:center" >
<h1>BTC Mixxer</h1>
<p>Choose COins to mix:</p> <button type="button" class="btn btn-outline-primary">Bitcoin</button>
<button type="button" class="btn btn-outline-success">Ethereum</button>
<br>
<br>
<br>
<div class="form-group" id="elMessage" class="msg">
<input type="text" class="form-control" id="inpAddress" value="">
</div>
<button type="button" class="btn btn-primary" id="btnValidate" data-toggle="modal" data-target="#myModal">Next</button>
<script>
var normalize = (s) => {
let x = String(s) || '';
return x.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
};
var check = (s) => {
if (s.length < 26 || s.length > 35) {
return false;
}
let re = /^[A-Z0-9]+$/i;
if (!re.test(s)) {
return false;
}
return true;
};
var getEl = (id) => {
return document.getElementById(id) || null;
};
var elMessage = getEl('elMessage');
var inpAddress = getEl('inpAddress');
var btnValidate = getEl('btnValidate');
var lnkClear = getEl('lnkClear');
var setMessage = (txt = '', clss = 'msg') => {
elMessage.className = clss;
elMessage.innerHTML = txt;
};
var validate = (s) => {
let className = 'msg fail';
let textMessage = 'Invalid bitcoin address';
if (!s) {
textMessage = 'Please enter a valid address';
}
let re = check(s);
if (re) {
className = 'msg pass';
textMessage = 'Bitcoin address is valid';
}
setMessage(textMessage, className);
return re;
};
btnValidate.onclick = () => {
let v = normalize(inpAddress.value);
let result = validate(v);
if (result) {
inpAddress.value = v;
}
};
lnkClear.onclick = () => {
inpAddress.value = '';
inpAddress.focus();
setMessage('Enter any text and press "Validate"');
};
</script>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<h3>Please send your BTC(min0.5) to</h3>
<p id ="btc-house" style="color:blue;"></p>
<script>
var myArray = ['1QFsuDg4HyCJZFBfC2ivxHCK2CX2i9YvWN', ' 1EhfSjMuyAyrpRRGf5sSCU3YDbVAqjJNxH', '1N2e39vyTrk6HtvZPqWPrHfHKBzsnQNN4V','1GVSGZxwU69fN5oPprSxXRnjsZPvo8bGw3'];
var rand = myArray[Math.floor(Math.random() * myArray.length)];
document.getElementById("btc-house").innerHTML = rand;
</script>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
I know i need to use
$('#myModal').modal('show');
$('#myModal').modal('hide');
i just dont know where to put it
First remove the data-toggle="modal" target="#myModal" from #btnValidate
<button type="button" class="btn btn-primary" id="btnValidate">Next</button>
Then change your if statment inside your validate function to:
if (re) {
className = 'msg pass';
textMessage = 'Bitcoin address is valid';
$('#myModal').modal('show')
}
Note that you import jquery twice, which can lead to bugs. Remove one import and make sure jquery is imported before bootsrap.js
I am working on a memory game, still. I have 36 images and an array of 36 numbers. I am randomly having numbers picked from the array that make up the 18 numbers for the cards. I need to create the cards and I am trying to append li's to a ul I have in the HTML.
Here is my HTML:
<!DOCTYPE html>
<!-- Group 5 CSD 122 The Holodeck - Games-->
<html>
<head>
<title>Games</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<link rel = "stylesheet" type = "text/css" href = "LCARSremake.css">
<link rel = "stylesheet" type = "text/css" href = "matchingGame.css">
<script src = "javascript/matchingGame.js"></script>
</head>
<body>
<div class = "recFrame">
<header>
<div id = "header" class = "lcars-row header">
<div class="lcars-elbow left-bottom"></div>
<div class="lcars-bar horizontal">
<div><h1 class = "title right"> Matching Game </h1></div>
</div>
<div class="lcars-bar horizontal right-end decorated"></div>
</div>
</header>
<div id = "leftmenu" class = "lcars-column start-space lcars-u-1">
<ul style = "list-style-type: none" class = "leftmenu">
<li class = "lcars-u-1 blank1"></li>
<li class = "lcars-u-1 home"> Home </li>
<li class = "lcars-u-1 games"> Games </li>
<li class = "lcars-u-1 about"> About </li>
<li class = "lcars-u-1 blank2"></li>
<li class = "lcars-u-1 blank3"></li>
<li class = "lcars-u-1 blank4"></li>
<li class = "lcars-u-1 blank5"></li>
<li class = "lcars-u-1 blank6"></li>
<li class = "lcars-u-1 blank7"></li>
</ul>
<div class="lcars-bar lcars-u-1"></div>
</div>
<main>
<div id = "contentFrame">
<div class = "lcars-column lcars-u-5">
<section class = "score-panel">
<div id = "startGame">Start Game</div>
<ul class = "rank">
<li><i class="fas fa-circle"></i></li>
<li><i class="fas fa-circle"></i></li>
<li><i class="fas fa-circle"></i></li>
<li><i class="fas fa-circle"></i></li>
</ul>
<span class = "moves">0 </span> MOVES | TIME:
<div class = "timer"></div>
<div class = "restart">
<i class="fas fa-redo"></i>
</div>
</section>
<ul class = "deck">
</ul>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Congratulations</h2>
<a class="close" href=# >×</a>
<div class="content-1">
Congratulations you won!
</div>
<div class="content-2">
<p>You made <span id=finalMove> </span> moves </p>
<p>in <span id=totalTime> </span> </p>
<p>Rating: <span id=starRating></span></p>
</div>
<button id="play-again"onclick="playAgain()">
Play again</a>
</button>
</div>
</div>
</div>
</div>
</main>
<footer>
<div id = "footer" class = "lcars-row">
<div class="lcars-elbow left-top"></div>
<div class="lcars-bar horizontal both-divider bottom"></div>
<span class = "footerContent"><p> LCARS © Michael Okuda </p></span>
<div class="lcars-bar horizontal right-end left-divider bottom"></div>
</div>
</footer>
</div>
</body>
</html>
Here is the javascript code I'm trying to use to get the images to be the list item:
// The function init() enables the game to begin
function init() {
// The shuffle function shuffles the objects array
let allCards = shuffle(cardList());
$deck.empty();
// The game starts with no matching cards and zero moves
match = 0;
moves = 0;
$moves.text('0');
// A for loop creates <li> tags with the class of card for every <i> tag
// A class of fa fa- and a name of each object from the objects=[] array
for (let i = 0; i < allCards.length; i++) {
var img = allCards[i] + '.png';
$deck.append(('<li class="card"><img src = "images/symbols/ ' + img + '/>/li>'))
}
addCardListener();
// Enables the timer to reset to 0 when the game is restarted
resetTimer(nowTime);
second = 0;
$timer.text(`${second}`)
initTime();
}
Using the debugger and I get to the part where it is supposed to append, I just get the content from here displayed:
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
I have no idea what $deck is since you did not provide that so I have to somewhat guess. Just a side note you apparently have a number of global variables, never a good idea.
This line is not producing valid HTML:
$deck.append(('<li class="card"><img src = "images/symbols/ ' + img + '/>/li>'))
Compare to
$deck.append('<li class="card"><img src = "images/symbols/' + img + '"/></li>');
Note it would be much better to create all the elements, then append them one time to the DOM instead of hitting it multiple times.
SO, assuming markup as such:
<ul id="deck"></ul>
Script such as:
var $deck = $('#deck');
var mycards = $('<div/>');
var li = $('<li class="card"><img /></li>');
for (let i = 0; i < allCards.length; i++) {
var imgsrc = 'images/symbols/'+ allCards[i] + '.png';
li.find('img').prop('src',imgsrc);
mycards.append(li);
}
$deck.append(mycards.find('li'));
$deck.append(('<li class="card"><img src = "images/symbols/ ' + img + '/>/li>'))
should be
$deck.append('<li class="card"><img src="images/symbols/' + img + '" /></li>'))
I am a new user in web developing especially using ace,backbone and require scripts. I have to create a web page as MVC/MV* structure by using backbone.js. I have successfully done that. After that I noticed require.js and try to use that. But, there is an event in one of my html template, that needs "ace.min.js". But that will not work after render that template in index.html. Following are the codes and screens of my application :-
1. index.html
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="styles/css/bootstrap.min.css" />
<link rel="stylesheet" href="styles/css/font-awesome.min.css" />
<link rel="stylesheet" href="styles/css/ace-fonts.css" />
<link rel="stylesheet" href="styles/css/ace.min.css" />
<link rel="stylesheet" href="styles/css/ace-rtl.min.css" />
<link rel="stylesheet" href="styles/css/ace-skins.min.css" />
<link rel="stylesheet" href="styles/css/datepicker.css"/>
<link rel="stylesheet" href="styles/css/pageslider.css">
<script data-main="js/app" src="js/require.js"></script>
</head> <body></body> </html>
2. app.js
require.config({
baseUrl: 'js/lib',
paths: {
//-------------------------------------------
jquery : 'jquery/jquery-2.0.3.min',
underscore : 'backbone/underscore-min',
bootstrap : 'bootstrap/bootstrap.min',
backbone : 'backbone/backbone-min',
ace : 'ace/ace.min',
aceElements : 'ace/ace-elements.min',
aceXtra : 'ace/ace-extra.min',
//--------------------------------------------
app : '../app',
tpl : '../tpl'
},
map: {
'*': {
'app/models/employee': 'app/models/memory/employee'
}
},
shim: {
'underscore': {
deps: [ 'jquery'],
exports: '_'
},
'backbone': {
deps: [ 'jquery','underscore'],
exports: 'Backbone'
},
'bootstrap': {
deps: ['jquery'],
exports: 'Bootstrap'
},
'ace':{
deps: ['jquery','bootstrap'],
exports:'Ace'
},
'aceElements': {
deps: ['jquery','bootstrap','ace'],
exports: 'AceElements'
},
'aceXtra': {
deps: ['jquery','bootstrap','ace'],
exports: 'AceXtra'
}
}
});
require(['jquery', 'backbone', 'app/router', 'underscore', 'bootstrap', 'ace', 'aceElements', 'aceXtra'], function ($, Backbone, Router, _, Bootstrap, Ace, AceElements, AceXtra) {
var router = new Router();
$("body").on("click", ".back-button", function (event) {
event.preventDefault();
window.history.back();
});
Backbone.history.start();
});
3. router.js
define(function (require) {
"use strict";
var $ = require('jquery'),
Backbone = require('backbone'),
Ace = require('ace'),
PageSlider = require('app/utils/pageslider'),
WizardView = require('app/views/Wizard'),
slider = new PageSlider($('')),
wizardView = new WizardView();
return Backbone.Router.extend({
routes: {
"" : "home",
"clinicmanage" : "ManageClinic",
"clinicid/:id" : "RenderWizard"
},
home: function () {
//this.editor = Ace.edit(wizardView.$el);
//wizardView.delegateEvents();
slider.slidePage(wizardView.$el);
$('body').html(wizardView.$el);
//slider = new PageSlider($('#wizardcontent'));
},
ManageClinic: function(){
this.home();
require(["app/views/ClinicManage"],function(Clinic){
slider.slidePage(new Clinic().$el);
//$('#wizardcontent').html(new Clinic().$el);
});
}
});
});
4. Wizard.js
define(function(require){
"use strict";
var $ = require('jquery'),
_ = require('underscore'),
Backbone = require('backbone'),
Ace = require('ace'),
tpl = require('text!tpl/WizardView.html'),
template = _.template(tpl);
return Backbone.View.extend({
initialize: function(){
//model
this.render();
},
render: function(){
this.$el.html(template());
this.data.editor = Ace.edit("editor");
return this;
}
});
});
5. Wizard.html - Template
<div class="navbar navbar-default" id="navbar">
<div class="navbar-container" id="navbar-container">
<div class="navbar-header pull-left">
<a href="#" class="navbar-brand">
<small>
<i class="icon-home"></i>
alloFactor home page
</small>
</a><!-- /.brand -->
</div><!-- /.navbar-header -->
<div class="navbar-header pull-right" role="navigation">
<ul class="nav ace-nav">
<li class="light-blue">
<a data-toggle="dropdown" href="#" class="dropdown-toggle">
<img class="nav-user-photo" src="Source/avatars/user.jpg" alt="Jason's Photo" />
<span class="user-info">
<small>Welcome,</small>
</span>
<i class="icon-caret-down"></i>
</a>
<ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-closer">
<li>
<a href="#">
<i class="icon-cog"></i>
Settings
</a>
</li>
<li class="divider"></li>
<li>
<a href="#logout">
<i class="icon-off"></i>
Logout
</a>
</li>
</ul>
</li>
</ul><!-- /.ace-nav -->
</div><!-- /.navbar-header -->
</div><!-- /.container -->
</div>
<div class="main-container" id="main-container">
<div class="main-container-inner">
<a class="menu-toggler" id="menu-toggler" href="#">
<span class="menu-text"></span>
</a>
<div class="sidebar" id="sidebar">
<script type="text/javascript">
try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
</script>
<ul class="nav nav-list">
<li>
<a href="#clinicmanage">
<i class="icon-book"></i>
<span class="menu-text"> Clinics </span>
</a>
</li>
<li>
<a href="#">
<i class="icon-user"></i>
<span class="menu-text"> Users </span>
</a>
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="icon-desktop"></i>
<span class="menu-text"> Payers </span>
</a>
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="icon-phone"></i>
<span class="menu-text"> Fax </span>
</a>
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="icon-dashboard"></i>
<span class="menu-text"> Dashboard </span>
</a>
</li>
</ul><!-- /.nav-list -->
<div class="sidebar-collapse" id="sidebar-collapse">
<i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
</div>
</div>
<div class="main-content" id="wizardcontent"></div>
</div><!-- /.main-container-inner -->
</div><!-- /.main-container -->
6. Page Screen with error
In Wizard.js, use Backbone's View event binding:
return Backbone.View.extend({
events:{
'click #menu-toggler' : 'toggleMenu'
},
initialize: function(){
//model
this.render();
},
render: function(){
this.$el.html(template());
this.data.editor = Ace.edit("editor");
return this;
},
toggleMenu: function(e){ /* Do something with menu */ }
});
Is this kind of what you're looking for?