I want to show new profile details every 2 seconds each name that I have made, sample is Kian then Aaron and last is Jennifer.
But what happened is when I refresh without reaching the 4 or 6 seconds to show the comment of Aaron and Jennifer, Kian or Aaron is only the one that appear on comment section repeatedly.
I want to appear the name and aboutYou that I’ve made only once each name and save to localStorage.
Here is my script below, please help me to fix it and I want also any cleaner version if necessary.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Details Box with LocalStorage to store data using AngularJS 1.X</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://static.staticsave.com/mycodestyle/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script>
</head>
<body>
<div class="container" ng-app="DetailApp">
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 commentBox">
<div ng-controller="PostController">
<h4>Show profile details</h4>
<ul>
<li ng-repeat='detail in details track by $index'>
<div class='detail'>
<img class="img-icon" src="https://scontent.fccu1-1.fna.fbcdn.net/v/t1.0-1/p32x32/24293984_1510343722335704_5722215927942872393_n.jpg?oh=d0a0307b9e06968795a32d5f65caa103&oe=5A8C375D" />
<div class="com">
<span>{{detail.name}}</span> {{detail.aboutYou}}
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script>
var app = angular.module('DetailApp', []);
app.controller('PostController', function($scope, $timeout) {
// tie the view to ngModule which saves the JSON to localStorage
$scope.details = localStorage.getItem("details");
$scope.details = (localStorage.getItem('details')!==null) ? JSON.parse($scope.details) : [];
localStorage.setItem('details', JSON.stringify($scope.details));
if ($scope.details.length !== 3) {
$timeout(function() {
$scope.details.unshift({
name: "Kian",
aboutYou: "Hi! it's me Kian, my details will show in 2, 1"
});
localStorage.setItem("details", JSON.stringify($scope.details));
}, 2000);
$timeout(function() {
$scope.details.unshift({
name: "Aaron",
aboutYou: "Hi! it's me Aaron, my details will show in 4, 3, 2, 1"
});
localStorage.setItem("details", JSON.stringify($scope.details));
}, 4000);
$timeout(function() {
$scope.details.unshift({
name: "Jennifer",
aboutYou: "Hi! it's me Jennifer, my details will show in 6, 5, 4, 3, 2, 1"
});
localStorage.setItem("details", JSON.stringify($scope.details));
}, 6000);
};
});
</script>
</body>
</html>
Related
I'm trying to make a weather app, and use the API from openweathermap, I copied the baseurl from the web like this but it's not currently working...
const api = {
key:"03173bc8739f7fca249ae8d681b68955"
baseurl:"https://home.openweathermap.org/api_keys"
}
const searchbox=document.querySelector('.search-box');
searchbox.addEventListener('keypress', setQuery)
function setQuery(evt){
if (evt.keyCode==13)
//getResults(searchbox.value)
console.log(searchbox.value)
}
So when I type in the search box, the console doesn't show anything...
This is my html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> </title>
<link rel="stylesheet" href="weather.css">
</head>
<body>
<div class="app-wrap">
<header>
<input type="text" autocomplete="off" class="search-box" placeholder="Search for a city...">
</header>
<main>
<section class="location">
<div class="city">HCM City, Viet Nam</div>
<div class="date">Friday 25 June 2021</div>
</section>
<div class="current">
<div class="tempt">15<span>°C</span></div>
<div class="weather">Sunny</div>
<div class="high-low">13°C / 16°C</div>
</div>
</main>
</div>
<script src="weather.js"></script>
</body>
</html>
Is there something wrong with the baseurl or something, can anybody tell me?
wrap the selector with " ";
const searchbox = document.querySelector(".search-box");
also correct your api obj:
const api = {
key: "03173bc8739f7fca249ae8d681b68955",
baseurl: "https://home.openweathermap.org/api_keys"
}
You missed to add single quote in querySelector.
const searchbox=document.querySelector('.search-box'); // Corrected
also you need to update the API object
const api = {
key:"03173bc8739f7fca249ae8d681b68955",
baseurl:"https://home.openweathermap.org/api_keys"
}
I must make a website. When you press an IMG it adds the template from the directive to another div.
In detail, I have 3 imgs on my website. Hamburger, Cola and Crips. When you press one of them it adds it to the Order List.
HTML code:
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="scripts/angular.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="Stylesheet" type="text/css" href="styles/style.css">
<title>Food Center</title>
<script src="scripts/skrypt.js"></script>
</head>
<body>
<h1 class="ladne"><center>Food Center</center></h1>
<div class="d1" ng-controller="myCtrl" myDir1>
<img src="styles/img/cola.gif"></img>
<img src="styles/img/fryt.gif"></img>
<img src="styles/img/ham.gif"></img>
<br>
<div class="zam" >
Date of order: {{data | date:'yyyy-MM-dd'}}
<br>
Your Order:
</div>
</div>
</body>
</html>
Controller code:
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.data = new Date();
$scope.hamburger ={
name: 'Hambureger',
}
$scope.frytki = {
name: 'Frytki',
}
$scope.cola = {
name: 'Coca-Cola',
}
});
myApp.directive('dir1', function () {
return {
restrict: 'A',
template: '<br>{{hamburger.nazwa}}'
};
});
I really don't understand these directives. Would be nice if you can help me.
I am wondering how can I have my onclick event display multiple this. I want to to be so that once I click on the button, it display new student info each time i click on it. I will only have 3 students info to display. Below is my javascript code and the html that it is linked to. Any help would be great. Right now my onclick event only display one students info.
(function(){
console.log('******Objects of Student Information Below!******');
//Student Information in An Object
var studentInfo=[{name1: 'Sabrina Hill', address1:{address1:'172 Brushcreek Dr', city1:'Sanford',state1:'FL'},gpa1:[3.2,3.7,4.0]},{name2: 'JoelOsteen', address2:{address2:'3226 Lilac Dr', city2:'Portsmouth',state2:'VA'},gpa2:[3.0,2.7,2.0]}];
console.log('Name:',studentInfo[0].name1);
console.log('Address:',studentInfo[0].address1.address1,studentInfo[0].address1.city1,studentInfo[0].address1.state1);
console.log('GPA:',studentInfo[0].gpa1[0]+',',studentInfo[0].gpa1[1]+',',studentInfo[0].gpa1[2]);
console.log('Name:',studentInfo[1].name2);
console.log('Address:',studentInfo[1].address2.address2,studentInfo[1].address2.city2,studentInfo[1].address2.state2);
console.log('GPA:',studentInfo[1].gpa2[1]+',',studentInfo[1].gpa2[1]+',',studentInfo[1].gpa2[1]);
function displayInfo(){
document.getElementById('name').innerHTML='Name: '+ (studentInfo[0].name1);
document.getElementById('address').innerHTML='Address: '+(studentInfo[0].address1.address1+ ' '+studentInfo[0].address1.city1+' '+studentInfo[0].address1.state1);
document.getElementById('gpa').innerHTML='GPA: '+studentInfo[0].gpa1[0]+' ,'+studentInfo[0].gpa1[1]+' ,'+studentInfo[0].gpa1[2];
}
document.getElementById('info_btn').onclick = function(){
displayInfo()
};
console.log('******Added Information******');
console.log('Name:',studentInfo[0].name1);
console.log('Address:',studentInfo[0].address1.address1,studentInfo[0].address1.city1,studentInfo[0].address1.state1);
console.log('GPA:',studentInfo[0].gpa1[0]+',',studentInfo[0].gpa1[1]+',',studentInfo[0].gpa1[2]);
console.log('Name:',studentInfo[1].name2);
console.log('Address:',studentInfo[1].address2.address2,studentInfo[1].address2.city2,studentInfo[1].address2.state2);
console.log('GPA:',studentInfo[1].gpa2[1]+',',studentInfo[1].gpa2[1]+',',studentInfo[1].gpa2[1]);
function modifyStudent(studentObj,name,address,city,state,gpa){
studentObj.name=name;
studentObj.address = {
address:address,
city:city,
state:state
};
studentObj.gpa = gpa;
}
var newStudentInfo = [{
name:"Test",
address:{
address:"No where",
city:"Chicago",
state:"IL",
},
gpa:[]
}];
modifyStudent(newStudentInfo[0],'Super Man', '123 Test Dr', 'Orlando', 'Florida', [3.2, 4.0, 2.2]);
console.log('Name:',newStudentInfo[0].name);
console.log('Address:',newStudentInfo[0].address.address,newStudentInfo[0].address.city,newStudentInfo[0].address.state);
console.log('GPA:',newStudentInfo[0].gpa);
})();
Here is the HTML it is linked to :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Students info</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="form_box">
<div id="contact-form">
<p class="heading">Display Students Information Below:</p>
<div id="form-box">
<div id="output">
<div id="name">
<p></p>
</div>
<div id="address">
<p></p>
</div>
<div id="gpa">
<p></p>
</div>
<div id="date">
<p></p>
</div>
<div id="gpaavg">
<p></p>
</div>
<div id="phone">
<p></p>
</div>
<!-- <div class="clear"></div> -->
</div>
<div id="info_box">
<div id="info_btn">
<h4 id="round" class="heading">Click To See Next Student</h4>
Next
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
LIVE DEMO
(function(){
var c = 0; // "current" Array index pointer
var studentInfo=[
{
name: 'Sabrina Hill',
address:{street:'172 Brushcreek Dr',city:'Sanford',state:'FL'},
gpa:[3.2,3.7,4.0]
},{
name: 'JoelOsteen',
address:{street:'3226 Lilac Dr', city:'Portsmouth',state:'VA'},
gpa:[3.0,2.7,2.0]
}
];
function el(id){ return document.querySelector(id); }
function displayInfo(){
var st = studentInfo[c];
el('#name').innerHTML = 'Name: '+ (st.name);
el('#address').innerHTML = 'Address: '+(st.address.street+' '+st.address.city+' '+st.address.state);
el('#gpa').innerHTML='GPA: '+st.gpa[0]+' ,'+st.gpa[1]+' ,'+st.gpa[2];
}
el('#info_btn').addEventListener('click', function(){
displayInfo();
c = ++c % studentInfo.length; // Increase Array pointer and loop
}, false);
})();
Explanation
Important note: look at the changes I did to your studentInfo property names. I removed the unnecessary numbers at the end of each.
Set a variable c (current array index pointer)
After every button click, get the values from your current object and increase the current value.
Also using the Reminder Operator (%) make sure to loop the pointer value back to 0 if exceeded.
The interesting part is the variable var st = studentInfo[c]; inside the function displayInfo() that takes out of the students object the needed Student array index.
Unfortunately, I am not sure to understand anything to java, jquery and all this kind of thing. Nevertheless, I am trying to get some inspiration on forums in order to make a personal website that contains a vertical navbar and a div container in which external html pages will be loaded. Each html file uses an html5 applet called JSmol, which plots 3D molecules that can be manipulated interactively. The main page looks like this:
<!DOCTYPE html>
<html>
<head>
<title> 3D Chemistry </title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="Chem3D-CSS/MolChem.css" />
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<!-- META TAGS start -->
<meta name="Title" content="Molecular Chemistry" />
<meta charset="UTF-8">
<!-- META TAGS end -->
<script type="text/javascript">
$(document).ready(function() {
// select all the links with class="lnk", when one of them is clicked, get its "href" value
// load the content from that URL and check the "status" of the request
// place the response or an error message into the tag with id="content"
$('a.lnk').click(function() {
var url = $(this).attr('href');
$('#content').load(url, function(response, status, xhr) {
// check the status, if "success", place the response into #content
// else, if "error", define an error message and insert it into #content
// else, display an Alert with the status
if(status=='success') {
$('#content').html(response);
}
else if(status=='error') {
var ermsg = '<i>There was an error: '+ xhr.status+ ' '+ xhr.statusText+ '</i>';
$('#content').html(ermsg);
}
else { alert(status); }
});
return false;
})
});
</script>
</head>
<body class="s_page" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div id="header"> <a id="UPS-link" href="http://www.univ-tlse3.fr/" title="Paul Sabatier University - Toulouse III">
<img src="Chem3D-IMAGES/UT3_PRES_logoQ.png" alt="Paul Sabatier University" id="logoUPS" width=300px />
</a>
</div>
<div id="vmenu">
<ul>
<li>Home</li>
<li>3D Molecules
<ul>
<li>Mol1</li>
<li>Mol2</li>
</ul>
</li>
<li>Symmetry
<ul>
<li>Symmetry Elements
<ul>
<li>C<sub>2</sub>H<sub>6</sub></li>
<li>Ru<sub>4</sub>H<sub>4</sub>(CO)<sub>12</sub></li>
</ul>
</li>
<li>Point Groups
</li>
</ul>
</li>
<li>Solids
<ul>
<li>fcc</li>
<li>hcp</li>
</ul>
</li>
</ul>
</div>
<div id="content">
</div>
<div class="s_author" id="footer">
author: romuald.poteau_at_univ-tlse3.fr
<br/>last modification: 2013/12/16
</div>
</body>
</html>
Up to now, I have worked on the PG.html file (Point Group entry in the vertical menu), which works perfectly fine when it is loaded separately. But is not the case when it is loaded inside the main page as an external html page. The title is the only thing that appears, it seems that the jsmol application is not properly initialized. May be this is specific to the invocation of jsmol ; or is this a general issue when one wants to load hmtl files with embedded scripts ?
<!DOCTYPE html>
<html>
<head>
<title> POINT GROUPS </title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="Chem3D-CSS/MolChem.css" />
<!-- META TAGS start -->
<meta name="Title" content="Molecular Chemistry" />
<meta name="Format" content="text/html" />
<meta name="Language" content="en" />
<meta charset="UTF-8">
<!-- META TAGS end -->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="./JSmol.min.js"></script>
<script type="text/javascript">
// ---------------------------------------------------------------------------------
////// every page will need one variable and one Info object for each applet object
var Info = {
width: 500,
height: 500,
color: "0xC0C0C0",
use: "HTML5",
jarPath: "java",
j2sPath: "j2s",
jarFile: "JmolApplet.jar",
isSigned: false,
addSelectionOptions: false,
serverURL: "php/jsmol.php",
readyFunction: jmol_isReady,
console: "jmol_infodiv",
disableInitialConsole: true,
debug: false,
}
</script>
</head>
<body class="s_page" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div class="s_title" id="titlePG">
Point Groups
</div>
<div class="s_normal" id="mainPG">
<table border="0">
<tbody>
<tr valign="top">
<td nowrap="nowrap">
<script type="text/javascript">
Jmol.getApplet("Jmol1", Info);
Jmol.script(Jmol1,'load Chem3D-data/nh2cl.xyz;');
Jmol.resizeApplet(Jmol1, 500);
</script>
<br>
</td>
<td>
<script>
Jmol.setButtonCss(null,"style='width:300px'")
Jmol.jmolButton(Jmol1,"load Chem3D-data/nh2cl.xyz;", "NH2Cl (Cs)");
Jmol.jmolBr();
Jmol.jmolButton(Jmol1,"load Chem3D-data/cis-dichloroethylene.xyz;", "cis-dichloroethylene (C2v)");
Jmol.jmolBr();
Jmol.jmolButton(Jmol1,"load Chem3D-data/trans-dichloroethylene.xyz;", "trans-dichloroethylene (C2h)");
</script>
<br>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I have tried to find an answer to this question by checking previous posts, but my poor skills do not allow me to identify relevant suggestions for such issue.
Thanks for any help.
// Create a DOM object from a URL
$html = file_get_html('http://www.google.com/');
// Create a DOM object from a HTML file
$html = file_get_html('test.htm');
In step 3 of the AngularJS Tutorial AngularJS tutorial the the example suggests adding another e2e test:
it('should display the current filter value within an element with id "status"',
function() {
expect(element('#status').text()).toMatch(/Current filter: \s*$/);
input('query').enter('nexus');
expect(element('#status').text()).toMatch(/Current filter: nexus\s*$/);
//alternative version of the last assertion that tests just the value of the binding
using('#status').expect(binding('query')).toBe('nexus');
});
The test initially fails, adding the following to the page is supposed to make it pass. Having added it my page is like this:
<!doctype html>
<html lang="en" ng-app ng-controller="PhoneListCtrl">
<head>
<meta charset="utf-8">
<title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search:
<input ng-model="query">
<div id="status">
Current filter: {{query}}
</div>
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>
{{phone.snippet}}
</p>
</li>
</ul>
</div>
</div>
</div>
</body>
The final assertation fails though: `
using('#status').expect(binding('query')).toBe('nexus');`
With the following message:
Chrome 23.0 PhoneCat App Phone list view should display the current filter value within an element with id "status" FAILED
expect select binding 'query' toBe "nexus"
I think this is because the element isn't actually bound to query, the contents of the element use that binding, however, what should I do the make it pass?
Thanks in advance
Dave
EDIT: Controllers.js
'use strict';
/* Controllers */
function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S.",
"age": 0},
{"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet.",
"age": 1},
{"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet.",
"age": 2}
];
$scope.orderProp = 'age';
}
I see that you have used twice ng-controller="PhoneListCtrl". This is likely to cause problems. Remove the one on the html tag .