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.

⁠

Structuring content with HTML - Learn web development | MDN HTML is the technology that defines the content and structure of any website. Written properly, it should also define the semantics (meaning) of the content in a machine-readable way, which is vital for accessibility, search engine optimization, and making use of the built-in features browsers provide for content to work optimally. This module covers the basics of the language, before looking at key areas such as document structure, links, lists, images, forms, and more. developer.mozilla.org⁠

⁠

CSS styling basics - Learn web development | MDN CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides all the CSS fundamentals you'll need for now, including syntax, features, and techniques. 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, garbage-collected, dynamic language, supporting multiple paradigms such as imperative, functional, and object-oriented. 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 ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.