Skip to content

Final Web App.. #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rajshah9914 wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Final Web App.. #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
037f44e
Added modifications and some tests as suggested..
rajshah9914 Feb 22, 2019
4bdd2a6
Added pending test cases..
rajshah9914 Feb 22, 2019
c493e74
Changed the submission.md with process stated..
rajshah9914 Feb 22, 2019
f9f387d
Added process for submission.md
rajshah9914 Feb 22, 2019
5d281cd
Modified submission.md
rajshah9914 Feb 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 23 additions & 4 deletions SUBMISSION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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..
21 changes: 17 additions & 4 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
var allFeeds = [{
var allFeeds = [
{
name: 'CSS Tricks',
url: 'http://feeds.feedburner.com/CssTricks'
}, {
Expand All @@ -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);
Expand All @@ -29,7 +42,7 @@ function loadFeed(id, cb) {
},
success: function (result, status) {
if (cb) {
cb( /*something*/ );
cb(result,status);
}
},
error: function (result, status, err) {
Expand All @@ -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;
});
Expand Down
21 changes: 16 additions & 5 deletions feedreader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});

Expand All @@ -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?
Expand All @@ -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();
})
})
Expand Down
79 changes: 42 additions & 37 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,86 +13,86 @@
<body class="menu-hidden">
<div id='mocha'></div>
<div class="header">
<a href="#" class="menu-icon-link">
<i class="icon-list"></i>
<a href="open.html" class="menu-icon-link">
<i class="icon-list">Show More</i>
</a>
<div class="text-center">
<h1 class="header-title" aria-describedby="The heading of the present feed">Feeds</h1>
<h1 class="header-title" aria-describedby="The heading of the present feed"><u>Feeds</u></h1>
</div>
</div>

<div class="slide-menu">
<!-- <div class="slide-menu">
<ul class="feed-list"></ul>
</div>
</div> -->

<div class="feed">
<a class="entry-link" href="https://css-tricks.com/the-magic-of-react-based-multi-step-forms/">
<article class="entry">
<h2>The Magic of React-Based Multi-Step Forms</h2>
<p>Nathan Sebhastian</p>
<article class="entry" style="background-color:rgb(161, 194, 27)";>
<h2 align="center">The Magic of React-Based Multi-Step Forms</h2>
<p align="center">Nathan Sebhastian</p>
</article>
</a>

<a class="entry-link" href="https://medium.com/@sachagreif/announcing-the-state-of-css-2019-survey-e1e4268df64d">
<article class="entry">
<h2>The #StateOfCSS 2019 Survey</h2>
<p>Geoff Graham</p>
<article class="entry" style="background-color:rgb(241, 190, 22)";>
<h2 align="center">The #StateOfCSS 2019 Survey</h2>
<p align="center">Geoff Graham</p>
</article>
</a>

<a class="entry-link" href="https://css-tricks.com/getting-to-grips-with-the-airtable-api/">
<article class="entry">
<h2>Getting to Grips with the Airtable API</h2>
<p>Robin Rendle</p>
<article class="entry" style="background-color:rgb(161, 194, 27)";>
<h2 align="center">Getting to Grips with the Airtable API</h2>
<p align="center">Robin Rendle</p>
</article>
</a>

<a class="entry-link" href="https://synd.co/2GemPNV">
<article class="entry">
<h2>Use monday.com to manage and share projects all in one place</h2>
<p>Geoff Graham</p>
<article class="entry" style="background-color:rgb(241, 190, 22)";>
<h2 align="center">Use monday.com to manage and share projects all in one place</h2>
<p align="center">Geoff Graham</p>
</article>
</a>

<a class="entry-link" href="https://css-tricks.com/the-smart-ways-to-correct-mistakes-in-git/">
<article class="entry">
<h2>The Smart Ways to Correct Mistakes in Git</h2>
<p>Tobias Günther</p>
<article class="entry" style="background-color:rgb(161, 194, 27)";>
<h2 align="center">The Smart Ways to Correct Mistakes in Git</h2>
<p align="center">Tobias Günther</p>
</article>
</a>

<a class="entry-link" href="https://cloudinary.com/blog/a_chaotic_good_guide_to_image_performance_part_1">
<article class="entry">
<h2>“the closest thing web standards have to a golden rule”</h2>
<p>Chris Coyier</p>
<article class="entry" style="background-color:rgb(241, 190, 22)";>
<h2 align="center">“the closest thing web standards have to a golden rule”</h2>
<p align="center">Chris Coyier</p>
</article>
</a>

<a class="entry-link" href="https://css-tricks.com/%e2%80%8b%e2%80%8bavoiding-those-dang-cannot-read-property-of-undefined-errors/">
<article class="entry">
<h2>​​Avoiding those dang cannot read property of undefined errors</h2>
<p>Adam Giese</p>
<article class="entry" style="background-color:rgb(161, 194, 27)";>
<h2 align="center">​​Avoiding those dang cannot read property of undefined errors</h2>
<p align="center">Adam Giese</p>
</article>
</a>

<a class="entry-link" href="https://css-tricks.com/a-site-for-front-end-development-conferences-built-with-11ty-on-netlify/">
<article class="entry">
<h2>A Site for Front-End Development Conferences (Built with 11ty on Netlify)</h2>
<p>Chris Coyier</p>
<article class="entry" style="background-color:rgb(241, 190, 22)";>
<h2 align="center">A Site for Front-End Development Conferences (Built with 11ty on Netlify)</h2>
<p align="center">Chris Coyier</p>
</article>
</a>

<a class="entry-link" href="https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/">
<article class="entry">
<h2>Quick! What’s the Difference Between Flexbox and Grid?</h2>
<p>Chris Coyier</p>
<article class="entry" style="background-color:rgb(161, 194, 27)";>
<h2 align="center">Quick! What’s the Difference Between Flexbox and Grid?</h2>
<p align="center">Chris Coyier</p>
</article>
</a>

<a class="entry-link" href="https://css-tricks.com/a-funny-thing-happened-on-the-way-to-the-javascript/">
<article class="entry">
<h2>A Funny Thing Happened on the Way to the JavaScript</h2>
<p>Jason Rodriguez</p>
<article class="entry" style="background-color:rgb(241, 190, 22)";>
<h2 align="center">A Funny Thing Happened on the Way to the JavaScript</h2>
<p align="center">Jason Rodriguez</p>
</article>
</a>
</div>
Expand All @@ -106,14 +106,19 @@ <h2>A Funny Thing Happened on the Way to the JavaScript</h2>
<script src="https://cdn.rawgit.com/jquery/jquery/2.1.4/dist/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/handlebarsjs/2.0.0/handlebars.min.js"></script>
<script src="app.js"></script>
<!-- Only for testing <script src="https://unpkg.com/[email protected]/chai.js"></script>
<script src="https://unpkg.com/[email protected]/chai.js"></script>
<script src="https://unpkg.com/[email protected]/mocha.js"></script>
<script>mocha.setup('bdd')</script>
<script src="feedreader.js"></script>
<script>
mocha.checkLeaks();
mocha.run();
</script> -->
</script>
<script>
function myFunction() {
document.getElementsByClassName("menu-icon-link").id = "index";
}
</script>

</body>
</html>
119 changes: 119 additions & 0 deletions open.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>YourFeeds</title>

<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="icomoon.css">
<link rel="stylesheet" href="style.css" content-type="text/css">
<!--Only for testing <link href="https://unpkg.com/[email protected]/mocha.css" rel="stylesheet" /> -->

</head>
<body class="menu-hidden">
<div id='mocha'></div>
<div class="header">
<a href="index.html" class="menu-icon-link">
<i class="icon-list">Show Less</i>
</a>
<div class="text-center">
<h1 class="header-title" aria-describedby="The heading of the present feed">Feeds</h1>
</div>
</div>

<div class="slide-menu">
<ul class="feed-list"></ul>
</div>

<div class="feed">
<a class="entry-link" href="https://css-tricks.com/the-magic-of-react-based-multi-step-forms/">
<article class="entry" style="background-color:rgb(161, 194, 27)";>
<h2 align="center">The Magic of React-Based Multi-Step Forms</h2>
<p align="center">Nathan Sebhastian</p>
</article>
</a>

<a class="entry-link" href="https://medium.com/@sachagreif/announcing-the-state-of-css-2019-survey-e1e4268df64d">
<article class="entry" style="background-color:rgb(241, 190, 22)";>
<h2 align="center">The #StateOfCSS 2019 Survey</h2>
<p align="center">Geoff Graham</p>
</article>
</a>

<a class="entry-link" href="https://css-tricks.com/getting-to-grips-with-the-airtable-api/">
<article class="entry" style="background-color:rgb(161, 194, 27)";>
<h2 align="center">Getting to Grips with the Airtable API</h2>
<p align="center">Robin Rendle</p>
</article>
</a>

<a class="entry-link" href="https://synd.co/2GemPNV">
<article class="entry" style="background-color:rgb(241, 190, 22)";>
<h2 align="center">Use monday.com to manage and share projects all in one place</h2>
<p align="center">Geoff Graham</p>
</article>
</a>

<a class="entry-link" href="https://css-tricks.com/the-smart-ways-to-correct-mistakes-in-git/">
<article class="entry" style="background-color:rgb(161, 194, 27)";>
<h2 align="center">The Smart Ways to Correct Mistakes in Git</h2>
<p align="center">Tobias Günther</p>
</article>
</a>

<a class="entry-link" href="https://cloudinary.com/blog/a_chaotic_good_guide_to_image_performance_part_1">
<article class="entry" style="background-color:rgb(241, 190, 22)";>
<h2 align="center">“the closest thing web standards have to a golden rule”</h2>
<p align="center">Chris Coyier</p>
</article>
</a>

<a class="entry-link" href="https://css-tricks.com/%e2%80%8b%e2%80%8bavoiding-those-dang-cannot-read-property-of-undefined-errors/">
<article class="entry" style="background-color:rgb(161, 194, 27)";>
<h2 align="center">​​Avoiding those dang cannot read property of undefined errors</h2>
<p align="center">Adam Giese</p>
</article>
</a>

<a class="entry-link" href="https://css-tricks.com/a-site-for-front-end-development-conferences-built-with-11ty-on-netlify/">
<article class="entry" style="background-color:rgb(241, 190, 22)";>
<h2 align="center">A Site for Front-End Development Conferences (Built with 11ty on Netlify)</h2>
<p align="center">Chris Coyier</p>
</article>
</a>

<a class="entry-link" href="https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/">
<article class="entry" style="background-color:rgb(161, 194, 27)";>
<h2 align="center">Quick! What’s the Difference Between Flexbox and Grid?</h2>
<p align="center">Chris Coyier</p>
</article>
</a>

<a class="entry-link" href="https://css-tricks.com/a-funny-thing-happened-on-the-way-to-the-javascript/">
<article class="entry" style="background-color:rgb(241, 190, 22)";>
<h2 align="center">A Funny Thing Happened on the Way to the JavaScript</h2>
<p align="center">Jason Rodriguez</p>
</article>
</a>
</div>

<script class="tpl-feed-list-item" type="text/x-handlebars-template">
<li>
<a href="#" data-id="{{id}}">{{name}}</a>
</li>
</script>

<script src="https://cdn.rawgit.com/jquery/jquery/2.1.4/dist/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/handlebarsjs/2.0.0/handlebars.min.js"></script>
<script src="app.js"></script>
<script src="https://unpkg.com/[email protected]/chai.js"></script>
<script src="https://unpkg.com/[email protected]/mocha.js"></script>
<script>mocha.setup('bdd')</script>
<script src="feedreader.js"></script>
<script>
mocha.checkLeaks();
mocha.run();
</script>

</body>
</html>
Loading