How do I get a dropdown choice to show up on the left of an entry on this To-Do list?


Tags: javascript,jquery,html,css

Problem :

thank you for looking. Here is the codepen: http://codepen.io/mlynn/pen/WbLEeR

I'm trying to allow the user to select a number from the dropdown list, and type in a word in the "To Do" input box, and when they hit enter, they will see an entry with their "To-Do" text in the middle and the # they chose on the left of the entry.

How can this be achieved? I'm not very good at Javascript and have mostly been tinkering with premade codepens, desperately trying to put pieces together.

HTML:

<!DOCTYPE html>
<!--

-->
<html lang="en">
    <head>               
        <link type="text/css" rel="stylesheet" href="css/styletime.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="js/init.js"></script>      
    </head>


    <body>
        <section id="heady">
            <div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b><a href="index.html">Site</b></a></p></div>

            <div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">    
                    <a href="index.html">Home</a> | 
                    <a href="index.html">Generic</a> |
                    <a href="index.html">Elements</a> |
                    <a href="index.html">Sign Up</a>
            </div>


        </section>

        <section id="wrapper">
            <br><br>
            <img src="images/blacksquare.png" width="525" height="197"></img>

            <br><br><br>


            <div>
                <div style="vertical-align:top;display:inline-block;float:left;">        
                    <ul class="navbar cf">
                        <!-- <li><a href="#">item 2</a></li> -->
                        <li style="width:200px;">
                            <a href="#" class="ActiveListItem">#</a>
                            <ul>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">6</a></li>
                                <li><a href="#">7</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>                                                               


                <div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
                    <form action="">
                        <input type="text" id="todo" placeholder="Enter a To-do and hit enter">
                    </form>
                    <br>

                    <!-- <ul class="active">
                        <li>Work <a href="">X</a></li>
                        <li>Sleep <a href="">X</a></li>
                        <li>Repeat <a href="">X</a></li>
                    </ul> -->

                </div>



                <div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
                    <ul class="active">
                        <li>Work <a href="">X</a></li>
                        <li>Sleep <a href="">X</a></li>
                        <li>Repeat <a href="">X</a></li>
                    </ul>
                </div>

            </div>     
        </section>



        <section id="feety">
        I believe I exist
        </section>         




    </body>


</html>

CSS:

/*adder*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);


 * {
    padding:0;
    margin:0;
}


html {
 background:teal;
}


body {
    /*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}


a {
    color: #D9D9D9;
    text-decoration: none;
}
a:active, a:hover {
    text-decoration: underline;
}



#heady {
    text-align: center;
    width:100%;
    height:75px;
    background-color:#222;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    color:white;
    position:relative; 
}

#wrapper {
    text-align: center;
    width:1000px;
    height:1000px;
    margin-left:auto;
    margin-right:auto;
    background-color:teal;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    position:relative; 
}


#feety {
    text-align: center;
    width:100%;
    height:100px;
    background-color:darkslateblue;                       /*Back Colors*/
    font-family: Tahoma;
    font-size: 16px;
    color:white;
    position:relative; 
}










/* clearfix */
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
   * zoom: 1;
}


ul.navbar {

  background:white; 
  border-style:solid;
  border-color:gray;
  border-width:1px;
  width: 200px;
  border-radius: 4px;

}


.ActiveListItem:after {
    content: "\25BC\00a0\00a0";                        /*carat and spaces*/
    float:right;
    font-weight:900;
    padding: 0px 0px;
    font-size:100%; 
    line-height:20px;             /*keeps carat in center of text*/
}




ul.navbar li a.ActiveListItem {
    background:white !important;
    color:black;
    border-style:solid;
    border-color:white;
    border-radius:4px;
    padding:3px 5px !important;
    font-weight:normal !important;
    margin-left:14px;/* got the activeitem centered with the list text this way*/
    margin-right:0px;

}

ul.navbar li {
    position: relative;
}

ul.navbar li a {
    display: block;
    color: white;
    padding:10px 5px;
    text-decoration:none;
    transition: all .2s ease-in;

}

ul.navbar li a:hover,
ul.navbar li:hover > a {
    background:#a6d0e1; /*Leaving for now, but keep in mind things bold slowly when you change this to gradient*/
    color: #333;
    font-weight:900;

}

    ul.navbar li ul {
        margin-top: 1px;
        position: absolute;
        background: #222;
        font-size: 14px;
        min-width: 200px;
        display: none;
        z-index: 99;
        box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
        0 5px 10px rgba(0,0,0,.6);
    }

ol, ul { list-style: outside none none; }

.hidden { display: none; }







/*Lister*/



.container {
    width: 60%;
    margin: 0px auto;
}

form {  }

input,
ul {
    background: #eee;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    font-family:"Tahoma";
}

input {
    padding: 10px 10px 10px 20px;
    border: 1px solid #ccc;
}

.lister ul {
    list-style: square inside;
    padding: 10px;
}

.active { border: 1px solid #ccc; }

.inactive { display: none; }

.lister li {
    padding: 10px;
    font-weight: 600;
    color: #34495e;
}

.lister li:nth-child(odd) {
    background: #dadfe1;
    border-radius: 5px;
}

.lister li > a {
    float: right;
    text-decoration: none;
    color: #22313f;
    font-weight: bold;
    transition: all .2s ease-in-out;
}

.lister li > a:hover {
    font-size: 110%;
    color: #c0392b;
}


.lister li:before {
    content: "#";                        /*carat and spaces*/
    float:left;
    font-weight:900;
    padding: 0px 0px;
    font-size:100%; 
    line-height:20px;             /*keeps carat in center of text*/
}

JS:

// sub menus identification
$(function() {
  $('.navbar ul li a').click(function(){  
    $('.navbar > li:first-child > a').text($(this).text());
    $('.navbar > li > ul').addClass('hidden');
    $('.navbar li ul').slideToggle(100);
  });
  $('.navbar > li').mouseenter(function(){
    $(this).find('ul').removeClass('hidden');
  });
  $('.ActiveListItem').click(function(){        
    $('.navbar li ul').slideToggle(300);
  });    
});









//newList

$(document).ready(function() {  

    var ul = $('.lister ul'),
        input = $('input');

    input.focus();  

    $('form').submit(function () {
        if (input.val() !== '') {
            var inputVal = input.val();
            ul.append('<li>' + inputVal + '<a href="">X</a></li>');
            if (ul.hasClass('inactive')) {
                ul.removeClass('inactive')
                    .addClass('active');
            }
        };
        input.val('');
        return false;
    });

    ul.on('click', 'a', function (e) {
        e.preventDefault();
        $(this).parent().remove();

        if (ul.children().length == 0) {
            ul.removeClass('active')
                .addClass('inactive');
            input.focus();  
        }
    });

});

Thank you.



Solution :

I have updated a part of your code in the form submit event handler:

$('form').submit(function () {
        if (input.val() !== '') {
            var inputVal = input.val(),
                activeNumber = $('.ActiveListItem').text(); // gets the selected number

            // adds the selected number on before the inputValue:
            ul.append('<li>' + activeNumber + ' ' +inputVal + '<a href="">X</a></li>');
            if (ul.hasClass('inactive')) {
                ul.removeClass('inactive')
                    .addClass('active');
            }
        };
        input.val('');
        return false;
    });

I have placed your sample here: FIDDLE


    CSS Howto..

    How to add two images one in the right and other in the left side of the input textbox?

    How to change the font family of Highchart to Bootstrap css default font family

    How to get the bottom border to stretch fully across a page in CSS

    How to make a picture hover over others without moving the other pictures?

    How to layer elements with CSS position property?

    How to remove hover effect for some of the cells in angularjs

    How To Do Multiple Hover On List

    How do I arrange this in CSS?

    How to position two
    elements side by side?

    How can I animate my div to go from top to bottom whithout interfering with the content inside?

    How to apply an image to a CSS ordered list in WordPress?

    jQuery: How to get DIV to slide-off the screen and another to slide in?

    Divs showing and then hiding on page load

    Angularjs - bind value from directive to ng-show/hide anywhere in document

    Can someone show me how to get my CSS code to work more than once? [closed]

    how to change the CSS background-image of a class-pseudoelement by Javascript only?

    How to align text in line with icons?

    How do you stop a single-page site from automatically scrolling when resizing the browser?

    How to align social media icons in one row?

    How do I get this dropdown to be on top of the other elements

    How to move the second child in my nav menu with CSS

    How to apply “!important” from CSS via jQuery? [duplicate]

    How do I find space between lines in HTML?

    How to change background Image sizing

    how to get value from this html date-ranger?

    How to get CSS triangles to display in a row instead of vertical

    How do I maintain modularity with mixins?

    Navbar doesn't scroll to show links on smaller devices when using nicescroll plug-in

    How to select classes that are not nested? CSS

    How to place a responsive background according to content height with HTML / CSS?