Hobby Page
A basic webpage about cycling and my plans to do a cycling trip. This project was an itroduction to using DOM to add functionality to a webpage. I used DOM to have the correct date displayed in the footer at all times and a countdown to my next cycling trip. It also gave me a chance to practise using lists and playing around with CSS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="my-styles.css" rel="stylesheet">
<title>Bicycles</title>
</head>
<body>
<main>
<h1 class="heading">
Cycling
</h1>
<div>
<p id="intro" class="maintext">
I've been intrested in cycling for as long as I can remember. I absolutely love getting on two wheels and exploring the countryside.
unfortunately living in London there's limited oportunites to fly along country lanes or struggle up gravel paths. So most of the time I have to settle for
riding my road bike around the quiter stretches of north London
**london cycling photo**
</p>
</div>
<div>
<img src="images/scottishhills.jpg" alt="Photo of road running through hills in scotland" id="bpimg">
<p id="bikepack" class="maintext">
When I can find the time I like to dust of the gravel bike and do some bikepacking. While bikepacking the aim is to travel reasonably light, only carrying what you need for your ride.
As a chronic overpacker I struggle with this aspect of the hobby a fair bit. So I figure I should share a checklist of what to take on your adventure (as much for my benefit as for yours)
</p>
<h2 id="listhead" class="listall subheading">Packing list</h2>
<ul id="list" class="listall">
<li><input id="Multi-tool" type="checkbox" name="BPList"> <label for="Multi-tool">Multi-tool</label></li>
<li><input id="Puncture repair kit" type="checkbox" name="BPList"> <label for="Puncture repair kit">Puncture repair kit</label></li>
<li><input id="Spare quick link" type="checkbox" name="BPList"> <label for="Spare quick link">Spare quick link</label></li>
<li><input id="Headtorch" type="checkbox" name="BPList"> <label for="Headtorch">Headtorch</label></li>
<li><input id="Tent" type="checkbox" name="BPList"> <label for="Tent">Tent</label></li>
<li><input id="Rollmat" type="checkbox" name="BPList"> <label for="Rollmat">Rollmat</label></li>
<li><input id="Powerbank" type="checkbox" name="BPList"> <label for="Powerbank">Powerbank</label></li>
<li><input id="extra1" type="checkbox" name="BPList"> <label for="extra1">extra1</label></li>
<li><input id="extra2" type="checkbox" name="BPList"> <label for="extra2">extra2</label></li>
<li><input id="extra3" type="checkbox" name="BPList"> <label for="extra3">extra3</label></li>
<li><input id="extra4" type="checkbox" name="BPList"> <label for="extra4">extra4</label></li>
</ul>
<p id="listfoot" class="listall maintext">and of course your bike!!</p>
</div>
<div>
<p id="dorset" class="maintext">
In April I will be taking some time out to do the dorset old chalkway a route starting from the dorset coast and finishing 370 miles later on the coast of Norfolk.
**Link to komoot route?**
</p>
<p id="advCountdown" class="maintext">
</p>
</div>
<div>
<p class="placeholder maintext">
If we're being totally honest I spend far more time lusting over new parts or thinking about how to buil up my nect bike than I do actually in the saddle.
I've had the opportunity to build a couple of frames for myself. My friend and I are slowly collecting up the tools required to make some more frames
So maybe soon you'll be off bikepacking on one of my frames!
</p>
</div>
</main>
</body>
<footer>
<!-- <div class="footerdiv"> -->
<p id="footer1" class="maintext">
James Sandford Smith's Hobby page for <a href="https://www.foundersandcoders.com/">Founders and Coders</a>
</p>
<p id="footer2" class="maintext">lalalallalalalalalalalala</p>
<!-- </div> -->
</footer>
<script src="script.js"></script>
CSS
body {
padding-top: 0%;
margin: 0%;
background-color: rgb(0, 0, 0);
}
.footerdiv {
background-color: rgb(0, 0, 0);
}
.heading {
color: blueviolet;
font-size: 60px;
font-family: georgia, serif;
text-align: center;
}
.subheading {
color: blueviolet;
font-size: 40px;
font-family: georgia, serif;
}
.maintext {
color: violet;
font-family: garamond, serif;
font-size: 20px;
}
#intro {
padding-right: 55%;
padding-left: 5%;
padding-bottom: 100px;
}
#bpimg {
float: left;
padding-left: 5%;
margin-right: 5%;
}
#bikepack {
padding-bottom: 0px;
padding-right: 5%;
padding-left: 55%;
}
.listall {
padding-left: 55%;
}
#list {
color: violet;
list-style-type: none;
font-size: 18px;
font-family: garamond, serif;
}
#footer1 {
display: inline;
float: inline-start;
margin-left: 1%;
background-color: rgb(0, 0, 0);
}
#footer2 {
display: inline;
float: inline-end;
margin-right: 1%;
background-color: rgb(0, 0, 0);
}
JavaScript
const dateDisplay = document.getElementById("footer2");
const advCountdownDisplay = document.getElementById("advCountdown");
let advDate = new Date(2023,03,11,10,0,0); //set bike ride time
timeOutputs(); //initialise bothe dates on site
setInterval(timeOutputs,1000) //outputs updated dates on 1 second cycle
/* function to get current time and work out time until advDate */
function timeOutputs() {
let currentTime = new Date(); //get current date/time
/* get current time and format*/
var today = currentTime;
const options = { weekday: 'long', year: '2-digit', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }; //set display format for date
today = today.toLocaleString(undefined, options); //format date
/* check if countdown is finished otherwise find time difference */
var countdown = advDate - currentTime; //find time diference in miliseconds
if (countdown < 0) { //clear timer when countdown finishes
days = 0;
hours = 0;
minutes = 0;
}
else {
var days = Math.floor(countdown / (1000 * 60 * 60 * 24)); //convert milliseconds to days, hours etc
var hours = Math.floor((countdown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((countdown % (1000 * 60 * 60)) / (1000 * 60));
}
let advString = days + " days " + hours + " hours & " + minutes + " minutes until my next adventure!!!";
/* output current date and countdown timer to site */
dateDisplay.innerText = today;
advCountdownDisplay.innerText = advString;
}
Project Gallery
A webpage showing the carious projects required for Founders and Coders pre-requisites. This project was focused on utilising responsive web design and getting comfortable with flexbox. For this project I needed to learn about flexbox and how to structure my html to properly make use of it.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>F&C Project Gallery</title>
</head>
<body>
<h1>My FAC Project Gallery</h1>
<div class="cardcontainer">
<div class="card" id="hobbypage">
<button id="hobbypagedetailstoggle" class="detailstoggle">Show more</button>
<img class="cardimg" id="hobbypageimg" src="Images/hobbypage 800by600px.jpg" alt="Screenshot of my hobby page website">
<div id="hobbypagedetails" class="hidden imgoverlap">
<div class="tabs" id="hobbypagebuttons">
<Button class="tablinks tablinkshobby" onclick="changeTabHobby(event, 'hobbypagetext')">Maintext</Button>
<Button class="tablinks tablinkshobby" onclick="changeTabHobby(event, 'hobbypagehtml')">HTML</Button>
<Button class="tablinks tablinkshobby" onclick="changeTabHobby(event, 'hobbypagecss')">CSS</Button>
<Button class="tablinks tablinkshobby" onclick="changeTabHobby(event, 'hobbypagejavascript')">JS</Button>
</div>
<div class="cardtexthobby cardtext" id="hobbypagetext">
<h2><a href="https://jamesess.github.io/Hobby-Page/">Hobby Page</a></h2>
<p class="scroll">A basic webpage about cycling and my plans to do a cycling trip. This project was an itroduction to using DOM to add functionality to a webpage. I used DOM to have the correct date displayed in the footer at all times and a countdown to my next cycling trip. It also gave me a chance to practise using lists and playing around with CSS</p>
</div>
<div class="cardtexthobby cardtext" id="hobbypagehtml">
<h2>HTML</h2>
<p class="scroll">my html</p>
</div>
<div class="cardtexthobby cardtext" id="hobbypagecss">
<h2>css</h2>
<p class="scroll">my css</p>
</div>
<div class="cardtexthobby cardtext" id="hobbypagejavascript">
<h2>Javascript</h2>
<p class="scroll">my javascrip</p>
</div>
</div>
</div>
<div class="card" id="projectgallery">
<button id="projectgallerydetailstoggle" class="detailstoggle">Show more</button>
<img class="cardimg" id="projectimg" src="Images/projectgallery 800by600px.jpg" alt="Screenshot of my hobby page website">
<div id="projectgallerydetails" class="hidden imgoverlap">
<div class="tabs" id="projectgallerybuttons">
<Button class="tablinks tablinksgallery" onclick="changeTabGallery(event, 'projectgallerytext')">Maintext</Button>
<Button class="tablinks tablinksgallery" onclick="changeTabGallery(event, 'projectgalleryhtml')">HTML</Button>
<Button class="tablinks tablinksgallery" onclick="changeTabGallery(event, 'projectgallerycss')">CSS</Button>
<Button class="tablinks tablinksgallery" onclick="changeTabGallery(event, 'projectgalleryjavascript')">JS</Button>
</div>
<div class="cardtext cardtextgallery" id="projectgallerytext">
<h2><a href="https://jamesess.github.io/Project-Gallery/">Project Gallery</a></h2>
<p class="scroll">A webpage showing the carious projects required for Founders and Coders pre-requisites. This project was focused on utilising responsive web design and getting comfortable with flexbox. For this project I needed to learn about flexbox and how to structure my html to properly make use of it.</p>
</div>
<div class="cardtext cardtextgallery" id="projectgalleryhtml">
<h2>HTML</h2>
<pre class="scroll">my html</pre>
</div>
<div class="cardtext cardtextgallery" id="projectgallerycss">
<h2>css</h2>
<p class="scroll">my css</p>
</div>
<div class="cardtext cardtextgallery" id="projectgalleryjavascript">
<h2>Javascript</h2>
<pre class="scroll">my javascrip</pre>
</div>
</div>
</div>
<div class="card" id="moviedatabase">
<button id="moviedatabasedetailstoggle" class="detailstoggle">Show more</button>
<img class="cardimg" id="moviedatabaseimg" src="Images/moviedata 800by600px.jpg" alt="Screenshot of my hobby page website">
<div id="moviedatabasedetails" class="hidden imgoverlap">
<div class="tabs" id="moviedatabasebuttons">
<Button class="tablinks tablinksmovie" onclick="changeTabMovie(event, 'moviedatabasetext')">Maintext</Button>
<Button class="tablinks tablinksmovie" onclick="changeTabMovie(event, 'moviedatabasehtml')">HTML</Button>
<Button class="tablinks tablinksmovie" onclick="changeTabMovie(event, 'moviedatabasecss')">CSS</Button>
<Button class="tablinks tablinksmovie" onclick="changeTabMovie(event, 'moviedatabasejavascript')">JS</Button>
</div>
<div class="cardtext cardtextmovie" id="moviedatabasetext">
<h2><a href="https://jamesess.github.io/Movie-Database/">Movie Database</a></h2>
<p class="scroll">This project was focused on making an interactive website. I decided I wanted to make it possible for the user to submit their own films and I also really wanted a way of picking a random film from the database. For this project I had to learn more about DOM, object manipulation and start making use of conditions in JavaScript</p>
</div>
<div class="cardtext cardtextmovie" id="moviedatabasehtml">
<h2>HTML</h2>
<p class="scroll">my html</p>
</div>
<div class="cardtext cardtextmovie" id="moviedatabasecss">
<h2>css</h2>
<p class="scroll">my css</p>
</div>
<div class="cardtext cardtextmovie" id="moviedatabasejavascript">
<h2>Javascript</h2>
<p class="scroll">my javascrip</p>
</div>
</div>
</div>
<div class="card" id="facwebpage">
<button id="facwebpagesdetailstoggle" class="detailstoggle">Show more</button>
<img class="cardimg" id="facwebpageimg" src="Images/webpage 800by600px.jpg" alt="Screenshot of my founders and coders website">
<div id="facwebpagedetails" class="hidden imgoverlap">
<div class="tabs" id="facwebpagebuttons">
<Button class="tablinks tablinkswebpage" onclick="changeTabWebPage(event, 'facwebpagetext')">Maintext</Button>
<Button class="tablinks tablinkswebpage" onclick="changeTabWebPage(event, 'facwebpagehtml')">HTML</Button>
<Button class="tablinks tablinkswebpage" onclick="changeTabWebPage(event, 'facwebpagecss')">CSS</Button>
<Button class="tablinks tablinkswebpage" onclick="changeTabWebPage(event, 'facwebpagejavascript')">JS</Button>
</div>
<div class="cardtext cardtextwebpage" id="facwebpagetext">
<h2><a href="https://jamesess.github.io/FandCWebPage/">About me webpage</a></h2>
<p class="scroll">My FaC webpage</p>
</div>
<div class="cardtext cardtextwebpage" id="facwebpagehtml">
<h2>HTML</h2>
<p class="scroll">my html</p>
</div>
<div class="cardtext cardtextwebpage" id="facwebpagecss">
<h2>css</h2>
<p class="scroll">my css</p>
</div>
<div class="cardtext cardtextwebpage" id="facwebpagejavascript">
<h2>Javascript</h2>
<p class="scroll">my javascrip</p>
</div>
</div>
</div>
<div class="card" id="facgame">
<button id="facgamedetailstoggle" class="detailstoggle">Show more</button>
<img class="cardimg" id="facgameimg" src="Images/game 800by600px.jpg" alt="Screenshot of my hobby page website">
<div id="facgamedetails" class="hidden imgoverlap">
<div class="tabs" id="facgamebuttons">
<Button class="tablinks tablinksgame" onclick="changeTabGame(event, 'facgametext')">Maintext</Button>
<Button class="tablinks tablinksgame" onclick="changeTabGame(event, 'facgamehtml')">HTML</Button>
<Button class="tablinks tablinksgame" onclick="changeTabGame(event, 'facgamecss')">CSS</Button>
<Button class="tablinks tablinksgame" onclick="changeTabGame(event, 'facgamejavascript')">JS</Button>
</div>
<div class="cardtext cardtextgame" id="facgametext">
<h2>Hobby Page</h2>
<p class="scroll">A basic webpage about cycling and my plans to do a cycling trip. This project was an itroduction to using DOM to add functionality to a webpage. I used DOM to have the correct date displayed in the footer at all times and a countdown to my next cycling trip. It also gave me a chance to practise using lists and playing around with CSS</p>
</div>
<div class="cardtext cardtextgame" id="facgamehtml">
<h2>HTML</h2>
<p class="scroll">my html</p>
</div>
<div class="cardtext cardtextgame" id="facgamecss">
<h2>css</h2>
<p class="scroll">my css</p>
</div>
<div class="cardtext cardtextgame" id="facgamejavascript">
<h2>Javascript</h2>
<p class="scroll">my javascrip</p>
</div>
</div>
</div>
</div>
</body>
<script src="projectgallery.js" defer></script>
</html>
CSS
* {
box-sizing: border-box;
cursor: default;
margin: 0;
overflow-x: hidden;
}
body {
background-color: rgba(226,88,96,1);
background-image: linear-gradient(to bottom right, rgba(223,54,124,0.5), rgba(229,122,68,1));
color: rgba(234,234,234,1);
}
.hidden{
display: none;
}
h1 {
text-align: center;
font-size: 3rem;
padding-bottom: 5%;
}
h2{
text-align: center;
font-size: 1.5rem;
}
.cardcontainer {
display: flex;
align-content: space-evenly;
flex-wrap: wrap;
justify-content: center;
row-gap: 80px;
column-gap: 25px;
height: fit-content;
}
.hobbypagedetails {
overflow-y: scroll;
overscroll-behavior: contain;
}
.card {
position: relative;
width: clamp(200px, 100%, 600px);
min-height: 200px;
}
.cardimg {
width: clamp(200px, 100%, 600px);
object-fit: contain;
}
.detailstoggle {
width: clamp(200px, 100%, 600px);
position: absolute;
top: -18px;
border: none;
background-color: rgba(0,42,34,1);
color: rgba(234,234,234,1);
cursor: pointer;
}
.tabs {
position: absolute;
width: clamp(200px, 100%, 600px);
top: 0px;
display: flex;
align-content: space-evenly;
justify-content: center;
}
.tabs button.active {
background-color: rgba(46,28,43);
}
.tablinks {
flex-grow: 1;
border-bottom-color: rgba(46,28,43,0.7);
border-top: none;
border-left: none;
border-right: none;
color: rgba(234,234,234,1);
background-color: rgba(0,42,34,1);
cursor: pointer;
}
.cardtext {
position: absolute;
width: clamp(200px, 100%, 800px);
top: 20px;
height: 95.5%;
overflow: auto;
background-color: rgba(9,9,9,0.7);
}
.tabs {
background-color: rgba(9,9,9,0.7);
}
a {
cursor: pointer;
color: rgba(234,234,234,1);
}
.scroll {
overflow-wrap: anywhere;
}
JavaScript
const hobbyDetails = document.getElementById("hobbypagedetails");
const hobbyDetailsToggle = document.getElementById("hobbypagedetailstoggle");
const projectGalleryDetailsToggle = document.getElementById("projectgallerydetailstoggle");
const projectGalleryDetails = document.getElementById("projectgallerydetails");
const movieDatabaseDetailsToggle = document.getElementById("moviedatabasedetailstoggle");
const movieDatabaseDetails = document.getElementById("moviedatabasedetails");
const webPageDetailsToggle = document.getElementById("facwebpagesdetailstoggle");
const webPageDetails = document.getElementById("facwebpagedetails");
const gameDetailsToggle = document.getElementById("facgamedetailstoggle");
const gameDetails = document.getElementById("facgamedetails");
/* Toggle to show/hide details about project */
hobbyDetailsToggle.addEventListener("click",(Event) => {
hobbyDetails.classList.toggle("hidden");
/* Change button text based on visibility of extra text */
if (hobbyDetails.matches(".hidden")) {
hobbyDetailsToggle.innerText = "Show more";
}
else {
hobbyDetailsToggle.innerText = "Show less";
changeTabHobby(event, "hobbypagetext")
}
})
projectGalleryDetailsToggle.addEventListener("click",(Event) => {
projectGalleryDetails.classList.toggle("hidden");
if (projectGalleryDetails.matches(".hidden")) {
projectGalleryDetailsToggle.innerText = "Show more";
}
else {
projectGalleryDetailsToggle.innerText = "Show less";
changeTabGallery(event, "projectgallerytext")
}
})
movieDatabaseDetailsToggle.addEventListener("click",(Event) => {
movieDatabaseDetails.classList.toggle("hidden");
if (movieDatabaseDetails.matches(".hidden")) {
movieDatabaseDetailsToggle.innerText = "Show more";
}
else {
movieDatabaseDetailsToggle.innerText = "Show less";
changeTabMovie(event, "moviedatabasetext")
}
})
webPageDetailsToggle.addEventListener("click",(Event) => {
webPageDetails.classList.toggle("hidden");
if (webPageDetails.matches(".hidden")) {
webPageDetailsToggle.innerText = "Show more";
}
else {
webPageDetailsToggle.innerText = "Show less";
changeTabWebPage(event, "facwebpagetext")
}
})
gameDetailsToggle.addEventListener("click",(Event) => {
gameDetails.classList.toggle("hidden");
if (gameDetails.matches(".hidden")) {
gameDetailsToggle.innerText = "Show more";
}
else {
gameDetailsToggle.innerText = "Show less";
changeTabGame(event, "facgametext")
}
})
/* Function to change text displayed dependent on active tab */
function changeTabHobby(evt, tabname) {
var cardtext, tablinks;
cardtext = document.getElementsByClassName("cardtexthobby");
/* Hide all tabs */
for (i = 0; i < cardtext.length; i++) {
cardtext[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinkshobby");
/* reset active tab */
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
/* set current tabs to active and text conent visible */
document.getElementById(tabname).style.display = "block";
evt.currentTarget.className += " active";
}
function changeTabGallery(evt, tabname) {
var cardtext, tablinks;
cardtext = document.getElementsByClassName("cardtextgallery");
/* Hide all tabs */
for (i = 0; i < cardtext.length; i++) {
cardtext[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinksgallery");
/* reset active tab */
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
/* set current tabs to active and text conent visible */
document.getElementById(tabname).style.display = "block";
evt.currentTarget.className += " active";
}
function changeTabMovie(evt, tabname) {
var cardtext, tablinks;
cardtext = document.getElementsByClassName("cardtextmovie");
/* Hide all tabs */
for (i = 0; i < cardtext.length; i++) {
cardtext[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinksmovie");
/* reset active tab */
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
/* set current tabs to active and text conent visible */
document.getElementById(tabname).style.display = "block";
evt.currentTarget.className += " active";
}
function changeTabWebPage(evt, tabname) {
var cardtext, tablinks;
cardtext = document.getElementsByClassName("cardtextwebpage");
/* Hide all tabs */
for (i = 0; i < cardtext.length; i++) {
cardtext[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinkswebpage");
/* reset active tab */
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
/* set current tabs to active and text conent visible */
document.getElementById(tabname).style.display = "block";
evt.currentTarget.className += " active";
}
function changeTabGame(evt, tabname) {
var cardtext, tablinks;
cardtext = document.getElementsByClassName("cardtextgame");
/* Hide all tabs */
for (i = 0; i < cardtext.length; i++) {
cardtext[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinksgame");
/* reset active tab */
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
/* set current tabs to active and text conent visible */
document.getElementById(tabname).style.display = "block";
evt.currentTarget.className += " active";
}
Movie Database
This project was focused on making an interactive website. I decided I wanted to make it possible for the user to submit their own films and I also really wanted a way of picking a random film from the database. For this project I had to learn more about DOM, object manipulation and start making use of conditions in JavaScript
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="mystyles.css" rel="stylesheet">
<title>Movie database</title>
</head>
<body>
<header>
<div class="mainbuttonparent">
<p id="listallbutton" class="mainbutton">List all films</p>
<p id="randomfilmbutton" class="mainbutton">Random film</p>
<p id="newfilmbutton" class="mainbutton">Add new film</p>
</div>
</header>
<div id="randommoviediv">
<h1 id="randommovietitle" class="movietitle">
</h1>
<ul id="randommovielist" style="list-style: none; padding: 0%; margin: 0%;">
</ul>
</div>
<div id="listalldiv">
<h1 id="listalltitle"></h1>
<ul id="alltitlesul" style="list-style: none; padding: 0%; margin: 0%;"></ul>
</div>
<div id="newfilmdiv" class="hideme">
<form action="" id="newfilmform">
<label for="filmtitle">Title: </label><br>
<input type="text" id="filmtitle" class="filmsubmitclass" name="filmtitle" placeholder="The Darjeeling Limited"><br>
<label for="filmplot">Plot: </label><br>
<textarea type="text" id="filmplot" class="filmsubmitclass" name="filmplot" rows="7" cols="30" placeholder="A year after their father's funeral, three brothers travel across India by train in an attempt to bond with each other."></textarea><br>
<label for="filmcast">Cast: </label><br>
<textarea type="text" id="filmcast" class="filmsubmitclass" name="filmcast" rows="7" cols="30" placeholder="Jason Schwartzman, Owen Wilson, Adrien Brody"></textarea><br>
<label for="filmrating">Rating: </label><br>
<input type="text" id="filmrating" class="filmsubmitclass" name="filmrating" placeholder="7.2"><br>
<label for="filmruntime">Runtime: </label><br>
<input type="text" id="filmruntime" class="filmsubmitclass" name="filmruntime" placeholder="151"><br>
<label for="filmyear">Year: </label><br>
<input type="text" id="filmyear" class="filmsubmitclass" name="filmyear" placeholder="2007"><br>
<button type="submit" id="newfilmsubmit" class="filmsubmitclass">Add Film</button>
</form>
</div>
</body>
<script src="moviedata.js"></script>
</html>
CSS
* {
box-sizing: border-box;
color: rgb(236,33,39);
cursor: default;
}
body {
background-color: rgb(254,200,6);
font-size: large;
}
.mainbuttonparent {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.mainbutton {
font-size: xx-large;
background-color: rgb(254,200,6);
border: 3px solid rgb(236,33,39);
padding: 1rem;
color: rgb(236,33,39);
}
.mainbutton:hover {
font-weight: bolder;
}
.hideme {
display: none;
}
#newfilmform {
padding: 1rem;
}
.filmsubmitclass {
background-color: rgb(254,200,6);
color: rgb(236,33,39);
cursor: auto;
border-color: rgb(236,33,39);
outline: none;
resize: none;
}
li {
padding: 0.3rem;
width: fit-content;
}
@keyframes listallanim {
0% {color: rgb(146,177,180);}
}
JavaScript
let movieData = {
"The Darjeeling Limited": {
plot: "A year after their father's funeral, three brothers travel across India by train in an attempt to bond with each other.",
cast: ["Jason Schwartzman", "Owen Wilson", "Adrien Brody"],
runtime: 151,
rating: 7.2,
year: 2007,
},
"The Royal Tenenbaums": {
plot: "The eccentric members of a dysfunctional family reluctantly gather under the same roof for various reasons",
rating: 7.6,
year: 2001,
cast: ["Gene Hackman", "Gwnyeth Paltrow", "Anjelica Huston"],
runtime: 170,
},
"Fantastic Mr. Fox": {
year: 2009,
plot: "An urbane fox cannot resist returning to his farm raiding ways and then must help his community survive the farmers' retaliation.",
cast: [
"George Clooney",
"Meryl Streep",
"Bill Murray",
"Jason Schwartzman",
],
runtime: 147,
rating: 7.9,
},
"The Grand Budapest Hotel": {
rating: 8.1,
runtime: 159,
year: 2014,
plot: "A writer encounters the owner of an aging high-class hotel, who tells him of his early years serving as a lobby boy in the hotel's glorious years under an exceptional concierge.",
cast: ["Ralph Fiennes", "F. Murray Abraham", "Mathieu Amalric"],
},
};
// Can I allow for new properties in object while keeping preffered order?? Want to add star rating and seen already
var movieDataProperties = ["plot", "cast", "rating", "runtime", "year"]
//variables for alphebtical sort
let sortToggle = true;
let movieArray = Object.keys(movieData);
//initialise dom variables
const listAllButton = document.getElementById("listallbutton");
const newFilmButton = document.getElementById("newfilmbutton");
const randomFilmButton = document.getElementById("randomfilmbutton");
const newFilmFormSubmit = document.getElementById("newfilmform");
const newFilmProperties = document.getElementsByClassName("filmsubmitclass");
var randomMovieDiv = document.getElementById("randommoviediv");
var listAllDiv = document.getElementById("listalldiv");
var newFilmDiv = document.getElementById("newfilmdiv");
var randomMovie = document.getElementById("randommovietitle");
var randomMovList = document.getElementById("randommovielist");
var allTitlesUl = document.getElementById("alltitlesul");
var listAllTitle = document.getElementById("listalltitle");
randomFilmButton.addEventListener("click", randomFilmFunc);
listAllButton.addEventListener("click", listAllFunc);
newFilmButton.addEventListener("click", newFilmFunc);
newFilmFormSubmit.addEventListener("submit", submitNewFilmFunc,false);
/*-----RANDOM FILM BUTTON FUNCTIONS-----*/
/* conditional on button press generate random number
then pick film based on rndm number */
function randomFilmFunc() {
clearAll();
let movieArray = Object.keys(movieData);
let sampleSize = movieArray.length;
let randomInteger = Math.floor(Math.random()*sampleSize);
var tester = "filmtitle " + String(movieData[movieArray[randomInteger]]);
randomMovie.textContent = movieArray[randomInteger];
filmChoice(movieArray[randomInteger]);
}
/* lists properties of given (random) film */
function filmChoice(title) {
// iterate through film object with given title and output in list
for (i = 0; i < Object.keys(movieData[title]).length; i++) {
//current method doesn't account for object entries - can that be done neatly?
var movieDetails = document.createElement("li");
movieDetails.setAttribute("id", "randommovielist" + i);
document.getElementById("randommovielist").appendChild(movieDetails);
movieDetails.innerText = (movieDataProperties[i] + ": " + movieData[title][movieDataProperties[i]]);
}
}
/* -----LIST ALL FILMS BUTTON FUNCTIONS----- */
/* Lists titles of all films in database and sets up to list details of a chosen title */
function listAllFunc() {
clearAll();
//change list all button to alphebetical sort
if (sortToggle){
listAllButton.innerText = ("Sort alphabetically ↓");
}
else {
listAllButton.innerText = ("Sort alphabetically ↑")
}
listAllButton.removeEventListener("click", listAllFunc);
listAllButton.addEventListener("click", sortFilmsMinusThe);
for (i = 0; i < movieArray.length; i++) {
var movieTitle = document.createElement("li");
movieTitle.setAttribute("class", "listallul");
movieTitle.setAttribute("id", "alltitles" + i); //id's are never used possibly redundant?
allTitlesUl.appendChild(movieTitle);
movieTitle.innerText = (movieArray[i]);
movieTitle.addEventListener("click", listAllDetails);
movieTitle.addEventListener("mouseenter", (Event) => { //change colour of list item when mouse hovers over
Event.target.style.color = "rgb(146,177,180)";
})
movieTitle.addEventListener("mouseleave", (Event) => { //reset once mouse leaves
setTimeout(() => {
Event.target.style.color = "";
}, 25);
}
)
movieTitle.style.animation = ("listallanim 2500ms");
movieTitle.style.animationDelay = 300*i+"ms";
}
}
/* Shows details for chosen film from list of all films */
function listAllDetails() {
var title = this.innerText; //saves title of chosen film (text of element that triggered on click event)
clearAll();
listAllTitle.innerText = (title);
for (i = 0; i < Object.keys(movieData[title]).length; i++) {
//current method doesn't account for object entries - can that be done neatly?
var movieDetails = document.createElement("li");
movieDetails.setAttribute("id", "alltitlesproperties" + i);
allTitlesUl.appendChild(movieDetails);
movieDetails.innerText = (movieDataProperties[i] + ": " + movieData[title][movieDataProperties[i]]);
}
}
/* -----NEW FILM FORM BUTTON FUNCTIONS----- */
/* makes newfilm form visible on page */
function newFilmFunc() {
clearAll();
newFilmDiv.removeAttribute("class", "hideme");
}
/* Make submit button store new film as an object, then add object to main movie object */
function submitNewFilmFunc(Event) {
Event.preventDefault(); //stops submit button refreshing page and sending data
alert("Thanks for adding a new film " + newFilmProperties[0].value);
let newTitleObject = { };
let newTitle = newFilmProperties[0].value;
//store each form input (-title) in object
for (i = 1; i < newFilmProperties.length; i++){
//make i == 1 (cast) store each actor as seperate entry in an array?
var j = i-1;
newTitleObject[movieDataProperties[j]] = newFilmProperties[i].value;
console.log(newFilmProperties[i]);
newFilmProperties[i].value = ""; //reset form inputs to placeholder values
}
movieData[newTitle] = newTitleObject;
newFilmProperties[0].value = ""; //reset form inputs to placeholder values
clearAll();
movieArray = Object.keys(movieData)
//Ideally add data sanitization and refuse incorrectly formated data
//could be cleaned up definetly some redundant/unnecesary variables in here
}
/* -----Universal functions----- */
/* resets page to original content */
function clearAll() {
listAllButton.innerText = ("List all films");
listAllButton.addEventListener("click", listAllFunc);
listAllButton.removeEventListener("click", sortFilmsMinusThe);
allTitlesUl.textContent = " ";
randomMovie.textContent = " ";
randomMovList.textContent = " ";
listAllTitle.textContent = " ";
newFilmDiv.setAttribute("class", "hideme"); //stops new film form displaying
}
/* Alphebetical sort a-z/z-a*/
function sortFilmsMinusThe () {
const filterOutThe = "The "
let alphebeticalMovieArray = [];
movieArray = Object.keys(movieData);
for (i = 0; i < movieArray.length; i++){
let currentFilm = movieArray[i];
//if title starts with 'The' remove it from title and add title to array otherwise add title to array
if (currentFilm.startsWith(filterOutThe)) {
alphebeticalMovieArray.splice(i,1, currentFilm.replace(filterOutThe, ""));
alphebeticalMovieArray[i] = alphebeticalMovieArray[i].concat("changeme"); //give titles with 'The' an easy identifier so it can be added back in
}
else {
alphebeticalMovieArray.push(movieArray[i])
}
}
//sort array in alphebetical order ignoring case
alphebeticalMovieArray.sort(function (a, b) {
return a.toLowerCase().localeCompare(b.toLowerCase());
})
//toggle to check if sorted a-z or z-a
if (sortToggle)
{
sortToggle = false;
}
else{
alphebeticalMovieArray.reverse(); //reverse order of array - sort z-a
sortToggle = true;
}
//add 'The' back to relevant titles
for (i = 0; i < movieArray.length; i++){
if (alphebeticalMovieArray[i].endsWith("changeme")){ //find titles that had 'The' removed and add back in
alphebeticalMovieArray[i] = alphebeticalMovieArray[i].replace("changeme", "");
alphebeticalMovieArray[i] = filterOutThe.concat(alphebeticalMovieArray[i]);
}
}
movieArray = alphebeticalMovieArray;
listAllFunc();
}
Hobby Page
A basic webpage about cycling and my plans to do a cycling trip. This project was an itroduction to using DOM to add functionality to a webpage. I used DOM to have the correct date displayed in the footer at all times and a countdown to my next cycling trip. It also gave me a chance to practise using lists and playing around with CSS
HTML
my html
CSS
my css
JavaSScript
my javascrip