Verwandte Themen

SusgUY446
05.12.2023, 10:32
Mit Bildern
wie kann man das beheben?

sidebar.css.sidebar {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background-color: #333;
    transition: right 0.3s ease; 
  }
  
  .sidebar-open {
    right: 0;
  }

.sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: relative;
}


.sidebar li {
    float: left;
  }

.sidebar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
  
.sidebar li a:hover {
    background-color: #111;
}

 

  private.php

<?php
session_start();
if(!isset($_SESSION["username"])){
  header("Location: index.php");
  exit;
}
$username = $_SESSION["username"];
 ?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    
    <!-- Import Styles -->
    <link rel="stylesheet" href="cnd/css/loader.css">
    <link rel="stylesheet" href="cnd/css/container.css">
    <link rel="stylesheet" href="cnd/css/color-changer.css">
    <link rel="stylesheet" href="cnd/css/background.css">
    <link rel="stylesheet" href="cnd/css/navbar.css">
    <link rel="stylesheet" href="cnd/css/sidebar.css">
    
    <title>Your Personal Site</title>

    <!-- import scripts -->
    <script src="cnd/js/sidebar.js"></script>
    <script src="cnd/js/loader.js"></script>

    <script>
        
        const imageFiles = [
            'baldur.jpg',
            'baldur2.jpg',
            'baldur3.jpg',
            
        ];

        
        function setRandomImage() {
            const randomIndex = Math.floor(Math.random() * imageFiles.length);
            const randomImage = imageFiles[randomIndex];
            const imgElement = document.querySelector('.random-img');
            imgElement.src = `/personal-site/images/${randomImage}`; 
        }

        
       
    </script>
    <script>
        

        function setColor(color) {
            document.body.style.backgroundColor = color;
        }

        
    </script>


  </head>
  <body>
    
  <div class="loader"></div>
  
  <div class="container">
      <h1>Hallo <?php echo $username?></h1>
      <img src="" alt="random image of my dog" width="900px" height="900px" class="random-img">
      
    <script>
      setRandomImage();
    </script>
    <style>
      .dropdown {
        position: relative;
        display: inline-block;
      }

      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 12px 16px;
        z-index: 1;
      }

      .dropdown:hover .dropdown-content {
          display: block;
      }

    </style>
    

  </div>
  
  <div class="dropdown">
    <span>Change Color</span>
    <div class="dropdown-content">
      <div class="color-changer">
        <button onclick="setColor('green')" class="button-green">Green</button>
        <button onclick="setColor('red')" class="button-red">Red</button>
        <button onclick="setColor('blue')" class="button-blue">Blue</button>
      </div>
    </div>
    </div>
    
    <div class="navbar">
      <ul>
        <li>
          <a href="index.php">Home</a>
        </li>
        <li>
          <a href="games.php">Games</a>
        </li>
        <li class="account-dropdown">
          <a href="">Account
      </li> 
      </ul>
    </div>

    <div class="sidebar" id="sidebar">
      <ul>


        <li>
          <a href="">Home</a><br>
        </li>

        <li>
          <a href="">Pricing</a><br>
        </li>

        <li>
          <a href="">Settings</a><br>
        </li>
      </ul>
    </div>

  </body>
</html>
Bild zum Beitrag
Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, PHP, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
1 Antwort
MrOsmo
03.12.2023, 22:31
javascript hilfe dringendd?

Hallo zusammen!

Ich habe angefangen eine ToDoListe zu machen und bin schon fast fertig. Allerdings muss ich noch zwei Buttons fertigen und ich weiss nicht wie. Das erste Button ist "Delete All", dieser sollte alle Aufgaben (Aufgaben der ToDoListe) löschen. Das zweite ist "Change Status", dieser sollte, sofort alle Aufgaben wegstreichen oder zeigen dass diese Aufgaben gemacht worden sind. Ich hoffe auf eure Hilfen!

Bin schon richtig müde, und muss die Aufgaben schon bis morgen abschicken..

Dankeschön im Voraus!

LG

const todoInput = document.querySelector(".todo-input");
const todoInputTwo = document.querySelector(".todo-input-two")
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
const deleteAllTodos = document.querySelector(".deleteAll button")


document.addEventListener("DOMContentLoaded", getLocalTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);


function addTodo(event) {
    event.preventDefault();
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    const newTodo = document.createElement("li");
    newTodo.innerText = `${todoInput.value}, Date: ${todoInputTwo.value}`; 
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
+
    saveLocalTodos(todoInput.value);
    
    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);


    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fas fa-trash"></li>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    
    todoList.appendChild(todoDiv);
    todoInput.value = "";
}


function deleteCheck(e) {
    const item = e.target;


    if(item.classList[0] === "trash-btn") {
        const todo = item.parentElement;
        todo.classList.add("slide");


        removeLocalTodos(todo);
        todo.addEventListener("transitionend", function() {
            todo.remove();
        });
    }


    if(item.classList[0] === "complete-btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completed");
    }
}


function filterTodo(e) {
    const todos = todoList.childNodes;
    todos.forEach(function(todo) {
        switch(e.target.value) {
            case "all": 
                todo.style.display = "flex";
                break;
            case "completed": 
                if(todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
            case "incomplete":
                if(!todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
        }
    });
}


function saveLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
}


function getLocalTodos() {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.forEach(function(todo) {
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        const newTodo = document.createElement("li");
        newTodo.innerText = todo;
        newTodo.classList.add("todo-item");
        todoDiv.appendChild(newTodo);


        const completedButton = document.createElement("button");
        completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
        completedButton.classList.add("complete-btn");
        todoDiv.appendChild(completedButton);


        const trashButton = document.createElement("button");
        trashButton.innerHTML = '<i class="fas fa-trash"></li>';
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);


        todoList.appendChild(todoDiv);
    });
}


function removeLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }



  deleteAllTodos.addEventListener("click", removeAllTodos);



    const todoIndex = todo.children[0].innerText;
    todos.splice(todos.indexOf(todoIndex), 1);
    localStorage.setItem("todos", JSON.stringify(todos));
}
HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webentwicklung, Frontend
1 Antwort
Codeline
03.12.2023, 14:09
Beitrag wurde 1 Mal erneut eingestellt
Drehen von Dokumentationen - Ratschläge?

Guten Mittag meine Liebe GuteFrage Community,

Ich betreibe seit geraumer Zeit einen YouTube Kanal mit welchem ich versuche, dass Angebot an digitalen Bildungsmedien umfassend in allen Bereichen zu erweitern.

Nun denke ich zur Zeit darüber nach, zusätzlich zu kleineren Erklärungen zu spezifischen Themen auch Dokumentationen in „größerem“ Umfang zu veröffentlichen. In Anbetracht dessen, dass ich eine angenehm anzusehende Qualität erreichen möchte, habe ich im folgenden ein Paar Fragen an euch.

Vorab: Ich benutze für den Videoschnitt die Software „Shotcut“ und zur Aufnahme der Audiospur Audacity.

  • Kennt ihr gute Möglichkeiten an Bildmaterial zu kommen, welches frei verwendet werden kann? Das was sich selbst erstellen lässt, plane ich bestmöglich selber zu tun, allerdings besitze ich weder eine Drohne für Luftaufnahmen noch habe ich Zugang zu allen Dingen dieser Welt, um diese „aufzunehmen“.
  • Kennt ihr Software, mit denen sich Diagramme oder ähnliche Darstellungen animiert „aufbauen“ lassen?
  • Kennt ihr im Allgemeinen gute Webseiten oder Tools (die passende Nutzungsrechte bieten), um einzelne Animationen zu erstellen, die ich mit meinen bisherigen Möglichkeiten nicht erstellen konnte?
  • Habt ihr gute Ansätze, Kontakt zu Leuten aufzubauen (Experten auf Fachgebieten?), die bereit sein könnten, in einer Dokumentation ihre Meinung zu einem Thema oder ihre Expertise zu eben jenem zu vertreten?
  • Bisher habe ich für verschiedene Video“Clips“ Pixabay verwendet, bin allerdings teilweise aufgrund der Lizenz besorgt, mitunter auch, da geschrieben wird, dass die Nutzungsrechte jederzeit entzogen werden können und jegliches Bildmaterial vernichtet werden müsste. Wenn ich nun eine Dokumentation schon öffentlich habe und dann ein einzelnes Material löschen müsste, könnte es unschön werden, da ich die komplette Dokumentation erneut hochladen müsste.
  • Habt ihr im Allgemeinen ergänzende Ratschläge und Tipps? Ich bin für alles offen, was gute Verbesserungsmöglichkeiten gibt und bin auch offen dazu, neue Technologien zu lernen.
  • Habt ihr Empfehlungen, wo sich gut Informationen sammeln lassen? Die gängigen Möglichkeiten sind mir natürlich bekannt.
  • An welcher Stelle sollte ich verwendete Quellen angeben? Vermutlich ist das Ende der Dokumentation der passende Ort.

Den genauen Umgang mit Blender plane ich mir in Zukunft beizubringen, allerdings wird dies seine Zeit kosten, weshalb zusätzliche Möglichkeiten an Bildmaterial und Videomaterial wie bei Pixabay praktisch wären.

Mit freundlichen Grüßen,

euer Codeline

Video, Doku, Software, YouTube, App, Videobearbeitung, Webseite, Bildung, Infos, Diagramm, Dokumentation, recherche, Videobearbeitungssoftware, Zusammenarbeit, Kooperation, Quellen, Videomaterial
1 Antwort

Meistgelesene Beiträge zum Thema Webseite

Mehr meistgelesene Fragen zu Webseite