Programming 1: Essentials

# Voorbeelden

# Tag Cloud

Mappen & bestanden

  • ./tag_cloud/
    • css
      • main.css
    • js
      • data.js
      • main.js
    • index.html

./tag_cloud/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tag Cloud</title>
    <link rel="stylesheet" href="./css/main.css">
    <script src="./js/data.js" defer></script>
    <script src="./js/main.js" defer></script>
</head>
<body>
    <div class="tag-cloud"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

./tag_cloud/css/main.css

@import url("https://fonts.googleapis.com/css2?family=Turret+Road:wght@400;500;700&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Turret Road", cursive;
  font-size: 20px;
  line-height: 1.52;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Turret Road", cursive;
  font-size: 3rem;
}

.tag-cloud {
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.tag-cloud__word {
  background: rgba(0, 0, 0, 0.92);
  color: rgba(255, 255, 255, 1);
  left: 0;
  position: absolute;
  top: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

./tag_cloud/js/data.js

const tagCloudData = [
  "Angular",
  "Apollo",
  "CSS",
  "Express",
  "GraphQL",
  "HTML",
  "JavaScript",
  "MongoDb",
  "MySQL",
  "Node.js",
  "PHP",
  "React",
  "SQLite",
  "Svelte",
  "Three.js",
  "Vue",
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

./tag_cloud/js/main.js

(() => {
  let $tagCloud;

  const initialize = () => {
    console.log("1. Application started!");
    cacheElements();
    buildUI();
  };

  const cacheElements = () => {
    console.log("2. Chache all exisiting DOM elements!");
    $tagCloud = document.querySelector(".tag-cloud");
  };

  const buildUI = () => {
    console.log("3. Build the user interface!");
    $tagCloud.innerHTML = generateHTMLForTagCloud();
  };

  const generateHTMLForTagCloud = () => {
    let tempStr = "",
      x = 0,
      y = 0,
      fS = 1,
      angle = 0;
    tagCloudData.forEach((word, index) => {
      x = Math.random() * this.$tagCloud.clientWidth;
      y = Math.random() * this.$tagCloud.clientHeight;
      fS = word.length / 2;
      angle = Math.random() * 365;
      tempStr += `<div class="tag-cloud__word" style="top: ${y}px; left: ${x}px; font-size: ${fS}rem; transform: rotate(${angle}deg);">${word}</div>`;
    });
    return tempStr;
  };

  initialize();
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# Master/Details Interface

Mappen & bestanden

  • ./master-detail/
    • css
      • main.css
    • js
      • main.js
    • index.html

./master-detail/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Master/Detail Interface</title>
    <link rel="stylesheet" href="./css/main.css">
    <script src="./js/main.js" defer></script>
</head>
<body>
    <div class="boxes">
        <div class="boxes__list"></div>
        <div class="boxes__box--selected">
            <span class="boxes__value">?</span>
            <div class="boxes__clicks">0</div>
        </div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

./master-detail/css/main.css

html,
body {
  background-color: white;
  margin: 0;
  padding: 0;
}

.boxes {
  --size: 3rem;
  --size-lg: 12rem;
}

.boxes .boxes__box {
  background-color: hsla(120, 100%, 30%, 0.5);
  border-radius: 0.25rem;
  border: 2px solid black;
  box-sizing: border-box;
  font-size: 1.25rem;
  height: var(--size);
  line-height: var(--size);
  margin: 0.25rem;
  text-align: center;
  width: var(--size);
}

.boxes .boxes__box:hover {
  background-color: hsl(120, 100%, 40%);
  cursor: pointer;
}

.boxes .boxes__box--selected {
  position: relative;
  background-color: hsl(120, 100%, 30%);
  color: white;
  font-weight: 900;
  margin: var(--size, 0) auto 0;
  font-size: 92px;
  height: var(--size-lg);
  line-height: var(--size-lg);
  text-align: center;
  width: var(--size-lg);
}

.boxes .boxes__box--selected .boxes__clicks {
  --size: 1rem;
  background-color: black;
  color: white;
  display: block;
  font-size: var(--size);
  font-weight: 900;
  height: var(--size);
  line-height: var(--size);
  padding: 0.5rem;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
}

.boxes .boxes__box--selected .box__value {
}

.boxes .boxes__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

./master-detail/js/main.js

(() => {
  let $boxes;
  let $boxSelectedValue;

  const initialize = () => {
    console.log("1. Application started!");
    cacheElements();
    buildUI();
    registerListeners();
  };

  const buildUI = () => {
    console.log("3. Build the user interface!");
    $boxes.innerHTML = generateHTMLForBoxes(100);
  };

  const cacheElements = () => {
    console.log("2. Cache all existing DOM elements!");
    $boxes = document.querySelector(".boxes .boxes__list");
    $boxSelectedValue = document.querySelector(
      ".boxes .boxes__box--selected .boxes__value"
    );
    $boxSelectedClicks = document.querySelector(
      ".boxes .boxes__box--selected .boxes__clicks"
    );
    boxClicks = 0;
  };

  const generateHTMLForBoxes = (amount) => {
    let tempStr = "";
    for (let i = 1; i <= amount; i++) {
      tempStr += `<div class="boxes__box" data-id="${i}">${i}</div>`;
    }
    return tempStr;
  };

  const registerListeners = () => {
    const $boxList = $boxes.querySelectorAll(".boxes .boxes__box");
    $boxList.forEach((box) => {
      box.addEventListener("click", (event) => {
        window.clicks++;
        const id = event.target.dataset.id;
        boxClicks++;
        showBoxDetails(id);
      });
    });
  };

  const showBoxDetails = (id) => {
    $boxSelectedValue.innerHTML = id;
    $boxSelectedClicks.innerHTML = boxClicks;
  };

  initialize();
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
Gebeurtenissen
© 2024 Arteveldehogeschool Laatst bijgewerkt: 27/10/2020, 18:12:45