Initializing
Liveweave
Web
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
frame_source
Python Playground
New
arrow_outward
build
Tools
expand_more
restart_alt
Load "Hello Weaver!"
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.js"></script> <link type="text/css" rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/> <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css"/> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <script type="text/javascript" src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script> <title>HTML5, CSS3 and JavaScript demo</title> </head> <body class="body"> <!-- Fixed navbar --> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="source.html">Teachers</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle active" data-toggle="dropdown">Students <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="student.html">All Students</a></li> <li class="divider"></li> <li><a href="exam.html">Examinations</a></li> <li><a href="#">Examination Rank</a></li> <li><a href="#">Most Improved Student</a></li> <li><a href="#">Merit List Order</a></li> </ul> </li> <li><a href="navbar-fixed-top.html#">School</a></li> <li><a href="navbar-fixed-top.html#about">About</a></li> <li><a href="navbar-fixed-top.html#contact">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a> <ul class="dropdown-menu"> <li style="width: 250px;"> <form class="navbar-form form" role="form"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-envelope color-blue"></i></span> <!--EMAIL ADDRESS--> <input ffpdm="sllsk9tlqkgb19q0h93te" id="emailInput" placeholder="email address" class="form-control" oninvalid="setCustomValidity('Please enter a valid email address!')" onchange="try{setCustomValidity('')}catch(e){}" required="" type="email"> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock color-blue"></i></span> <!--PASSWORD--> <input ffpdm="4j1x06h10f6jxmd6j6urs" id="passwordInput" placeholder="password" class="form-control" oninvalid="setCustomValidity('Please enter a password!')" onchange="try{setCustomValidity('')}catch(e){}" required="" type="password"> </div> </div> <!-- BASIC ERROR MESSAGE <div class="form-group"> <label class="error-message color-red">*Email & password don't match!</label> </div> --> <div class="form-group"> <!--BUTTON--> <button type="submit" class="btn btn-primary form-control">Login</button> </div> <div class="form-group"> <!--RESET PASSWORD LINK--> <span class="pull-right"><a href="#">Forgot Password?</a></span> </div> </form> </li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search" id="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div><!--/.nav-collapse --> </div> </div> <!-- END Fixed navbar --> <div class="main"> <!-- <button class="button addNewButton" data-bind="click: addItem">Add New Student</button> --> <button class="button addNewButton" data-bind="click: addItem">New Record</button> <form> <table> <thead> <tr> <th>No.</th> <th>Class</th> <th>Gender</th> <th>Surname</th> <th>First name</th> <th>Grammar</th> <th>Composition</th> <th>Lugha</th> <th>Insha</th> <th>Math</th> <th>Science</th> <th>Social Studies</th> <th>CRE</th> <th>Total Marks</th> <th>Rank</th> <th>Update</th> </tr> <tr> <th></th> <th><select data-bind="options: classFilterOptions"></select></th> <th><select data-bind="options: genderFilterOptions"></select></th> <th><input data-bind="" /></th> <th><input data-bind="" /></th> <th><select data-bind="options: grammarFilterOptions"></select></th> <th><select data-bind="options: compoFilterOptions"></select></th> <th><select data-bind="options: lughaFilterOptions"></select></th> <th><select data-bind="options: inshaFilterOptions"></select></th> <th><select data-bind="options: mathFilterOptions"></select></th> <th><select data-bind="options: scieFilterOptions"></select></th> <th><select data-bind="options: socialFilterOptions"></select></th> <th><select data-bind="options: creFilterOptions"></select></th> <th><select data-bind="options: totalFilterOptions"></select></th> <th><select data-bind="options: rankFilterOptions"></select></th> <th></th> </tr> </thead> <tbody data-bind="template: { name: templateToUse, foreach: items}"> <tr> <td data-bind="text: $index() + 1"></td> <td data-bind="text: selectedClass"></td> <td data-bind="text: selectedGender"></td> <td data-bind="text: surName"></td> <td data-bind="text: firstName"></td> <td data-bind="text: grammar"></td> <td data-bind="text: compo"></td> <td data-bind="text: lugha"></td> <td data-bind="text: insha"></td> <td data-bind="text: math"></td> <td data-bind="text: scie"></td> <td data-bind="text: social"></td> <td data-bind="text: cre"></td> <td data-bind="text: totalMarks"></td> <td data-bind=""></td> <td class="buttons"> <button class="addNewButton" data-bind="click: $root.editItem">Edit</button> <button class="addNewButton" data-bind="click: $root.deleteItem">Delete</button> </td> </tr> </tbody> </table> </form> <!-- **************************************************************************************************** --> <!-- **************************************************************************************************** --> <script id="itemTmpl" type="text/html"> <tr> <td data-bind="text: $index() + 1"></td> <td data-bind="text: selectedClass"></td> <td data-bind="text: selectedGender"></td> <td data-bind="text: surName"></td> <td data-bind="text: firstName"></td> <td data-bind="text: grammar"></td> <td data-bind="text: compo"></td> <td data-bind="text: lugha"></td> <td data-bind="text: insha"></td> <td data-bind="text: math"></td> <td data-bind="text: scie"></td> <td data-bind="text: social"></td> <td data-bind="text: cre"></td> <td data-bind="text: totalMarks"></td> <td data-bind=""></td> <td class="buttons"> <button class="addNewButton" data-bind="click: $root.editItem">Edit</button> <button class="addNewButton" data-bind="click: $root.deleteItem">Delete</button> </td> </tr> </script> <!-- **************************************************************************************************** --> <!-- **************************************************************************************************** --> <script id="editTmpl" type="text/html"> <tr> <td data-bind="text: $index() + 1"></td> <td><select data-bind="options: classOptions, value: selectedClass"></select></td> <td><select data-bind="options: genderOptions, value: selectedGender"></select></td> <td><input data-bind="value: surName, hasfocus: surName.focused" /></td> <td><input data-bind="value: firstName" /></td> <td><input data-bind="value: grammar" /></td> <td><input data-bind="value: compo" /></td> <td><input data-bind="value: lugha" /></td> <td><input data-bind="value: insha" /></td> <td><input data-bind="value: math" /></td> <td><input data-bind="value: scie" /></td> <td><input data-bind="value: social" /></td> <td><input data-bind="value: cre" /></td> <td data-bind="text: totalMarks"></td> <td><input data-bind="" /></td> <td class="buttons"> <button class="addNewButton" data-bind="click: $root.acceptItemEdit">Accept</button> <button class="addNewButton" data-bind="click: $root.cancelItemEdit">Cancel</button> </td> </tr> </script> </div> <!-- End your code here --> </body> </html>
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video { border:0; font:inherit; font-size:100%; margin:0; padding:0; vertical-align:baseline; } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; } html, body { background: url(bg.jpg) no-repeat center center fixed; font-family: 'Lato', helvetica, arial, sans-serif; font-size: 16px; color: #222; } .clear { clear: both; } .body { width: 95%; min-width: 1100px; background: #f3f3f3; margin: 30px auto; margin-top: 50px auto; } .main{ margin-top: 55px; padding: 10px; } hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 3px solid #000; } .button { /* structure */ padding: 8px 12px; /* skin */ border: 1px solid gainsboro; cursor: pointer; text-decoration: none; } .addNewButton { /* skin */ background-color: #FB8F3D; background-image: -webkit-linear-gradient(top, #FDA352, #FB8F3D); background-image: -moz-linear-gradient(top, #FDA352, #FB8F3D); background-image: -ms-linear-gradient(top, #FDA352, #FB8F3D); background-image: -o-linear-gradient(top, #FDA352, #FB8F3D); background-image: linear-gradient(top, #FDA352, #FB8F3D); color: White; } .toolButton { /* skin */ background-color: #F9F9F9; background-image: -webkit-linear-gradient(top, white, #F9F9F9); background-image: -moz-linear-gradient(top, white, #F9F9F9); background-image: -ms-linear-gradient(top, white, #F9F9F9); background-image: -o-linear-gradient(top, white, #F9F9F9); background-image: linear-gradient(top, white, #F9F9F9); color: #444; } input { width: 55px; } select { width: 55px; } td { width: 70px; } th { color: #000; font-size: .7em; font-weight: bold;} .buttons { width: 150px; } table tr:nth-child(odd){ background: #eee;} table td:first-child {width: 30px;} @media all and (min-width: 602px) and (max-width: 1000px) { #search{ display: none; } }
/* Write JavaScript here */ //wrapper for an observable that protects value until committed ko.protectedObservable = function(initialValue) { //private variables var _temp = initialValue; var _actual = ko.observable(initialValue); var result = ko.dependentObservable({ read: _actual, write: function(newValue) { _temp = newValue; } }); //commit the temporary value to our observable, if it is different result.commit = function() { if (_temp !== _actual()) { _actual(_temp); } }; //notify subscribers to update their value with the original result.reset = function() { _actual.valueHasMutated(); _temp = _actual(); }; return result; }; var classFilterOptions = ["Show All", 8, 7, 6, 5, 4, 3, 2, 1, "Nursery"]; var genderFilterOptions = ["Show All","Female", "Male"]; var grammarFilterOptions = ["Show All", "Top 10", "Above Half", "Last 10"]; var compoFilterOptions = ["Show All", "Top 10", "Above Half", "Last 10"]; var lughaFilterOptions = ["Show All", "Top 10", "Above Half", "Last 10"]; var inshaFilterOptions = ["Show All", "Top 10", "Above Half", "Last 10"]; var mathFilterOptions = ["Show All", "Top 10", "Above Half", "Last 10"]; var scieFilterOptions = ["Show All", "Top 10", "Above Half", "Last 10"]; var socialFilterOptions = ["Show All", "Top 10", "Above Half", "Last 10"]; var creFilterOptions = ["Show All", "Top 10", "Above Half", "Last 10"]; var totalFilterOptions = ["Show All", "Top 10", "Above Half", "Last 10"]; var rankFilterOptions = ["Show All", "Top 10", "Above Half", "Last 10"]; //construct an Item var Item = function(surName, firstName, grammar, compo, lugha, insha, math, scie, social, cre, selectedClass, selectedGender, classOptions, genderOptions) { this.surName = ko.protectedObservable(surName); this.surName.focused = ko.observable(); this.firstName = ko.protectedObservable(firstName); this.grammar = ko.protectedObservable(grammar); this.compo = ko.protectedObservable(compo); this.lugha = ko.protectedObservable(lugha); this.insha = ko.protectedObservable(insha); this.math = ko.protectedObservable(math); this.scie = ko.protectedObservable(scie); this.social = ko.protectedObservable(social); this.cre = ko.protectedObservable(cre); this.classOptions = [8, 7, 6, 5, 4, 3, 2, 1, "Nursery"]; this.selectedClass = ko.protectedObservable(selectedClass); this.genderOptions = ["Female", "Male"]; this.selectedGender = ko.protectedObservable(selectedGender); this.totalMarks = ko.computed(function() {return Number(this.grammar()) + Number(this.compo()) + Number(this.lugha()) + Number(this.insha()) + Number(this.math()) + Number(this.scie()) + Number(this.social()) + Number(this.cre())}, this); //////////////////////////////////////////////////////////// } var ViewModel = function(items){ var self = this; this.items = ko.observableArray(items); this.selectedItem = ko.observable(); ///////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// this.addItem = function() { var newItem = new Item("surname", "first name", 0, 0, 0, 0, 0, 0, 0, 0); self.items.push(newItem); self.selectedItem(newItem); }; this.deleteItem = function(itemToDelete) { self.items.remove(itemToDelete); self.selectedItem(null); }; this.editItem = function(item) { self.selectedItem(item); item.surName.focused(true); }; this.acceptItemEdit = function() { self.selectedItem().surName.commit(); self.selectedItem().firstName.commit(); self.selectedItem().grammar.commit(); self.selectedItem().compo.commit(); self.selectedItem().lugha.commit(); self.selectedItem().insha.commit(); self.selectedItem().math.commit(); self.selectedItem().scie.commit(); self.selectedItem().social.commit(); self.selectedItem().cre.commit(); self.selectedItem().selectedClass.commit(); self.selectedItem().selectedGender.commit(); self.selectedItem(null); }; this.cancelItemEdit = function() { self.selectedItem().surName.reset(); self.selectedItem().firstName.reset(); self.selectedItem().grammar.reset(); self.selectedItem().compo.reset(); self.selectedItem().lugha.reset(); self.selectedItem().insha.reset(); self.selectedItem().math.reset(); self.selectedItem().scie.reset(); self.selectedItem().social.reset(); self.selectedItem().cre.reset(); self.selectedItem().selectedClass.reset(); self.selectedItem().selectedGender.reset(); self.selectedItem(null); }; ////////////////////////////////////////////////// ////////////////////////////////////////////////////// this.templateToUse = function(item) { return self.selectedItem() === item ? "editTmpl" : "itemTmpl"; }; }; ko.applyBindings(new ViewModel([ new Item("Tylor", "Sushi", 40, 34, 24, 28, 69, 80, 50, 28, 8, "Female"), new Item("Kabue", "lee", 41, 32, 29, 18, 63, 60, 45, 42, 6, "Male"), new Item("Jackson", "Charles", 34, 38, 29, 11, 73, 69, 35, 43, 7, "Male"), new Item("Kamau", "Saral", 41, 35, 29, 18, 63, 60, 45, 42, 8, "Male"), new Item("Victor", "Austin", 47, 32, 27, 18, 63, 60, 45, 42, 4, "Male"), new Item("Victoria", "Katherine", 39, 32, 29, 18, 63, 60, 45, 42, 5, "Male"), new Item("Abraham", "Boston", 49, 32, 29, 18, 63, 60, 45, 42, 3, "Male"), new Item("Frank", "Glee", 45, 32, 29, 18, 63, 60, 45, 42, 2, "Male"), new Item("Henly", "Elvis", 42, 42, 30, 19, 53, 60, 45, 42, 1, "Male"), new Item("Maina", "Jacob", 41, 32, 29, 18, 63, 60, 45, 42, "Nursery", "Male") ]));