index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
  <link rel="icon" type="image/x-icon" href="./js.png">

</head>

<body>
  <div class="container">
    <!-- nav bar starting -->
    <nav>
      <div class="page html">
        <a href="https://mohmmadshabrani.github.io/HTML_CSS_Task/"  class="textTag">HTML & CSS</a>
      </div>
      <div class="selected page js">
        <a href=""  class="textTag">JavaScript</a>
      </div>
      <div class="page projects">
        <a href="./projectsPage.html"  class="textTag">Projects</a>
      </div>
      <div class="page masterpiece">
        <a href=""  class="textTag">Masterpiece</a>
      </div>
    </nav>
    <!-- nav bar ending -->

    <!-- starting  of task container -->
    <div class="taskContainer">
      <div class="DateSection">
        <input type="checkbox" name="d10m7" id="d10m7ck">
        <label for="d10m7ck" class="label">
          <div class="date">2023/07/09</div>
          <div class="icon">▼</div>
        </label>
        <div class="tasks">
          <a href="./Day_1/TaskOne.html" target="_blank">
            <div class="task">
              <div class="name"><span>Insert 3 numbers</span></div>
              <div class="status easy"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_1/TaskTwo.html" target="_blank">
            <div class="task">
              <div class="name"><span>3 inputs operator</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_1/TaskThree.html" target="_blank">
            <div class="task">
              <div class="name"><span>Birthdate month</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_1/SpecialTask.html" target="_blank">
            <div class="task">
              <div class="name"><span>Special task </span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
        </div>
      </div>
      <div class="DateSection">
        <input type="checkbox" name="d11m7" id="d11m7ck">
        <label for="d11m7ck" class="label">
          <div class="date">2023/07/10</div>
          <div class="icon">▼</div>
        </label>
        <div class="tasks">
          <a href="./Day_2/TaskOne.html" target="_blank">
            <div class="task">
              <div class="name"><span>13s factors </span></div>
              <div class="status easy"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_2/TaskTwo.html" target="_blank">
            <div class="task">
              <div class="name"><span>numbers rectangle</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
        </div>
      </div>
      <div class="DateSection">
        <input type="checkbox" name="d11m7" id="d11m7ck">
        <label for="d11m7ck" class="label">
          <div class="date">2023/07/11</div>
          <div class="icon">▼</div>
        </label>
        <div class="tasks">
          <a href="./Day_3/Task1.html" target="_blank">
            <div class="task">
              <div class="name"><span>Fortune Teller </span></div>
              <div class="status easy"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task2.html" target="_blank">
            <div class="task">
              <div class="name"><span>dog years</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task3.html" target="_blank">
            <div class="task">
              <div class="name"><span>Supplies for life</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task4.html" target="_blank">
            <div class="task">
              <div class="name"><span>greetings</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/task5.html" target="_blank">
            <div class="task">
              <div class="name"><span>errors</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task6.html" target="_blank">
            <div class="task">
              <div class="name"><span>errors but fixed</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/task7.html" target="_blank">
            <div class="task">
              <div class="name"><span>The cube</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task8.html" target="_blank">
            <div class="task">
              <div class="name"><span>multipler</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task9.html" target="_blank">
            <div class="task">
              <div class="name"><span>Drivers license</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task10.html" target="_blank">
            <div class="task">
              <div class="name"><span>Strings length</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task11.html" target="_blank">
            <div class="task">
              <div class="name"><span>Larger Nubmer</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task12.html" target="_blank">
            <div class="task">
              <div class="name"><span>Smaller Nubmer</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task13.html" target="_blank">
            <div class="task">
              <div class="name"><span>Shortest String</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task14.html" target="_blank">
            <div class="task">
              <div class="name"><span>Longest String</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task15.html" target="_blank">
            <div class="task">
              <div class="name"><span>isEven ?</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task16.html" target="_blank">
            <div class="task">
              <div class="name"><span>IsOdd :)</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task17.html" target="_blank">
            <div class="task">
              <div class="name"><span>Absolute value</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task18.html" target="_blank">
            <div class="task">
              <div class="name"><span>FullName (dont ask me)</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task19.html" target="_blank">
            <div class="task">
              <div class="name"><span>Average</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task20.html" target="_blank">
            <div class="task">
              <div class="name"><span>Random Number</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task21.html" target="_blank">
            <div class="task">
              <div class="name"><span>Random Number in range</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task22.html" target="_blank">
            <div class="task">
              <div class="name"><span>Uni score ....</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_3/Task23&24.html" target="_blank">
            <div class="intresting task">
              <div class="name"><span>Counter</span></div>
              <div class="status"><span>intresting</span></div>
            </div>
          </a>
        </div>
      </div>
      <div class="DateSection">
        <input type="checkbox" name="d10m7" id="d10m7ck">
        <label for="d10m7ck" class="label">
          <div class="date">2023/07/13~15</div>
          <div class="icon">▼</div>
        </label>
        <div class="tasks">
          <a href="./Day_4/Task1.html" target="_blank">
            <div class="task">
              <div class="name"><span>Dynamic TextBox</span></div>
              <div class="status easy"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_4/Task2.html" target="_blank">
            <div class="task">
              <div class="name"><span>accordion sections</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_4/Task3.html" target="_blank">
            <div class="task">
              <div class="name"><span>flags....</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_4/BunchOfTasks.html" target="_blank">
            <div class="task">
              <div class="name"><span>The rest of the tasks</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
        </div>
      </div>
      <div class="DateSection">
        <input type="checkbox" name="d10m7" id="d10m7ck">
        <label for="d10m7ck" class="label">
          <div class="date">2023/07/16</div>
          <div class="icon">▼</div>
        </label>
        <div class="tasks">
          <a href="./Day_5/Mapping_tasks.html" target="_blank">
            <div class="task">
              <div class="name"><span>Mapping tasks</span></div>
              <div class="status easy"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_5/Foreach_Tasks.html" target="_blank">
            <div class="task">
              <div class="name"><span>ForEach Tasks</span></div>
              <div class="status"><span>Easy</span></div>
            </div>
          </a>
          <a href="./Day_6/Es6.html" target="_blank">
            <div class="task">
              <div class="name"><span>ES6 tasks</span></div>
              <div class="status"><span>interesting</span></div>
            </div>
          </a>
          <a href="./Day_6/MobilePhonePrice.html" target="_blank">
            <div class="task">
              <div class="name"><span>The Mobile Register</span></div>
              <div class="status"><span>time consuming</span></div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</body>
<script defer src="main.js"></script>

</html>