-2

Right now I am trying to make a program that completes the following goals:

  1. From a local webpage, have an HTML page that underlines the words that a user clicks.
  2. If the user clicks an underlined word, it makes the word no longer underlined.
  3. When a user submits the page, it knows which words were underlined.

The problem is, I don't really know JavaScript, HTML or CSS. I know it might be a bit much to ask for someone to make something like this, I have no idea how difficult this really is, but it would be really helpful if someone could please tell me what I need to do to do this.

user3920324
  • 3
  • 1
  • 3
  • @ncksllvn I was trying not to ask for too much, that's why I said, "it would be really helpful if someone could please tell me what I need to do to do this" instead of "please do this for me" – user3920324 Aug 08 '14 at 00:06
  • Okay, I suggest learning HTML, CSS, and JavaScript and going from there. – ncksllvn Aug 08 '14 at 00:07

6 Answers6

4

Here is a solution you may want to consider:

http://jsfiddle.net/rmadhuram/kt6o6xbh/2/

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie tempor molestie. ...</p>
<button type="button">Submit</button>

CSS:

span.underline {
  text-decoration: underline;
  color: blue;
} 

span {
  cursor: pointer;
}

JavaScript:

$(function () {
    var contents = $('p').text().split(' '),
        modText = '';

    for (var i = 0; i < contents.length; i++) {
        modText += '<span>' + contents[i] + '</span> ';
    }

    $('p').html(modText);

    $('p').click(function (e) {
        $(e.target).toggleClass('underline');
    });

    $('button').click(function() {
        var selected = [];
        $('span.underline').each(function() {
            selected.push($(this).text());
        });
        alert('Selected: ' + selected.join(','));
    });
});
Rajkumar Madhuram
  • 684
  • 3
  • 9
2

You can do this in jQuery using regex. I used alex's code in this post to split all the words in a p into span.

var p = $('p');

p.html(function (index, oldHtml) {
    return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>')
});

From here, I added a function to look for clicks on the .word element, and .toggleClass("underlined") on click.

$(".word").on("click", function() {
    $(this).toggleClass("underlined");
});

In the css:

.underlined {
    text-decoration: underline;
}

You can see this live on jsfiddle.

EDIT: Sorry, saw you wanted tracking of words clicked. This is done like so:

$("#submit").on("click", function() {
    var words = new Array();
    $(".underlined").each(function() {
        words.push($(this).text());
    });
    alert(words);
});

link

Community
  • 1
  • 1
John Fish
  • 1,060
  • 1
  • 7
  • 13
2

Here's a basic skeleton to help you get started.

HTML file 'index.html':

<html>
<head>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="app.js"></script>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
  <p>Some text that the user will click<p>
  <p>Some more text that the user will click</p>
</body>
</html>

Javascript file 'app.js':

$( document ).ready(function() {
  $('p').click(function() {
    toggleUnderline(this);
  });

});

function toggleUnderline(element) {
  $(element).toggleClass('underline');
}

CSS file 'mystyle.css':

p.underlined {
  text-decoration: underline;
}
Asher G.
  • 4,903
  • 5
  • 27
  • 30
0

I only used HTML, JQuery and CSS, to show the words that were underline, you could do a loop, put an id in every word, save the ID and display the words.

HTML

<div>
<a id="1">word1</a> 
<a id="2">word2</a> 
<a id="3">word3</a>
</div>

JQuery

$('a').on('click', function() {
var word = $(this).attr('id');
$('#' + word).toggleClass('underline');
});

CSS

.underline {
   text-decoration: underline;
}
Tyron Jesus
  • 25
  • 3
0

I would add the following class to your css file:

.underline {
    text-decoration: underline;
}

When an HTML element is applied this CSS styling, it will receive an underline.

Unfortunately, the only way I see it (an amateur's perspective) is to wrap every single word in an HTML tag (let's go with <span></span> so this won't affect any current stylings). You could create a script to do so, or do it manually. So your words on the page would look like the following:

<span>Word 1, </span><span>Word 2, </span><span>Word 3, </span>

Next you would just need a simple jQuery script similar to the following:

$(document).ready(function() {
    $('span').on('click', function() {
        $(this).addClass('underline');
    });
});

I'll let you figure out reversing the underline for if a user clicks on the word again (hint, you might want to change around the code I gave you), as well as figuring out which words are already underlined. Hint: you want to use jQuery for this.

Feek
  • 640
  • 6
  • 20
0

I'm not sure exactly what your planning on using this for but here's another possible route. It really depends on what your applying this to. But like everyone else has been saying. Use jQuery or Javascript to turn your block of text into spans then use something like toggleClass() to add or remove a class that will apply underlining to it.

http://jsfiddle.net/theDreamer/mzujf6yg/

HTML

<body>
    <div class="container">
        <p class="target-paragraph">    
           Literally pour-over jean shorts keytar, swag Helvetica Odd Future fap gastropub seitan cray. Cornhole squid polaroid, readymade pour-over cred American Apparel brunch try-hard PBR art party. Fap synth kale chips put a bird on it DIY blog. Four loko master cleanse semiotics, raw denim cliche selvage DIY 3 wolf moon VHS tattooed readymade pork belly polaroid cred wolf. Pop-up fanny pack mumblecore fap. Drinking vinegar Blue Bottle Helvetica XOXO High Life single-origin coffee, Etsy plaid YOLO scenester Banksy. Banjo 8-bit distillery, mlkshk hoodie fap chillwave crucifix letterpress salvia art party flexitarian asymmetrical
        </p>

        <p class="button">Submit</p>
        <div class="word-bank">
            <h2>Your Selected Words Are</h2>
            <ul class="selected-words">

            </ul>
        </div>
    </div>
</body>

jQuery

var text = $('p.target-paragraph').text();
//break the text apart on spaces and add the strings to an array
    var words = text.split(" ");
    var newText = "";
    //create a new block of text with each word surrounded by a span
    $.each(words, function(i, val){
        newText = newText + '<span>' + val + '</span> ';
    });
    //replace the original paragraph with the new bext block
    $(".target-paragraph").html(newText);

//Clicking on Span will toggle the 'underlined' class
$('span').click(function(){
    $(this).toggleClass('underlined');
});

//clicking on the button will add underlined words to the array 'selectedWords'
$('.button').click(function() {
    var selectedWords = []; 
    $('.underlined').each(function() {
        var word = $(this).text();
        //strip off any commas or periods
        if( word.substr(-1) === '.' || word.substr(-1) === ',' ) {
            word = word.slice(0,-1);
        }
        //add the word to the array
        selectedWords.push(word);
    });

   //hide the paragraph of text and the button
    $('.target-paragraph').hide();
    $('.button').hide();
    //go through the array of selected words and and them as list items to the page
    $.each(selectedWords, function(i, val) {
        $('.selected-words').append('<li>' + val + '</li>');
    });
    $('.word-bank').show();
});

CSS

.underlined {
    text-decoration: underline;
}
.container {
    width: 50%;
    margin: 20px auto;
}
.button {
    width: 50px;
    padding: 20px 30px;
    border: 2px solid black;
    margin: auto;
}
.button:hover, span:hover {
    cursor: pointer;
}
.selected-words {
    list-style: none;
    border: 1px solid black;
}
.selected-words li {
    display: inline-block;
    padding: 10px;
}
.word-bank {
    display: none;
    text-align: center;
}
theDreamer
  • 1
  • 1