Code Cards - lynne.codes

Image Change on Hover

with CSS

HTML

<img class="preview-img" 
    src="images/Avatar-EyesOpen.svg">

CSS

.avatar:hover {
    content: url("images/Avatar-
    Happy.svg");
}

Text Change on Click

Why did the scarecrow win an award?

with JavaScript

HTML

<id="joke">Why did the scarecrow win an 
    award?</p>
<button type="button" 
    onclick='document.
    getElementById("joke").innerHTML =
    "Because he was outstanding in his 
    field"'>Why?
</button>

JavaScript

//see HTML

Image Change on Click

with JavaScript

HTML

<img class="preview-img" 
    src="images/Avatar-EyesOpen 2.svg">

<button onclick="eyesOpen()">Eyes Open
    </button>

<button onclick="eyesClosed()">Eyes Closed
    </button>

JavaScript

function eyesOpen() {
    document.getElementById("avatar-img2")
    .src="images/Avatar-EyesOpen 2.svg";
}

function eyesClosed() {
    document.getElementById("avatar-img2")
    .src="images/Avatar-Happy 2.svg";
}

Image Change on Hover

with JavaScript

HTML

<img src="Avatar-EyesOpen.png" 
    onmouseover="makeImageLaugh(this)" 
    onmouseout="makeImageSmile(this)">

JavaScript

function makeImageLaugh(image) {
    image.src = "Avatar-Happy.png";
}

function makeImageSmile(image) {
    image.src = "Avatar-EyesOpen.png";
}

Alert Box on Click

with JavaScript

HTML

<button onclick="alertMe()"> 
    Click Me</button>

JavaScript

function alertMe() {
    alert("Why Hello!");
}

Countdown: Days

Days Until 2021:

with JavaScript

HTML

<p>Days Until 2021: </p>

<p id="countdownDays"></p>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var countDownDate = new Date("Jan 01, 
    2021").getTime();

var x = setInterval(
    function() {
    var now = new Date().getTime();
    var distance = countDownDate - now;
    var days = Math.floor(distance / 
        (1000 * 60 * 60 * 24));

    document.getElementById
        ("countdownDays").innerHTML = 
        days + " " + "days";
    },
);

Form with Alert Box

with JavaScript

HTML

<form class="myvisitorform" action="" 
    method="get">What is your name?
    <input type="text" name="inputbox" 
    value="">
    <input type="button" name="button" 
    value="Submit" 
    onClick="visitor(this.form)">
</form>

JavaScript

function visitor(form) {
    var visitorName = form.inputbox.value;
    alert ("Your name is " + visitorName);
}

Print Page on Click

with JavaScript

HTML

<button onclick="window.print()">
    Print This Page
</button>

JavaScript

//see HTML

Generate Random Number

Random Number (0-1):

with JavaScript

HTML

<p>Random Number (0-1):</p>

<p id="randomnum"></p>

JavaScript

document.getElementById("randomnum")
    .innerHTML = Math.random();

Solving Formulas

Convert 300 mL to oz:

with JavaScript

HTML

<p>Convert 300 mL to oz: </p>

<p id="solve"></p>

JavaScript

function toOunces(mL) {
    return (mL/30);
}

document.getElementById("solve").innerHTML = toOunces(300);