CodeYourFuture · zhkvivan · Aug 9, 2021 · Aug 10, 2021 · Aug 10, 2021 · Aug 13, 2021
diff --git a/InClass/Callbacks/exercise-1/exercise.js b/InClass/Callbacks/exercise-1/exercise.js
@@ -11,3 +11,13 @@ 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
 ================
 */
+
+// setTimeout(() => {
+// 	document.querySelector('body').style.backgroundColor = 'green'
+// }, 5000)
+
+setInterval(() => {
+  let colorArray = ["green", "red", "yellow", "pink", "blue"];
+  let i = Math.round(Math.random() * (colorArray.length - 1));
+  document.querySelector("body").style.backgroundColor = colorArray[i];
+}, 5000);
diff --git a/InClass/Callbacks/exercise-2/exercise.js b/InClass/Callbacks/exercise-2/exercise.js
@@ -59,10 +59,106 @@ const movies = [
     type: "horror",
     haveWatched: false,
   },
+
 ];
 
 // create showMovies function
 
+function showMovies() {
+	let moviesDiv = document.querySelector('#all-movies');
+	let numberOfMovies = document.querySelector("#movies-number");
+	numberOfMovies.textContent = 0;
+	let number = 0;
+
+	movies.forEach((movie, index) => {
+		//setTimeout(() => {
+      let p = document.createElement("p");
+      p.textContent = movie.title + " by " + movie.director;
+      moviesDiv.append(p);
+      number += 1;
+      numberOfMovies.textContent = number;
+    //}, 1000 * (index + 1));
+	})
+}
+
+showMovies()
 // create a new movie object for your favorite movie
 
+let newMovie = {
+  title: "Back to the future",
+  director: "Robert Zemeckis",
+  type: "fantastic",
+  haveWatched: true,
+};
+
 // create addMovies function
+
+function addMovie(newMovie){
+	movies.push(newMovie)
+	let moviesDiv = document.querySelector("#all-movies");
+	let p = document.createElement("p");
+	p.textContent = newMovie.title + " by " + newMovie.director;
+	//setTimeout(() => {
+		moviesDiv.append(p);
+	//}, 2000);
+}
+
+
+let isWatched = false;
+
+function addUserMovie (event) {
+	event.preventDefault()
+
+	let movieName = document.querySelector("#new-movie-name");
+	let movieDirector = document.querySelector("#new-movie-director");
+	let movieType = document.querySelector("#new-movie-type");
+	let watchedOrNot = document.querySelectorAll('input[type="radio"]')
+
+	movieName.style.borderColor = '';
+	movieDirector.style.borderColor = '';
+	movieType.style.borderColor = ''
+
+	if (movieName.value.length === 0 || movieDirector.value.length === 0 || movieType.value.length === 0) {
+		if (movieName.value.length === 0) {
+		movieName.placeholder = "Enter something here";
+		movieName.style.borderColor = "red";
+
+		}	
+		if (movieDirector.value.length === 0) {
+			movieDirector.placeholder = "Enter something here";
+			movieDirector.style.borderColor = "red";
+
+	}	
+	if (movieType.value.length === 0) {
+			movieType.placeholder = "Enter something here";
+			movieType.style.borderColor = "red";
+
+	}	
+	return
+}
+	for (let radio of watchedOrNot) {
+		if (radio.checked)
+		isWatched = radio.value;
+	}
+
+	let newMovie = {
+		title: movieName.value,
+		director: movieDirector.value,
+		type: movieType.value,
+		haveWatched: isWatched
+	}
+
+	addMovie(newMovie);
+
+	movieName.value = '';
+	movieDirector.value = '';
+	movieType.value = '';
+
+	movieName.placeholder = "Name of the movie";
+	movieDirector.placeholder = "Director of the movie";
+	movieType = "Type of the movie";
+
+}
+
+let sumbitBtn = document.querySelector("#add-movie-btn");
+sumbitBtn.addEventListener('click', addUserMovie)
diff --git a/InClass/Callbacks/exercise-2/index.html b/InClass/Callbacks/exercise-2/index.html
@@ -3,27 +3,66 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8">
-  <title>CodeYourFuture - Callbacks</title>
-  <meta name="description" content="Callbacks">
-  <meta name="author" content="CodeYourFuture">
-  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
-  <style>
-    body {
-      padding: 30px;
-    }
-  </style>
+	<meta charset="utf-8">
+	<title>CodeYourFuture - Callbacks</title>
+	<meta name="description" content="Callbacks">
+	<meta name="author" content="CodeYourFuture">
+	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
+	<style>
+		body {
+			padding: 30px;
+		}
+
+		h2 {
+			margin-bottom: 30px;
+		}
+		input[type = text] {
+			width: 100%;
+			margin-bottom: 10px;
+		}
+
+		label {
+			/* display: inline-block; */
+			cursor: pointer;
+			/* position: relative; */
+			padding-left: 5px;
+			margin-right: 15px;
+			font-size: 13px;
+		}
+		button {
+			display: block;
+			margin-top: 20px;
+		}
+	</style>
 </head>
 
 <body>
-  <div id="main">
-    <div class="jumbotron">
-      <h1>My movies</h1>
-      <div id="all-movies">
-        <p class="alert alert-info">Number of movies: <span id="movies-number"></span></p>
-      </div>
-    </div>
-    <script src="exercise.js"></script>
+	<div id="main">
+		<div class="jumbotron">
+			<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>
+			<h2>Add your movie</h2>
+			<form action="">
+				<input type="text" placeholder="Name of the movie" id="new-movie-name">
+				<input type="text" placeholder="Director of the movie" id="new-movie-director">
+				<input type="text" placeholder="Type of the movie" id="new-movie-type">
+
+				<p>Have you watched this movie?</p>
+
+				<input type="radio" id="new-movie-watched-true" name="whatched-or-not" value="true">
+				<label for="new-movie-watched-true">Yes</label>
+
+				<input type="radio" id="new-movie-watched-false" name="whatched-or-not" value="false" checked>
+				<label for="new-movie-watched-false">No</label>
+
+				<button type="submit" id="add-movie-btn">Add a movie</button>
+			</form>
+		</div>
+		<script src="exercise.js"></script>
 </body>
 
 </html>