The Magic of React-Based Multi-Step Forms
-Nathan Sebhastian
+The Magic of React-Based Multi-Step Forms
+Nathan Sebhastian
diff --git a/SUBMISSION.md b/SUBMISSION.md index 9f4df99..04de395 100644 --- a/SUBMISSION.md +++ b/SUBMISSION.md @@ -2,7 +2,26 @@ Use this md to tell us the bugs you solved and also explain the approach you had while solving them. Make them bulleted like -1. Accessibility - **Something here** -2. Aesthetics - **Something here** -3. Testing - **Something here** -4. Technicality Improvements - **Something here** +1. Accessibility - The web app just uses various links that can be refered to regarding css, html. The feature to toggle the 'menu-icon-link' which serves as a slide bar which can be compared to a drop down list. + +2. Aesthetics - The web application is been made to serve its beauty and be user-friendly. Its slide bar is made dynamic keeping the header fixed as original. Combinations of dual colors add to the effect. The cause for doing so is to increase the ease of its usage. +Other simpler effects provided by CSS are alignment and margin setting to increase its worth. + +3. Testing - + - A test that insures that all the feed are present without any missings.. + + - A test that loops through each feed in the allFeeds object and ensures it has a URL defined and that the URL is not empty. (A separate array named count_url is constructed in app.js file which stores all the url's. Further, a testing is made to check if all the 3 url's are present or is there any url missing by.. Can be easily extended for dynamic use.) + + - A test that loops through each feed in the allFeeds object and ensures it has a name defined and that the name is not empty. (A separate array named count_name is constructed in app.js file which stores all the names. Further, a testing is made to check if all the 3 names are present or is there any url missing by.. Can be easily extended for dynamic use.) + + - A test that ensures the menu element is hidden by default. (This test assures and checks the default case of the slide bar whether it is toggled or not. This is done by retrieving the className and id from index.html and comparing them to check the above mentioned case..) + + -Test to check the entries are not empty.( Return success if the entries of loadfeed are not empty..) + + +4. Technicality Improvements - +-. A separate open.html file constructed for toggling improvement. +-. CSS alignment changes. +-. The separate html file helps to align the slide bar and separate its effect from header which was interconnected initially. +-. This enables them function independently. +-. Provided surge deployed link in PR.. \ No newline at end of file diff --git a/app.js b/app.js index 9e583f7..f9e571d 100644 --- a/app.js +++ b/app.js @@ -1,4 +1,5 @@ -var allFeeds = [{ +var allFeeds = [ + { name: 'CSS Tricks', url: 'http://feeds.feedburner.com/CssTricks' }, { @@ -7,7 +8,19 @@ var allFeeds = [{ }, { name: 'Linear Digressions', url: 'http://feeds.feedburner.com/udacity-linear-digressions' -}]; +} +]; +var j=0; +var k=0; +var count_name=[]; +var count_url=[]; +for(i = 0; i < allFeeds.length; i++) +{ + count_name[j]=allFeeds[i].name; + j=j+1; + count_url[k]=allFeeds[i].url; + k=k+1; +}; function init() { loadFeed(0); @@ -29,7 +42,7 @@ function loadFeed(id, cb) { }, success: function (result, status) { if (cb) { - cb( /*something*/ ); + cb(result,status); } }, error: function (result, status, err) { @@ -55,7 +68,7 @@ $(function () { feedList.on('click', function () { var item = $(this); - $('body').addClass( /*A class here*/ ); + $('body').addClass(menu-hidden); loadFeed(item.data('id')); return false; }); diff --git a/feedreader.js b/feedreader.js index 16c7738..6cc3b93 100644 --- a/feedreader.js +++ b/feedreader.js @@ -30,14 +30,16 @@ $(function () { // This test checks whether all the url field are defined and are not empty. it('should have defined Urls', function () { - // Test here - + let expect = chai.expect; + expect(count_url).to.be.undefined; + expect(count_url.length).to.equal(3); }); // This test check whether all the feed names are defined and are not empty. it('should have defined names', function () { - // Test here - + let expect = chai.expect; + expect(count_name).to.be.undefined; + expect(count_name.length).to.equal(3); }); }); @@ -47,7 +49,11 @@ $(function () { // Test to check node hidden by default. it('should be hidden by default', () => { - // test here + var index = $('.menu-icon-link'); + $('.menu-icon-link').click(function() { + if(index===document.getElementById('index')) + alert('true'); + console.log("Showing less..Hidden by Default") }); // A test that ensures the menu changes visibility when the menu icon is clicked. // This test have two expectations: does the menu display itself when clicked, and does it hide when clicked again? @@ -62,6 +68,11 @@ $(function () { // Test to check the entries are not empty. it(`should not be empty for feeds`, (done) => { + let expect=chai.expect; + loadFeed(0,(result,status) => { + expect(status).to.be.equal("success"); + return done(); + }); done(); }) }) diff --git a/index.html b/index.html index 9e9fa63..f35d215 100644 --- a/index.html +++ b/index.html @@ -13,86 +13,86 @@
-