Repository: Neepunraj/HackYourFutureBootCamp
Pull request #14: Java script2/week1/neepun
Author: login: Neepunraj
Created: 2025-03-06T06:28:21Z | Merged: 2025-03-09T11:09:56Z



Diff:
diff --git a/javascript/javascript1/week3/classwork/index.js b/javascript/javascript1/week3/classwork/index.js
index 12a3914a..1d93f248 100644
--- a/javascript/javascript1/week3/classwork/index.js
+++ b/javascript/javascript1/week3/classwork/index.js
@@ -6,26 +6,28 @@ function findLongest(str) {
     if (spl[i].length > longest) {
       longest = spl[i].length;
     }
-    
   }
   return longest;
 }
 console.log(findLongest("The quick white fox jumped around the massive dog"));
 
-
-const friendsList = [{
-    username: 'David',
-    status: 'online',
-    lastActivity: 10
-  }, {
-    username: 'Lucy', 
-    status: 'offline',
-    lastActivity: 22
-  }, {
-    username: 'Bob', 
-    status: 'online',
-    lastActivity: 104
-  }]
+const friendsList = [
+  {
+    username: "David",
+    status: "online",
+    lastActivity: 10,
+  },
+  {
+    username: "Lucy",
+    status: "offline",
+    lastActivity: 22,
+  },
+  {
+    username: "Bob",
+    status: "online",
+    lastActivity: 104,
+  },
+];
 /* 
 {
   offline: ['Lucy'],
@@ -34,39 +36,29 @@ const friendsList = [{
 
 */
 
-  const whosOnline = (friends) => {
-    console.log(friends[0].lastActivity)
-    const newArray = []
-    let status = {
-        online:[],
-        offline:[],
-        away:[]
-    }
-    for(let i = 0; i<friends.length;i++){
-    
-        const friend = friends[i]
-
-
-        if(friend.status === `online` ){
-            if(friend.lastActivity<10){
-                status.offline.push(friend.username)
+const whosOnline = (friends) => {
+  console.log(friends[0].lastActivity);
+  const newArray = [];
+  let status = {
+    online: [],
+    offline: [],
+    away: [] /*  */,
+  };
+  for (let i = 0; i < friends.length; i++) {
+    const friend = friends[i];
 
-
-            }else if (friend.lastActivity>10) {
-                status.offline.push(friend.username)
-
-            }
-           
-        }else if(friend.status === "away"){
-            status.away.push(friend.username)
-        }
-
-      
-    
+    if (friend.status === `online`) {
+      if (friend.lastActivity < 10) {
+        status.offline.push(friend.username);
+      } else if (friend.lastActivity > 10) {
+        status.offline.push(friend.username);
+      }
+    } else if (friend.status === "away") {
+      status.away.push(friend.username);
     }
-    console.log(newArray)
- return status
-
   }
+  console.log(newArray);
+  return status;
+};
 
-  console.log(whosOnline(friendsList))
\ No newline at end of file
+console.log(whosOnline(friendsList));
diff --git a/javascript/javascript2/week1/classwork/index.html b/javascript/javascript2/week1/classwork/index.html
new file mode 100644
index 00000000..3fa58441
--- /dev/null
+++ b/javascript/javascript2/week1/classwork/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <h1>This is Header</h1>
+    <!--     <ul>
+      <li id="list1">List one</li>
+      <li id="list2">List two</li>
+      <li id="List3">List three</li>
+    </ul> -->
+    <div class="box">
+      <form>
+        <label>name</label>
+        <input id="firstNameInput" placeholder="Name Please" />
+
+        <label>Last Name</label>
+        <input id="secondNameInput" placeholder="last Name Plase" />
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/javascript/javascript2/week1/classwork/index.js b/javascript/javascript2/week1/classwork/index.js
new file mode 100644
index 00000000..c6021f66
--- /dev/null
+++ b/javascript/javascript2/week1/classwork/index.js
@@ -0,0 +1,98 @@
+/* const h1 = document.body.querySelector("h1");
+console.log(h1);
+const ul = document.body.querySelector("ul");
+const list4 = document.createElement("li");
+list4.innerText = "this is list 4";
+ul.appendChild(list4); */
+/* 
+const list0 = document.createElement("li");
+list0.innerText = "this is list item 0";
+
+ul.insertBefore(list0, list4); */
+/* const dishes = ["Momo", "Pizza", "Chicken", "hero"];
+const ul = document.createElement("ul");
+dishes.forEach((item) => {
+  const li = document.createElement("li");
+  li.innerText = item;
+  ul.appendChild(li);
+});
+document.body.appendChild(ul); */
+
+const podcasts = [
+  {
+    name: "The mystery om of Johan Klausen Varbourg",
+    imageUrl: "https://picsum.photos/536/350",
+  },
+  {
+    name: "Tips about dogs with small legs",
+    imageUrl: "https://picsum.photos/536/351",
+  },
+  {
+    name: "You, me, we and us",
+    imageUrl: "https://picsum.photos/536/352",
+  },
+  {
+    name: "Breakfast news - Dinner edition",
+  },
+];
+const ul = document.createElement("ul");
+podcasts.forEach((item) => {
+  const { name, imageUrl } = item;
+  const li = document.createElement("li");
+  const h1 = document.createElement("h1");
+  h1.innerHTML = name;
+  li.appendChild(h1);
+  if (imageUrl) {
+    imageAppender(imageUrl, li);
+  }
+  ul.appendChild(li);
+});
+document.body.appendChild(ul);
+
+function imageAppender(imageUrl, TagtoAppend) {
+  const image = document.createElement("img");
+  image.src = imageUrl;
+  TagtoAppend.appendChild(image);
+}
+// Should append a img tag to the body with the picture from 'https://picsum.photos/536/354'
+const newH2 = document.createElement("h2");
+newH2.innerText = "This is Calling AppendingImage Function";
+document.body.appendChild(newH2);
+imageAppender("https://picsum.photos/536/354", document.querySelector("body"));
+
+const button = document.createElement("button");
+button.innerText = "Click Me";
+let isClicked = false;
+button.addEventListener("click", () => {
+  isClicked = !isClicked;
+  if (isClicked) {
+    button.innerText = "Clicked";
+    button.style.backgroundColor = "red";
+    imageAppender(
+      "https://picsum.photos/536/357",
+      document.querySelector("body")
+    );
+  } else {
+    button.innerText = "Click Me";
+    button.style.backgroundColor = "#117ceb";
+    const toRemove = document.body.lastElementChild;
+    console.log(toRemove);
+    document.body.removeChild(toRemove);
+  }
+});
+
+document.body.appendChild(button);
+const formDiv = document.querySelector(".box");
+const firstName = document.createElement("h2");
+const secondNAme = document.createElement("h2");
+formDiv.appendChild(firstName);
+formDiv.appendChild(secondNAme);
+const form = formDiv.querySelector("form");
+form.addEventListener("change", (event) => {
+  console.log(event);
+  event.preventDefault();
+  const firstNameInput = form.querySelector("#firstNameInput");
+  firstName.innerText = firstNameInput.value;
+  const secondNameInput = form.querySelector("#secondNameInput");
+  secondNAme.innerText = secondNameInput.value;
+});
diff --git a/javascript/javascript2/week1/classwork/style.css b/javascript/javascript2/week1/classwork/style.css
new file mode 100644
index 00000000..ce0a0a99
--- /dev/null
+++ b/javascript/javascript2/week1/classwork/style.css
@@ -0,0 +1,13 @@
+ul {
+  list-style: none;
+}
+button {
+  font-size: 24px;
+  background-color: #117ceb;
+  color: #ffffff;
+  border-radius: 10px;
+  border-color: transparent;
+}
+img {
+  margin-top: 10px;
+}
diff --git a/javascript/javascript2/week1/homeWork/countingSheep.js b/javascript/javascript2/week1/homeWork/countingSheep.js
new file mode 100644
index 00000000..a77d2a73
--- /dev/null
+++ b/javascript/javascript2/week1/homeWork/countingSheep.js
@@ -0,0 +1,36 @@
+const shipStatus = [
+  true,
+  true,
+  true,
+  false,
+  true,
+  true,
+  true,
+  true,
+  true,
+  false,
+  true,
+  false,
+  true,
+  false,
+  false,
+  true,
+  true,
+  true,
+  true,
+  true,
+  false,
+  false,
+  true,
+  true,
+];
+function countShip(shipStatus) {
+  let count = 0;
+  shipStatus.forEach((eachShip) => {
+    if (eachShip !== null && eachShip !== undefined && eachShip) {
+      count++;
+    }
+  });
+  return count;
+}
+console.log(countShip(shipStatus));
diff --git a/javascript/javascript2/week1/homeWork/index.html b/javascript/javascript2/week1/homeWork/index.html
new file mode 100644
index 00000000..24580758
--- /dev/null
+++ b/javascript/javascript2/week1/homeWork/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Home Work</title>
+  </head>
+  <body>
+    <h1>Code Wars</h1>
+    <script src="removeFirstandLastCharacter.js"></script>
+    <script src="countingSheep.js"></script>
+    <script src="stringsEndsWith.js"></script>
+    <script src="oddOrEven.js"></script>
+  </body>
+</html>
diff --git a/javascript/javascript2/week1/homeWork/oddOrEven.js b/javascript/javascript2/week1/homeWork/oddOrEven.js
new file mode 100644
index 00000000..3904bdb5
--- /dev/null
+++ b/javascript/javascript2/week1/homeWork/oddOrEven.js
@@ -0,0 +1,8 @@
+function checkOddEven(inputArray) {
+  const totalSum = inputArray.reduce((acc, sum) => sum + acc, 0);
+
+  return totalSum % 2 === 0 ? "Even" : "Odd";
+}
+console.log(checkOddEven([0]));
+console.log(checkOddEven([0, 1, 4]));
+console.log(checkOddEven([0, -1, -5]));
diff --git a/javascript/javascript2/week1/homeWork/removeFirstandLastCharacter.js b/javascript/javascript2/week1/homeWork/removeFirstandLastCharacter.js
new file mode 100644
index 00000000..b73605f1
--- /dev/null
+++ b/javascript/javascript2/week1/homeWork/removeFirstandLastCharacter.js
@@ -0,0 +1,19 @@
+function removeFirstandLast(text) {
+  const newArrayText = text.split("");
+  const arrayMethod = newArrayText.slice(1, -1).join("");
+  const directString = text.slice(1, -1);
+  return { arrayMethod, directString };
+}
+const body = document.querySelector("body");
+const textToRemove = "Neepun";
+const { arrayMethod, directString } = removeFirstandLast(textToRemove);
+const divNEw = document.createElement("div");
+const h1 = document.createElement("h1");
+divNEw.appendChild(h1);
+h1.innerText = `The text to remove is ${textToRemove} `;
+
+const newPara = document.createElement("p");
+newPara.innerText = `the removal of first and last character in above text
+using Array Method is "${arrayMethod}" and using directString is "${directString}" `;
+divNEw.appendChild(newPara);
+body.appendChild(divNEw);
diff --git a/javascript/javascript2/week1/homeWork/stringsEndsWith.js b/javascript/javascript2/week1/homeWork/stringsEndsWith.js
new file mode 100644
index 00000000..39989917
--- /dev/null
+++ b/javascript/javascript2/week1/homeWork/stringsEndsWith.js
@@ -0,0 +1,9 @@
+function solution(text, ending) {
+  let array = text.split("");
+  array = array.slice();
+  console.log(array);
+  const stringMethod = text.endsWith(ending);
+  return stringMethod;
+}
+console.log(solution("abc", "bc")); // returns true
+console.log(solution("abc", "d")); // returns false
diff --git a/javascript/javascript2/week1/movieApp/index.html b/javascript/javascript2/week1/movieApp/index.html
new file mode 100644
index 00000000..4e499e00
--- /dev/null
+++ b/javascript/javascript2/week1/movieApp/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Movie App</title>
+    <link rel="stylesheet" href="styles.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/javascript/javascript2/week1/movieApp/index.js b/javascript/javascript2/week1/movieApp/index.js
new file mode 100644
index 00000000..3fafbdf9
--- /dev/null
+++ b/javascript/javascript2/week1/movieApp/index.js
@@ -0,0 +1,382 @@
+const movieList = [
+  {
+    id: 1,
+    title: "Interstellar",
+    description:
+      "The adventures of a group of explorers who use a newly discovered wormhole to surpass the limitations on human space travel and conquer the vast distances involved in an interstellar voyage.",
+    movie_year: 2014,
+    director: "Christopher Nolan",
+    actors: [
+      "Matthew McConaughey",
+      "Anne Hathaway",
+      "Jessica Chastain",
+      "Michael Caine",
+      "Casey Affleck",
+      "Mackenzie Foy",
+      "John Lithgow",
+      "Ellen Burstyn",
+      "Matt Damon",
+    ],
+    poster_url:
+      "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg",
+    price: "120.00",
+    rating: 0,
+  },
+  {
+    id: 2,
+    title: "Inception",
+    description:
+      "A skilled thief, who steals corporate secrets through the use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
+    movie_year: 2010,
+    director: "Christopher Nolan",
+    actors: [
+      "Leonardo DiCaprio",
+      "Joseph Gordon-Levitt",
+      "Elliot Page",
+      "Tom Hardy",
+      "Ken Watanabe",
+      "Marion Cotillard",
+      "Cillian Murphy",
+    ],
+    poster_url:
+      "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/ljsZTbVsrQSqZgWeep2B1QiDKuh.jpg",
+    price: "120.00",
+    rating: 0,
+  },
+  {
+    id: 3,
+    title: "Iron Man",
+    description:
+      "After being held captive in an Afghan cave, billionaire industrialist Tony Stark creates a unique weaponized suit of armor to fight evil.",
+    movie_year: 2008,
+    director: "Jon Favreau",
+    actors: [
+      "Robert Downey Jr.",
+      "Gwyneth Paltrow",
+      "Jeff Bridges",
+      "Terrence Howard",
+      "Leslie Bibb",
+      "Clark Gregg",
+    ],
+    poster_url:
+      "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/dMc96Rn0XutMaIYJNwkJ5yO9oTh.jpg",
+    price: "120.00",
+    rating: 0,
+  },
+  {
+    id: 4,
+    title: "The Avengers",
+    description:
+      "When an unexpected enemy emerges that threatens global safety and security, Nick Fury, director of the international peacekeeping agency known as S.H.I.E.L.D., assembles a team of superheroes to save the world.",
+    movie_year: 2012,
+    director: "Joss Whedon",
+    actors: [
+      "Robert Downey Jr.",
+      "Chris Evans",
+      "Scarlett Johansson",
+      "Mark Ruffalo",
+      "Chris Hemsworth",
+      "Tom Hiddleston",
+    ],
+    poster_url:
+      "https://media.themoviedb.org/t/p/w300_and_h450_bestv2/RYMX2wcKCBAr24UyPD7xwmjaTn.jpg",
+    price: "120.00",
+    rating: 0,
+  },
+  {
+    id: 5,
+    title: "Captain America: The First Avenger",
+    description:
+      "During World War II, Steve Rogers is enhanced to super-soldier status and must stop the Red Skull, the head of Hydra, from using a potent weapon.",
+    movie_year: 2011,
+    director: "Joe Johnston",
+    actors: [
+      "Chris Evans",
+      "Hugo Weaving",
+      "Hayley Atwell",
+      "Sebastian Stan",
+      "Tommy Lee Jones",
+      "Dominique McElligott",
+    ],
+    poster_url:
+      "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/vSNxAJTlD0r02V9sPYpOjqDZXUK.jpg",
+    price: "120.00",
+    rating: 0,
+  },
+  {
+    id: 6,
+    title: "Spider-Man: Homecoming",
+    description:
+      "Peter Parker balances his life as an ordinary high school student in Queens with his superhero alter ego Spider-Man, and faces his greatest threat yet.",
+    movie_year: 2017,
+    director: "Jon Watts",
+    actors: [
+      "Tom Holland",
+      "Michael Keaton",
+      "Robert Downey Jr.",
+      "Marisa Tomei",
+      "Zendaya",
+      "Jacob Batalon",
+    ],
+    poster_url:
+      "https://media.themoviedb.org/t/p/w300_and_h450_bestv2/c24sv2weTHPsmDa7jEMN0m2P3RT.jpg",
+    price: "120.00",
+    rating: 0,
+  },
+  {
+    id: 7,
+    title: "Black Panther",
+    description:
+      "T'Challa, the new ruler of the technologically advanced African nation of Wakanda, must defend his land from an old foe and ensure his legacy.",
+    movie_year: 2018,
+    director: "Ryan Coogler",
+    actors: [
+      "Chadwick Boseman",
+      "Michael B. Jordan",
+      "Lupita Nyong'o",
+      "Danai Gurira",
+      "Martin Freeman",
+      "Daniel Kaluuya",
+    ],
+    poster_url:
+      "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/udd8VinUWwLIiTYn3wdOEpCk9Fq.jpg",
+    price: "120.00",
+    rating: 0,
+  },
+  {
+    id: 8,
+    title: "Avengers: Endgame",
+    description:
+      "After the devastating events of Avengers: Infinity War (2018), the universe is in ruins. With the help of remaining allies, the Avengers assemble once more in order to reverse Thanos' actions and restore order to the universe.",
+    movie_year: 2019,
+    director: "Anthony Russo, Joe Russo",
+    actors: [
+      "Robert Downey Jr.",
+      "Chris Evans",
+      "Mark Ruffalo",
+      "Chris Hemsworth",
+      "Scarlett Johansson",
+      "Jeremy Renner",
+    ],
+    poster_url:
+      "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/or06FN3Dka5tukK1e9sl16pB3iy.jpg",
+    price: "150.00",
+    rating: 0,
+  },
+  {
+    id: 9,
+    title: "Dune",
+    description:
+      "In the year 10191, the world is in chaos as noble families battle for control over the desert planet of Arrakis, known for its valuable resource, the spice melange.",
+    movie_year: 2021,
+    director: "Denis Villeneuve",
+    actors: [
+      "Timothée Chalamet",
+      "Rebecca Ferguson",
+      "Oscar Isaac",
+      "Josh Brolin",
+      "Stellan Skarsgård",
+      "Javier Bardem",
+    ],
+    poster_url:
+      "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/d5NXSklXo0qyIYkgV94XAgMIckC.jpg",
+    price: "130.00",
+    rating: 0,
+  },
+  {
+    id: 10,
+    title: "The Batman",
+    description:
+      "When the Riddler, a sadistic serial killer, begins murdering key political figures in Gotham, Batman is forced to investigate the city's corruption and question his family's involvement.",
+    movie_year: 2022,
+    director: "Matt Reeves",
+    actors: [
+      "Robert Pattinson",
+      "Zoë Kravitz",
+      "Paul Dano",
+      "Jeffrey Wright",
+      "John Turturro",
+      "Andy Serkis",
+    ],
+    poster_url:
+      "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/74xTEgt7R36Fpooo50r9T25onhq.jpg",
+    price: "140.00",
+    rating: 0,
+  },
+  {
+    id: 11,
+    title: "The Matrix Resurrections",
+    description:
+      "Plagued by strange memories, Neo's life takes an unexpected turn when he finds himself back inside the Matrix.",
+    movie_year: 2021,
+    director: "Lana Wachowski",
+    actors: [
+      "Keanu Reeves",
+      "Carrie-Anne Moss",
+      "Yahya Abdul-Mateen II",
+      "Jessica Henwick",
+      "Jonathan Groff",
+      "Neil Patrick Harris",
+    ],
+    poster_url:
+      "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/8c4a8kE7PizaGQQnditMmI1xbRp.jpg",
+    price: "130.00",
+    rating: 0,
+  },
+  {
+    id: 12,
+    title: "No Time to Die",
+    description:
+      "James Bond has left active service. His peace is short-lived when his old friend Felix Leiter from the CIA turns up asking for help.",
+    movie_year: 2021,
+    director: "Cary Joji Fukunaga",
+    actors: [
+      "Daniel Craig",
+      "Rami Malek",
+      "Léa Seydoux",
+      "Ben Whishaw",
+      "Naomie Harris",
+      "Jeffrey Wright",
+    ],
+    poster_url:
+      "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/iUgygt3fscRoKWCV1d0C7FbM9TP.jpg",
+    price: "140.00",
+    rating: 0,
+  },
+];
+const mainApp = document.getElementById("root");
+const header = document.createElement("header");
+header.setAttribute("class", "headerContainer");
+const h1 = document.createElement("h1");
+h1.innerText = "Movie App";
+header.appendChild(h1);
+const navLinkList = ["Home", "Collections", "Contact Us"];
+
+/* nav Ul */
+const headerUl = document.createElement("ul");
+headerUl.setAttribute("class", "hederUl");
+navLinkList.forEach((item) => {
+  const li = document.createElement("li");
+  li.innerText = item;
+  headerUl.appendChild(li);
+});
+
+header.appendChild(headerUl);
+mainApp.appendChild(header);
+
+/* herosection */
+const heroSection = document.createElement("section");
+heroSection.setAttribute("class", "heroSection");
+
+/* card container for each movie */
+movieList.forEach((movie) => {
+  const cardContainer = document.createElement("div");
+  cardContainer.setAttribute("class", "cardContainer");
+
+  /* image */
+  const heroImage = document.createElement("img");
+  heroImage.setAttribute("class", "heroImage");
+  heroImage.src = movie.poster_url;
+  cardContainer.appendChild(heroImage);
+
+  /* div for year, title and Pric */
+  const yearTitlePriceContainer = document.createElement("div");
+  yearTitlePriceContainer.setAttribute("class", "YearTitleContainer");
+
+  const movieYear = document.createElement("p");
+  movieYear.innerText = movie.movie_year;
+  yearTitlePriceContainer.appendChild(movieYear);
+
+  let movieTitle = document.createElement("h3");
+  movieTitle.innerText = movie.title;
+  yearTitlePriceContainer.appendChild(movieTitle);
+  if (movie.title.length > 15) {
+    let truncateText = movie.title.substring(0, 15) + "...";
+    movieTitle.innerText = truncateText;
+  }
+
+  const price = document.createElement("p");
+  price.innerText = `${movie.price}DKK`;
+  yearTitlePriceContainer.append(price);
+  cardContainer.appendChild(yearTitlePriceContainer);
+
+  /* descriptions and details */
+  const detailsDiv = document.createElement("div");
+  detailsDiv.setAttribute("class", "detailsDiv");
+
+  yearTitlePriceContainer.appendChild(detailsDiv);
+  cardContainer.addEventListener("mouseover", () => {
+    detailsDiv.classList.add("visible");
+    cardContainer.style.cursor = "pointer";
+  });
+  cardContainer.addEventListener("mouseleave", () => {
+    detailsDiv.classList.remove("visible");
+  });
+
+  const director = document.createElement("p");
+  director.innerText = `Director: ${movie.director}`;
+  detailsDiv.appendChild(director);
+
+  const casts = document.createElement("p");
+  casts.innerText = `Casts: `;
+  detailsDiv.appendChild(casts);
+
+  movie.actors.map((cast) => {
+    const spanText = document.createElement("span");
+    spanText.innerText = `${cast}, `;
+    casts.appendChild(spanText);
+  });
+
+  const movieDescription = document.createElement("p");
+  movieDescription.innerText = movie.description;
+  detailsDiv.appendChild(movieDescription);
+  const averageRating = document.createElement("p");
+  averageRating.innerText = `Current Rating: ${movie.rating}/5`;
+  detailsDiv.appendChild(averageRating);
+
+  /* rating */
+  const ratingHeader = document.createElement("h3");
+  ratingHeader.innerText = "Give Ratings ";
+  detailsDiv.appendChild(ratingHeader);
+  const ratingsDiv = document.createElement("div");
+  ratingsDiv.className = "ratingsContainer";
+
+  let currentRating = 0;
+
+  for (let i = 0; i < 5; i++) {
+    const star = document.createElement("i");
+    star.className = "fa fa-star";
+    star.setAttribute("data-rating", i);
+    ratingsDiv.appendChild(star);
+
+    star.addEventListener("mouseenter", () => {
+      for (let j = 0; j <= i; j++) {
+        const tempIcon = ratingsDiv.children[j];
+        tempIcon.style.color = "yellow";
+      }
+    });
+
+    star.addEventListener("mouseleave", () => {
+      for (let j = 0; j < i; j++) {
+        const tempIcon = ratingsDiv.children[j];
+        tempIcon.style.color = j < movie.rating ? "yellow" : "gray";
+      }
+    });
+
+    star.addEventListener("click", () => {
+      movie.rating = i + 1;
+      currentRating = i + 1;
+      for (let j = 0; j < 5; j++) {
+        const tempIcon = ratingsDiv.children[j];
+        tempIcon.style.color = j < currentRating ? "yellow" : "gray";
+      }
+      averageRating.innerText = `Current Rating: ${movie.rating}/5`;
+    });
+  }
+
+  detailsDiv.appendChild(ratingsDiv);
+
+  heroSection.appendChild(cardContainer);
+});
+
+mainApp.appendChild(heroSection);
diff --git a/javascript/javascript2/week1/movieApp/styles.css b/javascript/javascript2/week1/movieApp/styles.css
new file mode 100644
index 00000000..7459dd18
--- /dev/null
+++ b/javascript/javascript2/week1/movieApp/styles.css
@@ -0,0 +1,64 @@
+#root {
+  margin: 0 auto;
+}
+.headerContainer {
+  height: 100;
+  width: 100;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px 0 10px;
+}
+.hederUl {
+  list-style: none;
+  display: flex;
+  gap: 10px;
+}
+.heroSection {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin: 0 auto;
+  justify-content: center;
+  align-items: center;
+}
+.cardContainer {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 300px;
+  border: 2px solid green;
+  position: relative;
+}
+.heroImage {
+  height: auto;
+  width: 300px;
+}
+
+.YearTitleContainer {
+  padding: 0 5px 0 5px;
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: rgba(70, 25, 25, 0.5);
+  color: whitesmoke;
+  bottom: -60px;
+  width: 290px;
+}
+.detailsDiv {
+  display: none;
+  padding: 0 10px 0 15px;
+  position: absolute;
+  bottom: 0;
+  background-color: rgba(70, 25, 25, 0.8);
+  left: 0;
+}
+.detailsDiv.visible {
+  display: flex;
+  flex-direction: column;
+}
+.ratingsContainer {
+  margin-top: -10px;
+}


Reviews:
user: login: vdaguenet
body: We are missing the second part of the project:
> via DOM manipulation, implement one of the two (or both!):
a. submitting and displaying a comment about the movie. Implement an imput under the movie and a functionality to display the submitted comment.
b. rating the movie in a star-rating format and displaying the submitted rating.
state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-03-06T12:09:50Z
user: login: Neepunraj
state: COMMENTED
author_association: OWNER
submitted_at: 2025-03-06T12:14:00Z

Review comments:
diff_hunk: @@ -0,0 +1,8 @@
+function solution(text, ending) {
+  let array = text.split("");
+  array = array.slice();
+  console.log(array);
+  return (stringMEthod = text.endsWith(ending));
path: javascript/javascript2/week1/homeWork/stringsEndsWith.js
user: login: vdaguenet
body: ```suggestion
  const stringMethod = text.endsWith(ending);
  return stringMethod;
```
Avoid returning variable allocation; it makes your code confusing. I first thought you tried to compare the two values but forgot a `=`.
created_at: 2025-03-06T12:00:49Z
author_association: NONE
path: javascript/javascript2/week1/movieApp/moviesList.js
user: login: vdaguenet
body: It seems you are not using this file.
created_at: 2025-03-06T12:02:17Z
author_association: NONE
diff_hunk: @@ -0,0 +1,105 @@
+const movieList = [
+  {
+    id: 1,
+    title: "Interstellar",
+    description:
+      "The adventures of a group of explorers who make use of a newly discovered wormhole to surpass the limitations on human space travel and conquer the vast distances involved in an interstellar voyage.",
+    movie_year: 2014,
+    director: "Christopher Nolan",
+    actors: [
+      "Matthew McConaughey",
+      "Anne Hathaway",
+      "Jessica Chastain",
+      "Michael Caine",
+      "Casey Affleck",
+      "Mackenzie Foy",
+      "John Lithgow",
+      "Ellen Burstyn",
+      "Matt Damon",
+    ],
+    poster_url:
+      "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg",
+    price: "120.00",
+  },
+  {
+    id: 2, // Changed id to ensure uniqueness
+    title: "Inception",
+    description:
+      "A skilled thief is offered a chance to have his criminal history erased if he can infiltrate the mind of a target and implant an idea.",
+    movie_year: 2010,
+    director: "Christopher Nolan",
+    actors: [
+      "Leonardo DiCaprio",
+      "Joseph Gordon-Levitt",
+      "Elliot Page",
+      "Tom Hardy",
+      "Ken Watanabe",
+      "Marion Cotillard",
+      "Cillian Murphy",
+    ],
+    poster_url:
+      "https://media.themoviedb.org/t/p/w300_and_h450_bestv2/lurEK87kukWNaHd0zYnsi3yzJrs.jpg",
+    price: "120.00",
+  },
+];
+
+const mainApp = document.getElementById("root");
+const header = document.createElement("header");
+header.setAttribute("class", "headerContainer");
+const h1 = document.createElement("h1");
+h1.innerText = "Movie App";
+header.appendChild(h1);
+const navLinkList = ["Home", "Collections", "Contact Us"];
+
+/* nav Ul */
+const headerUl = document.createElement("ul");
+headerUl.setAttribute("class", "hederUl");
+navLinkList.forEach((item) => {
+  const li = document.createElement("li");
+  li.innerText = item;
+  headerUl.appendChild(li);
+});
+header.appendChild(headerUl);
+
+mainApp.appendChild(header);
+const heroSection = document.createElement("section");
+heroSection.setAttribute("class", "heroSection");
+
+movieList.forEach((movie) => {
+  const div = document.createElement("div");
+  div.setAttribute("class", "cardContainer");
+
+  const heroImage = document.createElement("img");
+  heroImage.setAttribute("class", "heroImage");
+  heroImage.src = movie.poster_url;
+  div.appendChild(heroImage);
+
+  const titlePriceDiv = document.createElement("div");
+  titlePriceDiv.setAttribute("class", "childDiv");
+
+  const movieYear = document.createElement("p");
+  movieYear.innerText = movie.movie_year;
+  titlePriceDiv.appendChild(movieYear);
+
+  const h3 = document.createElement("h2");
+  h3.innerText = movie.title;
+  titlePriceDiv.appendChild(h3);
+
+  const price = document.createElement("p");
+  price.innerText = `${movie.price} DKK`;
+  titlePriceDiv.append(price);
+  div.appendChild(titlePriceDiv);
+
+  div.addEventListener("mouseover", () => {
+    div.style.cursor = "pointer";
path: javascript/javascript2/week1/movieApp/index.js
user: login: vdaguenet
body: This would be better in your CSS file
created_at: 2025-03-06T12:06:44Z
author_association: NONE
diff_hunk: @@ -0,0 +1,105 @@
+const movieList = [
+  {
+    id: 1,
+    title: "Interstellar",
+    description:
+      "The adventures of a group of explorers who make use of a newly discovered wormhole to surpass the limitations on human space travel and conquer the vast distances involved in an interstellar voyage.",
+    movie_year: 2014,
+    director: "Christopher Nolan",
+    actors: [
+      "Matthew McConaughey",
+      "Anne Hathaway",
+      "Jessica Chastain",
+      "Michael Caine",
+      "Casey Affleck",
+      "Mackenzie Foy",
+      "John Lithgow",
+      "Ellen Burstyn",
+      "Matt Damon",
+    ],
+    poster_url:
+      "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg",
+    price: "120.00",
+  },
+  {
+    id: 2, // Changed id to ensure uniqueness
+    title: "Inception",
+    description:
+      "A skilled thief is offered a chance to have his criminal history erased if he can infiltrate the mind of a target and implant an idea.",
+    movie_year: 2010,
+    director: "Christopher Nolan",
+    actors: [
+      "Leonardo DiCaprio",
+      "Joseph Gordon-Levitt",
+      "Elliot Page",
+      "Tom Hardy",
+      "Ken Watanabe",
+      "Marion Cotillard",
+      "Cillian Murphy",
+    ],
+    poster_url:
+      "https://media.themoviedb.org/t/p/w300_and_h450_bestv2/lurEK87kukWNaHd0zYnsi3yzJrs.jpg",
+    price: "120.00",
+  },
+];
+
+const mainApp = document.getElementById("root");
+const header = document.createElement("header");
+header.setAttribute("class", "headerContainer");
+const h1 = document.createElement("h1");
+h1.innerText = "Movie App";
+header.appendChild(h1);
+const navLinkList = ["Home", "Collections", "Contact Us"];
+
+/* nav Ul */
+const headerUl = document.createElement("ul");
+headerUl.setAttribute("class", "hederUl");
+navLinkList.forEach((item) => {
+  const li = document.createElement("li");
+  li.innerText = item;
+  headerUl.appendChild(li);
+});
+header.appendChild(headerUl);
+
+mainApp.appendChild(header);
+const heroSection = document.createElement("section");
+heroSection.setAttribute("class", "heroSection");
+
+movieList.forEach((movie) => {
+  const div = document.createElement("div");
+  div.setAttribute("class", "cardContainer");
+
+  const heroImage = document.createElement("img");
+  heroImage.setAttribute("class", "heroImage");
+  heroImage.src = movie.poster_url;
+  div.appendChild(heroImage);
+
+  const titlePriceDiv = document.createElement("div");
+  titlePriceDiv.setAttribute("class", "childDiv");
+
+  const movieYear = document.createElement("p");
+  movieYear.innerText = movie.movie_year;
+  titlePriceDiv.appendChild(movieYear);
+
+  const h3 = document.createElement("h2");
+  h3.innerText = movie.title;
+  titlePriceDiv.appendChild(h3);
+
+  const price = document.createElement("p");
+  price.innerText = `${movie.price} DKK`;
+  titlePriceDiv.append(price);
+  div.appendChild(titlePriceDiv);
+
+  div.addEventListener("mouseover", () => {
path: javascript/javascript2/week1/movieApp/index.js
user: login: vdaguenet
body: I don't know if this is an intended feature, but every time I hover over an image, the description is added. This leads to many duplicate lines.
![image](https://github.com/user-attachments/assets/cbd51f59-cc26-4487-b419-a92d3650dfb0)

created_at: 2025-03-06T12:08:50Z
author_association: NONE
diff_hunk: @@ -0,0 +1,105 @@
+const movieList = [
+  {
+    id: 1,
+    title: "Interstellar",
+    description:
+      "The adventures of a group of explorers who make use of a newly discovered wormhole to surpass the limitations on human space travel and conquer the vast distances involved in an interstellar voyage.",
+    movie_year: 2014,
+    director: "Christopher Nolan",
+    actors: [
+      "Matthew McConaughey",
+      "Anne Hathaway",
+      "Jessica Chastain",
+      "Michael Caine",
+      "Casey Affleck",
+      "Mackenzie Foy",
+      "John Lithgow",
+      "Ellen Burstyn",
+      "Matt Damon",
+    ],
+    poster_url:
+      "https://www.themoviedb.org/t/p/w600_and_h900_bestv2/gEU2QniE6E77NI6lCU6MxlNBvIx.jpg",
+    price: "120.00",
+  },
+  {
+    id: 2, // Changed id to ensure uniqueness
+    title: "Inception",
+    description:
+      "A skilled thief is offered a chance to have his criminal history erased if he can infiltrate the mind of a target and implant an idea.",
+    movie_year: 2010,
+    director: "Christopher Nolan",
+    actors: [
+      "Leonardo DiCaprio",
+      "Joseph Gordon-Levitt",
+      "Elliot Page",
+      "Tom Hardy",
+      "Ken Watanabe",
+      "Marion Cotillard",
+      "Cillian Murphy",
+    ],
+    poster_url:
+      "https://media.themoviedb.org/t/p/w300_and_h450_bestv2/lurEK87kukWNaHd0zYnsi3yzJrs.jpg",
+    price: "120.00",
+  },
+];
+
+const mainApp = document.getElementById("root");
+const header = document.createElement("header");
+header.setAttribute("class", "headerContainer");
+const h1 = document.createElement("h1");
+h1.innerText = "Movie App";
+header.appendChild(h1);
+const navLinkList = ["Home", "Collections", "Contact Us"];
+
+/* nav Ul */
+const headerUl = document.createElement("ul");
+headerUl.setAttribute("class", "hederUl");
+navLinkList.forEach((item) => {
+  const li = document.createElement("li");
+  li.innerText = item;
+  headerUl.appendChild(li);
+});
+header.appendChild(headerUl);
+
+mainApp.appendChild(header);
+const heroSection = document.createElement("section");
+heroSection.setAttribute("class", "heroSection");
+
+movieList.forEach((movie) => {
+  const div = document.createElement("div");
+  div.setAttribute("class", "cardContainer");
+
+  const heroImage = document.createElement("img");
+  heroImage.setAttribute("class", "heroImage");
+  heroImage.src = movie.poster_url;
+  div.appendChild(heroImage);
+
+  const titlePriceDiv = document.createElement("div");
+  titlePriceDiv.setAttribute("class", "childDiv");
+
+  const movieYear = document.createElement("p");
+  movieYear.innerText = movie.movie_year;
+  titlePriceDiv.appendChild(movieYear);
+
+  const h3 = document.createElement("h2");
+  h3.innerText = movie.title;
+  titlePriceDiv.appendChild(h3);
+
+  const price = document.createElement("p");
+  price.innerText = `${movie.price} DKK`;
+  titlePriceDiv.append(price);
+  div.appendChild(titlePriceDiv);
+
+  div.addEventListener("mouseover", () => {
+    div.style.cursor = "pointer";
path: javascript/javascript2/week1/movieApp/index.js
user: login: Neepunraj
body: Thank you, i am still thinking to implement more, i will also make it more interaticlve using new feature today
created_at: 2025-03-06T12:14:00Z
author_association: OWNER

PR comments:
user: login: jason-vasilev
created_at: 2025-03-11T20:45:46Z
body: Please, remember to update to green the cell in the [Team 31 PR Sheet](https://docs.google.com/spreadsheets/d/1RnQh7IoqtQK1-UnLroOs9a-xiqp23PsW7RNBdUOrmp4/edit?gid=0#gid=0) after merging.
author_association: NONE
user: login: Neepunraj
created_at: 2025-03-11T21:41:54Z
body: Oh yeah! Sorry i forgot about it :)
author_association: OWNER