Add tugas materi 1

README.md

@@ -2,8 +2,24 @@
 
 Modul Pembelajaran untuk Sesi Materi Open Recruitment Administrator Laboratorium Rekayasa Perangkat Lunak 2024.
 
+## Pre-requisite
+
+- [Node.js](https://nodejs.org/en/)
+- [Yarn](https://yarnpkg.com/) | [PNPM](https://pnpm.io/) | [NPM](https://www.npmjs.com/)
+- [Git](https://git-scm.com/)
+- [VSCode](https://code.visualstudio.com/) | [Sublime Text](https://www.sublimetext.com/) | [Atom](https://atom.io/) | [Vim](https://www.vim.org/)
+
 ## Apa itu Modul Oprec?
 
 Modul ini merupakan materi pembelajaran yang digunakan untuk sesi open recruitment administrator laboratorium rekayasa perangkat lunak 2024. Modul ini berisi materi-materi yang akan dipelajari oleh peserta oprec. Modul ini juga berisi tugas-tugas yang harus dikerjakan oleh peserta oprec.
 
+## Daftar Isi
+
+- [Materi 1](./Materi_1-Tentang-Frontend.md)
+- [Materi 2](./Materi_2-Mendalami-Frontend.md)
+
 ## Pembuat Modul
+
+- [Gabbynts](https://github.com/gabbynts)
+- [Robby Pambudi](https://github.com/robbypambudi)
+- [Frederick Hidayat](https://github.com/mrHermes)

demo/modul-1/dom/assets/css/style.css

@@ -0,0 +1,90 @@
+/* BEM (Block, Element, Modifier) ​​adalah pendekatan berbasis komponen
+ untuk pengembangan web. Gagasan di baliknya adalah untuk membagi 
+ antarmuka pengguna menjadi blok-blok independen. Ini membuat pengembangan 
+ antarmuka mudah dan cepat bahkan dengan UI yang kompleks, dan memungkinkan 
+ penggunaan kembali kode tanpa menyalin dan menempel. */
+
+:root {
+    --primary-color: #333;
+    --secondary-color: #f4f4f4;
+    --danger-color: #ff0000;
+    --success-color: #00ff00;
+    --warning-color: #ffcc00;
+    --info-color: #00ccff;
+}
+
+p {
+    font-size: 16px;
+    line-height: 0.6;
+    color: #333;
+}
+
+@font-face {
+    font-family: UniFont;
+    src: url('/demo/modul-1/dom/unifont.otf');
+}
+
+body {
+    font-family: UniFont, sans-serif;
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    background-color: #f4f4f4;
+}
+
+.container {
+    width: 80%;
+    margin: auto;
+    overflow: hidden;
+}
+
+.container_xl {
+    width: 90%;
+    margin: auto;
+    overflow: hidden;
+}
+
+.header {
+    background: #f4f4f4;
+    color: #333;
+    padding-top: 30px;
+    padding-bottom: 12px;
+    border-bottom: #333 5px solid;
+}
+
+.header__title {
+    margin: 0;
+    padding: 0;
+    font-size: 24px;
+    line-height: 1.2;
+    font-weight: 600;
+    letter-spacing: 2px;
+}
+
+.header__display {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.board {
+    position: relative;
+    width: 100%;
+    padding: 12px;
+    min-height: 70vh;
+    display: flex;
+    flex-wrap: wrap;
+    border: 1px solid #333;
+}
+
+.card {
+    background: #ffffff;
+    color: #333;
+    padding: 12px;
+    margin: 12px;
+    border: 1px solid #333;
+    border-radius: 5px;
+    max-width: 300px;
+    height: 200px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}

demo/modul-1/dom/assets/js/card.js

@@ -0,0 +1,29 @@
+class Card {
+    text
+    _height = 100
+    _width = 100
+    _is_hidden = false
+
+    constructor(text) {
+        this.text = text;
+    }
+
+    set_height(height) {
+        this._height = height;
+    }
+
+    set_is_hidden(is_hidden) {
+        this._is_hidden = is_hidden;
+    }
+
+
+    render() {
+        return `
+            <div class="card" style="height: ${this._height}px; width: ${this._width}px; display: ${this._is_hidden ? 'none' : 'block'}">
+                <p>${this.text}</p>
+            </div>
+        `;
+    }
+}
+
+export default Card;

demo/modul-1/dom/assets/js/script.js

@@ -0,0 +1,24 @@
+import Card from "./card.js";
+
+(function() {
+    var headerParent = document.getElementById('header');
+    var boardParent = document.getElementById('board');
+
+    // Button 
+    var createCardButton = document.getElementById('createCardButton');
+
+    function changeCoordinatePosition(event) {
+        var coordinate_x = headerParent.getElementsByClassName('coordinate_x');
+        var coordinate_y = headerParent.getElementsByClassName('coordinate_y');
+        coordinate_x[0].innerHTML = event.clientX;
+        coordinate_y[0].innerHTML = event.clientY;
+    }
+
+    function createCard() {
+        var card = new Card('Hello World');
+        boardParent.innerHTML += card.render();
+    }
+
+    document.addEventListener('mousemove', changeCoordinatePosition);
+    createCardButton.addEventListener('click', createCard);
+})();

demo/modul-1/dom/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Demo Penggunaan DOM</title>
+    <!-- Import CSS -->
+    <link rel="stylesheet" href="/demo/modul-1/dom/assets/css/style.css">
+</head>
+<body class="container" >
+    <header class="header header__display" id="header">
+        <h1 class="header__title">Rekayasa Perangkat Lunak</h1>
+        <div>
+            <p class="header__desc">Ini adalah contoh penggunaan DOM</p>
+            <p>X : <span class="coordinate_x">00.123</span></p>
+            <p>Y : <span class="coordinate_y">00.123</span> </p>
+        </div>
+    </header>
+
+    <div class="board" id="board">     
+    </div>
+
+    <button class="btn" id="createCardButton" >Create Card</button>
+</body>
+<script src="/demo/modul-1/dom/assets/js/script.js" type="module"></script>
+
+</html>