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
MrOsmo
02.12.2023, 22:09
Beitrag wurde 1 Mal erneut eingestellt
Mit Bildern
Wie kann ich die Reihenfolge der Hintergrundfarben ändern?

Hallo zusammen!

ich mache gerade die Hausaufgaben in IT aber ich komme leider nicht weiter.

Wie ihr auf dem Foto bereits seht, habe ich zwei Hintergründe.

Aber das Problem ist, dass der erste Hintergrund unten sein soll und der zweite Hintergrund, der gerade unten ist, soll nach oben kommen. Also einfach gesagt, ich möchte die Reihenfolge der Hintergrundfarben ändern. Ich habe schon wirklich lange daran gesessen.

Ich weiß nicht, wie man es weiter macht. Könnte mir bitte jemand helfen?

P.S. JavaScript passt leider nicht in die Frage hinein. Ihr findet es in den Kommentaren!

Dankeschön im Voraus.

LG!

Übrigens, hier die Codes:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Tasks</title>
  <link rel="stylesheet" href="./style.css">
  <script defer src="./script.js"></script>
</head>
<body>
  <div class="bodyDiv">
  <header>
    <div class="title">
      <h1>My Tasks</h1>
    </div>
  </header>
  <main>
    <section>
      <div class="inputs">
        <input id="inputOne" type="text" placeholder="Enter your task!">
        <input id="inputTwo" type="date" placeholder="Enter your date!">
        <button id="buttonForInputs">Add task!</button>
      </div>
    </section>
    <section>
      <div class="tasks">
        <div class="date"> 
          <div class="information"></div>
        </div>
      </div>
    </section>    
   <section>
    <div class="buttons">
      <button id="buttonOne">Delete all!</button>
      <button>Change status!</button>
    </div>
   </section>
  </main>
  </div>
</body>
</html>

CSS:

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


/*BODY_AND_HTML*/
html {
background-image: linear-gradient(161deg, rgba(117, 117, 117, 0.03) 0%, rgba(117, 117, 117, 0.03) 50%,rgba(8, 8, 8, 0.03) 50%, rgba(8, 8, 8, 0.03) 100%),linear-gradient(59deg, rgba(245, 245, 245, 0.05) 0%, rgba(245, 245, 245, 0.05) 50%,rgba(68, 68, 68, 0.05) 50%, rgba(68, 68, 68, 0.05) 100%),linear-gradient(286deg, rgba(107, 107, 107, 0.07) 0%, rgba(107, 107, 107, 0.07) 50%,rgba(7, 7, 7, 0.07) 50%, rgba(7, 7, 7, 0.07) 100%),linear-gradient(123deg, rgba(9, 9, 9, 0.09) 0%, rgba(9, 9, 9, 0.09) 50%,rgba(120, 120, 120, 0.09) 50%, rgba(120, 120, 120, 0.09) 100%),linear-gradient(170deg, rgba(202, 202, 202, 0.01) 0%, rgba(202, 202, 202, 0.01) 50%,rgba(19, 19, 19, 0.01) 50%, rgba(19, 19, 19, 0.01) 100%),linear-gradient(210deg, rgba(64, 64, 64, 0.04) 0%, rgba(64, 64, 64, 0.04) 50%,rgba(4, 4, 4, 0.04) 50%, rgba(4, 4, 4, 0.04) 100%),linear-gradient(90deg, rgb(249, 17, 190),rgb(100, 28, 213));
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
}

/*HEADER*/

header .title {
  display: flex;
  justify-content: center;
}


header h1 {
  font-size: 4rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #fff;
}

/*MAIN*/

.tasks {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
}

.tasks .date .information p {
  margin-top: -210px;
  margin-left: -190px;
  color: #fff;
  font-weight: 100;
  font-size: 15px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.tasks .date {
  background-color: orange;
  width: 20%;
  padding-bottom: 20px;
  border-radius: 9px;
  display: none;  
}

.tasks .date .information {
  background-color: rgb(219, 182, 112);
  padding-top: 220px;
  border-radius: 5px;
  text-align: start;
  display: none;
}

.tasks .date p {
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.inputs {
 display: flex;
 justify-content: center;
 flex-direction: column;
 align-items: center;
}

.inputs input {
  width: 30%;
  height: 30px;
  border-radius: 7px;
}

.inputs #inputOne {
  margin-top: 150px;
}

.inputs #inputTwo {
  margin-top: 10px;
}

.inputs button {
  margin-top: 15px;
  width: 8%;
  height: 30px;
  margin-right: 320px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  background-image: linear-gradient(353deg, rgb(242, 82, 69),rgb(131, 28, 80));
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}

.buttons {
  display: flex;
  justify-content: center;
  margin-right: 150px;
  margin-top: 30px;
  gap: 10px;
}

.buttons button {
  width: 11%;
  height: 30px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  background-image: linear-gradient(353deg, rgb(242, 82, 69),rgb(131, 28, 80));
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}
Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
2 Antworten
Selinaaaaae
30.11.2023, 15:02
Mit Bildern
Sticky navbar funktioniert nicht?

Guten Tag, ich muss für die Schule eine Webseite erstellen und wollte eine Sticky navbar einfügen. Dabei soll der untere Teil mit La Petite France, Cathédrale, rivière kleben bleiben. Kann mir jemand helfen?

<script>
        window.onscroll = function() {myFunction()};

        var navbar = document.getElementById("navbar");
        var sticky = navbar.offsetTop;

        function myFunction() {
        if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
    }
</script>

<header>
    <section class="hero is-medium">
        <div class="hero-head">
            <nav class="navbar">
                <div class="container">
                    <div class="navbar-brand">
                        <a class="navbar-item" href="index.html">
                            <img src="cigogne_strasbourg.png" alt="Logo">
                        </a>
                        <span class="navbar-burger" data-target="navbarMenuHeroB">
                            <span></span>
                            <span></span>
                            <span></span>
                      </span>
                    </div>
                    <div id="navbarMenuHeroB" class="navbar-menu">
                        <div class="navbar-end">
                            <a class="navbar-item is-active" href="index.html">
                                Home
                            </a>
                            <a class="navbar-item" href="details.html">
                                Y arriver
                            </a>
                            <a class="navbar-item" href="anmeldung.html">
                                Composer ses vacances
                            </a>
                            <span class="navbar-item">
                              <a class="button is-info is-inverted">
                                <!--<span class="icon">
                                  <i class="fab fas fa-fingerprint"></i>
                                </span>-->
                                <span>Einloggen</span>
                              </a>
                            </span>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="hero-body">
            <div class="tile is-ancestor">
                <div class="tile is-parent">
                    <div class="tile is-child is-4 is-align-content-end">
                        <h1 class="title is-2">Strasbourg</h1>
                        <h2 class="subtitle is-4">La P'tit Venise</h2>
                    </div>
                    <div class="tile is-child is-8">
                        <figure class="image">
                            <img width="10" src="cathedralefenetre.jpg" alt="Fenêtre"/>
                        </figure>
                    </div>
                </div>
            </div>
        </div>



<div id="navbar">
            <nav class="tabs is-boxed is-fullwidth">
                <div class="container">
                    <ul>
                        <li class="is-active">
                            <a href="javascript:void(0)">La Petite France</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La Cathédrale Notre-Dame</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La rivière</a>
                        </li>
                    </ul>
                </div>
            </nav>
</div>

    </section>
</header>

CSS:

.content {
    padding: 16px;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
.sticky + .content {
    padding-top: 60px;
}
Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung
1 Antwort
NilsApps
28.11.2023, 13:15
Mit Links
Quellcode mit einem Platzierungsfehler?
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CatPhotoApp</title>
</head>
<body>
  <main>
    <h1>CatPhotoApp</h1>
    
    <section>
      <h2>Cat Photos</h2>
      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
      <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
    </section>
    
    <section>
      <h2>Cat Lists</h2>
      
      <h3>Things cats love:</h3>
      <ul>
        <li>cat nip</li>
        <li>laser pointers</li>
        <li>lasagna</li>
      </ul>
      
      <figure>
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
        <figcaption>Cats <em>love</em> lasagna.</figcaption>
      </figure>
      
      <h3>Top 3 things cats hate:</h3>
      <ol>
        <li>flea treatment</li>
        <li>thunder</li>
        <li>other cats</li>
      </ol>
      
      <figure>
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
        <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
      </figure>
    </section>
    <section>
      <h2>Cat Form</h2>
      <form action="https://freecatphotoapp.com/submit-cat-photo" method="post">
        <!-- Erstes fieldset -->
        <fieldset>
          <legend>Is your cat an indoor or outdoor cat?</legend>
          <label><input type="radio" name="indoor-outdoor" id="indoor" value="indoor"> Indoor</label>
          <label><input type="radio" name="outdoor-indoor" id="outdoor" value="outdoor"> Outdoor</label>
        </fieldset>
        <fieldset> 
          <!-- Direkt unter dem legend-Tag können weitere Inhalte hinzugefügt werden -->
          <legend>Additional Information</legend>
          
          <label for="catName">Cat's Name:</label>
          <input type="text" id="catName" name="catName" placeholder="Enter your cat's name" required>
          <label for="catAge">Cat's Age:</label>
          <input type="number" id="catAge" name="catAge" placeholder="Enter your cat's age" required>
          <label for="catColor">Cat's Color:</label>
          <input type="text" id="catColor" name="catColor" placeholder="Enter your cat's color" required>
          <label for="catPhotoURL">Cat's Photo URL:</label>
          <input type="text" id="catPhotoURL" name="catPhotoURL" placeholder="Enter cat photo URL" required>
          <button type="submit">Submit</button>
       
</fieldset>
      </form>
    </section>
  </main>
</body>
</html>

Könntet ihr mir bitte helfen das <fieldset> richtig zu platzieren.

HTML, Webseite, Webdesign, Frontend
1 Antwort
Inkognito-Nutzer
19.11.2023, 17:59
Webentwickler Freelancer - wer kümmert sich um DSGVO?

Ist es üblich das ich als Webentwickler mich auch um Datenschutz texte und funktionierenden cookie banner kümmere (nur notwendige akzeptieren, nur marketing cookies, alle akzeptieren) usw. ?

Und je nachdem verändert sich die seite weil googoe fonts oder maps zugestimmt wurde.

Wenn ich davon nichts genau erwähnt habe im veertrag nur von home, contact page und solchen sachen die rede ist.

Wie der Name sagt bin ich Webentwickler nicht jurist.

Ich würd die ins netz stellen für die person oder offline zuschicken aber was danach passiert ist nicht mein Problem sag ich mal.

vorallem wenn ich mit wordpress was mache sind da alle möglichen plugins irgendwelche tracker und der datenschutz problematisch. 

wenn ich die von Grund auf selber programmiere mit zb. react hab ich da zumindest vollen überblick. 

oder wie würdet ihr da vorgehen ? 

engagiert man da einen Anwalt ? Mach ich das und sollte mit 200€ extra rechnen für diese Implementierung oder der Kunde macht das alleine ?

Aber wie kennt der Anwalt sich aus mit react js oder wordpress plugins ? Und dann kann er garantieren/haften das die seite konform ist ? 

Bei diesen generatoren ist das ja nicht gegeben und cookie banner muss auch ordnungsgemäß funktionieren, kann nicht sein das er unter der haube garnichts macht.

Computer, Homepage, Datenschutz, HTML, Webseite, CSS, WordPress, JavaScript, Cookies, Anwalt, CMS, Freelancer, Hacker, IT-Sicherheit, Jura, Jurastudium, Jurist, PHP, Programmiersprache, Webdesign, Webentwicklung, React, Wordpress Plugin, fiverr, Woocommerce, Shopify, Angular, React Native, VueJs
2 Antworten
verreisterNutzer
19.11.2023, 16:32
Webentwickler Freelancer - wer kümmert sich um DSGVO?

Ist es üblich das ich als Webentwickler mich auch um Datenschutz texte und funktionierenden cookie banner kümmere (nur notwendige akzeptieren, nur marketing cookies, alle akzeptieren) usw. ?

Und je nachdem verändert sich die seite weil googoe fonts oder maps zugestimmt wurde.

Wenn ich davon nichts genau erwähnt habe im veertrag nur von home, contact page und solchen sachen die rede ist.

Wie der Name sagt bin ich Webentwickler nicht jurist.

Ich würd die ins netz stellen für die person oder offline zuschicken aber was danach passiert ist nicht mein Problem sag ich mal.

vorallem wenn ich mit wordpress was mache sind da alle möglichen plugins irgendwelche tracker und der datenschutz problematisch.
wenn ich die von Grund auf selber programmiere mit zb. react hab ich da zumindest vollen überblick.

oder wie würdet ihr da vorgehen ?
engagiert man da einen Anwalt ?
Aber wie kennt der sich aus mit react js oder wordpress plugins ? Und dann kann er garantieren/haften das die seite konform ist ?

Bei diesen generatoren ist das ja nicht gegeben und cookie banner muss auch ordnungsgemäß funktionieren, kann nicht sein das er unter der haube garnichts macht.

PC, Server, Homepage, Linux, HTML, IT, Webseite, CSS, WordPress, JavaScript, Recht, Freelancer, Hacker, Informatik, IT-Sicherheit, Jura, PHP, Programmiersprache, Rechtslage, Strafrecht, Webdesign, Webentwicklung, React, fiverr, Laravel
3 Antworten
Allie477
16.11.2023, 16:47
HTML-Code für Wurzelziehen/Radizieren?

Hallo,

ich bin relativ neu im Gebiet programmieren und brauche Hilfe. In unserer Info-AG haben wir die Aufgabe bekommen, einen Taschenrechner mit den Rechenzeichen +, -, *, /, ** und √ mit einem HTML-Code zu programmieren.

Das Problem, wo ich festhänge ist das √.

Ich weiß einfach nicht, wie ich es in meinen Code einbauen kann.

Hier ist, was ich soweit habe (Wurzel-Button funktioniert wie gesagt nicht):

<!DOCTYPE html>
<html>
  <head>
    <h1>Taschenrechner</h1>
    <style>
      h1 {
        font-family: Arial;
        text-align: center;
        color: navy;
      }

      body {
        font-family: Arial;
        text-align: center;
      }

      input {
        width: 100px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <form name="Taschenrechner">
      <input type="button" value="0" onClick="document.Taschenrechner.erg.value+='0'">
      <input type="button" value="1" onClick="document.Taschenrechner.erg.value+='1'">
      <input type="button" value="2" onClick="document.Taschenrechner.erg.value+='2'">
      <input type="button" value="3" onClick="document.Taschenrechner.erg.value+='3'">
      <input type="button" value="4" onClick="document.Taschenrechner.erg.value+='4'">
      <input type="button" value="5" onClick="document.Taschenrechner.erg.value+='5'">
      <input type="button" value="6" onClick="document.Taschenrechner.erg.value+='6'">
      <input type="button" value="7" onClick="document.Taschenrechner.erg.value+='7'">
      <input type="button" value="8"
 onClick="document.Taschenrechner.erg.value+='8'">
      <input type="button" value="9"
onClick="document.Taschenrechner.erg.value+='9'">
      <label1>Rechensymbole:</label1>
      <input type="button" value="+" onClick="document.Taschenrechner.erg.value+='+'">
      <input type="button" value="-" onClick="document.Taschenrechner.erg.value+='-'">
      <input type="button" value="*" onClick="document.Taschenrechner.erg.value+='*'">
      <input type="button" value="/" onClick="document.Taschenrechner.erg.value+='/'">
      <input type="button" value="**" onClick="document.Taschenrechner.erg.value+='**'">
      <input type="button" value= "Wurzel"
onClick:="document.Taschenrechner.erg.valueMath.sqrt='x'">
      <input type="button" value="=" onClick="document.Taschenrechner.erg.value=eval(document.Taschenrechner.erg.value)">
      <label2>Ergebnis:</label2>
      <input type="textfield" id="erg" value="">
      <input type="reset" value="Reset">
    </form>
  </body>
</html>
HTML, Informatik, Programmiersprache
1 Antwort
Cookie597
14.11.2023, 09:27
Mit Links
Wieso findet mein Programm die Cookies nicht(Java, Selenium)?

Hallo,ich arbeite grad an einem Programm und zwar an einem Automatischen Login weil ich das bald im Büro brauch deswegen benutzte ich aktuell als Testseite phase6.deIch greife auf die Website zu das ist kein Problem auch innerhalb dort kann ich alles steuern login ausführen auf buttons klicken etc. Doch das kann ich erst machen wenn die Cookies akzeptiert sind und mein Programm findet egal mit welchem Code die Cookies der Website nicht, wenn ich sie manuell anklicke geht der rest wieder ohne probleme, aber die Cookies machen mir zuschaffenKann mir da jemand helfen, was für Cookies das sind und wie ich darauf zugreife habe es schon mit dem xpath, cssSelector, name, id alles versucht import org.openqa.selenium.By;

Das ist mein aktueller Code(keine Cookie abfrage aktuell drin da ich testen wollte ob wenn ich manuell draufklicke dann buttons gefunden werden

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.edge.EdgeDriver;
import org.openqa.selenium.*;

import java.util.Set;
import java.util.concurrent.TimeUnit;


public class EdgeLogin {
    public static void main(String[] args) {
        // Setze den Pfad zum Microsoft Edge WebDriver
        System.setProperty("webdriver.edge.driver", "C:\\Users\\A020451\\EigeneDateien\\EdgeLogin\\msedgedriver.exe");

        // Erzeuge eine neue Instanz des EdgeDriver
        WebDriver driver = new EdgeDriver();

        // Navigiere zur Phase6-Website
        driver.get("https://www.phase6.de");



        try {
            TimeUnit.SECONDS.sleep(5);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }



        // Maximiere das Browserfenster
        driver.manage().window().maximize();

        try {
            TimeUnit.SECONDS.sleep(1);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }


        driver.findElement(By.cssSelector(".p6-icon-login")).click();


    }
}

Das ist der HTML-Code von dem Button auf der main html seite

<button id="acceptAllCookies" class="btn btn-primary" onclick="setGdprCookieAll();closeThisModal()" xpath="1">
::before
<span class="icon_check hide"></span>
::after
</button>
HTML, Java, Programmiersprache, Selenium
1 Antwort
Gitim510
10.11.2023, 17:51
Mit Bildern
html Widget programmieren mit Django Datenbank?

Hallo,

ich habe eine Django Datenbank erstellt, und möchte mein html Widget für meine Webseite damit verwalten. Die Datenbank funktioniert soweit, ich kann Datensätze hinzufügen, bearbeiten und entfernen. Wenn ich den Link in den Browser eingebe wird meine Tabelle im Browser auch mit allen Daten angezeigt und aktualisiert wenn ich in der Datenbank etwas ändere. Bette ich den html code nun aber in meine Webseite ein, wird die Tabelle angezeigt, aber ohne den Inhalten aus der Datenbank. Kann mir bei dem Problem vielleicht jemand helfen.

Vielen Dank schonmal im Voraus.

Das ist der html Code:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Stil für die gesamte Tabelle */
    table {
      border-collapse: collapse;
      width: 65%;
      margin: 20px auto;
      border: 1px solid #ccc;
      position: relative;
    }
    th, td {
      text-align: left;
      padding: 8px;
      border-right: 1px solid #ccc;
    }
    th {
      background-color: #8B0000;
      color: white;
      text-align: left;
    }
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    tr:nth-child(odd) {
      background-color: #ffffff;
    }
    td:last-child {
      border-right: none;
    }
    th:nth-child(1), td:nth-child(1),
    th:nth-child(4), td:nth-child(4) {
      width: 100px;
    }
    td:nth-child(2), th:nth-child(2),
    td:nth-child(3), th:nth-child(3) {
      width: 85px;
    }
    h1 {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Nächste Veranstaltungen</h1>
  <table>
    <tr>
      <th>Titel</th>
      <th>Datum</th>
      <th>Zeitraum</th>
      <th>Örtlichkeit</th>
    </tr>
    <!-- Schleife für die Anzeige der nächsten drei Veranstaltungen -->
    {% for event in upcoming_events %}
    <tr>
      <td>{{ event.Titel }}</td>
      <td>{{ event.Datum|date:"l, j. F Y" }}</td>
      <td>{{ event.Zeitraum }}</td>
      <td>{{ event.Örtlichkeit }}</td>
    </tr>
    {% endfor %}
  </table>
</body>
</html>

Bild zum Beitrag
HTML, Webseite, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung
2 Antworten

Meistgelesene Beiträge zum Thema HTML
Mehr meistgelesene Fragen zu HTML