Skip to content

Instantly share code, notes, and snippets.

View Pholisa-Fatyela's full-sized avatar

Pholisa Fatyela Pholisa-Fatyela

  • Cape Town, South Africa
View GitHub Profile
@Pholisa-Fatyela
Pholisa-Fatyela / MovieApp.md
Last active June 23, 2022 12:49 — forked from Gideon877/MovieApp.md
Movie API with AlpineJS

Movie App

You are a movie lover, and you need to create your our movie app and with no subscriptions.

Create a web application that can help view for all the available movies.

Your app should be able to do the following.

Your app should be able to do the following.:

AlpineJS with ViteJS

  • Create app using Vite

npm vite create@latest

Follow the prompts:

  • Pick vanilla JS

Eslint For VsCode

ESLint is a tool for “linting” your code. It can analyze your code and warn you of potential errors. In order for it to work, you need to configure it with specific rules. Luckily, Standard provides an ESLint configuration that anyone can use.

  1. First we need to install Node.js
  2. Inside your current project. Initialize npm configuration npm init -y
  3. Now enable support for linting common JavaScript features. Past this in your terminal
    • npm i -D eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard
  4. Now create .eslintrc.js with the following contents
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Hey There!</h1>
<p>This is our interactive code editor</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Hey There!</h1>
<p>This is our interactive code editor</p>