Skip to content

jordyf15/Dicoding-Fundamental-Front-End-Web-Development-FinalProject

Repository files navigation

Difooding

Final Project for Dicoding's Fundamental Front-End Web Development Course

Difooding is a web site where users can search for all kinds of food recipes by name or through filter which are divided by 3 types: categories, area, and ingridients. This project was made in order to pass and earn a certificate from Dicoding's Fundamental Front-End Web Development Course.

Live Demo on CodePen

https://codepen.io/jordyf15/full/zYKbMxp

Application Usage

The site consist of 4 pages:

  1. Home page:
    This page contain the logo of Difooding and it's motto.
  2. Recipe Page:
    This page will render the food recipes that is filtered or searched by the user. The filters are divided by 3 type: Categories, Areas, and Ingridients. Each food will have it's name, picture and a button which upon clicked will open a site containing the full detail of the recipe on a new tab. On first render this page will display food based on filter japanese area.
  3. About:
    This page contain information about what is Difooding.
  4. Contacts:
    This page contain information about the creator, such as his github and linkedin profile.

Technologies Used

Development Dependencies

  • @babel/core version ^7.12.10
  • @babel/preset-env version ^7.12.11
  • babel-loader version ^8.2.2
  • css-loader version ^5.0.1
  • css-minimizer-webpack-plugin version ^1.2.0
  • eslint version ^7.17.0
  • eslint-config-google version ^0.14.0
  • html-webpack-plugin version ^4.5.1
  • style-loader version ^2.0.0
  • uglifyjs-webpack-plugin version ^2.2.0
  • webpack version "^5.14.0
  • webpack-cli version ^4.3.1
  • webpack-dev-server version ^3.11.2
  • webpack-merge version ^5.7.3

Dependencies

  • jquery version ^3.5.1
  • regenerator-runtime version ^0.13.7

Project's Requirement and Rules

Requirements

  1. Use ES6 syntax when writing javascript code for the project.
  2. Apply atleast 1 custom element.
  3. Use webpack as module bundler.
  4. Use webpack as environment when developing the project.
  5. Use API with AJAX concept to display dynamic data.

Rules

  1. Do not use other participant's project for submission.
  2. Do not use javascript framework such as React, Angular and Vue.
  3. Do not include the node modules when submitting the project as a zipped folder.

About

Difooding: Final Project for Dicoding's Fundamental Front-End Web Development Course

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published