Style Methods

Question 1

In jQuery you can modify the value of a css property, change the color color when a user hovers over the menu class.

Answer 1

$(‘.menu’).on(‘mouseenter’, () => {
$(‘.nav’).show();
$(‘.menu’).css(‘color’, ‘#FFFFFF’);
})

Question 2

Using an object how can you make it so that you can modify the color to red, background color to blue and font size to 30 when the menu class is hovered over?

Answer 2

$('.menu').on('mouseenter', () => {
$('.nav').show();
$('.menu').css({
color: 'red',
backgroundColor: 'blue',
fontSize: 30
})
})

Question 3

Similar to the css method to change the value of a property, how can you lets say change the font size to 24px when the menu element is hovered over that lasts 200 milliseconds to complete this change?

Answer 3

$('.menu').on('mouseenter', () => {
$('.nav').show();
$('.menu').animate({
fontSize: '24px'
}, 200)
})

Question 4

Other than using the css method to modify the value of a css property, what is a better way to modify the color of an element?

Answer 4

$(‘.menu’).on(‘mouseenter’, () => {
$(‘.nav’).show();
$(‘.menu’).addClass(‘red’);
})

Question 5

What is a faster method to add and remove a class from a button? Not writing an addClass method on an element than also linking it with an removeClass method.

Answer 5

$(‘.menu-button’).on(‘click’, () => {
$(‘.nav-menu’).toggleClass(‘hide’);
$(‘.menu-button’).toggleClass(‘button-active’);
})

Question 6

If you have an textarea element in html and want whatever a user types in to copy above as a preview feature, how can you accomplish this? The preview section is a element with a class of preview. The text area has an id of text.

Answer 6

$(‘#text’).on(‘keyup’, function() {
$(‘.preview’).html($(this).val());
})

Question 7

If you want to let the user change the font family when they click an option element from the select element
and apply that family to the preview text, how can you do this?

Answer 7

$('#family').change(function() {
var familyValue = $('#family').val();
$('.preview').css('fontFamily', familyValue);
})

Question 8

If you want to change the text of an text area element versus a non text area, what is the difference. Write an example on changing the text of both.
For Text Area:

Write an keyup event handler on the id size, the font size will only change when smaller than 80.

For Non Text Area:

Write an keyup event handler on the preview class which will copy the text written in the text id text area

Answer 8

Text Area:

$(document).ready(() => {
$(#size).on('keyup', function() => {
var fontSize = $('#size').val();

if (fontSize < 80) {
$('.preview').css('fontSize', fontSize + 'px');
} else {
alert('Error, font size set to 12');
$('.preview').css('fontSize', 12 + 'px');
$('#size').val(12);
}
})

$(‘#text’).on(‘keyup’, function() => {
$(‘.preview’).html($(this).val());
})
});

Question 9

Using the change method on the changing value of the #font id, and change the font size selected to preview above the text area.

Answer 9

$(#font).change(function() {
var fontValue = $('#font').val();

$(‘.preview’).css(‘fontFamily’, fontValue);
})