fac-17 / cgko-week3 Goto Github PK

The site seems to have an accessibility score of 59...a few things you could do to bring this up easily are:

1. Give the document a title tag
2. Add labels to the forms.

Really great work other than that....love to be informed about crime.

I'm sure you were thinking of this, but it would be nice to have more months available.

Really like the touch to give user feedback if they click search without inputting a location.

Lovely use of objects to create your functions within a single object here. You don't have to export each one individually then.

The only thing is that this function doesn't seem to do anything except return its argument right now

stringify: function (input) {
    return input;
  },

you have a really nice styled dropdown.

<div id="dropdown" class="dropdown-content">
    <a href="#" class="jan">January 19</a>
    <a href="#" class="feb">Feburary 19</a>
    <a href="#" class="march">March 19</a>
</div>

you've used a div to render the dropdown, with the styling you want, with is nice since selects and options which are the inbuilt dropdown, can't actually be styled properly.

The clean, simple design makes sense for a serious website, but it could maybe be a bit more exciting 🙊? (...purely for the sake of criticism)

Use GET on the Zoopla API call

Great app, such a clever idea. It seems for some postcodes the api doesnt return any info so perhaps a good solution would be to show some feedback to the user that there isn't any data for their area?

Really great apart from that.

There is dynamic content on the page that is updated by each API call

the onClick event can be a security risk because a user can go in to the html and edit it to do what they want.

<button onclick="dropDown()" class="dropbtn">Month selector</button>

it's generally more secure to use an event listener, so you want to avoid using onclick where you can.

Your code is really tidy & readable!

Forgive me for this rather controversial issue. I love your code... but I think it could be slightly improved by replacing some of your for loops by using more forEach, map or reduce methods.

For example, the code below could be changed to categories.forEach(...)

for(let i = 0; i < categories.length; i++){
let newLine = document.createElement("li");
let parentCrimes = document.querySelector(".categoriesOfCrimes");
parentCrimes.appendChild(newLine);
newLine.setAttribute("class", "crimes");

   newLine.textContent = `${categories[i]}: ${numbers[i]}`;
  }

Here is an example of how we used for Each in a similar scenario:
// Function for creating list items
function listCreation(str) {
var listItem = document.createElement("li");
listItem.textContent = str;
recipeIngredients.appendChild(listItem);
}

// Function to add each ingredient
function addIngredients() {
recipeIngredients.textContent = "";
ingredients.forEach(c => listCreation(c));
}

Well done!

Seems like you focused on User Journey early; made it the focus of your project; and stuck to it throughout.

It is also very clear how you worked together, what steps you took and what pitfalls you overcame because of your well-written README.
⭐

Your tests are clear in their purpose and check some useful things.

Excellent job! 🥇

Use GET with the police API

The search and month buttons stay highlighted when you've clicked them - I think it would be nice if the border disappeared..

pretty good test coverage for the project

good for keeping up with testing though, it's hard to keep on top of doing tests with such limited time.

Love that regex...what a beast of a regex. Well done on sorting that out.

Adding form element to html skeleton.

I noticed a tiny bug: After searching for a valid postcode, when I type in an invalid postcode the list of crimes disappears but the number of crimes stays visible. See image below

Just wanted to say that I love the idea! 😄

Stringify accepts a variable and returns that variable.

From functions.js, lines 10-12:

stringify: function (input) { return input; },

If you pass it a number it will return a number i.e. typeof(input) will return "number".

Love your app and will be using it for our flat hunt :)

As a user, it would be great if I can see the month that is currently selected, either by making the dropdown menu selection visible or displaying some text (maybe in the lines of Number of crimes in January 2019)