Adding task list to my HTML using javascript and css

Question

So I am making a task list for my html like you can see here in this link https://jualston.github.io/wingit/milestonetest.html, but i must separate the css and js into their respective folders and link them to my main html https://github.com/jualston/wingit/blob/master/P2milestone1.html (noted here)

my question is how come it works for the first link and not the second?

-Js

var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

// Create a new list item when clicking on the "Add" button
function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var inputValue1 = document.getElementById("myInput1").value;
  var t = document.createTextNode(inputValue);
     var s = document.createTextNode(inputValue1);
  li.appendChild(t);
  
  if (inputValue1== 1){
 li.style.backgroundColor = "#8cf458";
 
 
  }
  else if (inputValue1==2){
   li.style.backgroundColor = "#faed52";
    
  }
  else if (inputValue1==3){
     li.style.backgroundColor = "#ff5c5c";
  
  }
 if(inputValue1 <1){
 
  alert("Only numbers between 1-3!!");
  }
   if(inputValue1 >3){
 
  alert("Only numbers between 1-3!!");
  }
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}

-css

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  min-width: 250px;
}

/* Include the padding and border in an element's total width and height */
* {
  box-sizing: border-box;
}

/* Remove margins and padding from the list */
ul {
  margin: 0;
  padding: 0;
}

/* Style the list items */
 ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: none;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  
  /* make the list items unselectable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
 ul li:nth-child(odd) {
  background: #f9f9f9;
}

/* Darker background-color on hover */
ul li:hover {
  background: #ddd;
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

/* Style the close button */
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}

/* Style the header */
.header {
  background-color: #f4a3dc;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
  padding: 50px;
  width: 15%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}

.addBtn:hover {
  background-color: #bbb;
}
</style>
</head>
<body>

MainHtml

<!doctype html>

    <style>
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    border: 4px outset black;

  }
  </style>
    </head>
    <body>
      <nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <!-- Brand -->
    <a class="navbar-brand" href="#">Wingit</a>

    <!-- Links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="https://github.com/jualston/wingit" target="_blank">Github</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>

      <!-- Dropdown -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Menu
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#profile_page">Profile</a>
          <a class="dropdown-item" href="#education_summary">Education </a>
          <a class="dropdown-item" href="#work_experience">Work/Experience </a>
            <a class="dropdown-item" href="#program_knowledge">Programming </a>
            <a class="dropdown-item" href="#personal_interest">Hobbies </a>
            <a class="dropdown-item" href="#websites_used">Most Used Websites </a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
          Project 1
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="https://jualston.github.io/wingit/milestone1.html" target="_blank">Assignment Milestone 1</a>
          <a class="dropdown-item" href="https://jualston.github.io/wingit/milestone2.html"target="_blank">Assignment Milestone 2</a>
          <a class="dropdown-item" href="https://jualston.github.io/wingit/milestone3.html" target="_blank">Assignment Milestone 3</a>
        </div>
      </li>
    </ul>
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown navbar-dark">
          Project 2
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="https://jualston.github.io/wingit/P2milestone1.html" target="_blank">Assignment Milestone 1</a>
        </div>
      </li>
    </ul>
  </nav>
  <br>







  <div class="goldborder">
    <a id="profile_page">.</a>
    <div id="Pinkfont">Welcome to my Profile Page:</div>
    <p class="a">Name: Julius Alston     Major: Computer Science      Year:Senior.</p>
  </div>
  <title>Julius Alston Profile</title>
   <img src="headshot.jpg" alt="Paris" class="center"  border=0px   witdh= 300 height= 400>
  <div class="goldborder">
  <a id="education_summary">.</a>
   <div id="Pinkfont">Education Summary:</div>
  </div>
  <p class="a"> My only education experiences fall under K-12 and Undergraduate.</p>
  <ul> 
  <li> Degree/Diplomas: </li>
  <li> High School Diploma </li>
  <li> (May 2021) Degree:Bacherlors in Computer Science </li>
  </ul>
  <div class="goldborder">
  <a id="work_experience">.</a>
  <div id="Pinkfont">Work Experience:</div>
  </div>
  <hr> 
    <table class="table table-dark table-hover">
      <thead>
        <tr>
          <th>Company</th>
          <th>Occupation Title</th>

        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Harmon Discount</td>
          <td>Cashier</td>

        </tr>
        <tr>
          <td>Hudson Pool Management</td>
          <td>Lifeguard</td>

        </tr>
        <tr>
          <td>OnewayMoving</td>
          <td>Hauler</td>

        </tr>
      </tbody>
    </table>
  </div>
  </table>
  <div class="goldborder">
  <a id="program_knowledge"></a>
   <div id="Pinkfont">Programming Skills:</div>
  </div>
  <ul> Programming languages: 
  <li><span style="color:gold;font-weight:bold font-size: large;">Java</span>: Adequate:</li>
  <li><span style="color:gold;font-weight:bold font-size: large;">Python</span>:Beginner </li>
  <li> <span style="color:gold;font-weight:bold font-size: large;">R</span>: Beginner</li>
  <li> <span style="color:gold;font-weight:bold font-size: large;">SQL</span>: beginner</li>
  </ul>
  <div class="goldborder">
  <a id="personal_interest"></a>
   <div id="Pinkfont">Personal Interest/Favorite things in life:</div>
  </div>

  <p> I like to call myself a dabbler because i tried alot out and ended up liking it. The main things i do though:
  <ul>
  <li class="a"> Play basketball</li>
  <li class="a"> Stream on Twitch</li>
  <li class="a"> Hiking(Summer)</li>
  <li class="a"> Code</li>
    <div class="containe<div class="row">
          <div class="row">
          <div class="col-md-3">
         <p class="a"> <div class="a">
                               Twitch Clip:</div>  <video width="400" height="350" controls>
    <source src=" vod-707438149-offset-21798.mp4
  " type="video/mp4">
   </video> </p>
          </div>
          <div class="col-md-3">
            <p > <div class="a">
                               Favorite TV show:</div>  <iframe width="360" height="300" src="https://www.youtube.com/embed/gIKPC-JE2E0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
   </p>
          </div>
          <div class="col-md-3">
            <p class="a"> <div class="a">
                               Favorite Song:</div>  <iframe width="360" height="300" src="https://www.youtube.com/embed/ZPCAvzIFY-s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </p>
          </div>
          <div class="col-md-3">
        <p class="a"> <div class="a">
                               Favorite Movie:</div> <iframe width="360" height="300" src="https://www.youtube.com/embed/WR7cc5t7tv8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </p>
          </div>
        </div>


  <div class="goldborder">
  <h2> Most used Websites:</h2>
  </div>
  <a id="websites_used">.</a>
  <ul> 
  <li><i class="fab fa-twitch"></i><a href="https://www.Twitter.com/" target="_blank">Twitter</a> </li>
  <li><i class="fab fa-twitter"></i><a href="https://www.Twitch.tv/Euphony.com/" target="_blank">Twitch</a> </li>
  <li><i class="fab fa-youtube"></i><a href="https://www.youtube.com/" target="_blank">Definitley Youtube!</a> </li>
  </ul>
    <br>
                                                                                      <div class="container mt-3">


  <div class="container mt-3">


  <div class="container mt-3">


      <select name="cars" class="custom-select mb-3">
        <option selected>Rate my page</option>
        <option value="Like">Pretty good page</option>
        <option value="love">Loved it</option>
        <option value="Love^2">I loved it^2</option>
      </select>
      <button type="submit" class="btn btn-dark">Submit</button>
    </form>
  </div>
     <div id="myDIV" class="header">
    <h2 style="margin:5px">My To Do List</h2>
    <input type="text" id="myInput" placeholder="Insert task">
    <input type="number" id="myInput1" placeholder="Insert Priority Number (1 being lowest to 3 being highest) ">
    <span onclick="newElement()" class="addBtn">Add</span>
  </div>

  <ul id="myUL">
               <li></li>
  </ul>

      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    </body>
  </html>

Move <meta name="viewport" ... row from the CSS file to the HEAD in your MainHtml file. — Rickard Elimää
– Rickard Elimää, Commented Oct 8, 2020 at 21:07
so i did that and still nothing i tried to isolate the task list to see what the problem was and here you can see github.com/jualston/wingit/blob/master/test2.html @RickardElimää and these are the js and cs file github.com/jualston/wingit/blob/master/tasklist.js github.com/jualston/wingit/blob/master/todolist.css use this to compare to the milestonetest link i initially put at the beginning of the question — Jualston
– Jualston, Commented Oct 8, 2020 at 22:52
Hi! Don't link to external files, because if people are searching for a solution years after your files have been removed, they won't be helped. Also, people are in general lazy and never clicks on links. Update your original post if you done something to the code. — Rickard Elimää
– Rickard Elimää, Commented Oct 9, 2020 at 7:15

Noor Ahmed Natali · Accepted Answer · 2021-01-22 05:46:10Z

0

first you have to create a .js file and save all that javascript code in it.Then create a .css file copy all the css code to that file

<html>
<head>
   <script src="myscripts.js"></script> //path of javascript file to src
   <link rel="stylesheet" href="styles.css"> //path of css file in href
</head>

</html>

helpfull links : https://www.w3schools.com/tags/tag_link.asp

https://www.w3schools.com/tags/att_script_src.asp

answered Jan 22, 2021 at 5:46

Noor Ahmed Natali

5413 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding task list to my HTML using javascript and css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related