malnajar / hyf-javascript1 Goto Github PK
View Code? Open in Web Editor NEWMy JavaScript Assignment
My JavaScript Assignment
Hi Mohammed,
Your web page and JavaScript code is a joy to look at. The web page is beautifully styled. The JavaScript code is well-formatted and uses let
and const
and camelCase for variable and function names.
While your application produces the correct results, in your JavaScript you did not completely follow the assignment. However that should be easy to fix.
In step 3 you are asked to create ul
and li
items with just the IDs from your myBooks
array
In step 4, you were to create a new object that should use the book ID as a key. An object like that would look like:
const myBooksInformation = [{
aTaleOfTwoCities: {
title: 'A Tale Of Two Cities',
language: 'English',
author: ' Charles Dickens',
date: '1859'
},
twilight_TheSaga: {
title: 'Twilight The Saga',
language: 'English',
author: 'Stephenie Meyer',
date: '2005'
},
// ...
}]
Note that is doesn't contain image information. With this object you are supposed to change your function from step 3 and add the info to the li
s. So I would expect to see something like:
for (let i = 0; i < myBooks.length; i++) {
const id = myBooks[i];
const info = myBooksInfo[id];
const listItem = document.createElement('li');
// ...
}
Then, in step 7 your are asked to create a new, separate object that contains the book IDs as keys and the image paths as values, for example:
const myBooksImages = {
aTaleOfTwoCities: './covers/2-cities.jpg',
twilight_TheSaga: './covers/twilight-book-cover.jpg',
// ...
};
You then are asked to loop over the entries of this object and add and img
tag to the li
created earlier.
for (const key of Object.keys(myBooksImages)) {
const elem = document.getElementByID(key);
// ...
}
There is not much wrong with the way you wrote your code, and doing it exactly as given in the assignment is not necessarily a better way. But your homework will also be rated for how closely you follow the assignment.
Hi Mohammad, i have some notes about you code :
1- in step 1 you could have chosen different names for your variables like filteredNumbers and mappedNumbers instead of adding just s
2- in step 3 the request was to filter the tasks that took more than
two hours or more and not less but it is the same concept you just have to change ( < ) with ( >= )
3- you missed the step of summing all durations (how much time in total did she spent)
Hi Mohammed,
Everything works OK.
Finding the index of meerkats
with a for
loop is one way of doing it. If you want to use a for
loop you can exit from the loop as soon as you have found the item you are looking for. Just add a break
statement inside your if
:
for (let i = 0; i < favoriteAnimals.length; i++) {
if (favoriteAnimals[i] == "meerkats") {
console.log("The item you are looking for is at index: " + i);
break;
}
}
A quicker and shorter way to find the index is to use the indexOf
array method. Check the documentation here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
Hi Mo,
Your web page looks really good. Great job on the JavaScript as well.
A few minor issues:
For myBooksInfomation
you've created an array rather than an object.
You should have used the book id's from the myBooks
array as keys for the objects containing author, title, and language information.
The paths of the book covers were supposed to be in a separate object, again with the book id's as keys.
In your for loop, you don't use the book id's to generate ul
and li
elements. You've created the myBooks
array, but you never actually use the id's from this array in your code.
Hi Mo, here is my feedback on your homework.
In general: please use let
and const
instead of var
.
Q1: While your sumAll()
function can sum any number of arguments, this was not the requirement. Your solution looks 'over-engineered'. I would have expected something simple like this:
function sum(x, y, x) {
return x + y + z;
}
Q2: You have used a function expression for your function and assigned to a variable colorCar
. While that is not wrong, I would prefer in this case a function statement, like you did for sumAll()
function colorCar(color) {
...
}
Q3: I recognise something I posted in slack ๐
Q4: Pay attention to detail. You spelled Car
with an initial uppercase letter and motorbike
with a lowercase letter.
Q5: We recommend that you always use tripe equals sign ===
(strict comparison).
Q6: Your function is supposed to take three arguments but you wrote it to accept a single argument only. And I would expect age
to be a number rather than a color.
And if I change your code like this:
var vehicle = function (age) {
// I changed age === "blue" to age === "red"
if (age == "red", 1, 5) {
console.log("a blue used Car");
} else if (age == "green", 3, 1) {
// Q9
console.log("a green new caravan");
} else {
console.log("Wrong Code !!");
}
return;
}
vehicle("blue", 1, 5);
It still prints out a a blue used Car
.
When you do a comparison (remember to use ===
) you can only compare two value (one value at each side of the ===
operator), for example: age === "blue"
.
If you do this: age == "blue", 1, 5
the resulting value is 5
(the last value). See this article: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator
Q7/8: There is no need to introduce a variable i
. `vehicles[2] would work too.
Q9. Suffers from the same problem as Q7.
Q10. When I run your code I get the output:
Amazing Joe's Garage, we service car
Amazing Joe's Garage, we service motorbike
Amazing Joe's Garage, we service caravan
Amazing Joe's Garage, we service bike
What we wanted is a single line: Amazing Joe's Garage, we service cars, motorbikes, caravans and bikes.
Q11. The push
is fine, but the problem with Q10 remains.
Q13/14. Your code would read better if you place each array element on a separate line:
const myTeachers = [
{ name: "Philipp Beau", modules: "HTML and CSS" },
{ name: "Ivana Setiawan", modules: "HTML and CSS" },
{ name: "Unmesh Joshi", modules: "Commands" },
{ name: "Jim Cramer", modules: "JavaScript" },
{ name: "Frank Versnel", modules: "JavaScript" }
];
You are missing a let
in your for
loop statement:
for (let i = 0; i < myTeachers.length; i++){
Q15. While your code seems to output correctly, I'm afraid the implementation is not. Inside the foo()
function you should not reference the bar()
function. Instead you should call the function that was passed as an arguments to foo()
Q16. What you have done is what we usually call a 'deep equal'. You are going into the array elements and checking their values. The assignment wasn't expecting you to do this. A simple comparison, e.g. x === y
would have done. And then x
and y
would not be the same. If you understand the latter and the difference between this simple comparison and a deep equal, then so much the better.
Q17. You have not changed the o2
object but you have created a new object. Changing the object would be something like:
o2.foo = 'not bar';
But the question was perhaps not clear enough on that.
Q18. I'm missing your explanation of the produced output.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.