Skip to content

jq DOM sprint solutions #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mmanousos wants to merge 4 commits into
base: master
Choose a base branch
from
Open

jq DOM sprint solutions #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
47fedb5
jq dom sprint solutions
mmanousos Oct 11, 2017
0794f44
note on solution 7
mmanousos Oct 11, 2017
def057a
corrections to solutions
mmanousos Oct 12, 2017
0e52fa8
Adds revision
mmanousos Nov 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions applications.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
$(document).ready(function(){
// 1. cheeky H1
$('h1').text('Is this smart enough?');

// 2. ordered list of traversals
var traversalList = $('<ol> <li>Search for ancestors on the DOM</li> <li>Find next child element with a specific class</li> <li>Jump to "this" on the DOM</li></ol>');
$(traversalList).appendTo('h4');


// 3. change sad classes happy ones
$('.sad')
.addClass('happy')
.removeClass('sad');

// 4. change popup link
$('#annoying-popup a').attr('href', 'http://www.cashcats.biz');
// have to make sure to specify to select the link element 'a'

// 5. move popup to right and 30 pixels down
$('#annoying-popup')
.css({
'position': 'absolute',
'right': '0',
'top': '+=30px'
//modified to be 30px from original position, not 30px from top (misread the assignment)
});

// 6. replace elepsis
$('.suggested-topics')
.find('li')
.last()
.prev()
.replaceWith("<li>Super new content!</li>");

// 7. replace form input with 'textarea'

/*var textArea = $('<input type="textarea" placeholder="Tell me a story!"</input>');
$('.input-form input[type=text]').replaceWith(textArea); */
// not sure why it doesn't display differently but according to the Dev Tools, the type has been adjusted.


//this code replaces the area correctly but hard codes the placeholder instead of pulling the existing from the html.
var areaReplace = $('<textarea placeholder="Tell me a story!"></textarea>');
$('.input-form input[type=text]').replaceWith(areaReplace);


//code from other student's solution that does pull the placeholder text from the html
/* var $input = $('.input-form input[type=text]');
var placeholder = $input.attr('placeholder');
$('.input-form input[type=text]').remove();
var $textarea = $('<textarea></textarea>')
.attr('placeholder', placeholder);
$('.input-form form').prepend($textarea);*/

});
4 changes: 3 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="applications.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
Expand All @@ -29,6 +30,7 @@ <h2>
<input type="text" placeholder="Tell me a story!">
<input type="submit" value="Submit!">
</form>

</div>
<div class="suggested-topics">
<h3>
Expand Down