Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Java script for changing class styles #2

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Java script for changing class styles #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1addc83
Needs Streamlining
troysidle Jun 28, 2022
4fa7a88
Cleaned up Code
troysidle Jun 28, 2022
1e9474c
Updated for Clarity of Function
troysidle Jun 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions SAMPLE CODE
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>New animal:</p><p id="demo"></p>

<p>
<button type="button" onclick="changeAnimal(animal1, 'moose')">Change to Moose</button>
<button type="button" onclick="changeAnimal(animal1, 'duck')">Change to Duck</button>
<button type="button" onclick="changeAnimal(animal1, 'butterfly')">Change to Butterfly</button>
</p>

<p>Old animal:</p><p id="demo2"></p>



<script>
var animal1 = "frog";
var animal2 = "butterfly";
var animal3 = "duck"
var animal4 = "goose"

document.getElementById("demo").innerHTML = animal1;
document.getElementById("demo2").innerHTML = animal2;
//document.getElementById("demo").innerHTML = myFunction("duck", animal2);

function changeAnimal(p1, p2) {
document.getElementById("demo").innerHTML = p2;
document.getElementById("demo2").innerHTML = p1;
animal1 = p2
//animal1 = p2
//animal2 = p1;
//return animal2;
}

</script>

</body>
</html>
125 changes: 52 additions & 73 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,91 +1,70 @@
<!DOCTYPE HTML>
<html>

<!DOCTYPE html>
<html lang="en-us">
<meta charset="UTF-8">
<title>Change an Element's Class with JavaScript</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="main.css">

<!-- ====================================================
Name: Building Blocks - v1.2.1
Name: Building Block - JavaScript for Class Changes
Author: Troy Sidle

This main site is now called "Under Construction", whereas individual pages used to test code are separate and named respectively.

The site is now updated with more complext styles. The main image resizes, and the sections "Education" and "Work Experience" have been updated with colors in a uniform palette.

v1.2.1 Update: CSS coding for alternating sections.
This uses JavaScript to allow a user to choose amongst three or more CSS classes to alter the apearance of a defined element. In this case, the element is <body>.
======================================================== -->


<body id="content">


<head>
<meta charset="UTF-8">
<title>CSS Testing</title>
<link href="Stylesheet.css" rel="stylesheet">
</head>
<h2>JavaScript Buttons to Change Page Apearance</h2>


<body>



<!-- The sections are the main content of the website. -->
<section class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Troy Sidle</h1>
<h2>Designer</h2>
</div>
</section>
<div>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</div>

<!--Provide Buttons to use the changeScheme to alter the apearance of "content"-->

<section class="sectionBackground">
<h3>Education
</h3>
<p>
Bachelor of Arts, Computer Science
Harding University, Searcy, AR
</p>
<p>
December 2000
</p>
</section>

<section class="sectionBackground">
<h3>Work Experience
</h3>
<h4>
The Dinex Group, New York, NY
</h4>
<p>2/2022 – 5/2022
</p>
<p>Director of Cocktails
</p>
<p>
Developing new bar programs with an emphasis on cocktail experiences
</p>
<p>
Creating systems and standards for existing bar and cocktail programs
<button type="button" onclick="changeScheme(current, 'coolColorScheme')">Change to Cool</button>
<button type="button" onclick="changeScheme(current, 'warmColorScheme')">Change to Warm</button>
<button type="button" onclick="changeScheme(current, 'greyColorScheme')">Change to Greys</button>
</p>
</section>



<!--




<h2>Batch Cocktails</h2>

<!--Track and display the changes.-->

<button onclick="document.getElementById('BookCover').style='width:50px'">Smaller Image</button>
<p>Current color scheme:</p><p id="newStyleClass"></p>

<br>
<p>Old color scheme:</p><p id="oldStyleClass"></p>


<img id="BookCover" src="https://storage.googleapis.com/buckethalffull/CSS%20Testing/BookCoverBatchCocktails.jpeg" style="width:100px">


<script>
// Selecting element
var elem = document.getElementById("content");

// Initial variable values
var start = 'none'
var current = 'NA';
var selected;


// Get the values to display.
document.getElementById("oldStyleClass").innerHTML = current;
document.getElementById("newStyleClass").innerHTML = start;

// Remove old color display and replace with new.
function changeScheme(p1, p2) {
document.getElementById("oldStyleClass").innerHTML = p1;
document.getElementById("newStyleClass").innerHTML = p2;

// Remove old color scheme and replace with new.
elem.classList.remove(p1);
elem.classList.add(p2);

// Reset the current scheme.
current = p2;
}
</script>

<button onclick="document.getElementById('BookCover').style='width:300px'">Larger Image</button>


-->

</body>
</html>
</html>
34 changes: 34 additions & 0 deletions main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
body {
background-color: whitesmoke;
}

h1 {
margin-left: 25px;
padding: 7px;
}

p {
margin-left: 25px;
padding: 7px;
}


.coolColorScheme{
background: lightblue;
color: darkblue;
}

.warmColorScheme{
background: orange;
color: darkred;


}

.greyColorScheme{
background: lightgrey;
color: darkslategray;


}