I just started programming and this is my first time using JQuery.
I'm working on an HTML/CSS project and I would like to add some effects using Waypoint jquery. The problem is it's not working. Even the basic test (change the background color for the element 'sec1-text') is not working.
Could you please help me to figure out what is the problem?
Bellow, you gonna find the HTML and JS files.
HTML----------------------------------------------------------
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inicial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Thais Fachini</title>
<link href="./css/normalize.css" rel="stylesheet">
<link href="./css/reset.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link href="./css/grid.css" rel="stylesheet">
<link href="./css/responsive.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Cagliostro&display=swap" rel="stylesheet">
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
</head>
<body class="app">
<!---------------SECTION 1 --------------------------->
<div class="sec1">
<div class="header">
<div class="logo-img"><img src="img/logo_small.png" alt="Logo Thais Fachini" class="logo-img"></div>
<!--Sticky Navigation--><div class="logo-img-sticky"><img src="img/logo_small.png" alt="Logo Thais Fachini" class="logo-img-sticky"></div>
<div class="logo-name"><h1>THAÍS FACHINI</h1><p>Nutrition for Life</p></div>
<!--Sticky Navigation--><div class="logo-name-sticky"><h1>THAÍS FACHINI</h1><p>Nutrition for Life</p></div>
<div class="links">
<nav>
Sobre
Como funciona
Assinar
Cliente
</nav>
</div>
</div>
<div class="sec1-text">
<div class="text">
<p class="sec1-text-title">ALIMENTAÇÃO FUNCIONAL</p>
<p class="sec1-textindent1">para o <span class="strong">equilíbrio</span> do corpo</p>
<p class="sec1-textindent2">e o <span class="strong">prazer</span> de comer bem.</p>
</div>
<div class="buttons">
<nav>
Assinar
Cliente
</nav>
</div>
</div>
</div>
<!--------------- ABOUT --------------------------->
<div class="about js--about">
<div class="about-title">
<h2><span class="about-title1">Orientação Nutricional Online</span>
<span class="about-title2">Atendimento Online</span></h2>
</div>
<div class="about-photo-text">
<img src="img/photo_thais.png" alt="Photo Thais Fachini" class="about-photo">
<p>Olá!</p>
<p>Sou Thaís Fachini, nutricionista formada pela Universidade São Camilo, SP e extensões em <span class="strong">Nutrição Funcional</span> e <span class="strong">Nutrição Holística</span>.</p>
<p>Minha filosofia de atendimento lhe ensina a olhar e escutar mais seu corpo e perceber o que funciona para você.</p>
<p>Existem vários fatores em nossa vida que interferem na saúde, nos relacionamentos pessoais, trabalho, espiritualidade e aceitação pessoal. Conduzirei seu processo, indicando ferramentas para sentir-se mais feliz e mais saudável.</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/d3js/5.12.0/d3.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
JS File ----------------------------------------------------------------
/*eslint-env jquery*/
(document).ready(function ( ) {
$('sec1-text').click(function(){
$(this).css('background-color', '#ff0000');
});
/* For the sticky navigation */
$('.js--about').waypoint(function(direction) {
if (direction == "down") {
$('header').addClass('sticky');
} else {
$('header').removeClass('sticky');
}
}, {
offset: '60px;'
});
});
You need to reference/load jQuery module, you are only loading your waypoints jQuery module/resource currently:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Related
I'm a beginner in web development, and I'm trying to program a website for my class. So I watched a video on making a popup, but the popup comes up every time the user reloads the page. I need help, please.
Here's my HTML code:
<!DOCTYPE html>
<html>
<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>KI22 Website</title>
<!-- FONTAWESOME CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--GOOGLE FONTS (MONTSERRAT)-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="popup">
<button id="close">×</button>
<h2>Achtung! Wichtige Regeln</h2>
<p>1.An keine andere Person außerhalb der Klasse teilen!</p>
<p>2.KEINE SCREENSHOTS!</p>
<p>3.Nur schulrelevante Dateien hochladen!</p>
</div>
<!--==================== END OF POPUP ====================-->
<nav>
<div class="container nav__container">
<a href="index.html">
<img class="logo" src="images/logo.png" alt="logo">
</a>
<ul class="nav__menu">
<li>Hauptmenü</li>
<li>Fächer</li>
<li>Mitteilungen</li>
<li>Kontakt</li>
</ul>
<button id="open-menu-btn"><i class="fa-solid fa-bars"></i></button>
<button id="close-menu-btn"><i class="fa-solid fa-xmark"></i></button>
</div>
</nav>
<!--==================== END OF NAVBAR ====================-->
<header>
<div class="container header__container">
<div class="header__left">
<h1>Willkommen zur KI Website</h1>
<p><h4>Diese Website wurde für schulische zwecke von G. Daoud programmiert. Du wirst in der Lage sein, deine Aufzeichnungen von der Unterrichtsstunde auf dieser Website hochzuladen, und die Aufzeichnungen deiner Klassenkameraden zu downloaden.</h4></p>
Loslegen
</div>
<div class="header__right">
<div class="header__right-image">
<img src="./images/student.png">
</div>
</div>
</div>
</header>
<!--==================== END OF HEADER ====================-->
<section class="discord">
<div class="container discord__container">
<div class="discord__left">
<h1><i class="fa-brands fa-discord"></i>Discord</h1>
<p>Hier kannst du Member des Discord-Servers KI22 werden. Wir freuen uns über jeden Member.</p>
<p>In dem Server hast du die Möglichkeit, uns zu kontaktieren wenn du Probleme mit der Website hast, oder auch wenn es allgemein Probleme im Server gibt.</p>
Member werden
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
Here is my JS code:
window.addEventListener("load", function() {
setTimeout(
function open(event) {
document.querySelector(".popup").style.display = "block";
},
1000
)
});
document.querySelector("#close").addEventListener("click", function() {
document.querySelector(".popup").style.display = "none";
});
I tried to find an answer on google, but those solutions didn't work. I also watched youtube videos, but still nothing.
You can use localStorage to tell the browser that the page has already been loaded. You'll check if not loaded yet, then open/close your pop up
window.addEventListener("load", function() {
setTimeout(
function open(event) {
if(!localStorage.getItem('loaded')){
document.querySelector(".popup").style.display = "block";
localStorage.setItem('loaded', 'true');
}
},
1000
)
});
document.querySelector("#close").addEventListener("click", function() {
document.querySelector(".popup").style.display = "none";
});
when ever you want to open the popup again, call localStorage and reload the page.
localStorage.setItem('loaded',null);
i'm a Javascript and JQuery beginner and I would like to integrate a table populated from a JSON dataset from an external server on a website.
The JSON dataset is located here :
https://restcountries.eu/rest/v2/all
My code is as follows and it doesn't work :
$.getJSON("https://restcountries.eu/rest/v2/all", function(data) {
data.forEach(sub_data => {
var text =
`<tr>
<td>${sub_data.name}</td>
<td>${sub_data.topLevelDomain}</td>
<td>${sub_data.alpha2Code}</td>
<td>${sub_data.alpha3Code}</td>
<td>${sub_data.callingCodes}</td>
<td>${sub_data.capital}</td>
<td>${sub_data.altSpellings}</td>
<td>${sub_data.region}</td>
<td>${sub_data.subregion}</td>
<td>${sub_data.population}</td>
<td>${sub_data.latlng}</td>
<td>${sub_data.demonym}</td>
<td>${sub_data.area}</td>
<td>${sub_data.gini}</td>
<td>${sub_data.timezones}</td>
<td>${sub_data.borders}</td>
<td>${sub_data.nativeName}</td>
<td>${sub_data.numericCode}</td>
<td>${sub_data.currencies}</td>
<td>${sub_data.languages}</td>
<td>${sub_data.translations}</td>
<td>${sub_data.flag}</td>
<td>${sub_data.regionalBlocs}</td>
<td>${sub_data.cioc}</td>
</tr>`;
$("#table").html(text);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Second assignment</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
/>
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<div id="header">
<header>
LES PAYS DU MONDE
</header>
</div>
<br>
<br>
<br>
<br>
<br>
<section>
<table id="table">
<tr>
<th>Nom</th>
<th>Nom de domaine</th>
<th>Alpha2Code</th>
<th>Alpha3Code</th>
<th>Indicatif téléphonique</th>
<th>Capitale</th>
<th>Orthographes alternatifs</th>
<th>Région</th>
<th>Sous-région</th>
<th>Population</th>
<th>Latitude/Longitude</th>
<th>Gentilé</th>
<th>Zone</th>
<th>Coefficient de Gini</th>
<th>Fuseau horaire</th>
<th>Frontières</th>
<th>Nom d'origine</th>
<th>Code numérique</th>
<th>Monnaie</th>
<th>Langage(s)</th>
<th>Traductions</th>
<th>Drapeau</th>
<th>Bloc régional</th>
<th>CIOC</th>
</tr>
</table>
</section>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
I found this website which does it perfectly but I'm having a hard time doing the same
I don't know where to start and a bit of help would be appreciated :)
try this:
$.getJSON("https://restcountries.eu/rest/v2/all", function(data) {
data.forEach(sub_data => {
var text =
`<tr>
<td>${sub_data.name}</td>
<td>${sub_data.topLevelDomain}</td>
<td>${sub_data.alpha2Code}</td>
<td>${sub_data.alpha3Code}</td>
<td>${sub_data.callingCodes}</td>
<td>${sub_data.capital}</td>
<td>${sub_data.altSpellings}</td>
<td>${sub_data.region}</td>
<td>${sub_data.subregion}</td>
<td>${sub_data.population}</td>
<td>${sub_data.latlng}</td>
<td>${sub_data.demonym}</td>
<td>${sub_data.area}</td>
<td>${sub_data.gini}</td>
<td>${sub_data.timezones}</td>
<td>${sub_data.borders}</td>
<td>${sub_data.nativeName}</td>
<td>${sub_data.numericCode}</td>
<td>${sub_data.currencies}</td>
<td>${sub_data.languages}</td>
<td>${sub_data.translations}</td>
<td>${sub_data.flag}</td>
<td>${sub_data.regionalBlocs}</td>
<td>${sub_data.cioc}</td>
</tr>`;
$("#table").append(text);
});
});
I am following this codepen which works perfectly. I took the code from it and put it in my local HTML file and added the JS. However when I run it locally it doesn't work. The console prints out the following message:
Uncaught TypeError: dialogLogin.show is not a function at HTMLButtonElement.<anonymous>
My HTML & JS code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auth.X</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
</head>
<body>
<h1>How can I use several dialogs on the same website?</h1>
<h2>https://material.io/components/web/catalog/dialogs/</h2>
<!-- Trigger Dialogs -->
<button id="dialog-login">Open Login Dialog</button><br><br>
<button id="dialog-delivery">Open Delivery Dialog</button>
<!-- Dialogs: Login -->
<aside id="mdc-dialog-login"
class="mdc-dialog"
role="alertdialog"
aria-labelledby="mdc-dialog-login-label"
aria-describedby="mdc-dialog-login-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-dialog-login-label" class="mdc-dialog__header__title">
Login
</h2>
</header>
<section id="mdc-dialog-login-description" class="mdc-dialog__body">
[LOGIN FORM]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
<button type="button" class="mdc-button mdc-button--raised mdc-dialog__footer__button mdc-dialog__footer__button--accept">RegisteR</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<!-- Dialogs: Delivery -->
<aside id="mdc-dialog-delivery-condition"
class="mdc-dialog js--mdc-delivery-condition"
role="alertdialog"
aria-labelledby="mdc-delivery-condition-label"
aria-describedby="mdc-delivery-condition-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-delivery-condition-label" class="mdc-dialog__header__title">
[Delivery]
</h2>
</header>
<section id="mdc-delivery-condition-description" class="mdc-dialog__body">
[TEXT]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>
// Find all the dialogs on the page
const dialogLoginEle = document.getElementById('mdc-dialog-login');
const dialogLogin = new mdc.dialog.MDCDialog(dialogLoginEle);
dialogLogin.listen('MDCDialog:accept', function() {
console.log('accepted login');
});
dialogLogin.listen('MDCDialog:cancel', function() {
console.log('canceled login');
});
const dialogDeliveryEle = document.getElementById('mdc-dialog-delivery-condition');
const dialogDelivery = new mdc.dialog.MDCDialog(dialogDeliveryEle);
dialogDelivery.listen('MDCDialog:accept', function() {
console.log('accepted delivery');
});
dialogDelivery.listen('MDCDialog:cancel', function() {
console.log('canceled delivery');
});
document.querySelector('#dialog-login').addEventListener('click', function (evt) {
dialogLogin.show();
});
document.querySelector('#dialog-delivery').addEventListener('click', function (evt) {
dialogDelivery.show();
});
</script>
</body>
Why does this not work locally?
UPDATE
As per my comment, version 0.28 of the MDC Javascript works with this code. The dialog boxes appear. So the question now is, in the latest version of the MDC Javascript how is this supposed to work?
After talking to the guys on the MDC Discord channel, it appears that .show() was replaced with .open().
In the codepan you have used the version 0.28.
Here is the example with the latest version.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auth.X</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
</head>
<body>
<h1>How can I use several dialogs on the same website?</h1>
<h2>https://material.io/components/web/catalog/dialogs/</h2>
<!-- Trigger Dialogs -->
<button id="dialog-login">Open Login Dialog</button><br><br>
<button id="dialog-delivery">Open Delivery Dialog</button>
<!-- Dialogs: Login -->
<aside id="mdc-dialog-login"
class="mdc-dialog"
role="alertdialog"
aria-labelledby="mdc-dialog-login-label"
aria-describedby="mdc-dialog-login-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-dialog-login-label" class="mdc-dialog__header__title">
Login
</h2>
</header>
<section id="mdc-dialog-login-description" class="mdc-dialog__body">
[LOGIN FORM]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
<button type="button" class="mdc-button mdc-button--raised mdc-dialog__footer__button mdc-dialog__footer__button--accept">RegisteR</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<!-- Dialogs: Delivery -->
<aside id="mdc-dialog-delivery-condition"
class="mdc-dialog js--mdc-delivery-condition"
role="alertdialog"
aria-labelledby="mdc-delivery-condition-label"
aria-describedby="mdc-delivery-condition-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-delivery-condition-label" class="mdc-dialog__header__title">
[Delivery]
</h2>
</header>
<section id="mdc-delivery-condition-description" class="mdc-dialog__body">
[TEXT]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>
// Find all the dialogs on the page
const dialogLoginEle = document.getElementById('mdc-dialog-login');
const dialogLogin = new mdc.dialog.MDCDialog(dialogLoginEle);
dialogLogin.listen('MDCDialog:accept', function() {
console.log('accepted login');
});
dialogLogin.listen('MDCDialog:cancel', function() {
console.log('canceled login');
});
const dialogDeliveryEle = document.getElementById('mdc-dialog-delivery-condition');
const dialogDelivery = new mdc.dialog.MDCDialog(dialogDeliveryEle);
dialogDelivery.listen('MDCDialog:accept', function() {
console.log('accepted delivery');
});
dialogDelivery.listen('MDCDialog:cancel', function() {
console.log('canceled delivery');
});
document.querySelector('#dialog-login').addEventListener('click', function (evt) {
dialogLogin.open();
});
document.querySelector('#dialog-delivery').addEventListener('click', function (evt) {
dialogDelivery.open();
});
</script>
</body>
This is my first time asking or doing this type of question
So I created this page http://lamp.cse.fau.edu/~mcuervo5/p4/
and it does your basic to do app list thing for adding and deleting stuff.
Apparently the only thing missing is to save the data on the current page. I heard that there a code that can save the current page to a local storage that has everything already in it, so when I re-open the link, instead of having nothing in the "complete and incomplete" list, it should look like this
thanks, it the only part I have left to do & I dont know if it implemented in HTMl or Jquery. I do not know how to do it.
and if you want to see the code here instead of "inspect" from the page with the link above, here it is. for html and Jquery
$(document).ready(function() {
// $('#list').innerhtml = localStorage.getItem("List");
//$('#incomplete-tasks').html("<P>I just replaced your stuff.</P>");
$("#Sumbit_Button").click(function() {
var textbox_Value = $("#textbox").val();
$('#incomplete-tasks').append('<li><span class="text" contenteditable="false">' + textbox_Value + "</span>" +
'<input/ style="display: none" class="new-value">' +
"<button type='button' class='delete'>Delete</button>" +
"<button type='button' class='edit'>Edit</button></li>");
});
$('#incomplete-tasks').on('click', '.delete', function() {
console.log('i am clicked.delete');
$(this).parent().remove();
});
$('#incomplete-tasks').on('click', '.edit', function() {
console.log("complete task click.edit");
$(this).siblings('input').show();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#incomplete-tasks').on('click', '.edit', function() {
console.log("INcomplete task click.edit");
$(this).siblings('input').show();
$(this).siblings('span').hide();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#incomplete-tasks').on('keyup', '.new-value', function(e) {
if (e.keyCode == 13) {
console.log("Complete Task _Version 2.new_value");
$(this).siblings('span').text($(this).val()).show();
$(this).siblings('input').hide();
$(this).siblings('.delete').show();
$(this).siblings('.edit').show();
$(this).hide();
}
});
$('#incomplete-tasks').on('click', '.text', function() {
var li = $(this).parent().remove().toggleClass("strikethrough");
$('#complete-tasks').append(li);
});
$('#complete-tasks').on('click', '.delete', function() {
console.log('i am clicked.delete');
$(this).parent().remove();
});
$('#complete-tasks').on('click', '.edit', function() {
console.log("complete task click.edit");
$(this).siblings('input').show();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#complete-tasks').on('click', '.edit', function() {
console.log("INcomplete task click.edit");
$(this).siblings('input').show();
$(this).siblings('span').hide();
$(this).siblings('.delete').hide();
$(this).hide();
});
$('#complete-tasks').on('keyup', '.new-value', function(e) {
if (e.keyCode == 13) {
console.log("Complete Task _Version 2.new_value");
$(this).siblings('span').text($(this).val()).show();
$(this).siblings('input').hide();
$(this).siblings('.delete').show();
$(this).siblings('.edit').show();
$(this).hide();
}
});
$('#complete-tasks').on('click', '.text', function() {
var li = $(this).parent().remove().toggleClass("strikethrough");
$('#incomplete-tasks').append(li);
});
// var save()
//{
// localStorage.setItem("List", $("#list").innerhtml());
// }
});
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>The Reminder list</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Custom CSS -->
<link href="css/heroic-features.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">To Do List</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<h1> The Reminder Friend App </h1>
<p>this is my to do list app. type in the list you want to add & store in the list
</p>
<form>
<!-- textbox -->
<input type="text" id="textbox">
<!--add button -->
<input type="button" id="Sumbit_Button" value="Add">
</form>
</header>
<hr>
<div id='lists'>
<!-- Page Features -->
<div class="row text-center">
<div class="col-md-6 col-sm-6 hero-feature">
<div class="thumbnail">
<div class="caption">
<h3>Incomplete</h3>
<ul id="incomplete-tasks">
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 hero-feature">
<div class="thumbnail">
<div class="caption">
<h3>Complete</h3>
<ul id="complete-tasks">
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Mauricio Cuervo 2017</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
<script src="p4.js"></script>
</html>
Hello you can do something like this:
$("#Sumbit_Button").click(function() {
var textbox_Value = $("#textbox").val();
var list = [];
list.push(textbox_Value);
localStorage.setItem("listdata", list);
// do not manage using `append` whole html. Manage through list and display as you want
});
on page load call:
var stored = localStorage.getItem("listdata");
Now here you can manage array of items and iterate on complete & incomplete list.
So whenever any action of edit, delete, add occurs you have to just manage the localstorage instance on each call. and based on that just iterate list whereever you want.
Below is the code that I have for an onclick event.
What I am trying to do is after the last students information is displayed, I want the button to be disabled and display done instead of next.
I have my JS code here and my HTML code below that. I have already tried the .one method with no success.
My JS code:
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:'Chicago',state:'IL'},
gpa:[3.0,2.7,2.0]
} ,{
name: 'Superman',
address:{street:'123 Test Dr', city:'Maple Shade',state:'NJ'},
gpa:[3.4,2.7,2.7]
}
];
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[c]+' ,'+st.gpa[1]+' ,'+st.gpa[2];
}
el('#info_btn').addEventListener('click', function(){
displayInfo();
c = ++c % studentInfo.length; // Increase Array pointer and loop
}, false);
My HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Student 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>