West Midlands Class 2 - Cecilia Baggini - JS Core 2 - Week 3

InClass/Callbacks/exercise-1/exercise.js

@@ -10,4 +10,15 @@ Update your code to make the colour change every 5 seconds to something differen
 
 Prefer to work on a codepen? https://codepen.io/makanti/pen/abOreLg
 ================
-*/
+*/
+
+// Task 1
+// setTimeout(function () {
+//   document.querySelector("#main").style.backgroundColor = 'red';
+// }, 5000);
+
+// Task 2
+setInterval(function () {
+  let randomColor = Math.floor(Math.random()*16777215).toString(16);
+  document.querySelector("#main").style.backgroundColor = `#${randomColor}`;
+}, 5000);

InClass/Callbacks/exercise-2/exercise.js

@@ -63,8 +63,66 @@ const movies = [
 
 // create showMovies function
 
+// function showMovies(movies) {
+// 	let i = 0;
+// 	document.querySelector("#movies-number").innerText = movies.length;
+// 	setInterval(function () {
+// 		if (i < movies.length) {
+// 			let paragraph = document.createElement("p");
+// 			paragraph.innerHTML = `"${movies[i].title}" by ${movies[i].director}`
+// 			document.querySelector("#all-movies").appendChild(paragraph); 
+// 		}
+// 		else return
+
+// 		i++;
+// 	}, 1000);
+// }
+
+function showMovies(movies) {
+	document.querySelector("#movies-number").innerText = movies.length;
+	document.querySelectorAll('.movie-item').forEach(e => e.remove());
+	for (let i = 0; i < movies.length; i++) {
+		setTimeout(function () {
+			let paragraph = document.createElement("p");
+			paragraph.className = "movie-item";
+			paragraph.innerHTML = `"${movies[i].title}" by ${movies[i].director}`
+			document.querySelector("#all-movies").appendChild(paragraph); 
+		}, 1000 + (1000 * i));
+	}
+}
 
 // create a new movie object for your favorite movie
 
+let newMovie = {
+	title: "The Lord of The Rings",
+	director: "Peter Jackson",
+	type: "fantasy",
+	haveWatched: true,
+}
 
 // create addMovies function
+
+function addMovie(movie, movies) {
+	setTimeout(function () {
+		movies.push(movie);
+		showMovies(movies);
+		//document.querySelector("#movies-number").innerText = movies.length;
+	}, 2000);	
+}
+
+showMovies(movies);
+
+// update list of movies when form is POSTed
+let saveBtn = document.querySelector("#saveBtn");
+
+saveBtn.addEventListener("click", function (event) {
+	event.preventDefault();
+	let newMovie = {
+		title: document.querySelector("#title").value,
+		director: document.querySelector("#director").value,
+		type: document.querySelector("#type"),
+		haveWatched: document.querySelector("#watched").value
+	}  
+
+	addMovie(newMovie, movies);
+});

InClass/Callbacks/exercise-2/index.html

@@ -22,7 +22,18 @@ <h1>My movies</h1>
       <div id="all-movies">
         <p class="alert alert-info">Number of movies: <span id="movies-number"></span></p>
       </div>
-    </div>
+	</div>
+	<form>
+		<label for="title">Film title:</label>
+		<input id="title" name="title" value="Title">
+		<label for="director">Film director:</label>
+		<input id="director" name="director" value="Director">
+		<label for="type">Film type:</label>
+		<input id="type" name="type" value="Type">
+		<label for="watched">Have you watched this film?</label>
+		<input id="watched" name="watched" value="true or false">
+		<input id="saveBtn" type="submit" value="Submit">
+	</form>
     <script src="exercise.js"></script>
 </body>
 

InClass/DOM-practice/main.js

@@ -4,8 +4,7 @@ console.log("Testing JS file loaded!")
 
 // Without changing any of the HTML or CSS, update the <section> tags so that they have white backgrounds.
 
-
-
+document.querySelectorAll("section").forEach(el => el.style.backgroundColor = "white");
 
 
 
@@ -15,11 +14,36 @@ console.log("Testing JS file loaded!")
 
 // Hint: look at the CSS to see if there are any classes already written which you can use.
 
-
+document.querySelectorAll("img").forEach(el => el.style.cssText += "display: block; margin-left: auto; margin-right: auto");
 
 
 
 
 // Task 3
 
 // Google the date of birth and death of each of the people on the page. Without changing any of the HTML or CSS, add this in a paragraph to the end of their <section>.
+
+let dates = [
+	{
+		name: "grace-hopper",
+		born: "9 December 1906",
+		died: "1 January 1992"
+	},
+	{
+		name: "katherine-johnson",
+		born: "26 August 1918",
+		died: "24 February 2020"
+	},
+	{
+		name: "ada-lovelace",
+		born: "10 December 1815",
+		died: "27 November 1852"
+	}
+]
+
+for (i of dates) {
+	let section = document.querySelector(`#${i.name}`).parentElement
+	let paragraph = document.createElement("p");
+	paragraph.innerHTML = `Born on ${i.born} and died on ${i.died}`;
+	section.insertBefore(paragraph, section.children[section.children.length - 1]);
+}

mandatory/1-alarmclock/alarmclock.js

@@ -1,4 +1,39 @@
-function setAlarm() {}
+let tmr;
+let blink;
+let myTimer;
+
+function setAlarm() {
+	clearInterval(myTimer);
+	clearInterval(blink);
+	document.querySelector("body").style.backgroundColor = "white";
+	tmr = true;
+	let input = document.querySelector("#alarmSet").value;
+	let inputStr = `${String(Math.floor(input / 60)).padStart(2, '0')}:${String(input % 60).padStart(2, '0')}`;
+	document.querySelector("#timeRemaining").innerHTML = `Time Remaining: ${inputStr}`;
+	myTimer = setInterval(function () {
+		if (tmr) {
+			input--;
+		}
+		inputStr = `${String(Math.floor(input / 60)).padStart(2, '0')}:${String(input % 60).padStart(2, '0')}`;
+		document.querySelector("#timeRemaining").innerHTML = `Time Remaining: ${inputStr}`;
+		if (input === 0) {
+			playAlarm();
+			let ofs = 0;
+			blink = setInterval(function(){
+				document.querySelector("body").style.backgroundColor = 'rgba(255,0,0,'+Math.abs(Math.sin(ofs))+')';
+				ofs += 0.01;
+			}, 10);
+			clearInterval(myTimer);
+		}
+	}, 1000) 
+}
+document.addEventListener('DOMContentLoaded', function () {
+    let pauseBtn = document.querySelector("#pause")
+	pauseBtn.addEventListener("click", () => {
+		tmr = !tmr;
+	});
+});
+
 
 // DO NOT EDIT BELOW HERE
 

mandatory/1-alarmclock/index.html

@@ -21,7 +21,8 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       </div>
       <div>
         <button id="set" type="button">Set Alarm</button>
-        <button id="stop" type="button">Stop Alarm</button>
+		<button id="stop" type="button">Stop Alarm</button>
+		<button id="pause" type="button">Pause Countdown</button>
       </div>
     </div>
   </body>

mandatory/2-quotegenerator/index.html

@@ -12,6 +12,16 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <!-- Write your HTML in here -->
+	<!-- Write your HTML in here -->
+	<div>
+		<h1>Click the button to generate a new quote!</h1>
+		<p></p>
+		<button type="button">New Quote</button>
+		<label class="switch">
+			<input type="checkbox">
+			<span class="slider round"></span>
+		</label>
+		<p id="autoPlay"></p>
+	</div>
   </body>
 </html>

mandatory/2-quotegenerator/quotes.js

@@ -1,3 +1,36 @@
+document.addEventListener('DOMContentLoaded', function () {
+	let auto = false;
+	let timer;
+
+	// function to choose and display quote
+	function chooseQuote() {
+		let chosenQuote = quotes[Math.floor(Math.random() * quotes.length)];
+		document.querySelector("h1").innerHTML = chosenQuote.quote;
+		document.querySelector("p").innerHTML = chosenQuote.author;
+	}
+
+	// New quote button
+    let Btn = document.querySelector("button")
+	Btn.addEventListener("click", () => {
+		chooseQuote();
+	});
+
+	// Auto-play button
+	let toggle = document.querySelector("input");
+	toggle.addEventListener("click", () => {
+		auto = !auto;
+		if (auto) {
+			document.querySelector("#autoPlay").innerHTML = "auto-play:ON";
+			timer = setInterval(() => {
+				chooseQuote();
+			}, 3000);
+		} else {
+			document.querySelector("#autoPlay").innerHTML = "";
+			clearInterval(timer);
+		}
+	});
+});
+
 // DO NOT EDIT BELOW HERE
 
 // A function which will return one item, at

mandatory/2-quotegenerator/style.css

@@ -1 +1,94 @@
 /** Write your CSS in here **/
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: orange;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  margin: 10rem;
+  padding: 1.5rem;
+  background-color: white;
+  width: 70%;
+}
+
+p {
+  display: flex;
+  align-self: flex-end;
+  height: 1.5rem;
+}
+
+button {
+  width: 20%;
+}
+
+h1 {
+  height: 15rem;
+}
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+  margin: 2rem;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: #2196f3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196f3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

mandatory/3-slideshow/index.html

@@ -12,6 +12,20 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <!-- Write your HTML in here -->
+	<!-- Write your HTML in here -->
+	<div class="imgDiv">
+		<img src="" alt="carousel image">
+	</div>
+	<div class="buttons">
+		<button id="autoBack" type="button" class="btn btn-success">Auto Backwards</button>
+		<button id="back" type="button" class="btn btn-success">Back</button>
+		<button id="stop" type="button" class="btn btn-success">Stop</button>
+		<button id="forward" type="button" class="btn btn-success">Forward</button>
+		<button id="autoForward" type="button" class="btn btn-success">Auto Forward</button>
+	</div>
+	<div class="buttons">
+		<input id="ui" type="number" />
+		<button class="btn btn-primary" id="uiButton" type="button">Set time interval in seconds</button>
+	</div>
   </body>
 </html>