itexico · tovarb · Sep 16, 2018 · Sep 17, 2018 · Sep 17, 2018 · Sep 17, 2018
diff --git a/.DS_Store b/.DS_Store
diff --git a/b-favorite-lists/.DS_Store b/b-favorite-lists/.DS_Store
diff --git a/b-favorite-lists/README.md b/b-favorite-lists/README.md
diff --git a/b-favorite-lists/assets/.DS_Store b/b-favorite-lists/assets/.DS_Store
diff --git a/b-favorite-lists/assets/images/favs.png b/b-favorite-lists/assets/images/favs.png
diff --git a/b-favorite-lists/assets/images/start.gif b/b-favorite-lists/assets/images/start.gif
diff --git a/b-favorite-lists/css/.DS_Store b/b-favorite-lists/css/.DS_Store
diff --git a/b-favorite-lists/css/assets/.DS_Store b/b-favorite-lists/css/assets/.DS_Store
diff --git a/b-favorite-lists/css/assets/bootstrap.min.css b/b-favorite-lists/css/assets/bootstrap.min.css
diff --git a/b-favorite-lists/css/main.css b/b-favorite-lists/css/main.css
@@ -0,0 +1,59 @@
+/*General*/
+
+body {
+    background-color: #f6fafc;
+}
+/* Header - Nav */
+
+nav#nav-bar {
+    background-color: #363636;
+    color: white;
+    padding: 20px;
+}
+
+h2 {
+    float: left;
+}
+
+img.logo-favs {
+    height: 15px;
+    float: left;
+}
+
+li > a#about, li > a#contact {
+    color: white;
+}
+
+/*Content Section*/
+
+section#content-section {
+    height: fit-content;
+    width: 100%;
+}
+
+div.start-now  {
+    padding-top: 25px;
+}
+
+@keyframes jump { 0% { top: 0; } 50% { top: 3px; } 100% { top: 0; } }
+
+#btnStart { position: relative; margin: 0 auto; text-align: center; animation: jump 2s infinite;
+}
+
+div.card-template {
+    min-width: 500px;
+    max-width: fit-content;
+    margin-bottom: 20px;
+}
+
+div#container-lists {
+    margin-top: 40px;
+}
+
+a.btn-add {
+    margin-right: 15px;
+}
+
+button#btnStart {
+    margin-left: 15px;
+}
diff --git a/b-favorite-lists/index.html b/b-favorite-lists/index.html
@@ -0,0 +1,102 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Favorite Lists</title>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+    <link rel="icon" href="./assets/images/favs.png" type="text/x-icon">
+    <link rel="stylesheet" href="css/assets/bootstrap.min.css">
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+    <!--Header - Nav-->
+    <header>
+        <nav id="nav-bar">
+            <h2>Favs</h2>
+            <img class="logo-favs" src="assets/images/favs.png" alt="logo-favs">
+            <ul id="list-icons" class=" nav justify-content-end">
+                <li class="nav-item">
+                    <a id="about" class="nav-link active" href="#">About</a>
+                </li>
+                <li class="nav-item">
+                    <a id="contact" class="nav-link" href="#">Contact</a>
+                </li>
+            </ul>
+        </nav>
+    </header>
+    <!--Content Section-->
+    <section id="content-section" class="row">
+        <div class="col-md-4">
+        </div>
+        <div class="start-now col-md-7">
+            <img src="assets/images/start.gif" alt="">
+            <br>
+            <br>
+            <h4>Create now your favorite list!
+                <button id="btnStart" type="button" class="btn btn-info btn-start" data-toggle="modal" data-target="#exampleModal">Start</button>
+            </h4>
+            <div id="container-lists">
+            </div>
+        </div>
+    </section>
+    <!--Modal Create Lists-->
+    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel">Add a new fav list</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <form>
+                        <div class="form-group">
+                            <label for="formGroupExampleInput">Name of list</label>
+                            <input id="nameOfList" type="text" class="form-control" id="formGroupExampleInput" placeholder="Example: movies">
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                    <button id="createBtn" class="btn btn-info btn-start" data-dismiss="modal">Create</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--Modal Create Item-->
+    <div class="modal fade add-item" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalLabel">Add an item</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <form>
+                            <div class="form-group">
+                                <input type="text" class="form-control new-item" id="formGroupExampleInput">
+                            </div>
+                        </form>
+                    </div>
+                    <div class="modal-footer">
+                        <button class="btn btn-info add-btn" data-dismiss="modal">Add</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    <!--Footer-->
+    <!--
+    <footer id="footer-section">
+        <small>© 2018. All rights reserved Favs.</small>
+    </footer>-->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="js/assets/bootstrap.min.js"></script>
+    <script src="js/app.js"></script>
+</body>
+</html>
diff --git a/b-favorite-lists/js/.DS_Store b/b-favorite-lists/js/.DS_Store
diff --git a/b-favorite-lists/js/app.js b/b-favorite-lists/js/app.js
@@ -0,0 +1,60 @@
+//Function that obtain the name of list
+function getNameL () {
+    var titleOfList = $('#nameOfList').val();
+
+    addNameL(titleOfList);
+    $('#nameOfList').val("");
+} 
+
+var cardTemplate = "<div class='card card-template'>" +
+                        "<h5 class='card-header'>Favorite  __titleOfList__</h5>" +
+                            "<div class='card-body' data-parent-type='father'>" +
+                                "<div class='card-title'></div>" +
+                                "<a href='#' class='btn btn-outline-info btn-add' data-toggle='modal' data-target='.add-item'>Add</a>" +
+                                "<a onClick='deleteItem()' class='delete-btn' href='#'><i class='fas fa-trash-alt'></i></a>" +
+                            "</div>" + 
+                    "</div>";
+
+
+//Function that fill template
+function addNameL (titleOfList) {
+    var template = "";
+    template = cardTemplate.replace(" __titleOfList__", titleOfList);
+    var containerLists = $('#container-lists');
+    containerLists.append(template);
+}
+
+//Function that obtains value of items in the fav list and adds the new item
+function valueItem () {
+    var newItem = $('.new-item').val();
+    $('.new-item').val('');
+    var contItem = document.createElement('h6');
+    contItem.append(newItem);
+
+    var generalContainer = $('.card-title');
+    generalContainer.append(contItem);
+
+    //Let to edit the content
+    $('h6').attr('contentEditable','true');
+}
+
+
+//Function that delete an item
+function deleteItem () {
+    var item = $(event.currentTarget);
+    var card = item.parent();
+    var containerCard = card.parent();
+    var generalContainer = containerCard.parent();
+
+    generalContainer.remove();
+}
+
+$(document).ready(function(){
+    $('#createBtn').click (function(){
+        getNameL();
+    })
+
+    $('.add-btn').click (function(){
+        valueItem();
+    })
+});
diff --git a/b-favorite-lists/js/assets/.DS_Store b/b-favorite-lists/js/assets/.DS_Store
diff --git a/b-favorite-lists/js/assets/bootstrap.min.js b/b-favorite-lists/js/assets/bootstrap.min.js
diff --git a/favorite-lists/.editorconfig b/favorite-lists/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/favorite-lists/.gitignore b/favorite-lists/.gitignore
@@ -0,0 +1,39 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
diff --git a/favorite-lists/README.md b/favorite-lists/README.md
@@ -0,0 +1,27 @@
+# FavoriteLists
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.2.2.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).