Programming Merit Badge

Explore

Project 3: HTML/CSS/Javascript

Intro

HTML is a language made up of elements, which can be applied to pieces of text to give them different meaning in a document

CSS is used to style [your content] and lay it out.

JavaScript (JS) is a lightweight interpreted (or just-in-time compiled) programming language [that is] most well-known as the scripting language for Web pages.

⁠

Introduction to HTML - Learn web development | MDN At its heart, HTML is a language made up of elements, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML. developer.mozilla.org⁠

⁠

Learn to style HTML using CSS - Learn web development | MDN Cascading Style Sheets — or CSS — is the first technology you should start learning after HTML. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. developer.mozilla.org⁠

⁠

JavaScript | MDN JavaScript (JS) is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. developer.mozilla.org⁠

⁠

Setup

Click on:

https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst⁠

Copy/paste this text into the left side of the screen and click “Run”:

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: Helvetica, sans-serif;

margin: 10px;

background-color: #D6CEBD;

color: #003F87;

}

.circleCanvas {

border: 3px solid #9AB3D5;

}

</style>

</head>

<body>

<h2>Scouts Build Web Technology</h2>

function getTime() {

document.getElementById("thetime").style.visibility = "visible";

document.getElementById("timespan").innerHTML = Date();

}

function displayHide() {

document.getElementById("thetime").style.visibility = "hidden";

}

function displayShow() {

document.getElementById("thetime").style.visibility = "visible";

}

</script>

<h3>Going in Circles</h3>

<button class="Btn">Draw a Circle</button>

let canvasEle = document.querySelector(".circleCanvas");

let BtnEle = document.querySelector(".Btn");

BtnEle.addEventListener("click", () => {

var circle = canvasEle.getContext("2d");

circle.strokeStyle = '#CE1126'

circle.lineWidth = 5;

circle.beginPath();

// (x, y, radius, startAngle, endAngle)

circle.arc(180, 100, 90, 0, 2*Math.PI);

circle.stroke();

});

</script>

</body>

</html>

Your Turn

Make the following changes:

Change the colors of the page (background-color and color).

Add text that says “The time is: “ in front of the time that’s displayed.

Change the lineWidth and strokeStyle of the circle.

Change several different parameters of the call to circle.arc(...), see what happens.

You may find

https://www.w3schools.com/html/html5_canvas.asp⁠

to be helpful in working on this.

More Info

For more info about HTML/CSS/JavaScript visit:

Getting started with the web - Learn web development | MDN⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.