Add files via upload

evans646 · Aug 23, 2020 · 790361a · 790361a
1 parent c01b482
commit 790361a
Show file tree

Hide file tree

Showing 5 changed files with 200 additions and 0 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -0,0 +1,88 @@
+html {
+    height: 100%;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    background: #56CCF2;
+    /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #2F80ED, #56CCF2);
+    /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #2F80ED, #56CCF2);
+    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
+
+span {
+    background: #e74c3c;
+    height: 40px;
+    margin-right: 20px;
+    text-align: center;
+    color: white;
+    /* //The width is 0  */
+    width: 0;
+    display: inline-block;
+    transition: 0.2s linear;
+    opacity: 0;
+}
+
+
+/* //When hovered it should change to 40px displaying the span properties */
+
+li:hover span {
+    width: 40px;
+    opacity: 1.0;
+}
+
+.fa-edit {
+    float: right;
+}
+
+#container {
+    box-shadow: rgba(0, 0, 0, 0.1);
+    width: 360px;
+    background: #f7f7f7;
+    margin: 100px auto;
+}
+
+input {
+    border: rgba(0, 0, 0, 0);
+    font-size: 18px;
+    color: #2980b9;
+    background-color: #f7f7f7;
+    width: 100%;
+    padding: 13px 13px 13px 20px;
+    box-sizing: border-box;
+}
+
+input:focus {
+    background-color: #fff;
+    outline: none;
+    border: 3px solid #2980b9;
+}
+
+h1 {
+    background: #2980b9;
+    color: white;
+    margin: 0;
+    padding: 10px 20px;
+    text-transform: uppercase;
+    font-weight: normal;
+    font-size: 24px;
+}
+
+ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    background: #fff;
+    height: 40px;
+    line-height: 40px;
+    color: #666;
+}
+
+li:nth-child(2n) {
+    background: #f7f7f7;
+}
diff --git a/assets/js/lib/jquery-3.5.1.min.js b/assets/js/lib/jquery-3.5.1.min.js
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -0,0 +1,40 @@
+//Check off specific todo by clicking
+$("ul").on("click", "li", function() {
+    //if li is grey turn it black
+    if ($(this).css("color") === "rgb(128, 128, 128)") {
+        //turn it black
+        $(this).css({
+            color: "black",
+            textDecoration: "none"
+        });
+    }
+    //else
+    else {
+        $(this).css({
+            color: "grey",
+            textDecoration: "line-through"
+
+        });
+    }
+    //turn it's grey
+});
+//Click on X to delete todo
+$("ul").on("click", "span", function(e) { // (e) can be anything...evt,e, event etc..
+    $(this).parent().fadeOut(500, function() {
+        $(this).remove();
+    });
+    e.stopPropagation();
+});
+$("input[type='text").keypress(function(e) {
+    if (e.which === 13) {
+        //Grabbing new todo text from input
+        var TodoText = $(this).val();
+        $(this).val("");
+        //Create a new li and add to ul
+        $("ul").append("<li><span><i class='fa fa-trash'></i></span>   " + TodoText + "</li>"); //Select and element and append it to the new stuufs to it
+    }
+});
+
+$(".fa-edit").click(function() {
+    $("input[type='text").fadeToggle()
+})
diff --git a/assets/js/todo.md b/assets/js/todo.md
@@ -0,0 +1,42 @@
+$(this).css("color", "gray")
+    $(this).css("text-decoration", "line-through")
+
+
+
+
+    //Check off specific todo by clicking
+$("li").click(function(){
+    //if li is grey turn it black
+    if ($(this).css("color") === "rgb(128, 128, 128)") {
+        //turn it black
+        $(this).css({
+            color: "black",
+            textDecoration: "none"
+        });
+    }
+    //else
+    else {
+        $(this).css({
+            color: "grey",
+            textDecoration: "line-through"
+        });
+    }
+    //turn it grey
+});
+
+//You can simply replace above code with just a  simple line of code by defining a css class and adding  it 
+to the element but you will have to make a  new css file and link it to it before
+
+$("this").toggleClass("selected)
+
+.click() will only add listners for existing elements 
+.on() will add listeners for all future potential elements
+
+
+
+A new method called append
+
+
+
+Css
+box-sizing
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="assets/css/style.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+    <script src="assets/js/lib/jquery-3.5.1.min.js"></script>
+    <title>To Do App</title>
+</head>
+
+<body>
+    <div id="container">
+        <h1>TO-DO LIST <i class="fa fa-edit"></i></h1>
+        <input type="text" placeholder="Add New Todo" maxlength="40">
+        <ul>
+            <li><span><i class="fa fa-trash"></i></span> Go for a walk </li>
+            <li><span><i class="fa fa-trash"></i></span> Sing Amen</li>
+            <li><span><i class="fa fa-trash"></i></span> Dance to it</li>
+            <li><span><i class="fa fa-trash"></i></span> Wash hour</li>
+        </ul>
+    </div>
+    <script src="assets/js/script.js"></script>
+</body>
+
+</html>