Web App From Scratch @cmda-minor-web 2020 - 2021

Link to live version 🚀

CATCH YOUR LAUGH

Web App From Scratch, a course of the minor Web Design & Development. It is a minor of the third year from the study CMD.

Table of Contents

🚀 Purpose of Project

😍 Concept

🔢 Data

🤓 Technical summary

⚙️ Installation

📁 Sources

👮 License

🚀 Purpose of Project

In this course I will learn to build a web application without frameworks or unnecessary libraries, but with vanilla HTML, CSS & JavaScript as much as possible. The end result is a modular, single page web app (SPA). Data will be retrieved from an external API of your choice, manipulated and finally shown in the UI of the App. I will learn different ways to structure code and develop my own coding style. With the gained knowledge I will be able to build interactive prototypes, based on real data. Also I will gain a better understanding of how API's, frameworks and libraries work.

😍 Concept

~ CATCH YOUR LAUGH ~

CATCH YOUR LAUGH is an application where you can amuse pictures of cats in combination with jokes 🐱 😆 . You can use this app when the atmosphere is no longer good, or there is no discussion material for a while, or you just want to laugh hard. Then this is the solution! This combination will lead to endless laughter from the user!

You may like the combination of the cat and the joke. It will be saved on the 'My Favourites' page and there you will see all your favourite combinations. You can also click on one of your favourites and you will be taken to the detail page where you will see your favourite in large format.

Live version here 🔴

Features

• By clicking on the 'ANOTHER COMBO' button you can see a different combination of a cat image and a joke
• Like your favourite combination of a cat image and a joke
• Create a favourites list with your favourite combinations of a cat image and a joke

Actor diagram

Interaction diagram

🔢 Data

APIs are:

1. Cat images - https://thecatapi.com/
2. Jokes - https://github.com/15Dkatz/official_joke_api

The data variables I used, are:

1. Cat images

• id
• url

2. Jokes

• id
• setup
• punchline

Dataset structure

1. Cat images

{
    breeds: [ ],
    id: "eg4",
    url: "https://cdn2.thecatapi.com/images/eg4.jpg",
    width: 300,
    height: 225
}

2. Jokes

{
    id: 327,
    type: "general",
    setup: "Why did Sweden start painting barcodes on the sides of their battleships?",
    punchline: "So they could Scandinavian."
}

🤓 Technical summary

This app is built, using:

.map()

filterCatData(rawCatData)

function filterCatData(rawCatData) {
  const cleanCatData = rawCatData.map((element) => {
    return {
      id: element.id,
      url: element.url,
    };
  });
  return cleanCatData;
}

.reduce()

checkDuplicateFav()

function checkDuplicateFav() {
  const newArray = favouritesArray.reduce((newArray, currentValue) => {
    if (
      !newArray.some(
        (element) => element.catData.url === currentValue.catData.url
      )
    )
      newArray.push(currentValue);
    return newArray;
  }, []);
  favouritesArray = newArray;
}

To-Do's 📝

Expand

App:

• Data fetch (getdata)
• Dynamic data via virtualDOM
• FavoritesList
• Like adds item (cat+joke) to favList
• Not the same combo's in the favourites list
• Favourite item (detail page)
• Delete favourite item from array and rerender UI
• Delete all favourites from array and rerender UI
• Redirect to detail page when clicking on unique favourite item
• Data rendered in detail page (favourite item)
• "Another combo" button fetches again without page reload (only invoking yet)
• UI is loaded when data is fetched
• Another section has to be to display:none; when page is loaded
• Empty state favourites UI

Code:

• Modules
• Async fetch (async await)
• Params function
• Feedback (Loader) to user while fetching data
• Split API-url in chunks
• Routing
• Script folder structure (helpers/utils/components)
• Init app and functions in a right way
• Functions/modules always have to return something in stead of invoking other functions
  • Do something based on the return of the function (fetch returns to main, in main invoke render function with data)
  • Invoking of functions in a correct way in a correct file (waterfall effect)
• Arrow function
• Map/filter/reduce: use 1 of the 3
• Check where to use let or const
• Descriptive function/variable names check
• BONUS: Templating
• BONUS: CSS - custom properties color

Readme:

• Transform to English language
• Screenshot app
• Actor Diagram
• Interaction Diagram
• Uitdagingen/learnings uitleggen

⚙️ Installation

1. Clone the repository:

git clone https://github.com/ralfz123/CATCH-YOUR-LAUGH.git

2. Install dependencies

npm install

3. To run the app

python -m SimpleHTTPServer 8000  

4. Go to localhost in the browser

http://localhost:8000/

📁 Sources

Credits to Joost Faber && Koop && Suus for giving interesting lectures about Web Apps and JavaScript and how to deal with it.

Code sources

• Stackoverflow (n.d.). Searching for answers on dev questions - Stackoverflow. Retrieved 02 February 2021 from https://www.stackoverflow.com

• ES6 modules - hacks.mozilla . Retrieved 10 February 2021, from https://hacks.mozilla.org/2015/08/es6-in-depth-modules/

• Array.prototype.splice() - MDN. Retrieved 16 February 2021, from https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

• Array.prototype.some() - MDN. Retrieved 1 March 2021, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

• Array.prototype.reduce() - MDN. Retrieved 1 March 2021, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

👮 License

This project from Ralf has a MIT © License