faqs-create-entry-concept

by Bhesh Gurung

HTML

<div id="create-entry-container">
    <div id="title">
        CREATE ENTRY
    </div>
    <div class="thickLine"></div>
    <div id="question-area">
        <div class="input-label-container">enter the question below</div>
        <div class="input-border"><textarea id="questionta"></textarea></div>
    </div>
    <div id="answer-area">
        <div class="input-label-container">enter the answer below</div>
        <div class="input-border"><textarea id="answerta"></textarea></div>
    </div>
    <div id="actions-area">
        <a id="submit">submit</a>
        <span style="display: inline-block; width: 40px;"></span>
        <a id="clear-question">clear question</a>
        <a id="clear-answer">clear answer</a>
        <a id="clear">clear</a>        
    </div>
</div>

CSS

html {
    font-size: 11px;
    font-family: Helvetica, Arial, Sans-Serif;
}
*:focus {
    outline: none;
}
div.thickLine {
    border: 0 none;
    height: 2px;
    margin: 0 0 10px 0;
    background-color: #bbb;    
}
#title {
    border: 0 none; 
    padding: 2px;
    font-weight: 600;
    color: #333;
}

#create-entry-container {
    border: 0 none; 
    padding: 2px;
}

#question-area {
    border: 0 none;
    padding: 2px;
}

#answer-area {
    border: 0 none;
    padding: 2px;
    margin-top: 2px;
}

#questionta {
    resize: none;
    width: 100%;
    line-height: 14px;
    height: 42px;
    border-width: 0;
    margin: 0;
    padding: 0;
}

#answerta {
    resize: none;
    width: 100%;
    line-height: 14px;
    height: 210px;
    border-width: 0;
    margin: 0;
    padding: 0;
}

div.input-border {
    border: 1px solid #D8D8D8;
    padding: 2px;
}

div.input-label-container {
    font-weight: 600;
    background-color: #eee;
    padding: 4px;
    color: #333;
    margin: 0 0 2px 0;
}

#actions-area {
    border: 0 none;
    padding: 2px;
    margin: 10px 0 10px 0;
}

a {
    cursor: pointer;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    width: 110px;
    border: 1px solid #efefef;
    background-color: #666;
    text-align: center;
    text-decoration: none;
    color: #eee;
    font-weight: 600;
}

a:hover, a.hover { 
    background-color: #0080FF;
}

JavaScript

$(document).ready(function() {
    $( "#submit" ).on( "click", function() {
        alert( $( this ).text() );
    });
    
    $( "#clear-question" ).on( "click", function() {
        $("#questionta").val("");
    });
    
    $( "#clear-answer" ).on( "click", function() {
        $("#answerta").val("");
    });
    
    $( "#clear" ).on( "click", function() {
        $("#answerta").val("");
        $("#questionta").val("");
    });
});