DEVHIDE
Login Or Sign up

Adding task list to my HTML using javascript and css

648 Views Asked by At

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>
javascript html css tasklist
Original Q&A
1

There are 1 best solutions below

0
On

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

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in TASKLIST

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.