Fix javascript calculator system - javascript

I'm developing a calculator system and I'm in trouble. I am inserting within elements of a table onclick events that insert inside the calculator display characters and numbers depending on the clicked button. I added an eval() to perform the calculation of this generated string inside the display but how can I prevent the user from entering some strings of characters such as +/, -/, // and so on, but allowing him to enter if the second character of the string is - or +, less when it is -- or ++ Example: 55++55 (does not perform calculation), 55+-55(effect), 55++55 (does not effect), 20/-2(effect).
HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1"><!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="./styles/styles.css">
<title>Frontend Mentor | Calculator app</title>
<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=League+Spartan:wght#400;700&display=swap" rel="stylesheet">
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<main>
<section class="top">
<h2>calc</h2>
<div class="theme-block">
<p>theme</p>
<div class="theme-control">
<p> 1 2 3 </p>
<div class="theme-button"></div>
</div>
</div>
</section>
<section class="screen">
<p id="txt"></p>
</section>
<section class="keys">
<table>
<tr>
<td><button onclick="keyDownInsert('7')">7</button></td>
<td><button onclick="keyDownInsert('8')">8</button></td>
<td><button onclick="keyDownInsert('9')">9</button></td>
<td class="key1" ><button onclick="del()">DEL</button></td>
</tr>
<tr>
<td><button onclick="keyDownInsert('4')">4</button></td>
<td><button onclick="keyDownInsert('5')">5</button></td>
<td><button onclick="keyDownInsert('6')">6</button></td>
<td><button onclick="keyDownInsert('+')">+</button></td>
</tr>
<tr>
<td><button onclick="keyDownInsert('1')">1</button></td>
<td><button onclick="keyDownInsert('2')">2</button></td>
<td><button onclick="keyDownInsert('3')">3</button></td>
<td><button onclick="keyDownInsert('-')">-</button></td>
</tr>
<tr>
<td><button onclick="keyDownInsert('.')">.</button></td>
<td><button onclick="keyDownInsert('0')">0</button></td>
<td><button onclick="keyDownInsert('/')">/</button></td>
<td><button onclick="keyDownInsert('*')">x</button></td>
</tr>
<tr>
<td class="colspan key1" colspan="2" ><button onclick="clearText()">RESET</button></td>
<td class="colspan key2" colspan="2"><button onclick="calculate()">=</button></td>
</tr>
</table>
</section>
</main>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Gustavotp443.
</div>
<script src="./js/calc.js"></script>
</body>
</html>
JAVASCRIPT
let screen =document.getElementById("txt")
function keyDownInsert(num){
screen.innerHTML+=num;
}
function clearText(){
screen.innerHTML=" ";
}
function del(){
if(screen.innerHTML === "Nothing to calc!"){
screen.innerHTML= " ";
}
screen.innerHTML = screen.innerHTML.substring(0, screen.innerHTML.length-1)
}
function calculate(){
if(screen.innerHTML){
screen.innerHTML = eval(screen.innerHTML)
if(screen.innerHTML=== "undefined"){
screen.innerHTML= "Nothing to calc!";
}
}
else {
screen.innerHTML= "Nothing to calc!";
}
}

Related

Datatables - how to prevent word wrap in length menu and search dialog

I have implemented Datatables into my Spring MVC, Java, Bootstrap 5, Thymeleaf project and the results are great. The only issue is a cosmetic one - the text is wrapping in the length menu and search sections. This can be seen at the top of the attached image where "Show 10 entries" is split across 3 lines and the Search table and box are split over 2 lines.
I am using the latest versions of jquery.dataTables.min.css, jquery.dataTables.min.js and dataTables.bootstrap5.min.js with no custom configuration: -
$(document).ready(function () {
$('table.display').DataTable();
});
Here is an HTML snippet with one row of data:
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Java Documentum Services</title>
<link rel="stylesheet" href="/assets/jquery/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="/assets/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="/assets/dropzonejs/dropzone.css"/>
</head>
<body>
<div class="container pt-3 pb-3">
<table id="search-results"
class="display"
style="width:100%">
<thead>
<tr>
<th>Filename</th>
<th>Test</th>
<th>Case Id</th>
<th>Upload Time</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span>download.pdf</span>
</td>
<td>
<span>JH-06062022-01</span>
</td>
<td>
<span>test-case-12344444</span>
</td>
<td>
<span>2022-07-22 11:03 GMT</span>
</td>
<td>
<!--Actions button-->
<!--Download button-->
<!--Delete button-->
</td>
</tr>
</tbody>
</table>
<script src="/assets/jquery/jquery-3.5.1.js"></script>
<script src="/assets/jquery/jquery.dataTables.min.js"></script>
<script src="/assets/datatables/dataTables.bootstrap5.min.js"></script>
<script src="/assets/jds/dataTables.js"></script>
<script src="/assets/bootstrap/bootstrap.min.js"></script>
<script src="/assets/dropzonejs/dropzone.min.js"></script>
<script src="/assets/jds/dropzone.js"></script>
</body>
</html>
I can see that these two sections are defined in sLengthMenu and sSearch in the JavaScript code, so perhaps a code change could be an option, but it would be preferable if it could be fixed with a configuration change instead. I also wondered if perhaps there is a clash with one of the other CSS stylesheets or JavaScript libraries that I am using - these are visible in the sample HTML.

How to populate a HTML table using a JSON dataset from an URL

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);
});
});

Angular 1.5 Component Two Way Binding Not Working same using $ctrl

I have some products that I need show personalize with a component in my index.html. In the end I need totalize a grand Total of selected products in $scope main controller "planosVoz". But my two-way binding in svaTotal to component controller doesn't work.
Here a print. In red the svaTotal doesn't reflect.
I get this error in javascript console:
"Error: [$compile:nonassign] http://errors.angularjs.org/1.6.1/$compile/nonassign?p0=undefined&p1=svaTotal&p2=sva
M/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:6:425
oa/</u<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:85:257
oa/</p#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:85:334
m/c<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:130:87
Hf/this.$get</m.prototype.$digest#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:145:81
Hf/this.$get</m.prototype.$apply#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:148:76
Wc[b]</<.compile/</<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js:282:245
r.event.dispatch#https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:3:10263
r.event.add/q.handle#https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:3:8325
"
obs: Variables names in Brazilian Portuguese. (Sorry my English in this text).
Above a simplified version of PlanosVoz controller:
angular.module('planosVoz').controller('planosVoz', function($scope) {
$scope.sva = 0;
$scope.svaTotal = function() {
return $scope.sva;
}; ...
Here the sva component
angular.module('sva').component('sva', {
templateUrl: 'app/sva/sva.template.html',
controller: 'sva',
bindings: {
titulo: '#',
logoimg: '#',
logoid: '#',
base: '#',
radioname: '#',
svaTotal: '=' /* this two way binding doesn't work */
}
});
Here the sva controller
angular.module('sva').controller('sva', function($scope) {
var self = this ;
self.basePrecos = JSON.parse(
'{'+
'"nuvemJornaleiro": ['+
'{"plano": "Nenhum", "valor":0 }'+
',{"plano": "Semanal", "valor":4.99 }'+
',{"plano": "Mensal", "valor":12.9 }'+
']'+
',"kantoo": ['+
'{"plano": "Nenhum", "valor":0 }'+
',{"plano": "Semanal", "valor":4.99 }'+
',{"plano": "Mensal", "valor":12.9 }'+
']'+
',"vivoMusica": ['+
'{"plano": "Nenhum", "valor":0 }'+
',{"plano": "Mensal", "valor":12.9 }'+
',{"plano": "Mensal 3 em 1", "valor":14.9 }'+
']'+
'}'
);
self.valorAnterior = 0;
self.getBase = function(nomebase) {
return self.basePrecos[nomebase];
};
self.totalizaSva = function(){
self.svaTotal = self.svaTotal - self.valorAnterior;
self.valorAnterior = self.svaSelecao + 0;
self.svaTotal = self.svaTotal + self.svaSelecao;
}
});
Here the template sva.template.html
<table>
<tr>
<td>
<div class="secao">
<img ng-src="{{$ctrl.logoimg}}" id="{{$ctrl.logoid}}"></img><span class="secaoTitulo"><b>{{$ctrl.titulo}}</b></span>
</div>
<div style="clear:both;"></div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<form style="margin-top: 10px;">
<span ng-repeat="item in $ctrl.getBase($ctrl.base)">
<input type="radio" ng-name="$ctrl.radioname" ng-click="$ctrl.totalizaSva()" ng-model="$ctrl.svaSelecao" ng-value="item.valor"> {{item.plano}} </input>
</span>
</form>
<div style="text-align:center;width:100%" ng-show="$ctrl.svaSelecao">Valor do SVA: R${{$ctrl.svaSelecao}} / SvaTotal:{{$ctrl.svaTotal}}</div>
</td>
</tr>
</table>
Here a simplified version of the index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Simulador de Ofertas</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/topo.css">
<link rel="stylesheet" href="css/imagens.css">
<link rel="stylesheet" href="css/modulo.css">
<link rel="stylesheet" href="css/secao.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/core/core.module.js"></script>
<script src="app/planosvoz/planosvoz.module.js"></script>
<script src="app/planosvoz/planosvoz.controller.js"></script>
<script src="app/sva/sva.module.js"></script>
<script src="app/sva/sva.controller.js"></script>
<script src="app/sva/sva.component.js"></script>
</head>
<body ng-app="simulador" ng-controller="planosVoz" ng-cloack>
<div class="container">
<div class="modulo">
<div class="titulomodulo">SVA</div>
<table class="tabelaPrincipal">
<tr>
<td colspan="2">
<sva
titulo="Nuvem do Jornaleiro"
logoimg="img/nuvemjornaleirologo.png"
logoid="nuvemjornaleirologo"
base="nuvemJornaleiro"
radioname="nuvemJornaleiro"
svaTotal="sva"
>
</sva>
</td>
</tr>
<tr>
<td colspan="2">
<sva
titulo="Kantoo"
logoimg="img/kantoologo.png"
logoid="kantoologo"
base="kantoo"
radioname="kantoo"
svaTotal="sva"
>
</sva>
<sva
titulo="Vivo Musica"
logoimg="img/vivomusicalogo.png"
logoid="vivomusicalogo"
base="vivoMusica"
radioname="vivoMusica"
svaTotal="sva"
>
</sva>
</td>
</tr>
<tr>
<td colspan="2">
<div class="secao">
<span class="secaoTitulo"><b>Total de SVA's</b></span>
<hr class="secaoLinha">
</div>
<div style="clear:both;"></div>
<h4 style="text-align:center;">{{svaTotal()}}</h4>
</td>
</tr>
</table>
</div>
</body>
</html>

Are you using 2 different modules? planosVoz and sva. Try using only 1 and see how it goes. Btw, can you create a plunker next time cause it's really hard to go through huge code by eyes only.

A function button in a table in a form

I'm building a website and I have it done but there is a pretty big bug in the code. I created a table in which I have a button that is a function to calculate some expression and have the calculations display in the table. The calculations happen but do not display in the table. Here is what I have:
<!DOCTYPE html>
<html>
<!--DB 11/2/2015-->
<!-- W3 Schools was referenced in building this code-->
<head>
<meta charset="utf-8">
<title>Assignment 8</title>
<link href="images/avatar.png" rel="shortcut icon" type="image/png">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<script src="js/javascript.js" type="text/javascript"></script>
<style type="text/css">
</style>
</head>
<body onload="fillitin()">
<header>
</header>
<aside>
</aside>
<div id="main">
<h1> Assignment 8: Operators and Expression</h1>
<br>
<p id="demo"></p>
<script>
var d = new Date();
months = ['Janurary','Feburary','March','April','May','June','July','August','September','October','November','December']
var date = months[d.getMonth()]+" "+d.getDate()+" "+d.getFullYear();
document.getElementById("demo").innerHTML = date;
</script>
<h2 style="text-align:center"> S'mores!</h2>
<h4> CLick on the button serves to learn the amount of ingredients needed to make S'mores!</h4>
<table style="width:50%" border="1">
<form name="myform" method="">
<tr>
<td> <br>
<input type="text" id="num1" value="1">
</td>
<td>
<button onclick="myFunction()">Serves</button>
</td>
</tr>
</form>
<tr>
<td id="M"></td>
<td>Large Marshmallows</td>
</tr>
<tr>
<td id="G"></td>
<td>Graham Cracker</td>
</tr>
<tr>
<td id="C"></td>
<td>Ounches Chocolate</td>
</tr>
</table>
<script>
function fillitin() {
document.getElementById("M").InnerHTML="1";
document.getElementById("G").InnerHTML="1";
document.getElementById("C").InnerHTML="1.5";
}
function myFunction() {
var x=document.getElementById("num1").value;
document.getElementById("M").InnerHTML=x;
document.getElementById("G").InnerHTML=x;
document.getElementById("C").InnerHTML=x*1.5;
}
</script>
<ul>
<li>
Heat the marshmallow over an open flame until it begins to brown and melt.
</li>
<li>Break the graham cracker in half. Put the chocolate on one half of the cracker, and put the warm marshmallow on the other. </li>
<li>Enjoy! Don’t burn your mouth!</li>
</ul>
<img alt="picture of smores" height="129" src="images/picture1.jpg" width="194">
<cite> picture taking from <a href="http://www.instructables.com/id/no-campfire-smores/"> http://www.instructables.com/id/no-campfire-smores/
</a></cite>
</div>
<footer>
</footer>
</body>
</html>

You're using InnerHTML (capital I) which is wrong.
The right function is .innerHTML
Also, if you don't want the button to post the form, you should add it type="button"
More details : Can I make a button not submit a form

You have a slight typo in your code. You're using InnerHTML, but the correct spelling is innerHTML with a lowercase 'i'. Here's a description of innerHTML: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML?redirectlocale=en-US&redirectslug=DOM%2Felement.innerHTML. And here's your fixed demo:
<!DOCTYPE html>
<html>
<!--DB 11/2/2015-->
<!-- W3 Schools was referenced in building this code-->
<head>
<meta charset="utf-8">
<title>Assignment 8</title>
<link href="images/avatar.png" rel="shortcut icon" type="image/png">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<script src="js/javascript.js" type="text/javascript"></script>
<style type="text/css">
</style>
</head>
<body onload="fillitin()">
<header>
</header>
<aside>
</aside>
<div id="main">
<h1> Assignment 8: Operators and Expression</h1>
<br>
<p id="demo"></p>
<script>
var d = new Date();
months = ['Janurary','Feburary','March','April','May','June','July','August','September','October','November','December']
var date = months[d.getMonth()]+" "+d.getDate()+" "+d.getFullYear();
document.getElementById("demo").innerHTML = date;
</script>
<h2 style="text-align:center"> S'mores!</h2>
<h4> CLick on the button serves to learn the amount of ingredients needed to make S'mores!</h4>
<table style="width:50%" border="1">
<form name="myform" method="">
<tr>
<td> <br>
<input type="text" id="num1" value="1">
</td>
<td>
<button onclick="myFunction()">Serves</button>
</td>
</tr>
</form>
<tr>
<td id="M"></td>
<td>Large Marshmallows</td>
</tr>
<tr>
<td id="G"></td>
<td>Graham Cracker</td>
</tr>
<tr>
<td id="C"></td>
<td>Ounches Chocolate</td>
</tr>
</table>
<script>
function fillitin() {
document.getElementById("M").innerHTML="1";
document.getElementById("G").innerHTML="1";
document.getElementById("C").innerHTML="1.5";
}
function myFunction() {
var x=document.getElementById("num1").value;
document.getElementById("M").innerHTML=x;
document.getElementById("G").innerHTML=x;
document.getElementById("C").innerHTML=x*1.5;
}
</script>
<ul>
<li>
Heat the marshmallow over an open flame until it begins to brown and melt.
</li>
<li>Break the graham cracker in half. Put the chocolate on one half of the cracker, and put the warm marshmallow on the other. </li>
<li>Enjoy! Don’t burn your mouth!</li>
</ul>
<img alt="picture of smores" height="129" src="images/picture1.jpg" width="194">
<cite> picture taking from <a href="http://www.instructables.com/id/no-campfire-smores/"> http://www.instructables.com/id/no-campfire-smores/
</a></cite>
</div>
<footer>
</footer>
</body>
</html>

The page refreshes once the document is changed so it does change your values but then it changes them back to the original. you need to find a different place to run the fillitin() then when the document finishes loading. something similar to the jquery $(document).ready()

Working with Datatables and RevealJS

The first issue I’m having is that I tried to format my code to be clean and easy to read but when I did and went through the sides in my browser it didn’t format and made it misaligned so I worked with it to make it look aligned by then in the actual HTML file it looks unprofessional and hard to read. Why is this happening?
The second issue I’m having is with the actual data tables plugin itself is that when I have the HTML table to display the table rendered with the plugin it cuts a lot off and I tried applying a class to the table and modifying the height and width of the table but its not adjusting per my css rules.
And the last issue I’m having is that with my table HTML of the table to explain how it should be written it applies an ID to the table that shouldn’t be done until after rendering. Not sure why this is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Introduction of Datatables</title>
<meta name="author" content="">
<meta name="description" content="Creating a project to introduce the use of the Datatables jQuery plugin.">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/league.css" id="theme">
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<style>
#table-container {
width: 200px;
}
</style>
</head>
<body>
<div class="reveal container-fluid">
<div class="slides">
<section>
<h1>Datatables</h1>
<p>jQuery Plugin for HTML tables</p>
<p>By: Me</p>
</section>
<section>
<h2>Uses For Datatables</h2>
<ul>
<li>Assists with paginating many rows of tabular data.</li>
<li>Can manipulate columns and rows via modifications with passed parameters</li>
<li>Can work with backend data via a API in the form of JSON</li>
<li>Can sort and search through data for results</li>
<li><strong>THEMEABLE</strong></li>
</ul>
</section>
<section>
<pre><code data-trim>
<table class="datatable table table-bordered">
<thead>
<th>ID</th>
<th>Username</th>
<th>Email Address</th>
<th>Role</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>smorrow</td>
<td>smorrow#example.com</td>
<td>Owner</td>
</tr>
<tr>
<td>2</td>
<td>jstevens</td>
<td>jstevens#example.com</td>
<td>Editor</td>
</tr>
<tr>
<td>3</td>
<td>ksmith</td>
<td>ksmith#example.com</td>
<td>Basic User</td>
</tr>
<tr>
<td>4</td>
<td>wjones</td>
<td>wjones#example.com</td>
<td>Basic User</td>
</tr>
<tr>
<td>4</td>
<td>jcoonts</td>
<td>jcoonts#example.com</td>
<td>Administrator</td>
</tr>
<tr>
<td>5</td>
<td>rsimmons</td>
<td>rsimmons#example.com</td>
<td>Administrator</td>
</tr>
</tbody>
</table>
</code></pre>
</section>
<section>
<h2>Javascript Code</h2>
<pre><code data-trim>
<script>
var dataTable = $('.datatable').dataTable();
</script>
</code></pre>
</section>
<section>
<div id="table-container">
<table class="datatable table table-bordered">
<thead>
<th>ID</th>
<th>Username</th>
<th>Email Address</th>
<th>Role</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>smorrow</td>
<td>smorrow#example.com</td>
<td>Owner</td>
</tr>
<tr>
<td>2</td>
<td>jstevens</td>
<td>jstevens#example.com</td>
<td>Editor</td>
</tr>
<tr>
<td>3</td>
<td>ksmith</td>
<td>ksmith#example.com</td>
<td>Basic User</td>
</tr>
<tr>
<td>4</td>
<td>wjones</td>
<td>wjones#example.com</td>
<td>Basic User</td>
</tr>
<tr>
<td>4</td>
<td>jcoonts</td>
<td>jcoonts#example.com</td>
<td>Administrator</td>
</tr>
<tr>
<td>5</td>
<td>rsimmons</td>
<td>rsimmons#example.com</td>
<td>Administrator</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
viewDistance: 1,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{
src: 'lib/js/classList.js', condition: function () {
return !document.body.classList;
}
},
{
src: 'plugin/markdown/marked.js', condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'plugin/markdown/markdown.js', condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'plugin/highlight/highlight.js', async: true, condition: function () {
return !!document.querySelector('pre code');
}, callback: function () {
hljs.initHighlightingOnLoad();
}
},
{src: 'plugin/notes/notes.js', async: true}
]
});
</script>
<script>
var datatTable = $('.datatable').dataTable();
</script>
</body>
</html>
Here's a screenshot of what I'm looking at.
https://www.dropbox.com/s/p8luug2gsytnwno/Screenshot%202015-01-27%2012.50.43.png?dl=0

Categories