ChickTech High School Kickoff 2017/Tasks

Document your work on tasks using the template provided below:

Write a user script to count the number of words in an article and display the number at the top of the page

Wikipedia HTML article with word count added to it using Javascript.

• To my Wikipedia Javascript common page, I added the following lines, which displays the word count in an article.

var a = $("#bodyContent").text();
var wCount = a.split(" ").length;
var $wordOutput = $("<p>Word Count: " + wCount + "</p>").css("font-size", "large");
$( "#bodyContent" ).prepend($wordOutput);

Write a user script to count the number of paragraphs in an article and display the number at the top of the page

Picture of article with edited Javascript user file, which adds the number of paragraphs in an artlcle to the respective article's title page.

• To my Wikipedia Javascript common page, I added the following line, which displays the number of paragraphs in an article with the title.

$("#firstHeading").append(" " + $("p").length);

Write a user script to change the font color to red and the font face to bold

The font color is changed to red and the font face to bold.

• Changed font color of body content to red
• Changed font face of body content to bold

.mw-body-content {
	color:red !important;
}
.mw-body-content {
	font-weight:bold !important;
}

Write a user script to count the number of images in an article and display that number at the top of the page

this is the coffee page

• First, I found the tags of the images and put them into the variable "numImages"
• Then, I added numImages to the Header

var numImages = $("img").length;
var header = $("h1").text();
$("h1").text(header + " (" + numImages + " images)");

Write a user script to replace all images in an article with an image of your choice

All of the images are changed to an image of a cat.

• Changed all article images to display an image of a cat

var cat = "https://www.petmd.com/sites/default/files/sleepy-cat-125522297.jpg";
$("img").attr("srcset", cat);

Write a user script to calculate the estimated reading time of an article

the average reading time for a basketball article

• First, I collected all of the words in the article and stored them in the variable "numWords"
• then, I divided the number of words by 200 (the average wpm) to get the amount of minutes it would take to read the article

var numWords = $("#mw-content-text > div").text().split(" ").length;
var headerWords = $("h1").text().split(" ").length;
var totalWords = numWords + headerWords;
var timeInMinutes = totalWords / 200;
var header = $("h1").text();
$("h1").text(header + " (it will take you " + timeInMinutes + " mins to read this article)");

Write a user script to add a zoom toggle button on an article page that allows you to increase/decrease the font size of the text on an article

The script creates the magnifying glass buttons in the upper right.

• This script adds 3 buttons on the right of the article title:
  1. Zoom in by one pixel
  2. Zoom out by one pixel
  3. Toggle between the original font size and the custom font size, modified with the zoom in and out buttons
• The button images come from Google's Material Design Icons.

// toggled by toggle button. also determines which toggle button image to use
var useCustom = false;

// toggleImgs[0] to switch to custom, toggleImgs[1] to revert to default
var toggleImgs = [
	'//storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_search_black_24px.svg',
	'//storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_youtube_searched_for_black_24px.svg'
];
var zoomInImg = '//storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_zoom_in_black_24px.svg';
var zoomOutImg = '//storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_zoom_out_black_24px.svg';

// create DOM elements
$('#firstHeading').append('<div id="zoomButtons">\
<img src="' + zoomInImg + '" alt="zoom in" onclick="zoom(1)">\
<img src="' + zoomOutImg + '" alt="zoom out" onclick="zoom(-1)">\
<img id="toggleButton" src="' + toggleImgs[+ useCustom] +
'" alt="toggle zoom" onclick="toggle()">&nbsp</div>');
$('#zoomButtons').css({'float': 'right'});

// find DOM elements used later
var $bodyContent = $('.mw-body-content');
var $toggleButton = $('#toggleButton');

// sizes[0] is default, sizes[1] is custom
var sizes = [parseFloat($('.mw-body-content').css('font-size'))];
// default custom zoom of 2
sizes[1] = sizes[0] + 2;

// the + converts bool to 0 or 1 to use as array index
function updateSize() {
	$bodyContent.css({'font-size':(sizes[+ useCustom] + 'pt')});
}
function toggle() {
	useCustom = !useCustom;
	$toggleButton.attr('src',toggleImgs[+ useCustom]);
	updateSize();
}
function zoom(dif) {
	sizes[1] += dif;
	if (useCustom) {
		updateSize();
	} else {
		toggle();
	}
}