hyf-javascript3's People
hyf-javascript3's Issues
Feedback homework week 1
Hi Emad,
While your app seems to work, you seem to have ignored step 3 from the assignment:
- The body of your index.html should contain a single div element like this:
<div id="root"></div>
.
Instead, you have hard-code the fixed HTML elements directly in index.html. Dynamically creating these elements in JavaScript is part of the assignment so that you can learn and practice this. Can you please modify this in your implementation, and I will continue the review.
Note that for week 2, the homework is to use promises.
BTW, in HYF we have standardised on using semi-colons to terminate statements.
Feedback homework week 2
Hi Emad, here is my feedback on your week 2 homework.
This feedback is for the 'promises' version in your week2 folder.
Your application seems to work fine, but I have lots of issues to address.
1. You have not followed up yet on my feedback with respect to dynamically creating all HTML except for the <div id="root"></div>
element. Please do so for week 3.
2. Your repo is missing an .eslintrc
file. Please add one as mentioned here.
3. Your code indentation is off. Are you using VSCode for all your HYF homework with the settings that we recommend? If not, please install and use VSCode as per the VSCode Tips for all your homework.
4. I get lots of ESLint warnings in your code. I suspect that you have not enabled ESLint. For instance, you make a reference to a function renderError()
in main()
, but you did not create that function. I guess you didn't actually try your code under an error condition as I asked in this slack message. If you open the Chrome Developer tools console (which I recommend you always do when developing) you could have seen an error message:
app.js:17 Uncaught ReferenceError: renderError is not defined
at main (app.js:17)
5. In HYF we do not allow the use of Bootstrap for the homework. You should create your own CSS. Note that this statement won't load your CSS file:
<link rel="stylesheet" type="text/css" href="../css/style.css" />
You cannot use ..
to go to the parent of the folder containing your .html
file. Browser and servers will not allow it.
6. In your function main()
you create a number of variables with .getElementById()
but they are rightly flagged as unused by ESLint.
function main() {
const root = document.getElementById('root'); // <-- unused
const selectContainer = createAndAppend('div', root) // <-- unused
const repository = document.getElementById('repository') // <-- unused
const description = document.getElementById('description') // <-- unused
const fork = document.getElementById('fork ') // <-- unused
const updated = document.getElementById('updated ') // <-- unused
const contributions = document.getElementById('contributions') // <-- unused
fetchJSON(url)
.then(data => createSelect(data))
.catch(err => renderError(err));
}
Referring to the same code snippet above, there is no need for the arrow functions (and of course, you will need to create the renderError()
function):
fetchJSON(url)
.then(createSelect)
.catch(renderError);
7. In your function filterData()
you make reference to, for instance, a variable repository
:
repository.innerHTML = 'Repository:' + " "
ESLint marks this variable as undefined. If you think you defined it in function main()
then you are wrong. The variables that you defined in function main()
are local to that function. The fact that your code still runs is because of an obscure remnant in browser implementations that creates global variables for all id
and name
attributes that you use in HTML. It is a bad practice to rely on this, and in your case it is hiding a programming error.
The same issue is present in various places in your code.
8. As I mentioned in my previous feedback, please use semicolons to terminate all JavaScript statements.
9. One I forgot: I only see a subset of HYF repos. That is because you set the page_size
in the URL to 30. The assignment specified that is should be set to 100. See this.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.