Fellowship of the Ring

Developer
Yang Li
Size
2,639 Kb
Views
42,483
  1. Fellowship of the Ring Previews
  2. Fellowship of the Ring HTML Codes
  3. Fellowship of the Ring CSS Codes
  4. Fellowship of the Ring JS Codes

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 Previews
IQ Test

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(); } )
})
Fellowship of the Ring - Script Codes
Fellowship of the Ring - Script Codes
Home Page Home
Developer Yang Li
Username aussieyang
Uploaded July 13, 2022
Rating 3
Size 2,639 Kb
Views 42,483
Do you need developer help for Fellowship of the Ring?

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!

Yang Li (aussieyang) Script Codes
Name
Drumkit
Mac Bar
Animated Clock
My Friends Starter
Battleships
Geography Quiz
Sunny Day Driving Starter
Progress Bar
Animated Clock Starter
Googly Eye
Create amazing blog posts with AI!

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!