Frontend – die besten Beiträge

Java Script wird nicht ausgeführt?

hallo, und zwar wird bei mir nicht Java Script ausgeführt. Könnt ihr mir helfen woran dass liegt???

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Quiz Wuiz</title>

<link rel="stylesheet" href="/quiz.css">

</head>

<body>

  <img src="/logo.png" alt="img" id="img" class="img">

  <h1 id="title">Today's Quiz</h1>

  <div id="quiz-container">

    <div class="questions">

      <h2 id="question"></h2>

      <ol type="A">

        <li class="option"><span id="option0" onclick="calcScore(this)"></span></li>

        <li class="option"><span id="option1" onclick="calcScore(this)"></span></li>

        <li class="option"><span id="option2" onclick="calcScore(this)"></span></li>

        <li class="option"><span id="option3" onclick="calcScore(this)"></span></li>

      </ol>

      <h4 id="stat"></h4>

    </div>

    <div class="buttons">

      <button type="button" class="next">Next</button>

    </div>

  </div>

  <!-- scoreboard section -->

  <div id="scoreboard">

    <img src="/logo.png" alt="">

    <h2 id="score-title">Your Score</h2>

    <h2 id="score"></h2>

    <button type="button" id="score-btn" onclick="backToQuiz()">Back to Quiz</button>

    <button type="button" id="check-answer" onclick="checkAnswer()">Check Answers</button>

  </div>

  

  <div id="answerBank">

    <h2>Answers :</h2>

    <ol type="1" id="answers">

    </ol>

    <button type="button" id="score-btn" onclick="backToQuiz()">Back to Quiz</button>

  </div>

  

  <script src="/quiz.js"></script>

</body>

</html>

JAVA SCRIPT:

Bild zum Beitrag
HTML, Webseite, JavaScript, HTML5, Informatik, Programmiersprache, Webentwicklung, Frontend

CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

Bild zum Beitrag
HTML, Webseite, CSS, HTML5, Webdesign, Webentwicklung, Frontend

Meistgelesene Beiträge zum Thema Frontend