Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
js-frontend-tutorial js-frontend-tutorial
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 0
    • Issues 0
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Analytics
    • Analytics
    • CI/CD
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • ci-general
  • js-frontend-tutorialjs-frontend-tutorial
  • Wiki
  • A sample project

Last edited by Taras Gaidukov Jul 11, 2019
Page history

A sample project

A sample project

A sample project for this tutorial will be a simple HTML page with two input fields and one button and a simple JS function that summarize number from input fields when button is clicked. The full code is available in the repository.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Frontend CI Tutorial</title>
    <script src="js/sum.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
    <div>
        <label for="input_number_1">First number:</label>
        <input id="input_number_1"><br>

        <label for="input_number_2">Second number:</label>
        <input id="input_number_2"><br>

        <button id="sum_button">Sum</button>
    </div>
    
    <div>Result is: <span id="sum_result"></span></div>
</body>
</html>

js/sum.js

const sum = (a, b) => {
    return a + b;
};

js/main.js

document.addEventListener('DOMContentLoaded', () => {
    const btn =  document.querySelector('#sum_button');
    const input1 = document.querySelector('#input_number_1');
    const input2 = document.querySelector('#input_number_2');
    const result = document.querySelector('#sum_result');
    
    btn.addEventListener('click', () => {
        const num1 = parseInt(input1.value);
        const num2 = parseInt(input2.value);

        result.innerHTML = sum(num1, num2);
    });
});
Clone repository
  • A sample project
  • Build docker image
  • Configure GitLab CI
  • Configure e2e tests for gitlab runner
  • Configure e2e tests on local machine
  • Configure unit tests on local machine
  • Confirure unit tests for gitlab runner
  • Register gitlab runner
  • What is Continuous Integration
  • Home