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 @@
- - + + Show More
-

Feeds

+

Feeds

-
+
-
-

The Magic of React-Based Multi-Step Forms

-

Nathan Sebhastian

+
+

The Magic of React-Based Multi-Step Forms

+

Nathan Sebhastian

-
-

The #StateOfCSS 2019 Survey

-

Geoff Graham

+
+

The #StateOfCSS 2019 Survey

+

Geoff Graham

-
-

Getting to Grips with the Airtable API

-

Robin Rendle

+
+

Getting to Grips with the Airtable API

+

Robin Rendle

-
-

Use monday.com to manage and share projects all in one place

-

Geoff Graham

+
+

Use monday.com to manage and share projects all in one place

+

Geoff Graham

-
-

The Smart Ways to Correct Mistakes in Git

-

Tobias Günther

+
+

The Smart Ways to Correct Mistakes in Git

+

Tobias Günther

-
-

“the closest thing web standards have to a golden rule”

-

Chris Coyier

+
+

“the closest thing web standards have to a golden rule”

+

Chris Coyier

-
-

​​Avoiding those dang cannot read property of undefined errors

-

Adam Giese

+
+

​​Avoiding those dang cannot read property of undefined errors

+

Adam Giese

-
@@ -106,14 +106,19 @@

A Funny Thing Happened on the Way to the JavaScript

- + + diff --git a/open.html b/open.html new file mode 100644 index 0000000..90bb264 --- /dev/null +++ b/open.html @@ -0,0 +1,119 @@ + + + + + YourFeeds + + + + + + + + +
+
+ + Show Less + +
+

Feeds

+
+
+ +
+ +
+ +
+ +
+

The Magic of React-Based Multi-Step Forms

+

Nathan Sebhastian

+
+
+ + +
+

The #StateOfCSS 2019 Survey

+

Geoff Graham

+
+
+ + +
+

Getting to Grips with the Airtable API

+

Robin Rendle

+
+
+ + +
+

Use monday.com to manage and share projects all in one place

+

Geoff Graham

+
+
+ + +
+

The Smart Ways to Correct Mistakes in Git

+

Tobias Günther

+
+
+ + +
+

“the closest thing web standards have to a golden rule”

+

Chris Coyier

+
+
+ + +
+

​​Avoiding those dang cannot read property of undefined errors

+

Adam Giese

+
+
+ + +
+

A Site for Front-End Development Conferences (Built with 11ty on Netlify)

+

Chris Coyier

+
+
+ + +
+

Quick! What’s the Difference Between Flexbox and Grid?

+

Chris Coyier

+
+
+ + +
+

A Funny Thing Happened on the Way to the JavaScript

+

Jason Rodriguez

+
+
+
+ + + + + + + + + + + + + + diff --git a/style.css b/style.css index bbc3fc7..7bb1dfc 100644 --- a/style.css +++ b/style.css @@ -54,9 +54,10 @@ h2 { .slide-menu { position: absolute; - top: 3.5em; + top: 4.8em; padding: 1em; - background: #0984b4; + /* background: #0984b4; */ + background: blueviolet; height: 100%; width: 10em; transform: translate3d(0, 0, 0);