diff --git a/SUBMISSION.md b/SUBMISSION.md index 9f4df99..c65c371 100644 --- a/SUBMISSION.md +++ b/SUBMISSION.md @@ -2,7 +2,16 @@ 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 - + * on clicking menuicon the slide-menu will toggle its position(process:added eventlistener and toggled the class) +2. Aesthetics - + * aligned the feed to center + * aligned the silde-menu so that it does not collapse with header + * fixed the slide-menu to left side +3. Testing - + * Added the test to check if all urls are defined(process: by expecting them not to be undefined) + * Added the test to check if all names are defined(process: by expecting them not to be undefined) + * Added the test to check if nav is hidden by default(process:Selected the transform property and split the matrix and checked if the value is less than zero) + * Added the test to check intial entries are not empty(process: called the loadfeed function and checked the status to be equal to success) +4. Technicality Improvements - + * on selecting one of the items of feed-list corresponding feeds will be displayed(process:on selecting called the loadfeed function and removed the previous feed and appended the corresponding feed) diff --git a/app.js b/app.js index 9e583f7..d746934 100644 --- a/app.js +++ b/app.js @@ -1,17 +1,28 @@ var allFeeds = [{ + id:0, name: 'CSS Tricks', url: 'http://feeds.feedburner.com/CssTricks' }, { + id:1, name: 'HTML5 Rocks', url: 'http://feeds.feedburner.com/html5rocks' }, { + id:2, name: 'Linear Digressions', url: 'http://feeds.feedburner.com/udacity-linear-digressions' }]; - function init() { - loadFeed(0); - $('body').removeClass('menu-hidden'); + feeditem = Handlebars.compile($('.tpl-feed-item').html()); + loadFeed(0,(result) => { + var allfeed = $('.feed'); + allfeed[0].innerHTML=""; + if(result.status==="ok") + { + result.items.forEach((item) => { + allfeed.append(feeditem(item)); + }); + } + }); } /* This function performs everything necessary to load a @@ -20,22 +31,24 @@ function init() { * which will be called after everything has run successfully. */ function loadFeed(id, cb) { - +// console.log(id); $.ajax({ type: "GET", url: 'https://api.rss2json.com/v1/api.json', data: { - rss_url: 'http://feeds.feedburner.com/CssTricks' + rss_url: allFeeds[id].url }, success: function (result, status) { if (cb) { - cb( /*something*/ ); + console.log(status); + cb(result,status); } }, error: function (result, status, err) { //run only the callback without attempting to parse result due to error if (cb) { - cb(); + // console.log(status); + cb(result,status); } }, dataType: "json" @@ -52,15 +65,52 @@ $(function () { allFeeds.forEach(function (feed) { feedList.append(feedItemTemplate(feed)); }); + var click0 = $(`a[data-id="0"]`); + click0.on('click',function (){ + loadFeed(0,(result) => { + var allfeed = $('.feed'); + allfeed[0].innerHTML=""; + result.items.forEach((item) => { + allfeed.append(feeditem(item)); + }); + }); + }) + var click1 = $(`a[data-id="1"]`); + click1.on('click',function (){ + loadFeed(1,(result) => { + var allfeed = $('.feed'); + allfeed[0].innerHTML=""; + result.items.forEach((item) => { + allfeed.append(feeditem(item)); + }); + }); + }) + var click2 = $(`a[data-id="2"]`); + click2.on('click',function (){ + loadFeed(2,(result) => { + var allfeed = $('.feed'); + allfeed[0].innerHTML=""; + result.items.forEach((item) => { + // console.log(item); + allfeed.append(feeditem(item)); + }); + }); + }) - feedList.on('click', function () { - var item = $(this); - $('body').addClass( /*A class here*/ ); - loadFeed(item.data('id')); - return false; - }); + // feedList.on('click', function () { + // var item = $(this); + // $('body').addClass( /*A class here*/ ); + // loadFeed(item.data('id')); + // return false; + // }); /* When the menu icon is clicked on, we need to toggle a class * on the body to perform the hiding/showing of our menu. */ + + var menu = document.querySelector('.menuiconimg'); + menu.addEventListener('click',(e) => { + var body = document.querySelector('body'); + body.classList.toggle('menu-hidden'); + }) }()); diff --git a/feedreader.js b/feedreader.js index 16c7738..2009e39 100644 --- a/feedreader.js +++ b/feedreader.js @@ -24,20 +24,26 @@ $(function () { it('are defined', function () { let expect = chai.expect; expect(allFeeds).to.not.be.undefined; - expect(allFeeds.length).to.be.above(0); + expect(allFeeds.length).to.be.equal(3); }); // 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; + allFeeds.forEach((feed) => { + expect(feed.url).to.not.be.undefined; + }); }); // 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; + allFeeds.forEach((feed) => { + expect(feed.name).to.not.be.undefined; + }); }); }); @@ -48,22 +54,36 @@ $(function () { // Test to check node hidden by default. it('should be hidden by default', () => { // test here + let expect = chai.expect; + var css = $('.slide-menu').css('transform'); + var values = css.match(/-?[\d\.]+/g); + for(var i=0;i { + let expect=chai.expect; done(); }); }) describe('Initial Entries', () => { - let feedContainer, id; // Test to check the entries are not empty. - it(`should not be empty for feeds`, (done) => { - done(); - }) + it(`should not be empty for feed0`, (done) => { + let expect=chai.expect; + loadFeed(0,(result,status) => { + expect(status).to.be.equal("success"); + return done(); + }); + }); }) @@ -71,6 +91,7 @@ $(function () { // A test that ensures when a new feed is loaded by the loadFeed function that the content actually changes. it(`should change content for feeds`, (done) => { + done(); }) }) diff --git a/icomoon.css b/icomoon.css index 23babda..9fb26df 100644 --- a/icomoon.css +++ b/icomoon.css @@ -22,7 +22,7 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - +/* .icon-list:before { content: "\e600"; -} +} */ diff --git a/index.html b/index.html index 9e9fa63..87c28d2 100644 --- a/index.html +++ b/index.html @@ -7,15 +7,17 @@ - + -
- - - +
+ + + menuicon + +

Feeds

@@ -24,9 +26,12 @@

Feed
    - + +
    - +

    The Magic of React-Based Multi-Step Forms

    Nathan Sebhastian

    @@ -103,17 +108,26 @@

    A Funny Thing Happened on the Way to the JavaScript

    + + - + diff --git a/menuicon1.svg b/menuicon1.svg new file mode 100644 index 0000000..b885301 --- /dev/null +++ b/menuicon1.svg @@ -0,0 +1,524 @@ + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/style.css b/style.css index bbc3fc7..b3a30bc 100644 --- a/style.css +++ b/style.css @@ -8,9 +8,9 @@ html { box-sizing: border-box; } -.text-center{ +/* .text-center{ text-align: center; -} +} */ body { color: #111; font-family: 'Roboto', sans-serif; @@ -44,7 +44,8 @@ h2 { position: fixed; top: 0; width: 100%; - padding: 0.5em 1em; + height:10vh; + /* padding: 0.5em 1em; */ } .icon-list { @@ -53,8 +54,8 @@ h2 { } .slide-menu { - position: absolute; - top: 3.5em; + position: fixed; + top: 10vh; padding: 1em; background: #0984b4; height: 100%; @@ -74,7 +75,8 @@ h2 { } #mocha{ - display: none; + text-align: center; + border-bottom: 2px dotted black; } .slide-menu li a { color: #fff; @@ -89,6 +91,7 @@ h2 { .feed { margin: 4em 0 0; + margin-top: 10vh; } .entry { @@ -96,3 +99,41 @@ h2 { padding: 1em; margin: 0.5em 0; } + +/* My Changes */ + +/* align text of class entry to centre */ + +.entry h2,.entry p{ + text-align: center; +} + +.menuicon{ + width:10%; + height: 100%; + float: left; +} + +/* .menuicon a{ + display: block; + width: 100%; + height: 100%; +} */ + +.menuicon img{ + /* display: block; */ + width:100%; + height: 65%; + margin: 0 auto; + padding-top:5%; +} + +.text-center{ + height: 100%; + float: right; + width:90%; +} +.text-center h1{ + margin-left:43%; + padding-top: 5px; +} \ No newline at end of file