script.js

let projectData = [
  {
    projectName: "Pinpad",
    projectImage: "assets/GIFs/pinpad.gif",
    projectUrl: "public/pinpad.html",
  },
  {
    projectName: "Note App",
    projectImage: "assets/GIFs/noteApp.gif",
    projectUrl: "public/note-app.html",
  },
  {
    projectName: "Calculator",
    projectImage: "assets/GIFs/calculator.gif",
    projectUrl: "public/calculator.html",
  },
  {
    projectName: "Color Flipper",
    projectImage: "assets/GIFs/colorFlipper.gif",
    projectUrl: "public/color-flipper.html",
  },
  {
    projectName: "Movie Seat Booking",
    projectImage: "assets/GIFs/movieSeatBooking.gif",
    projectUrl: "public/movieSeatBooking.html",
  },
  {
    projectName: "Dynamic Quote Generator",
    projectImage: "assets/GIFs/dynamicQuote.gif",
    projectUrl: "public/Dynamic-quotegenerator.html",
  },
  {
    projectName: "Counter",
    projectImage: "assets/GIFs/counter.gif",
    projectUrl: "public/counter.html",
  },
  {
    projectName: "Local Storage",
    projectImage: "assets/Images/localstorage.jpeg",
    projectUrl: "public/localstorage.html",
  },
  {
    projectName: "Image Slide",
    projectImage: "assets/GIFs/imageSlide.gif",
    projectUrl: "public/ImageSlide.html",
  },
  {
    projectName: "Sidenav",
    projectImage: "assets/GIFs/sidenav.gif",
    projectUrl: "public/Sidenav.html",
  },
  {
    projectName: "Mole Game",
    projectImage: "assets/GIFs/whackMole.gif",
    projectUrl: "public/molegame.html",
  },
  {
    projectName: "Click and Drag",
    projectImage: "assets/GIFs/clickandDrag.gif",
    projectUrl: "public/clickanddrag.html",
  },
  {
    projectName: "Bouncing Balls",
    projectImage: "assets/GIFs/bouncingBalls.gif",
    projectUrl: "public/BouncingBalls.html",
  },
  {
    projectName: "Reviews",
    projectImage: "assets/GIFs/reviews.gif",
    projectUrl: "public/reviews.html",
  },
  {
    projectName: "Stop Watch",
    projectImage: "assets/GIFs/stopWatch.gif",
    projectUrl: "public/StopWatch.html",
  },
  {
    projectName: "Animated Counter",
    projectImage: "assets/GIFs/animatedCounter.gif",
    projectUrl: "public/animatedCounter.html",
  },
  {
    projectName: "Music Player",
    projectImage: "assets/GIFs/musicPlayer.gif",
    projectUrl: "public/music_player.html",
  },
  {
    projectName: "Maze Game",
    projectImage: "assets/GIFs/maze.gif",
    projectUrl: "public/maze.html",
  },
  {
    projectName: "Drizzle of Hearts",
    projectImage: "assets/GIFs/heart.gif",
    projectUrl: "public/hearts.html",
  },
  {
    projectName: "Drum Kit",
    projectImage: "assets/GIFs/drum-kit.gif",
    projectUrl: "public/drumKit.html",
  },
  {
    projectName: "Netflix Clone",
    projectImage: "assets/GIFs/netflix.gif",
    projectUrl: "public/netflix.html",
  },
  {
    projectName: "Analog Clock",
    projectImage: "assets/GIFs/analogClock.gif",
    projectUrl: "public/Analogclock.html",
  },
  {
    projectName: "Digital Clock",
    projectImage: "assets/GIFs/digitalClock.gif",
    projectUrl: "public/digitalClock.html",
  },
  {
    projectName: "Text Generator",
    projectImage: "assets/GIFs/textGenerator.gif",
    projectUrl: "public/textGenerator.html",
  },
  {
    projectName: "New Year Count Down",
    projectImage: "assets/GIFs/newYearCountdown.gif",
    projectUrl: "public/newyearcountdown.html",
  },
  {
    projectName: "Password Generator",
    projectImage: "assets/GIFs/passwordGenerator.gif",
    projectUrl: "public/passwordGenerator.html",
  },
  {
    projectName: "BMI Calculator",
    projectImage: "assets/GIFs/BMIcal.gif",
    projectUrl: "public/BMICalculator.html",
  },
  {
    projectName: "URL Shortner",
    projectImage: "assets/GIFs/urlShortner.gif",
    projectUrl: "public/url-shortner.html",
  },
  {
    projectName: "Mario Game",
    projectImage: "assets/GIFs/mario.gif",
    projectUrl: "public/mario.html",
  },
  {
    projectName: "Drawing App",
    projectImage: "assets/GIFs/draw.gif",
    projectUrl: "public/draw.html",
  },
  {
    projectName: "QR Code Generator",
    projectImage: "assets/GIFs/qrCode.gif",
    projectUrl: "public/QRCode.html",
  },
  {
    projectName: "Word Counter",
    projectImage: "assets/GIFs/wordCount.gif",
    projectUrl: "public/wordCounter.html",
  },
  {
    projectName: "Tic Tac Toe Game",
    projectImage: "assets/GIFs/ticTacToe.gif",
    projectUrl: "public/Tic_Tac_Toe.html",
  },
  {
    projectName: "DragNDrop",
    projectImage: "assets/GIFs/DragNDrop.gif",
    projectUrl: "public/DragNDrop.html",
  },
  {
    projectName: "Typing Speed Tester",
    projectImage: "assets/GIFs/typing_speed_test.gif",
    projectUrl: "public/typing_speed_test.html",
  },
  {
    projectName: "Quiz App",
    projectImage: "assets/GIFs/quizApp.gif",
    projectUrl: "public/quizapp.html",
  },
  {
    projectName: "Day Of the Week",
    projectImage: "assets/Images/DaysOfWeek.png",
    projectUrl: "public/DaysOfWeek.html",
  },
  {
    projectName: "Hangman",
    projectImage: "assets/GIFs/hangman.gif",
    projectUrl: "public/hangman.html",
  },
  {
    projectName: "Rock Paper Sessior Game",
    projectImage: "assets/Images/r-p-s/rps.gif",
    projectUrl: "public/Rock-paper-sesssior.html",
  },
  {
    projectName: "Weather App",
    projectImage: "assets/GIFs/Weather_app.gif",
    projectUrl: "public/Weather_app.html",
  },
  {
    projectName: "Animated Minion Eyes",
    projectImage: "assets/GIFs/Minion-Eyes.gif",
    projectUrl: "public/Minion-Eyes.html",
  },
  {
    projectName: "Text To Speech",
    projectImage: "assets/GIFs/speechText.gif",
    projectUrl: "public/TextToSpeech.html",
  },
  {
    projectName: "Recipe Finder",
    projectImage: "assets/GIFs/recipie.gif",
    projectUrl: "public/Recipie_finder.html",
  },
  {
    projectName: "User list filter",
    projectImage: "assets/GIFs/UserListFilter.gif",
    projectUrl: "public/UserListFilter.html",
  },
  {
    projectName: "Particle JS Project",
    projectImage: "assets/GIFs/Particle.gif",
    projectUrl: "public/Particle.html",
  },
  {
    projectName: "calendar",
    projectImage: "assets/GIFs/cal.gif",
    projectUrl: "public/calendar.html",
  },
  {
    projectName: "Text to Voice Generator",
    projectImage: "assets/GIFs/textToVoice.gif",
    projectUrl: "public/textToVoice.html",
  },
  {
    projectName: "Device Info",
    projectImage: "assets/GIFs/DeviceInfo.gif",
    projectUrl: "public/deviceInfo.html",
  },
  {
    projectName: "Color Picker and Converter",
    projectImage: "assets/GIFs/ColorPickerConverter.gif",
    projectUrl: "public/ColorPickerConverter.html",
  },
  {
    projectName: " Key Event Code",
    projectImage: "assets/GIFs/KeyEventCode.gif ",
    projectUrl: "public/KeyEventCode.html",
  },
  {
    projectName: " Rotating Navigation",
    projectImage: "assets/GIFs/RotatingNav.gif ",
    projectUrl: "public/RotatingNav.html",
  },
  {
    projectName: "Expanding Card",
    projectImage: "assets/GIFs/ExpandingCard.gif",
    projectUrl: "public/ExpandingCard.html",
  },
  {
    projectName: "Contacts Search",
    projectImage: "assets/GIFs/contactSearch.gif",
    projectUrl: "public/contactSearch.html",
  },
  {
    projectName: "Github Issue Tracker",
    projectImage: "assets/Images/IssueTracker.png",
    projectUrl: "public/IssueTracker.html",
  },
  {
    projectName: "Pixels Game",
    projectImage: "assets/GIFs/pixels.gif",
    projectUrl: "public/pixels-game.html",
  },
  {
    projectName: "love Calculator",
    projectImage: "assets/GIFs/loveCalculator.gif",
    projectUrl: "public/loveCalculator.html",
  },
  {
    projectName: "PIN Code Tracker",
    projectImage: "assets/GIFs/pinCodeSearch.gif",
    projectUrl: "public/pinCodeSearch.html",
  },
  {
    projectName: "Custom Video Player",
    projectImage: "assets/Images/customVideoPlayer.png",
    projectUrl: "public/VideoPlayer.html",
  },
  {
    projectName: "Study Timer",
    projectImage: "assets/Images/StudyTimer.png",
    projectUrl: "public/StudyTimer.html",
  },
  {
    projectName: "Palindrome Checker",
    projectImage: "assets/Images/palindrome.jpg",
    projectUrl: "public/palindrome.html",
  },
  /*{
    projectName: "DarkMode",
    projectImage: "assets/Images/DarkMode2.jpeg",
    projectUrl: "public/DarkMode.html"
   },*/
  {
    projectName: "Blurry Loading Interface",
    projectImage: "assets/GIFs/Blurry_Loading_Interface.gif",
    projectUrl: "public/blurry_loading_interface.html",
  },
  {
    projectName: "Connect Four",
    projectImage: "assets/GIFs/connectFour.gif",
    projectUrl: "public/connectFour.html"
  }, 
  {
    projectName: "Bookmarks App",
    projectImage: "assets/Images/BookMarks.jpg",
    projectUrl: "public/bookmarks.html",
  },
  {
    projectName: "Exchange Rate",
    projectImage: "assets/Images/ExchangeRate.png",
    projectUrl: "public/ExchangeRate.html",
  },
  {
    projectName: "Word Scramble Game",
    projectImage: "assets/GIFs/wordScramble.gif",
    projectUrl: "public/wordScramble.html",
  },
];

let projectContainer = document.getElementById("js-projects");
console.log(projectContainer);

window.addEventListener("load", getProjects());

function getProjects() {
  let output = "";
  projectData.forEach(
    (data, item) =>
      (output += `
    <div class="projectCard">
    <a href=${data.projectUrl} class="hoverEffect" target="_blank">
      <img
        class="projectCardImg"
        src=${data.projectImage}
        alt="Card image cap"
      />
        <h5 class="projectCardTitle">${data.projectName}</h5>
        <span class="computerLegs"></span>
        <span class="computerBase"></span>
    </a>
  </div>
  `)
  );

  projectContainer.innerHTML = output;
  console.log("projectContainer", projectContainer.innerHTML);
}