Fix Linter Errors

package.json

@@ -19,6 +19,10 @@
     "eslint-plugin-import": "^2.28.0",
     "html-webpack-plugin": "^5.5.3",
     "style-loader": "^3.3.3",
+    "stylelint": "^13.13.1",
+    "stylelint-config-standard": "^21.0.0",
+    "stylelint-csstree-validator": "^1.9.0",
+    "stylelint-scss": "^3.21.0",
     "webpack": "^5.4.0",
     "webpack-cli": "^4.2.0",
     "webpack-dev-server": "^4.15.1"

src/Modules/Images.js

@@ -4,6 +4,6 @@ import logo from '../assets/brand-logo.png';
 const Navbar = () => {
   const img = document.querySelector('#logo');
   img.src = logo;
-}
+};
 
 export default Navbar;

src/Modules/counter.js

@@ -1,6 +1,5 @@
-/* eslint-disable linebreak-style */
 const mealCounter = (arr) => {
-  const nav_dishes = document.querySelector('#nav-dishes');
-  nav_dishes.textContent += ` (${arr.length})`;
-}
-export { mealCounter };
+  const navDishes = document.querySelector('#nav-dishes');
+  navDishes.textContent += ` (${arr.length})`;
+};
+export default mealCounter;

src/Modules/displayMeals.js

@@ -1,5 +1,5 @@
-import getMealList from "./getMeals"
-import { mealCounter } from "./counter"
+import getMealList from './getMeals.js';
+import mealCounter from './counter.js';
 
 const MEAL_TEMPLATE = `
 <div class="meal-thumbnail">
@@ -12,34 +12,30 @@ const MEAL_TEMPLATE = `
   </div>
   <span class="like-count"></span>
   <button class="meal-comment">Comments</button>
-</div>`
+</div>`;
 
 /* eslint-disable linebreak-style */
-const displayMeal = async ()=> {
-  const meals = await getMealList()
-  const Container = document.querySelector('#meals')
-  meals.forEach(meal => {
-    const card = document.createElement('div')
-    card.innerHTML = MEAL_TEMPLATE
-    const thumbnail = card.querySelector('.meal-thumbnail img')
-    const dish = card.querySelector('.meal-name')
-    const likes = card.querySelector('.like-count')
-    const likeButton = card.querySelector('.likeButton')
+const displayMeal = async () => {
+  const meals = await getMealList();
+  const Container = document.querySelector('#meals');
+  meals.forEach((meal) => {
+    const card = document.createElement('div');
+    card.innerHTML = MEAL_TEMPLATE;
+    const thumbnail = card.querySelector('.meal-thumbnail img');
+    const dish = card.querySelector('.meal-name');
+    const likes = card.querySelector('.like-count');
+    const likeButton = card.querySelector('.likeButton');
 
-    dish.textContent = meal.strMeal
-    thumbnail.src = meal.strMealThumb
-    likes.textContent = '0 Likes'
+    dish.textContent = meal.strMeal;
+    thumbnail.src = meal.strMealThumb;
+    likes.textContent = '0 Likes';
 
-    likeButton.addEventListener('click', ()=> {
-      handleLikeEvent(card.id)
-    })
+    card.classList.add('meal-card');
+    card.id = meal.idMeal;
 
-    card.classList.add('meal-card')
-    card.id = meal.idMeal
+    Container.appendChild(card);
+  });
+  await mealCounter(meals);
+};
 
-    Container.appendChild(card)
-  })
-  await mealCounter(meals)
-}
-
-export default displayMeal
+export default displayMeal;

src/Modules/getMeals.js

@@ -1,10 +1,10 @@
 /* eslint-disable linebreak-style */
-import { MEAL_DB_URL } from "./API-Data";
+import { MEAL_DB_URL } from './API-Data.js';
 
 const getMealList = async () => {
-  const request = await fetch(MEAL_DB_URL)
-  const {meals} = await request.json()
-  return meals
-}
+  const request = await fetch(MEAL_DB_URL);
+  const { meals } = await request.json();
+  return meals;
+};
 
-export default getMealList
+export default getMealList;

src/index.js

@@ -1,7 +1,6 @@
-import _ from 'lodash';
 import './style.css';
-import Navbar from './Modules/Images';
-import displayMeal from './Modules/displayMeals'
+import Navbar from './Modules/Images.js';
+import displayMeal from './Modules/displayMeals.js';
 
-Navbar()
-displayMeal()
+Navbar();
+displayMeal();

src/style.css

@@ -70,7 +70,7 @@ footer p {
   justify-content: center;
 }
 
-.meal-thumbnail, 
+.meal-thumbnail,
 .meal-thumbnail img {
   width: 100%;
 }

webpack.config.js

@@ -6,7 +6,7 @@ module.exports = {
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
-    clean: true
+    clean: true,
   },
   mode: 'development',
   devtool: 'inline-source-map',