Fellowship of the Ring
How do I make an fellowship of the ring?
What is a fellowship of the ring? How do you make a fellowship of the ring? This script and codes were developed by Yang Li on 13 July 2022, Wednesday.
Fellowship of the Ring - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fellowship of the Ring</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="midEarth"> <div id="rivendell"> <p id="frodo">- Frodo & Sam</p> <p id="merry">- Merry & Pip</p> <p id="gandalf">- Gandalf the Grey</p> <p id="aragorn">- Aragorn</p> <p id="boromir">- Boromir</p> <p id="legolas">- Legolas & Gimli</p> </div> <div id="moria"></div> <div id="argonath"></div> <div id="orthanc"></div> <div id="fangorn"></div> <div id="marsh"></div>
</div>
<button>Start</button> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Fellowship of the Ring - Script Codes CSS Codes
#midEarth { width: 1025px; height: 770px; background-image: url("http://static.giantbomb.com/uploads/original/0/9566/404966-midearthmap.jpg"); position: relative;
}
p { color: white; margin: 0;
}
#rivendell { position: absolute; left: 500px; top: 250px
}
#moria { position: absolute; left: 510px; top: 330px
}
#argonath { position: absolute; left: 650px; top: 430px
}
#orthanc { position: absolute; left: 500px; top: 420px
}
#fangorn { position: absolute; left: 520px; top: 360px
}
#marsh { position: absolute; left: 700px; top: 420px
}
button { margin-left: 470px; font-size: 2em;
}
Fellowship of the Ring - Script Codes JS Codes
// All JS code in this project should be written by students - the starter code should only contain comments and function declarations begin(), broken().
// All the steps should be followed in this project one by one:
function begin() { // 1. Fellowship leaves Rivendell and arrive at Moria $("#moria").append($("#rivendell p")); // 2. Gandalf falls fighting the Balrog $("#gandalf").remove(); // 3. Fellowship passes the Argonath $("#argonath").append($("#moria p")); // 4. Boromir falls fighting Saruman's orcs $("#boromir").remove();
}
function broken() { // 5. Fellowship breaks - Merry and Pip are captured to Orthanc $("#orthanc").append($("#merry")); // 6. Aragorn & Legolas & Gimli go after Merry & Pip, going to Fangorn Forest $("#fangorn").append($("#aragorn")).append($("#legolas")); // 7. Gandalf is alive in Fangorn Forest and is now "the White" $("#fangorn").append("<p id='gandalf'>- Gandalf the White</p>"); // 8. Frodo and Sam go to the Dead Marshes $("#marsh").append($("#frodo")); // 9. They meet Gollum there $("#marsh").append("<p id='gollum'>- Gollum</p>");
}
// Queuing functions to run one after the other
// Interesting way to format functions in JS - relates to functional programming and JS callbacks
$("button").click(function(){ $( "#midEarth" ) .delay(3000) .queue(function( next ) { begin(); next(); } ) .delay(3000) .queue(function( next ) { broken(); next(); } )
})
Developer | Yang Li |
Username | aussieyang |
Uploaded | July 13, 2022 |
Rating | 3 |
Size | 2,639 Kb |
Views | 42,504 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Sunny Day Driving Starter | 1,563 Kb |
My Friends Starter | 1,573 Kb |
Progress Bar | 2,261 Kb |
Simple Hamburger Menu | 2,099 Kb |
Drumkit | 2,329 Kb |
PokemonJourney | 2,688 Kb |
Mac Bar | 2,204 Kb |
Birthday Party Starter | 1,629 Kb |
Geography Quiz | 2,136 Kb |
Animated Clock Starter | 1,571 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Wavy Road with Dashes | Jonobr1 | 2,679 Kb |
Web Spiral - p5.js | TWAIN | 2,183 Kb |
Image Hover | Johnheiner | 3,409 Kb |
Parallax.js | Zmeeey5 | 2,330 Kb |
Content Changer | Cliffpyles | 4,538 Kb |
Image grid with captions | Mchernin34 | 2,222 Kb |
BenU Maintenance Site | Ksherman | 4,893 Kb |
Wrap_Test | Mscfourn | 7,503 Kb |
Hovers with popups | Zacharyolson | 2,380 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!